388 lines
15 KiB
Plaintext
388 lines
15 KiB
Plaintext
{% if course.properties.product_names_for_course_cards == 'Anthology Reach' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/Reach.svg' %}
|
|
{% assign product_alt = 'Anthology Reach' %}
|
|
{% assign color_main = '#F06A32' %}
|
|
{% assign color_dark = '#731013' %}
|
|
{% assign color_light = '#F58545' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Radius' %}
|
|
{% assign product_logo = 'blank' %}
|
|
{% assign color_main = '#F06A32' %}
|
|
{% assign color_dark = '#F3798A' %}
|
|
{% assign color_light = '#F58545' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Engage' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/Engage.svg' %}
|
|
{% assign product_alt = 'Anthology Engage' %}
|
|
{% assign color_main = '#F06A32' %}
|
|
{% assign color_dark = '#F16423' %}
|
|
{% assign color_light = '#F3798A' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Beacon' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/Beacon.svg' %}
|
|
{% assign product_alt = 'Anthology Beacon' %}
|
|
{% assign color_main = '#F06A32' %}
|
|
{% assign color_dark = '#D94827' %}
|
|
{% assign color_light = '#F16423' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Milestone' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/Milestone.svg' %}
|
|
{% assign product_alt = 'Anthology Milestone' %}
|
|
{% assign color_main = '#F06A32' %}
|
|
{% assign color_dark = '#F3798A' %}
|
|
{% assign color_light = '#F9B5B5' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Occupation Insight' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/Occupation+Insight.svg' %}
|
|
{% assign product_alt = 'Anthology Occupation Insight' %}
|
|
{% assign color_main = '#F06A32' %}
|
|
{% assign color_dark = '#F58545' %}
|
|
{% assign color_light = '#F9B5B5' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Raise' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/Raise.svg' %}
|
|
{% assign product_alt = 'Anthology Raise' %}
|
|
{% assign color_main = '#F06A32' %}
|
|
{% assign color_dark = '#D94827' %}
|
|
{% assign color_light = '#F9B5B5' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Digital Assistant' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/Digital+Assistant.svg' %}
|
|
{% assign product_alt = 'Anthology Digital Assistant' %}
|
|
{% assign color_main = '#F06A32' %}
|
|
{% assign color_dark = '#D94827' %}
|
|
{% assign color_light = '#F58545' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Baseline' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/Baseline.svg' %}
|
|
{% assign product_alt = 'Anthology Baseline' %}
|
|
{% assign color_main = '#F06A32' %}
|
|
{% assign color_dark = '#731013' %}
|
|
{% assign color_light = '#D94827' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Encompass' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/Encompass.svg' %}
|
|
{% assign product_alt = 'Anthology Encompass' %}
|
|
{% assign color_main = '#F06A32' %}
|
|
{% assign color_dark = '#731013' %}
|
|
{% assign color_light = '#F3798A' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Talisma' %}
|
|
{% assign product_logo = 'blank' %}
|
|
{% assign color_main = '#F06A32' %}
|
|
{% assign color_dark = '#D94827' %}
|
|
{% assign color_light = '#F3798A' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Student' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/Student.svg' %}
|
|
{% assign product_alt = 'Anthology Student' %}
|
|
{% assign color_main = '#82C342' %}
|
|
{% assign color_dark = '#96CA51' %}
|
|
{% assign color_light = '#F3E588' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'CVue' %}
|
|
{% assign product_logo = 'blank' %}
|
|
{% assign color_main = '#82C342' %}
|
|
{% assign color_dark = '#286734' %}
|
|
{% assign color_light = '#F3E588' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Insight' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/Insight.svg' %}
|
|
{% assign product_alt = 'Anthology Insight' %}
|
|
{% assign color_main = '#82C342' %}
|
|
{% assign color_dark = '#286734' %}
|
|
{% assign color_light = '#82C342' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Finance & HCM' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/Finance+%26+HCM.svg' %}
|
|
{% assign product_alt = 'Anthology Finance & HCM' %}
|
|
{% assign color_main = '#82C342' %}
|
|
{% assign color_dark = '#539542' %}
|
|
{% assign color_light = '#C9BD2E' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Payroll' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/Payroll.svg' %}
|
|
{% assign product_alt = 'Anthology Payroll' %}
|
|
{% assign color_main = '#82C342' %}
|
|
{% assign color_dark = '#000000' %}
|
|
{% assign color_light = '#82C342' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Academic Economics' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/Academic+Economics.svg' %}
|
|
{% assign product_alt = 'Anthology Academic Economics' %}
|
|
{% assign color_main = '#82C342' %}
|
|
{% assign color_dark = '#000000' %}
|
|
{% assign color_light = '#286734' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Blackboard Learn' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/BBLearn.svg' %}
|
|
{% assign product_alt = 'Blackboard Learn' %}
|
|
{% assign color_main = '#1BA8E1' %}
|
|
{% assign color_dark = '#027BB6' %}
|
|
{% assign color_light = '#1BA8E1' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Ally' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/Ally.svg' %}
|
|
{% assign product_alt = 'Anthology Ally' %}
|
|
{% assign color_main = '#1BA8E1' %}
|
|
{% assign color_dark = '#1BA8E1' %}
|
|
{% assign color_light = '#A3DBDC' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Course Evaluations' %}
|
|
{% assign product_logo = 'https://s3.amazonaws.com/static.northpass.com/anthology/Course+Evaluations.svg' %}
|
|
{% assign product_alt = 'Anthology Course Evaluations' %}
|
|
{% assign color_main = '#1BA8E1' %}
|
|
{% assign color_dark = '#004C6D' %}
|
|
{% assign color_light = '#027BB6' %}
|
|
{%- comment -%} NEED DIFF IMG FORMAT FOR THIS ONE {%- endcomment -%}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Evaluate' %}
|
|
{% assign product_logo = 'blank' %}
|
|
{% assign color_main = '#1BA8E1' %}
|
|
{% assign color_dark = '#027BB6' %}
|
|
{% assign color_light = '#A3DBDC' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Portfolio' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/Portfolio.svg' %}
|
|
{% assign product_alt = 'Anthology Portfolio' %}
|
|
{% assign color_main = '#1BA8E1' %}
|
|
{% assign color_dark = '#0090A1' %}
|
|
{% assign color_light = '#5CC6CC' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Program Review' %}
|
|
{% assign product_logo = 'https://s3.amazonaws.com/static.northpass.com/anthology/Program+Review.svg' %}
|
|
{% assign product_alt = 'Anthology Program Review' %}
|
|
{% assign color_main = '#1BA8E1' %}
|
|
{% assign color_dark = '#027BB6' %}
|
|
{% assign color_light = '#5CC6CC' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Planning' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/Planning.svg' %}
|
|
{% assign product_alt = 'Anthology Planning' %}
|
|
{% assign color_main = '#1BA8E1' %}
|
|
{% assign color_dark = '#000000' %}
|
|
{% assign color_light = '#004C6D' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology Accreditation' %}
|
|
{% assign product_logo = 'https://cdn.northpass.io/anthology/Accreditation.svg' %}
|
|
{% assign product_alt = 'Anthology Accreditation' %}
|
|
{% assign color_main = '#1BA8E1' %}
|
|
{% assign color_dark = '#0090A1' %}
|
|
{% assign color_light = '#1BA8E1' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Anthology 101' %}
|
|
{% assign product_logo = 'blank' %}
|
|
{% assign color_main = '#7F59A5' %}
|
|
{% assign color_dark = '#573376' %}
|
|
{% assign color_light = '#7F59A5' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Academy Use & Navigation' %}
|
|
{% assign product_logo = 'blank' %}
|
|
{% assign color_main = '#7F59A5' %}
|
|
{% assign color_dark = '#6283C2' %}
|
|
{% assign color_light = '#87ADDB' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Data Strategy' %}
|
|
{% assign product_logo = 'blank' %}
|
|
{% assign color_main = '#7F59A5' %}
|
|
{% assign color_dark = '#000000' %}
|
|
{% assign color_light = '#573376' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Faculty Development' %}
|
|
{% assign product_logo = 'blank' %}
|
|
{% assign color_main = '#7F59A5' %}
|
|
{% assign color_dark = '#7F59A5' %}
|
|
{% assign color_light = '#AA7FB8' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Power BI' %}
|
|
{% assign product_logo = 'blank' %}
|
|
{% assign color_main = '#7F59A5' %}
|
|
{% assign color_dark = '#573376' %}
|
|
{% assign color_light = '#87ADDB' %}
|
|
{% elsif course.properties.product_names_for_course_cards == 'Professional Development' %}
|
|
{% assign product_logo = 'blank' %}
|
|
{% assign color_main = '#7F59A5' %}
|
|
{% assign color_dark = '#000000' %}
|
|
{% assign color_light = '#87ADDB' %}
|
|
{% else %}
|
|
{% assign product_logo = 'blank' %}
|
|
{% assign color_main = '#DCE4E9' %}
|
|
{% assign color_dark = '#747A7B' %}
|
|
{% assign color_light = '#B2B7BA' %}
|
|
{% endif %}
|
|
|
|
{% unless flag == 'dashboard' %}
|
|
{% assign flag = '' %}
|
|
{% endunless %}
|
|
|
|
<div class="np-card course-card">
|
|
{%- comment -%} {% unless flag == 'catalog' %}
|
|
{% endunless %} {%- endcomment -%}
|
|
<div class="np-progress-bar-container" style="background: {{ color_light }}">
|
|
<div
|
|
style="width: 75%; background: {{ color_dark }}"
|
|
class="np-button-background-color np-card-progress-bar course-card-progress-bar">
|
|
</div>
|
|
</div>
|
|
<div class="card-product-banner">
|
|
{% if product_logo != 'blank' %}
|
|
<img src='{{ product_logo }}' alt='{{ product_alt }}' class="product-logo"/>
|
|
{% else %}
|
|
Anthology
|
|
{% endif %}
|
|
</div>
|
|
<div class="np-card-container">
|
|
<div class="card-image-replacement"></div>
|
|
{%- comment -%} <img
|
|
class="np-card-image"
|
|
alt="{{ course.name }}"
|
|
src="{{ course.image_url }}"
|
|
> {%- endcomment -%}
|
|
<div class="np-card-content np-card-content-vertical np-card-padding course-card-info">
|
|
<div class="np-flex-1">
|
|
<h3 class="np-card-content-title course-card-title">
|
|
{{ course.name }}
|
|
</h3>
|
|
{% assign act_count = 0 %}
|
|
{% for section in course.sections %}
|
|
{% for activity in section.activities %}
|
|
{% assign act_count = act_count| plus: 1 %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
|
|
<span style="color: #757575; font-size: 14px">
|
|
{{ act_count }} {% if act_count == 1 %}Activity{% else %}Activities{% endif %}
|
|
</span>
|
|
</div>
|
|
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
|
{% if course.has_to_restart? %}
|
|
{% include "course_version_outdated_popup", path: course_path %}
|
|
{% endif %}
|
|
</div>
|
|
<div class="card-bottom-details">
|
|
{% if flag == 'dashboard' %}
|
|
<div style="
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
padding-left: 15px;
|
|
width: 70%;">
|
|
<div style="
|
|
background: #BACCE9;
|
|
border-radius: 10px;
|
|
height: 8px;
|
|
margin-right: 15px;
|
|
width: 60%;
|
|
">
|
|
<div
|
|
style="height: 8px; background: {{ color_main }}; border-radius: 10px; width: {{ course.progress }}%; "
|
|
class="np-button-background-color np-card-progress-bar course-card-progress-bar">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
{%- comment -%} {{course.properties.course_duration}} left {%- endcomment -%}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
{%- comment -%} <div class="np-card-content-progress np-button-color">
|
|
{% t shared.progress, count: course.progress %}
|
|
</div> {%- endcomment -%}
|
|
<div style="padding-left: 15px">
|
|
{%- comment -%} {{course.properties.course_duration}} duration {%- endcomment -%}
|
|
</div>
|
|
{% endif %}
|
|
<a class="np-button np-button-wide course-card-button"
|
|
{% if course.properties.video_on_demand == true %}
|
|
{% if course.enrolled? %}
|
|
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
|
{% else %}
|
|
href="{% route course_enrollment, code: course.enrollment_code %}"
|
|
{% endif %}
|
|
{% else %}
|
|
href="{{ course_path }}"
|
|
{% endif %}
|
|
>
|
|
{% if course.progress > 0 and course.progress < 100 %}
|
|
Continue
|
|
{% else %}
|
|
View
|
|
{% endif %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<style>
|
|
.card-product-banner{
|
|
align-items: center;
|
|
background: #FFF;
|
|
box-shadow: 0 3px 30px rgba(0,0,0,.1);
|
|
display: flex;
|
|
height: 32px;
|
|
overflow: hidden;
|
|
padding: 6px 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.product-logo{
|
|
height: 100%;
|
|
}
|
|
|
|
.card-image-replacement{
|
|
/* background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(225,235,243,1) 60%); */
|
|
background: linear-gradient(325deg, rgba(255,255,255,1) 0%, rgb(225 235 343 / 30%) 60%);
|
|
height: 12rem;
|
|
width: 100%;
|
|
}
|
|
|
|
@media screen and (min-width: 550px) and (max-width: 649px){
|
|
.card-image-replacement{
|
|
height: 15rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 650px) and (max-width: 767px){
|
|
.card-image-replacement{
|
|
height: 20rem;
|
|
}
|
|
}
|
|
|
|
.course-card-info{
|
|
height: calc(100% - 38px);
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
.course-card-title{
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
line-height: 25px;
|
|
margin-top: 8px !important;
|
|
}
|
|
|
|
.course-card-button{
|
|
border-radius: 0;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
height: 100%;
|
|
line-height: 21px;
|
|
width: 30%;
|
|
}
|
|
|
|
.course-card-button:focus{
|
|
border: 2px solid blue;
|
|
}
|
|
|
|
.np-progress-bar-container,
|
|
.np-card-progress-bar{
|
|
border-radius: 0;
|
|
height: 6px;
|
|
margin: 0;
|
|
}
|
|
|
|
.np-card-content-progress{
|
|
height: 25px;
|
|
margin: 0;
|
|
}
|
|
|
|
.course-card-progress-bar{
|
|
min-width: 0;
|
|
}
|
|
|
|
.np-card-content-progress{
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 25px;
|
|
}
|
|
|
|
@media screen and (min-width: 768px){
|
|
.course-card-wrapper{
|
|
margin-bottom: 32px;
|
|
/* max-height: 315px;
|
|
max-width: 445px; */
|
|
}
|
|
|
|
.course-card{
|
|
padding: 0 10px !important;
|
|
}
|
|
|
|
.course-card-wrapper,
|
|
.course-card{
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style> |