431 lines
12 KiB
Plaintext
431 lines
12 KiB
Plaintext
<script>
|
|
if (window.location.hash.includes("reroute")) {
|
|
window.location.replace("{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}")
|
|
}
|
|
</script>
|
|
|
|
{% assign catalog_courses = courses.in_catalog %}
|
|
|
|
{% include "header" %}
|
|
{% include "course_header" %}
|
|
<main class="np-main np-max-width">
|
|
<div class="course-overview-page" id="course-desktop">
|
|
<div class="course-card-container">
|
|
<div class="course-content-container">
|
|
{% if course.enrolled? %}
|
|
{% if course.properties.talent_lms_course == true and current_person.properties.talent_lms_learner == true %}
|
|
<div class="info-box general">
|
|
<p><strong>You have previously completed this module on TalentLMS</strong><br>Feel free to re-visit this course here on the Knowledge, however any course progression or quiz results from TalentLMS have not and will not be migrated over.</p>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
<div class="course-description-container">
|
|
<div class="card-text">
|
|
{{ course.full_description }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="np-card-content-divider"></div>
|
|
|
|
<div class="np-flex">
|
|
{% for instructor in course.instructors %}
|
|
<div class="np-content-instructors-content-item">
|
|
<img
|
|
src="{{ instructor.avatar_url }}"
|
|
class="np-content-instructors-content-image"
|
|
alt="{{ instructor.name }}"
|
|
/>
|
|
<div class="np-content-instructors-content-description">
|
|
<div class="np-content-instructors-content-name">
|
|
{{ instructor.name }}
|
|
</div>
|
|
<div class="np-content-instructors-content-info np-text-light">
|
|
{{ instructor.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="np-card-content-divider"></div>
|
|
|
|
<div class="course-attributes-container">
|
|
<div class="attribute audience">
|
|
<div class="text">Course level:</div>
|
|
<div class="properties">
|
|
<div class="course-overview-properties">
|
|
{{course.properties.experience}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="attribute roles">
|
|
<div class="text">Category:</div>
|
|
<div class="properties">
|
|
{% if course.categories.any? %}
|
|
{% for category in course.categories %}
|
|
<div class="course-overview-properties">
|
|
{{ category.name }}
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="attribute content-type">
|
|
<div class="text">Content type:</div>
|
|
<div class="properties">
|
|
<div class="course-overview-properties">
|
|
{{course.properties.content_type}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="attribute data-classification">
|
|
<div class="text">Data classification:</div>
|
|
<div class="properties">
|
|
<div class="course-overview-properties">
|
|
{{course.properties.data_classification}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% assign pre_requisite = course.properties.pre_requisite | upcase %}
|
|
{% unless pre_requisite == "NONE" %}
|
|
<div class="info-box course">
|
|
<div class="intro"><strong>Pre-requisite:</strong> Complete these Knowledge modules before continuing</div>
|
|
<div class="courses-wrapper">
|
|
{% for catalog_course in catalog_courses %}
|
|
{% if course.properties.pre_requisite contains catalog_course.id %}
|
|
<a href="/app/courses/{{catalog_course.id}}">
|
|
{% assign img_cropped = catalog_course.image_url | replace: '/resize=width:820,height:500', '/resize=width:140,height:140' %}
|
|
<img src="{{ img_cropped }}" />
|
|
<div>
|
|
<div class="title">{{catalog_course.name}}</div>
|
|
<div class="subtitle">{{course.short_description}}</div>
|
|
<div class="level">{{course.properties.experience}}</div>
|
|
</div>
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endunless %}
|
|
</div>
|
|
</div>
|
|
{% unless course.promo_video_embed_url == "" %}
|
|
<div class="video-wrapper">
|
|
<div class="course-video-container">
|
|
{{course.promo_video_embed_url}}
|
|
</div>
|
|
</div>
|
|
{% endunless %}
|
|
|
|
<div class="course-desktop-button">
|
|
{% include "course_progress_and_cta" %}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
const defaultPageTitle = document.title
|
|
const courseName = '{{course.name}}'
|
|
const courseExperience = '{{course.properties.experience}}'
|
|
document.title = `${courseName} (${courseExperience}) | ${defaultPageTitle}`
|
|
</script>
|
|
|
|
<style>
|
|
.course-content-container {
|
|
border: 1px solid #EBEAEB;
|
|
border-radius: 4px;
|
|
padding: 24px 16px;
|
|
max-width: 830px;
|
|
margin: 40px 24px;
|
|
width:100%;
|
|
}
|
|
|
|
.course-card-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
align-items: center;
|
|
padding-bottom:64px;
|
|
}
|
|
.course-overview-btn-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.video-wrapper {
|
|
max-width:780px;
|
|
width:100%;
|
|
padding: 0 24px;
|
|
margin:0 auto 32px;
|
|
}
|
|
|
|
.course-video-container {
|
|
max-width: 780px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
padding-top: 56.25%;
|
|
}
|
|
|
|
.course-video-container iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.properties {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.attribute {
|
|
display: flex;
|
|
margin: 0 0 24px;
|
|
align-items: center;
|
|
}
|
|
.course-overview-properties {
|
|
padding: 6px 12px;
|
|
color: #1B13C9;
|
|
background: #EFF8FA;
|
|
border: 1px solid #1B13C9;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
border-radius: 18px;
|
|
margin: 4px 8px 4px 0;
|
|
}
|
|
|
|
.attribute.roles,
|
|
.attribute.instructors {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.attribute.roles .text {
|
|
margin-bottom:12px;
|
|
}
|
|
|
|
.card-heading {
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
line-height: 23px;
|
|
color: #333132;
|
|
margin-bottom: 24px;
|
|
}
|
|
.card-text {
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
line-height: 160%;
|
|
color: #333132;
|
|
}
|
|
.attribute .text {
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
line-height: 21px;
|
|
color: #333132;
|
|
margin-right:8px;
|
|
}
|
|
|
|
.np-content-instructors-content-item {
|
|
margin-top: 8px;
|
|
align-items:center;
|
|
}
|
|
|
|
.np-content-instructors-content-image {
|
|
width:70px;
|
|
height:70px;
|
|
}
|
|
|
|
.np-content-instructors-content-name {
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
line-height: 21px;
|
|
color: #333132;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.np-content-instructors-content-info {
|
|
text-transform: uppercase;
|
|
font-size:12px;
|
|
}
|
|
|
|
.info-box {
|
|
padding: 20px 20px 5px 64px;
|
|
position:relative;
|
|
}
|
|
|
|
.info-box:after {
|
|
content:"";
|
|
position:absolute;
|
|
width:24px;
|
|
height:24px;
|
|
top:20px;
|
|
left:20px;
|
|
background-size:contain;
|
|
background-repeat:no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.info-box.general,
|
|
.info-box.people,
|
|
.info-box.glossary,
|
|
.info-box.alert {
|
|
background: #f0f0ff;
|
|
border-left: 4px solid #2d29fc;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
line-height: 150%;
|
|
}
|
|
|
|
.info-box.people {
|
|
background: #ead9e3;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.info-box.glossary {
|
|
background: #e8e8e8;
|
|
}
|
|
|
|
.info-box.alert {
|
|
background: #fff0f0;
|
|
border-left: 4px solid #ff2a26;
|
|
}
|
|
|
|
.info-box p {
|
|
margin-top:0;
|
|
}
|
|
|
|
.info-box.general:after {
|
|
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%232D29FC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 16V12' stroke='%232D29FC' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M12 8H12.01' stroke='%232D29FC' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
|
}
|
|
|
|
.info-box.people:after {
|
|
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 21V15L3 15V21' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z' stroke='%232D29FC' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M21 21V15H18.5' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M16 3.13C16.8604 3.35031 17.623 3.85071 18.1676 4.55232C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89318 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88' stroke='%232D29FC' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
|
}
|
|
|
|
.info-box.glossary:after {
|
|
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 3H6V21L12 17L18 21V3Z' stroke='%232D29FC' stroke-width='2'/%3E%3C/svg%3E%0A");
|
|
}
|
|
|
|
.info-box.alert:after {
|
|
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.76619 20L12 2.94365L22.2338 20H1.76619Z' stroke='%23990300' stroke-width='2'/%3E%3Cpath d='M12 9V13' stroke='%23990300' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M12 17H12.01' stroke='%23990300' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.info-box.course {
|
|
background-color:#F5F6FF;
|
|
border-left:4px solid #2E29FC;
|
|
}
|
|
|
|
.info-box.course:after {
|
|
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='album 1'%3E%3Cpath id='Vector' d='M11 3V11L14 8L17 11V3' stroke='%232D29FC' stroke-width='2' stroke-linecap='square'/%3E%3Crect id='Rectangle 566' x='3' y='3' width='18' height='18' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath id='Vector 115' d='M7 3V21' stroke='%232D29FC' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
|
|
}
|
|
|
|
.info-box.course .intro {
|
|
font-size: 16px;
|
|
line-height: 150%;
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
.info-box.course a {
|
|
color:#333132;
|
|
background-color:#fff;
|
|
padding: 15px;
|
|
display:flex;
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
line-height: 150%;
|
|
margin-bottom:10px;
|
|
width:100%;
|
|
position:relative;
|
|
}
|
|
|
|
.info-box.course a:after {
|
|
content: "";
|
|
position:absolute;
|
|
width:24px;
|
|
height:24px;
|
|
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M12 5L19 12L12 19' stroke='%232D29FC' stroke-width='2'/%3E%3C/svg%3E");
|
|
background-size:contain;
|
|
background-position:center;
|
|
right:15px;
|
|
bottom:15px;
|
|
}
|
|
|
|
.info-box.course .courses-wrapper {
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
.info-box.course img {
|
|
width:140px;
|
|
margin-right:20px;
|
|
}
|
|
|
|
.info-box.course a > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.info-box.course .title {
|
|
color: #242424;
|
|
font-size: 18px;
|
|
line-height:normal;
|
|
font-weight: 600;
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
.info-box.course .subtitle {
|
|
color: #6B686A;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.info-box.course .level {
|
|
color: #2E29FC;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
margin-top:auto;
|
|
}
|
|
|
|
@media (min-width:768px) {
|
|
.course-card-container {
|
|
margin:0 24px;
|
|
}
|
|
|
|
.course-content-container {
|
|
padding: 32px 24px;
|
|
margin: 64px auto 32px;
|
|
}
|
|
|
|
.attribute.roles,
|
|
.attribute.pre-req,
|
|
.attribute.instructors {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.attribute.roles .text {
|
|
margin-bottom:0;
|
|
}
|
|
.video-wrapper {
|
|
padding: 0;
|
|
}
|
|
|
|
.info-box.course .courses-wrapper {
|
|
margin-left: -10px;
|
|
margin-right: -10px;
|
|
}
|
|
|
|
.info-box.course a {
|
|
margin: 0 10px 20px;
|
|
width:calc(50% - 20px);
|
|
}
|
|
}
|
|
|
|
</style> |