Doordash templates, notes for Mizuno, a few template changes. Anthology,included.
This commit is contained in:
Norm Rasmussen
@ -182,16 +182,27 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
<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? %}
|
||||
@ -208,7 +219,7 @@
|
||||
padding-left: 15px;
|
||||
width: 70%;">
|
||||
<div style="
|
||||
background: {{ color_light }};
|
||||
background: #BACCE9;
|
||||
border-radius: 10px;
|
||||
height: 8px;
|
||||
margin-right: 15px;
|
||||
@ -247,9 +258,10 @@
|
||||
.card-product-banner{
|
||||
align-items: center;
|
||||
background: #FFF;
|
||||
box-shadow: 0 3px 30px rgba(0,0,0,.1);
|
||||
display: flex;
|
||||
height: 32px;
|
||||
padding: 6px 8px 2px;
|
||||
padding: 6px 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -257,8 +269,26 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-image-replacement{
|
||||
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(225,235,243,1) 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% - 41px);
|
||||
height: calc(100% - 38px);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
@ -317,4 +347,4 @@
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@ -0,0 +1,54 @@
|
||||
<div class="np-card course-card" style="padding: 0 !important;">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
<a class="np-button np-button-wide course-card-button" href="{{ course_path }}">
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
Continue
|
||||
{% else %}
|
||||
View
|
||||
{% endif %}
|
||||
{%- comment -%} {% t shared.view %} {%- endcomment -%}
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ course.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar course-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-bottom-details">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
<div>
|
||||
{{course.properties.course_duration}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@media screen and (min-width: 768px){
|
||||
.course-card-wrapper{
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.course-card{
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,45 @@
|
||||
<div class="np-card event-card col-xs-12 col-sm-6 col-lg-4">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content-training-event">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ training_event.title }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{% t shared.event_types, key: training_event.event_type %}
|
||||
</div>
|
||||
<div class="np-card-training-session">
|
||||
<span class="np-card-content-label">
|
||||
{% t .next_session %}
|
||||
</span>
|
||||
<div class="np-card-training-session-date">
|
||||
<div class="np-button-background-color np-card-training-session-date-bar"></div>
|
||||
<div class="np-card-training-session-date-day">
|
||||
{{ training_event.sessions.first.day }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_event.sessions.first.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year">
|
||||
{{ training_event.sessions.first.year }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class="np-card-training-sessions">
|
||||
<i class="np-card-training-sessions-icon far fa-calendar-star"></i>
|
||||
<span class="np-card-training-sessions-label">
|
||||
{% t .sessions, count: training_event.sessions.size %}
|
||||
</span>
|
||||
<a
|
||||
class="np-button np-button-wide"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,258 @@
|
||||
{% if course.properties.product_names_for_course_cards == 'Anthology Reach' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Reach.svg' %}
|
||||
{% 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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://cdn.northpass.io/anthology/Course+Evaluations.svg' %}
|
||||
{% 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 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://cdn.northpass.io/anthology/Program+Review.svg' %}
|
||||
{% 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 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 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 %}
|
||||
|
||||
<div class="np-card-container">
|
||||
<div class="np-resource-header np-course-header np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
{%- comment -%} <div class="np-progress-bar-container" style="background: {{ color_light }}; border-radius: 0;">
|
||||
<div
|
||||
style="width: {{ course.progress }}%; background: {{ color_dark }}"
|
||||
class="np-button-background-color np-card-progress-bar course-card-progress-bar">
|
||||
</div>
|
||||
</div> {%- endcomment -%}
|
||||
<div class="product-banner">
|
||||
{% if product_logo != 'blank' %}
|
||||
<img src='{{ product_logo }}' class="product-logo" style="height: 36px;"/>
|
||||
{% else %}
|
||||
Anthology
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-top-image np-top-image-spacing course-image-replacement" style="border-radius: 0;">
|
||||
<div class="course-cover-info">
|
||||
<div class="np-flex-1">
|
||||
<h3 class="course-cover-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: 18px">
|
||||
{{ 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>
|
||||
{%- comment -%} <img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/> {%- endcomment -%}
|
||||
{% include "course_description" %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-6">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.course-image-replacement{
|
||||
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(225,235,243,1) 60%);
|
||||
}
|
||||
|
||||
.course-cover-title{
|
||||
font-size: 2rem;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.course-cover-info{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 25em;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,46 @@
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
{{ current_school.course_vocabulary }}
|
||||
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
|
||||
</i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
Back
|
||||
</div>
|
||||
{%- comment -%} <img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-hidden-desktop"
|
||||
alt="{{ course.name }}"
|
||||
/> {%- endcomment -%}
|
||||
|
||||
{%- comment -%} <div class="card-product-banner">
|
||||
{% if product_logo != 'blank' %}
|
||||
<img src='{{ product_logo }}' class="product-logo"/>
|
||||
{% else %}
|
||||
Anthology
|
||||
{% endif %}
|
||||
</div> {%- endcomment -%}
|
||||
{%- comment -%} <div class="np-top-image np-top-image-spacing course-image-replacement" style="border-radius: 0; margin-top: -32px;">
|
||||
<div class="course-cover-info">
|
||||
<div class="np-flex-1">
|
||||
<h3 class="course-cover-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: 18px">
|
||||
{{ 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> {%- endcomment -%}
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.progress == 0 %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,57 @@
|
||||
{% assign shell_redirect_url = course.properties.external_course_url %}
|
||||
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ course.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if shell_redirect_url %}
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
href="http://{{shell_redirect_url}}"
|
||||
target="_blank"
|
||||
>
|
||||
View Course
|
||||
</a>
|
||||
{% else %}
|
||||
{% if course.learner_can_retake? %}
|
||||
<form action="{% route course_retake, id: course.id %}" method="POST">
|
||||
{% form_authenticity_token %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% t .retake, key: current_school.course_vocabulary %}
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
{% 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 %}
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
{% t shared.course.start, key: current_school.course_vocabulary %}
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,14 @@
|
||||
<div class="homepage-resource-header catalog-header" style="margin-top: 50px; margin-bottom: 20px;">
|
||||
All Learning
|
||||
</div>
|
||||
{%- comment -%} Catalog is not used in this school. The "catalog" is the set of unstarted enrolled courses shown at the homepage {%- endcomment -%}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
{% unless course.progress > 0 %}
|
||||
<div class="col-xs-12 col-sm-6 col-lg-3 np-stretch-content course-card-wrapper" data-product="{{ course.properties.product_type}}">
|
||||
{%- comment -%} {% include "cards_course" with course, flag: 'catalog' %} {%- endcomment -%}
|
||||
{% include "cards_course" with course, flag: 'null' %}
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,65 @@
|
||||
{% assign totalCountCompleted = 0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign totalCountCompleted = totalCountCompleted | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if totalCountCompleted > 3 %}
|
||||
<div class="carousel-buttons-container">
|
||||
<div class="np-dashboard-resources-title">
|
||||
Completed
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div class="previous-carousel-button previous-courses-button" onclick="sliderCompleted.goTo('prev')">
|
||||
<i class="far fa-solid fa-arrow-left"></i>
|
||||
</div>
|
||||
<div class="next-carousel-button next-courses-button" onclick="sliderCompleted.goTo('next')">
|
||||
<i class="far fa-solid fa-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% endif %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
Completed
|
||||
</div>
|
||||
|
||||
{%- comment -%} <div class="row row-with-thumbnails courses-in-prog-carousel
|
||||
{% if outerClass %}
|
||||
{{outerClass}}
|
||||
{% endif %}
|
||||
{% if totalCountCompleted <= 3 %}
|
||||
col-xs-12 np-stretch-content
|
||||
{% endif %}"
|
||||
{% if totalCountCompleted <= 3 %}
|
||||
style="padding: 0;"
|
||||
{% else %}
|
||||
style="margin-left: 0;"
|
||||
{% endif %}>
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
<div class="course-card-wrapper {% if totalCountCompleted <= 3 %}col-xs-12 col-sm-4{% endif %}" {% if totalCountCompleted <= 3 %} style="padding: 0" {% endif %} data-product="{{ course.properties.product_type}}">
|
||||
{% include "cards_course" with course, flag:'completed' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div> {%- endcomment -%}
|
||||
|
||||
<div class="row row-with-thumbnails courses-completed col-xs-12 np-stretch-content
|
||||
{% if outerClass %}
|
||||
{{outerClass}}
|
||||
{% endif %}"
|
||||
style="padding: 0;">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
<div class="course-card-wrapper col-xs-12 col-sm-6 col-md-4" style="padding: 0" data-product="{{ course.properties.product_type}}">
|
||||
{% if outerClass == "dashboard-courses-index" %}
|
||||
{% include "cards_course" with course, flag: 'dashboard' %}
|
||||
{% else %}
|
||||
{% include "cards_course" with course %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,65 @@
|
||||
{% assign totalCountInProg = 0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign totalCountInProg = totalCountInProg | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{%- comment -%} {% if totalCountInProg > 3 %}
|
||||
<div class="carousel-buttons-container">
|
||||
<div class="np-dashboard-resources-title">
|
||||
In Progress
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div class="previous-carousel-button previous-courses-button" onclick="sliderInProg.goTo('prev')">
|
||||
<i class="far fa-solid fa-arrow-left"></i>
|
||||
</div>
|
||||
<div class="next-carousel-button next-courses-button" onclick="sliderInProg.goTo('next')">
|
||||
<i class="far fa-solid fa-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% endif %} {%- endcomment -%}
|
||||
<div class="np-dashboard-resources-title">
|
||||
In Progress
|
||||
</div>
|
||||
|
||||
{%- comment -%} <div class="row row-with-thumbnails courses-in-prog-carousel
|
||||
{% if outerClass %}
|
||||
{{outerClass}}
|
||||
{% endif %}
|
||||
{% if totalCountInProg <= 3 %}
|
||||
col-xs-12 np-stretch-content
|
||||
{% endif %}"
|
||||
{% if totalCountInProg <= 3 %}
|
||||
style="padding: 0;"
|
||||
{% else %}
|
||||
style="margin-left: 0;"
|
||||
{% endif %}>
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
<div class="course-card-wrapper {% if totalCountInProg <= 3 %}col-xs-12 col-sm-4{% endif %}" {% if totalCountInProg <= 3 %} style="padding: 0" {% endif %} data-product="{{ course.properties.product_type}}">
|
||||
{% include "cards_course" with course, flag: 'inProg' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div> {%- endcomment -%}
|
||||
|
||||
<div class="row row-with-thumbnails courses-in-prog col-xs-12 np-stretch-content
|
||||
{% if outerClass %}
|
||||
{{outerClass}}
|
||||
{% endif %}"
|
||||
style="padding: 0;">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
<div class="course-card-wrapper col-xs-12 col-sm-6 col-md-4" style="padding: 0" data-product="{{ course.properties.product_type}}">
|
||||
{% if outerClass == "dashboard-courses-index" %}
|
||||
{% include "cards_course" with course, flag: 'dashboard' %}
|
||||
{% else %}
|
||||
{% include "cards_course" with course %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,52 @@
|
||||
<a
|
||||
class="np-header-desktop-nav-item"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-event="mouseover"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-courses-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
{{title}}
|
||||
</a>
|
||||
<div class="np-dropdown-tooltip np-courses-tooltip np-hidden" role="tooltip">
|
||||
<nav class="np-tooltip-navigation">
|
||||
{% assign categories_by_name = categories | sort: "name" %}
|
||||
{% for category in categories_by_name %}
|
||||
{% assign category_name_split = category.name | split: " " %}
|
||||
{% assign category_name_joined = category_name_split | join: "-" | downcase %}
|
||||
{% assign category_name = "" %}
|
||||
{% assign courses_per_carousel = 0 %}
|
||||
{% assign catalog_courses = courses %}
|
||||
{% if courses.any? %}
|
||||
{% for course in courses %}
|
||||
{% for course_category in course.categories %}
|
||||
{% if category.name == course_category.name %}
|
||||
{% assign courses_per_carousel = courses_per_carousel | plus: 1 %}
|
||||
{% if courses_per_carousel > 0 %}
|
||||
{% assign category_name = category.name %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if category_name != "" %}
|
||||
<a class="np-dropdown-tooltip-link" href="#{{category_name_joined}}">
|
||||
{{category_name}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
if (!$('.np-homepage').length) {
|
||||
console.log("not the homepage")
|
||||
$(".np-dropdown-tooltip-link").each(function() {
|
||||
let homeLink = "/app/" + $(this).attr("href");
|
||||
$(this).attr("href", homeLink);
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,33 @@
|
||||
<div class="np-filter">
|
||||
<div class="dropdown">
|
||||
<select
|
||||
class="category-filter-dropdown np-input"
|
||||
type="text"
|
||||
name="category-filter-dropdown"
|
||||
id="category-filter-dropdown"
|
||||
onchange="filterCatalog()"
|
||||
>
|
||||
{% assign sorted_categories = current_school.filterable_categories | sort: "name" %}
|
||||
<option class="category-filter-entry" value="" selected disabled>All Categories</option>
|
||||
|
||||
<option class="category-filter-entry" value="0">All Categories</option>
|
||||
{% for category in sorted_categories %}
|
||||
<option class="category-filter-entry" value="{{ category.id }}">{{ category.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let filterCatalog = () => {
|
||||
console.log(event.target.value);
|
||||
if(event.target.value.length > 0){
|
||||
if(event.target.value == 0){
|
||||
window.location.href = '/app'
|
||||
} else {
|
||||
window.location.href = `/app?filter[category_uuid][in][]=${event.target.value}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,135 @@
|
||||
<div class="np-filter product-filter-container">
|
||||
<div class="dropdown">
|
||||
<select
|
||||
class="product-filter-dropdown np-input"
|
||||
type="text"
|
||||
name="product-filter-dropdown"
|
||||
id="product-filter-dropdown"
|
||||
onchange="filterByProduct()"
|
||||
>
|
||||
<option class="product-filter-entry" value="Default" selected>All Products</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let allProductTypesHome = ['Anthology-Default'];
|
||||
let allProductTypesDash = ['Anthology-Default'];
|
||||
let productFilterEl = document.querySelector("#product-filter-dropdown");
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 0 or course.properties.most_popular == true %}
|
||||
if(!allProductTypesHome.includes('{{ course.properties.product_type }}')){
|
||||
allProductTypesHome.push("{{ course.properties.product_type }}");
|
||||
}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% unless course.progress == 0 %}
|
||||
if(!allProductTypesDash.includes('{{ course.properties.product_type }}')){
|
||||
allProductTypesDash.push("{{ course.properties.product_type }}");
|
||||
}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
|
||||
allProductTypesHome = allProductTypesHome.sort();
|
||||
allProductTypesDash = allProductTypesDash.sort();
|
||||
|
||||
{% if page == 'Homepage' %}
|
||||
if(allProductTypesHome.length > 1){
|
||||
allProductTypesHome.map((product) => {
|
||||
if(product != 'Anthology-Default'){
|
||||
if(product.indexOf('&') > -1){
|
||||
product = product.replace('&', '&');
|
||||
}
|
||||
let productOption = document.createElement('option');
|
||||
productOption.classList.add('product-filter-entry');
|
||||
productOption.setAttribute('value', product);
|
||||
productOption.innerHTML = `${product}`;
|
||||
productFilterEl.appendChild(productOption);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
productFilterEl.style.display = 'none';
|
||||
}
|
||||
|
||||
let filterByProduct = () => {
|
||||
let allLearning = document.querySelector('.np-catalog-courses').children;
|
||||
let popular = document.querySelector('.popular-courses').children;
|
||||
|
||||
for(let i = 0; i < allLearning.length; i++){
|
||||
if(event.target.value == 'Default'){
|
||||
allLearning[i].style.display = 'block';
|
||||
} else {
|
||||
if(allLearning[i].dataset.product != event.target.value){
|
||||
allLearning[i].style.display = 'none';
|
||||
} else {
|
||||
allLearning[i].style.display = 'block';
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
for(let i = 0; i < popular.length; i++){
|
||||
if(event.target.value == 'Default'){
|
||||
popular[i].style.display = 'block';
|
||||
} else {
|
||||
if(popular[i].dataset.product != event.target.value){
|
||||
popular[i].style.display = 'none';
|
||||
} else {
|
||||
popular[i].style.display = 'block';
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
{% elsif page == 'Dashboard' %}
|
||||
if(allProductTypesDash.length > 1){
|
||||
allProductTypesDash.map((product) => {
|
||||
if(product != 'Anthology-Default'){
|
||||
if(product.indexOf('&') > -1){
|
||||
product = product.replace('&', '&');
|
||||
}
|
||||
let productOption = document.createElement('option');
|
||||
productOption.classList.add('product-filter-entry');
|
||||
productOption.setAttribute('value', product)
|
||||
productOption.innerHTML = `${product}`;
|
||||
|
||||
productFilterEl.appendChild(productOption);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
productFilterEl.style.display = 'none';
|
||||
}
|
||||
|
||||
let filterByProduct = () => {
|
||||
let inProgressCourses = document.querySelector('.courses-in-prog').children;
|
||||
let completedCourses = document.querySelector('.courses-completed').children;
|
||||
|
||||
for(let i = 0; i < inProgressCourses.length; i++){
|
||||
if(event.target.value == 'Default'){
|
||||
inProgressCourses[i].style.display = 'block';
|
||||
} else {
|
||||
//console.log(inProgressCourses[i].dataset.product)
|
||||
if(inProgressCourses[i].dataset.product != event.target.value){
|
||||
inProgressCourses[i].style.display = 'none';
|
||||
} else {
|
||||
inProgressCourses[i].style.display = 'block';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for(let i = 0; i < completedCourses.length; i++){
|
||||
if(event.target.value == 'Default'){
|
||||
completedCourses[i].style.display = 'block';
|
||||
} else {
|
||||
console.log(completedCourses[i].dataset.product)
|
||||
if(completedCourses[i].dataset.product != event.target.value){
|
||||
completedCourses[i].style.display = 'none';
|
||||
} else {
|
||||
completedCourses[i].style.display = 'block';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
{% endif %}
|
||||
</script>
|
||||
@ -0,0 +1,10 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
||||
@ -0,0 +1,206 @@
|
||||
{%- comment -%} Desktop Header {%- endcomment -%}
|
||||
<header class="np-header np-header-color">
|
||||
<div class="np-header-content">
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
></button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{%- comment -%} School Desktop View Logo {%- endcomment -%}
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{%- comment -%} Desktop Nav Links {%- endcomment -%}
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
{%- comment -%} <ul class="np-header-desktop-nav-list">
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul> {%- endcomment -%}
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% unless link.label == 'Catalog' or link.label == 'Learning Paths' %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{%- comment -%} Desktop Search Box {%- endcomment -%}
|
||||
{% if current_person.signed_in? %}
|
||||
{%- comment -%} <div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input np-header-font-background-color"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div> {%- endcomment -%}
|
||||
|
||||
{%- comment -%} Desktop Profile Button {%- endcomment -%}
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button desktop-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
|
||||
{%- comment -%} Desktop Profile Tooltip {%- endcomment -%}
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<span class="header-username">{{ current_person.name }}</span>
|
||||
</div>
|
||||
{% else %}
|
||||
{%- comment -%} Desktop Sign In Button {%- endcomment -%}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
aria-label="{% t shared.sign_in %}"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{%- comment -%} Mobile Header {%- endcomment -%}
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{%- comment -%} {% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %} {%- endcomment -%}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
@ -0,0 +1,42 @@
|
||||
|
||||
<div class="carousel-buttons-container">
|
||||
<div class="homepage-resource-header most-popular-header">
|
||||
Most Popular
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<div class="previous-carousel-button previous-courses-button" onclick="sliderPopular.goTo('prev')">
|
||||
<i class="far fa-solid fa-arrow-left"></i>
|
||||
</div>
|
||||
<div class="next-carousel-button next-courses-button" onclick="sliderPopular.goTo('next')">
|
||||
<i class="far fa-solid fa-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row row-with-thumbnails popular-courses-carousel" style="margin: 0; padding: 5px;"}>
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.properties.most_popular == true %}
|
||||
<div class="course-card-wrapper">
|
||||
{% include "cards_course" with course, flag: 'popular' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var sliderPopular = tns({
|
||||
container: '.popular-courses-carousel',
|
||||
controls: false,
|
||||
items: 1,
|
||||
nav: false,
|
||||
navPosition: 'bottom',
|
||||
responsive: {
|
||||
1024:{
|
||||
items: 2
|
||||
},
|
||||
1200:{
|
||||
items: 3
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="homepage-resource-header most-popular-header" style="margin-top: 50px; margin-bottom: 20px;">
|
||||
Most Popular
|
||||
</div>
|
||||
<div class="row row-with-thumbnails popular-courses" style="margin: 0; margin-left: -10px; padding: 5px;"}>
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.properties.most_popular == true %}
|
||||
<div class="col-xs-12 col-sm-6 col-lg-3 np-stretch-content course-card-wrapper" data-product="{{ course.properties.product_type }}">
|
||||
{% include "cards_course" with course, flag: 'null' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,192 @@
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-5 col-md-4 col-lg-3 profile-card-container">
|
||||
<div class="profile-card-wrapper">
|
||||
<div class="profile-card">
|
||||
<div class="profile-bio">
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
style="
|
||||
height: 102px;
|
||||
margin-bottom: 23px;
|
||||
width: 102px;"
|
||||
/>
|
||||
<div class="profile-bio-header">
|
||||
Account Details
|
||||
</div>
|
||||
<span class="profile-bio-name">{{ current_person.first_name }} {{current_person.last_name}}</span>
|
||||
<span class="profile-bio-email">{{ current_person.email }}</span>
|
||||
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="profile-bio-account-settings-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
Edit Profile
|
||||
</a>
|
||||
{% endunless %}
|
||||
</div>
|
||||
|
||||
{% assign sub_levels_length = current_person.properties.subscription_levels | size %}
|
||||
{% if sub_levels_length > 0 %}
|
||||
<div class="product-subscriptions-container">
|
||||
<div class="product-subscriptions-banner">
|
||||
<div class="product-subscription-banner-content">
|
||||
<span class="subscription-name" style="border: none;">
|
||||
PRODUCT SUBSCRIPTION
|
||||
</span>
|
||||
<span class="subscription-level">
|
||||
PLAN
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="product-subscriptions">
|
||||
{% assign subscription_levels = current_person.properties.subscription_levels | split: "," %}
|
||||
|
||||
{% for subscription_level in subscription_levels %}
|
||||
{% assign name_level_pair = subscription_level | split: ":"%}
|
||||
|
||||
<li class="product-subscription">
|
||||
{% include "profile_logo_calculator", product: name_level_pair[0] %}
|
||||
{%- comment -%} <span class="subscription-name">
|
||||
{{ name_level_pair[0] }}
|
||||
</span> {%- endcomment -%}
|
||||
<span class="subscription-level">
|
||||
{%- comment -%} {% if '{{name_level_pair[1]}}' == 'ESS' %}
|
||||
Essential
|
||||
{% elsif '{{name_level_pair[1]}}' == 'ENH' %}
|
||||
Enhanced
|
||||
{% elsif '{{name_level_pair[1]}}' == 'ENH+' %}
|
||||
Enhanced Plus
|
||||
{% endif %} {%- endcomment -%}
|
||||
{{ name_level_pair[1] }}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.profile-card-container{
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.profile-card-wrapper{
|
||||
background: #AA7FB8;
|
||||
border: 1px solid #EAEAEA;
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.profile-card{
|
||||
background: #fafafa;
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
padding-bottom: 32px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.profile-bio{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 35px 0 85px
|
||||
}
|
||||
|
||||
.profile-bio-header{
|
||||
border-bottom: 1px solid #D9D9D9;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 25px;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
text-align: center;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.profile-bio-name,
|
||||
.profile-bio-email{
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.profile-bio-name{
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.profile-bio-email{
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.profile-bio-account-settings-button{
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
padding: 12px 25px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.product-subscriptions-banner{
|
||||
align-items: center;
|
||||
background: #EAEAEA;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
height: 36px;
|
||||
justify-content: center;
|
||||
line-height: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-subscription-banner-content{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
padding-right: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-subscriptions{
|
||||
padding: 0;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.product-subscription{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 35px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.subscription-name{
|
||||
align-items: center;
|
||||
border-right: 2px solid #EAEAEA;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.subscription-level{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-left: 10px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.profile-card-container{
|
||||
padding: 0;
|
||||
padding-right: 3%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,78 @@
|
||||
{% assign product_name = product %}
|
||||
|
||||
{% if product_name contains 'Reach' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Reach.svg' %}
|
||||
{% elsif product_name contains 'Radius' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% elsif product_name contains 'Engage' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Engage.svg' %}
|
||||
{% elsif product_name contains 'Beacon' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Beacon.svg' %}
|
||||
{% elsif product_name contains 'Milestone' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Milestone.svg' %}
|
||||
{% elsif product_name contains 'Occupation Insight' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Occupation+Insight.svg' %}
|
||||
{% elsif product_name contains 'Raise' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Raise.svg' %}
|
||||
{% elsif product_name contains 'Digital Assistant' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Digital+Assistant.svg' %}
|
||||
{% elsif product_name contains 'Baseline' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Baseline.svg' %}
|
||||
{% elsif product_name contains 'Encompass' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Encompass.svg' %}
|
||||
{% elsif product_name contains 'Talisma' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% elsif product_name contains 'Student' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Student.svg' %}
|
||||
{% elsif product_name contains 'CVue' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% elsif product_name contains 'Insight' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Insight.svg' %}
|
||||
{% elsif product_name contains 'Finance & HCM' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Finance+%26+HCM.svg' %}
|
||||
{% elsif product_name contains 'Payroll' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Payroll.svg' %}
|
||||
{% elsif product_name contains 'Academic Economics' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Academic+Economics.svg' %}
|
||||
{% elsif product_name contains 'Blackboard Learn' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/BBLearn.svg' %}
|
||||
{% elsif product_name contains 'Ally' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Ally.svg' %}
|
||||
{% elsif product_name contains 'Course Evaluations' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Course+Evaluations.svg' %}
|
||||
{%- comment -%} NEED DIFF IMG FORMAT FOR THIS ONE {%- endcomment -%}
|
||||
{% elsif product_name contains 'Evaluate' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% elsif product_name contains 'Portfolio' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Portfolio.svg' %}
|
||||
{% elsif product_name contains 'Program Review' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Program+Review.svg' %}
|
||||
{% elsif product_name contains 'Planning' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Planning.svg' %}
|
||||
{% elsif product_name contains 'Accreditation' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Accreditation.svg' %}
|
||||
{% elsif product_name contains '101' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% elsif product_name contains 'Academy Use & Navigation' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% elsif product_name contains 'Data Strategy' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% elsif product_name contains 'Faculty Development' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% elsif product_name contains 'Power BI' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% elsif product_name contains 'Professional Development' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% else %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% endif %}
|
||||
|
||||
{% if product_logo contains 'blank' %}
|
||||
<span class="subscription-name">
|
||||
{{ product_name }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="subscription-name" data-profile-product="{{ product_name }}">
|
||||
<img src='{{ product_logo }}' alt="{{ product_name }}" class='profil-card-product-logo' style="height: 60%;"/>
|
||||
</span>
|
||||
{% endif %}
|
||||
@ -0,0 +1,73 @@
|
||||
<div class="section-resources np-max-width">
|
||||
<hr />
|
||||
<div class="np-section-title">
|
||||
Resources
|
||||
</div>
|
||||
<div class="resources-list-container">
|
||||
<div class="resource">
|
||||
<div class="resource-title">Tutorials</div>
|
||||
<a class="np-button download-btn" href="https://docs.google.com/document/d/1PNZUTw295P78jgfv1SFc3E4iV9asvZPTKf1--SqeTG0/edit?usp=sharing" target="_blank">
|
||||
Download PDF
|
||||
<i class="far fa-file-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="resource">
|
||||
<div class="resource-title">Templates</div>
|
||||
<a class="np-button download-btn" href="https://docs.google.com/document/d/180gvmn6HlGwWkS1ZBhpiM4_0z8A2_t1llMef6EpSDec/edit?usp=sharing" target="_blank">
|
||||
Download PDF
|
||||
<i class="far fa-file-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.section-resources {
|
||||
padding:32px 0;
|
||||
}
|
||||
|
||||
.np-section-title {
|
||||
font-size:40px;
|
||||
font-weight:500;
|
||||
text-align:center;
|
||||
margin-top:48px;
|
||||
margin-bottom:48px;
|
||||
}
|
||||
|
||||
.resources-list-container {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.resource {
|
||||
width:100%;
|
||||
padding: 12px 18px;
|
||||
margin-bottom:32px;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
font-size:18px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px 0 rgb(89 105 123 / 50%);
|
||||
margin: 16px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.fa-file-download {
|
||||
margin-left:12px;
|
||||
font-size:16px;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.resource {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.resource-title {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
<nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% unless link.label == 'Catalog' or link.label == 'Learning Paths' %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
@ -0,0 +1,20 @@
|
||||
<div class="homepage-section np-homepage-featured np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline homepage-heading">
|
||||
Upcoming Events
|
||||
</div>
|
||||
</div>
|
||||
{% if training_events.available.any? %}
|
||||
<div class="row row-with-thumbnails" style="padding: 1% 3%;">
|
||||
{% for training_event in training_events.available %}
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content" style="margin-bottom: 10px;">
|
||||
{% include "cards_training_event" with training_event %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="margin: 15px;">
|
||||
{% include "training_events_zero_state" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,76 @@
|
||||
{% if training_events.enrolled.any? or training_events.available.any? %}
|
||||
{% if training_events.enrolled.any? %}
|
||||
{% assign enrolledEvents = 0 %}
|
||||
{% for training_event in training_events.enrolled %}
|
||||
{% assign enrolledEvents = enrolledEvents | plus: 1 %}
|
||||
{% endfor %}
|
||||
<div class="np-dashboard-resources">
|
||||
{%- comment -%} {% if enrolledEvents > 3 %}
|
||||
<div class="carousel-buttons-container events-enrolled-carousel-buttons-container">
|
||||
<div class="np-dashboard-resources-title">Registered</div>
|
||||
<div style="display: flex">
|
||||
<div class="previous-carousel-button previous-events-enrolled-button" onclick="eventsESlider.goTo('prev')">
|
||||
<i class="far fa-solid fa-arrow-left"></i>
|
||||
</div>
|
||||
<div class="next-carousel-button next-events-enrolled-button" onclick="eventsESlider.goTo('next')">
|
||||
<i class="far fa-solid fa-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% endif %} {%- endcomment -%}
|
||||
<div class="np-dashboard-resources-title">Registered</div>
|
||||
|
||||
<div class="row row-with-thumbnails events-grid">
|
||||
{% for training_event in training_events.enrolled %}
|
||||
{% include "cards_training_event" with training_event %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if training_events.available.any? %}
|
||||
{% assign availableEvents = 0%}
|
||||
{% for training_event in training_events.available %}
|
||||
{% assign availableEvents = availableEvents | plus: 1 %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="np-dashboard-resources">
|
||||
{%- comment -%} {% if availableEvents > 3 %}
|
||||
<div class="carousel-buttons-container events-available-carousel-buttons-container">
|
||||
<div class="np-dashboard-resources-title">Upcoming</div>
|
||||
<div style="display: flex">
|
||||
<div class="previous-carousel-button previous-events-available-button" onclick="eventsASlider.goTo('prev')">
|
||||
<i class="far fa-solid fa-arrow-left"></i>
|
||||
</div>
|
||||
<div class="next-carousel-button next-events-available-button" onclick="eventsASlider.goTo('next')">
|
||||
<i class="far fa-solid fa-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% endif %} {%- endcomment -%}
|
||||
<div class="np-dashboard-resources-title">Upcoming</div>
|
||||
|
||||
<div class="row row-with-thumbnails events-grid">
|
||||
{% for training_event in training_events.available %}
|
||||
{% include "cards_training_event" with training_event %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.non-carousel{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.events-grid{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,9 @@
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-training-events"
|
||||
alt="{% t .empty %}"
|
||||
/>
|
||||
</div>
|
||||
@ -0,0 +1,229 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row np-flex-center">
|
||||
{% include "profile_card" %}
|
||||
|
||||
<div class="col-xs-12 col-sm-7 col-md-8 col-lg-9 dashboard-learning-content">
|
||||
<div class="dashboard-main-title">
|
||||
Dashboard
|
||||
</div>
|
||||
|
||||
<div class='dashboard-control-panel' style="
|
||||
">
|
||||
{%- comment -%} =============== THIS IS WHERE THE SWAPPER WILL LIVE =============== {%- endcomment -%}
|
||||
<div class="view-swapper-container">
|
||||
<div id="dashboard-view-button" class="view-swapper-button view-swapper-button-active" onclick="swapView()">
|
||||
Resources
|
||||
</div>
|
||||
<div id="events-view-button" class="view-swapper-button" onclick="swapView()">
|
||||
Live Events
|
||||
</div>
|
||||
{% assign completedCourseFound = false %}
|
||||
{% if courses.enrolled.any? %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign completedCourseFound = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if completedCourseFound %}
|
||||
<div id="completed-view-button" class="view-swapper-button" onclick="swapView()">
|
||||
Completed
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{%- comment -%} =============== THIS IS WHERE THE PRODUCT FILTER WILL LIVE =============== {%- endcomment -%}
|
||||
<div class="filter-buttons-container">
|
||||
{% include "filter_by_product", page: 'Dashboard' %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dashboard-resources-pane">
|
||||
{% assign ipCourseFound = false %}
|
||||
{% if courses.enrolled.any? %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign ipCourseFound = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if ipCourseFound %}
|
||||
{% include "courses_index_in_prog", outerClass: "dashboard-courses-index" %}
|
||||
{% endif %}
|
||||
|
||||
{%- comment -%} {% if courses.enrolled.any? %}
|
||||
{% include "courses_index", outerClass: "dashboard-courses-index" %}
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %} {%- endcomment -%}
|
||||
</div>
|
||||
|
||||
<div id="dashboard-events-pane">
|
||||
{% include "training_events_index" %}
|
||||
</div>
|
||||
|
||||
<div id="dashboard-completed-pane">
|
||||
{% assign completedCourseFound = false %}
|
||||
{% if courses.enrolled.any? %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign completedCourseFound = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if completedCourseFound %}
|
||||
{% include "courses_index_completed", outerClass: "dashboard-courses-index" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<script>
|
||||
let swapView = () => {
|
||||
console.log(event.target.classList);
|
||||
|
||||
if(!event.target.classList.contains('view-swapper-button-active')){
|
||||
if(event.target.id == 'dashboard-view-button'){
|
||||
|
||||
document.getElementById('events-view-button').classList.remove('view-swapper-button-active');
|
||||
if(document.getElementById('completed-view-button')){
|
||||
document.getElementById('completed-view-button').classList.remove('view-swapper-button-active');
|
||||
}
|
||||
event.target.classList.add('view-swapper-button-active');
|
||||
|
||||
document.getElementById('dashboard-events-pane').style.display = 'none';
|
||||
document.getElementById('dashboard-completed-pane').style.display = 'none';
|
||||
document.getElementById('dashboard-resources-pane').style.display = 'block';
|
||||
|
||||
|
||||
} else if(event.target.id == 'events-view-button'){
|
||||
document.getElementById('dashboard-view-button').classList.remove('view-swapper-button-active');
|
||||
if(document.getElementById('completed-view-button')){
|
||||
document.getElementById('completed-view-button').classList.remove('view-swapper-button-active');
|
||||
}
|
||||
event.target.classList.add('view-swapper-button-active');
|
||||
|
||||
document.getElementById('dashboard-resources-pane').style.display = 'none';
|
||||
document.getElementById('dashboard-completed-pane').style.display = 'none';
|
||||
document.getElementById('dashboard-events-pane').style.display = 'block';
|
||||
|
||||
} else if(event.target.id == 'completed-view-button'){
|
||||
document.getElementById('dashboard-view-button').classList.remove('view-swapper-button-active');
|
||||
document.getElementById('events-view-button').classList.remove('view-swapper-button-active');
|
||||
event.target.classList.add('view-swapper-button-active');
|
||||
|
||||
document.getElementById('dashboard-resources-pane').style.display = 'none';
|
||||
document.getElementById('dashboard-events-pane').style.display = 'none';
|
||||
document.getElementById('dashboard-completed-pane').style.display = 'block';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.dashboard-main-title{
|
||||
color: #000000;
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title{
|
||||
color: #000000;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.dashboard-control-panel{
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #000000;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.view-swapper-container{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 50px;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.view-swapper-button{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 125px;
|
||||
}
|
||||
|
||||
.view-swapper-button-active{
|
||||
border-bottom: 2px solid #000000;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.view-swapper-button:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#dashboard-events-pane,
|
||||
#dashboard-completed-pane{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-filter-container{
|
||||
margin: 0;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.np-dashboard{
|
||||
padding: 70px 24px;
|
||||
}
|
||||
|
||||
.dashboard-main-title{
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title{
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.dashboard-control-panel{
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.view-swapper-container{
|
||||
margin-bottom: -14px;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.dashboard-learning-content{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dashboard-courses-index{
|
||||
margin: 0;
|
||||
margin-left: -6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,225 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
|
||||
<div class="np-homepage-hero">
|
||||
<img class="np-homepage-hero-image"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/anthology/hero.svg"
|
||||
alt="{{ homepage.headline }}"
|
||||
/>
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-headline np-header-font-color">
|
||||
Welcome to Anthology Academy
|
||||
</div>
|
||||
<div class="np-homepage-subheadline np-header-font-color" style="line-height: 28px; margin: 8px auto 0; text-align: center; width: 60%;">
|
||||
Benefit from expert training and on-demand learning content to improve skills and ensure your team is getting the best Anthology experience possible.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
<div class="mobile-subnav" style="margin: -24px -20px 16px;">
|
||||
{% include "sub_navigation" %}
|
||||
</div>
|
||||
|
||||
<div class="np-catalog-header-wrapper catalog-header-wrapper">
|
||||
|
||||
<div class="np-catalog-header">
|
||||
<div class="np-resource-title catalog-title">Catalog</div>
|
||||
<div class="catalog-subtitle">Explore our collection of learning resources</div>
|
||||
</div>
|
||||
|
||||
<div class="search-and-filter-component">
|
||||
<div class="catalog-search-component">
|
||||
<span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Search: </span>
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search" class="catalog-search-wrapper">
|
||||
<input
|
||||
aria-label="search_topics"
|
||||
class="np-header-font-background-color catalog-search"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder=""
|
||||
/>
|
||||
<i class="far fa-search search-icon"></i>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="catalog-filter-component">
|
||||
<span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Filter By:</span>
|
||||
<div class="filter-buttons-container">
|
||||
{%- comment -%} <span class="homepage-resource-header" style="
|
||||
font-size: 18px;
|
||||
margin-bottom: 0;
|
||||
margin-right: 15px;
|
||||
">Filter By: </span> {%- endcomment -%}
|
||||
{% include "filter_by_product", page: 'Homepage' %}
|
||||
|
||||
{% capture label %}{% t shared.filters.by_category %}{% endcapture %}
|
||||
{% if current_school.filterable_categories.any? %}
|
||||
{%
|
||||
include "filter_by_category",
|
||||
label: label
|
||||
%}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{% assign renderPopular = false %}
|
||||
{% assign totalCount = 0 %}
|
||||
{% if courses.enrolled.any? %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.properties.most_popular == true %}
|
||||
{% assign totalCount = totalCount | plus : 1 %}
|
||||
{% assign renderPopular = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if renderPopular == true %}
|
||||
{%- comment -%} {% if totalCount > 3 %}
|
||||
{% include "popular_courses_carousel" %}
|
||||
{% else %}
|
||||
{% endif %} {%- endcomment -%}
|
||||
{% include "popular_courses_non_carousel" %}
|
||||
{% endif %}
|
||||
|
||||
{% if courses.enrolled.any? %}
|
||||
{% include "courses_catalog" %}
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.catalog-header-wrapper{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.catalog-title{
|
||||
color: #0A0A0A;
|
||||
font-size: 2em;
|
||||
font-weight: 900;
|
||||
line-height: 2.375rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.catalog-subtitle{
|
||||
color: #595959;
|
||||
font-size: 1.25em;
|
||||
font-weight: 400;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.search-and-filter-component{
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.catalog-search-wrapper{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.catalog-search-component,
|
||||
.catalog-filter-component{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.catalog-search-component{
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.catalog-search{
|
||||
background-color: #fefefe;
|
||||
border: 1px solid #ce9dc7;
|
||||
border-radius: 30px;
|
||||
font-weight: 400;
|
||||
height: 60px;
|
||||
line-height: 1;
|
||||
padding-left: 75px;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-icon{
|
||||
left: 30px;
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
}
|
||||
|
||||
.homepage-resource-header{
|
||||
color: #000000;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 25px;
|
||||
margin-bottom: 12px
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.mobile-subnav{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-and-filter-component{
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.np-catalog-courses{
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.np-subpage-container{
|
||||
padding: 50px 50px 184px;
|
||||
}
|
||||
|
||||
.dropdown-menu{
|
||||
left: 0;
|
||||
right: unset;
|
||||
}
|
||||
|
||||
.catalog-search-component{
|
||||
margin-bottom: 0;
|
||||
margin-right: 50px;
|
||||
width: 65%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1440px){
|
||||
.np-homepage-hero{
|
||||
width: calc(100vw + 1.75em);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.catalog-header-wrapper{
|
||||
margin-top: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2200px){
|
||||
.catalog-header-wrapper{
|
||||
margin-top: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px){
|
||||
.catalog-header-wrapper{
|
||||
margin-top: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-learning-paths np-subpage-container np-max-width">
|
||||
<div class="np-learning-paths-main">
|
||||
<div class="np-resource-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .subtitle %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.available %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,180 @@
|
||||
/*
|
||||
Put your custom overlay styles in here
|
||||
You can use your northpass color palette in this file
|
||||
|
||||
{{ color_palette.button_font_color }}
|
||||
{{ color_palette.button_color }}
|
||||
{{ color_palette.button_hover_color }}
|
||||
{{ color_palette.header_font_color }}
|
||||
{{ color_palette.header_font_hover_color }}
|
||||
{{ color_palette.header_color }}
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap');
|
||||
|
||||
html,
|
||||
body{
|
||||
color: #000000;
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
}
|
||||
|
||||
body,
|
||||
main{
|
||||
background-color: #FEFEFE;
|
||||
}
|
||||
|
||||
/* HEADER STYLES */
|
||||
|
||||
.np-header{
|
||||
border-top: 15px solid #f6f9fc;
|
||||
border-bottom: 2px solid #f6f9fc;
|
||||
height: 95px;
|
||||
padding: 0 22px;
|
||||
}
|
||||
|
||||
.np-header-content{
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.np-header-logo{
|
||||
flex-grow: unset;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav{
|
||||
justify-content: flex-end;
|
||||
padding-top: 20px;
|
||||
flex-grow: unset;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-nav{
|
||||
position: unset;
|
||||
}
|
||||
|
||||
.np-header-avatar{
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.desktop-avatar-button{
|
||||
margin: 0;
|
||||
margin-right: 11px;
|
||||
}
|
||||
|
||||
.header-username{
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
|
||||
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-link,
|
||||
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-bar{
|
||||
color: #0A0A0A
|
||||
}
|
||||
|
||||
/* GLOBAL CARD STYLES */
|
||||
|
||||
.np-card-padding{
|
||||
padding: 15px 16px
|
||||
}
|
||||
|
||||
/* COURSE CARDS */
|
||||
|
||||
.course-card .np-card-container{
|
||||
border-radius: 0;
|
||||
box-shadow: 0 3px 30px rgba(0,0,0,.1)
|
||||
}
|
||||
|
||||
.course-card .np-card-image{
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.card-bottom-details{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 0.875em;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* CAROUSEL BUTTON STYLES */
|
||||
.carousel-buttons-container{
|
||||
/* align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.next-carousel-button,
|
||||
.previous-carousel-button{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.next-carousel-button{
|
||||
margin-left: 39px;
|
||||
}
|
||||
|
||||
.next-carousel-button:hover,
|
||||
.previous-carousel-button:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fa-arrow-left,
|
||||
.fa-arrow-right{
|
||||
font-size: 24px;
|
||||
} */
|
||||
|
||||
/* EVENT CARDS */
|
||||
.event-card{
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.event-card{
|
||||
padding: 0 0 64px 32px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* FILTER STYLES */
|
||||
.np-filter{
|
||||
justify-content: center;
|
||||
margin-bottom: 0;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.filter-buttons-container{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.product-filter-dropdown,
|
||||
.category-filter-dropdown{
|
||||
background-color: #fefefe;
|
||||
border: 1px solid #ce9dc7;
|
||||
border-radius: 30px;
|
||||
font-weight: 700;
|
||||
height: 60px;
|
||||
line-height: 1;
|
||||
padding-top: 12px;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.np-filter{
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* HERO STYLING */
|
||||
@media screen and (min-width: 768px){
|
||||
.np-homepage-hero{
|
||||
margin: 0 -24px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-training-events np-subpage-container np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-10">
|
||||
<div class="np-resource-title">
|
||||
{% t .title %}
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .subtitle %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-2">
|
||||
{% include "training_events_filter" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "training_events_index" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
Reference in New Issue
Block a user