Papa and Walmart Notes. Anthology and HackerRank templates.

This commit is contained in:
Norm Rasmussen
2023-10-27 17:41:59 -04:00
parent 26a7ac654c
commit 728dc962cc
70 changed files with 2085 additions and 618 deletions

View File

@ -1,5 +1,6 @@
{% if course.properties.product_names_for_course_cards == 'Anthology Reach' %} {% if course.properties.product_names_for_course_cards == 'Anthology Reach' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Reach.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Reach.svg' %}
{% assign product_alt = 'Anthology Reach' %}
{% assign color_main = '#F06A32' %} {% assign color_main = '#F06A32' %}
{% assign color_dark = '#731013' %} {% assign color_dark = '#731013' %}
{% assign color_light = '#F58545' %} {% assign color_light = '#F58545' %}
@ -10,41 +11,49 @@
{% assign color_light = '#F58545' %} {% assign color_light = '#F58545' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Engage' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Engage' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Engage.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Engage.svg' %}
{% assign product_alt = 'Anthology Engage' %}
{% assign color_main = '#F06A32' %} {% assign color_main = '#F06A32' %}
{% assign color_dark = '#F16423' %} {% assign color_dark = '#F16423' %}
{% assign color_light = '#F3798A' %} {% assign color_light = '#F3798A' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Beacon' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Beacon' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Beacon.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Beacon.svg' %}
{% assign product_alt = 'Anthology Beacon' %}
{% assign color_main = '#F06A32' %} {% assign color_main = '#F06A32' %}
{% assign color_dark = '#D94827' %} {% assign color_dark = '#D94827' %}
{% assign color_light = '#F16423' %} {% assign color_light = '#F16423' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Milestone' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Milestone' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Milestone.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Milestone.svg' %}
{% assign product_alt = 'Anthology Milestone' %}
{% assign color_main = '#F06A32' %} {% assign color_main = '#F06A32' %}
{% assign color_dark = '#F3798A' %} {% assign color_dark = '#F3798A' %}
{% assign color_light = '#F9B5B5' %} {% assign color_light = '#F9B5B5' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Occupation Insight' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Occupation Insight' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Occupation+Insight.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Occupation+Insight.svg' %}
{% assign product_alt = 'Anthology Occupation Insight' %}
{% assign color_main = '#F06A32' %} {% assign color_main = '#F06A32' %}
{% assign color_dark = '#F58545' %} {% assign color_dark = '#F58545' %}
{% assign color_light = '#F9B5B5' %} {% assign color_light = '#F9B5B5' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Raise' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Raise' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Raise.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Raise.svg' %}
{% assign product_alt = 'Anthology Raise' %}
{% assign color_main = '#F06A32' %} {% assign color_main = '#F06A32' %}
{% assign color_dark = '#D94827' %} {% assign color_dark = '#D94827' %}
{% assign color_light = '#F9B5B5' %} {% assign color_light = '#F9B5B5' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Digital Assistant' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Digital Assistant' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Digital+Assistant.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Digital+Assistant.svg' %}
{% assign product_alt = 'Anthology Digital Assistant' %}
{% assign color_main = '#F06A32' %} {% assign color_main = '#F06A32' %}
{% assign color_dark = '#D94827' %} {% assign color_dark = '#D94827' %}
{% assign color_light = '#F58545' %} {% assign color_light = '#F58545' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Baseline' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Baseline' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Baseline.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Baseline.svg' %}
{% assign product_alt = 'Anthology Baseline' %}
{% assign color_main = '#F06A32' %} {% assign color_main = '#F06A32' %}
{% assign color_dark = '#731013' %} {% assign color_dark = '#731013' %}
{% assign color_light = '#D94827' %} {% assign color_light = '#D94827' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Encompass' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Encompass' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Encompass.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Encompass.svg' %}
{% assign product_alt = 'Anthology Encompass' %}
{% assign color_main = '#F06A32' %} {% assign color_main = '#F06A32' %}
{% assign color_dark = '#731013' %} {% assign color_dark = '#731013' %}
{% assign color_light = '#F3798A' %} {% assign color_light = '#F3798A' %}
@ -55,6 +64,7 @@
{% assign color_light = '#F3798A' %} {% assign color_light = '#F3798A' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Student' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Student' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Student.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Student.svg' %}
{% assign product_alt = 'Anthology Student' %}
{% assign color_main = '#82C342' %} {% assign color_main = '#82C342' %}
{% assign color_dark = '#96CA51' %} {% assign color_dark = '#96CA51' %}
{% assign color_light = '#F3E588' %} {% assign color_light = '#F3E588' %}
@ -65,36 +75,43 @@
{% assign color_light = '#F3E588' %} {% assign color_light = '#F3E588' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Insight' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Insight' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Insight.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Insight.svg' %}
{% assign product_alt = 'Anthology Insight' %}
{% assign color_main = '#82C342' %} {% assign color_main = '#82C342' %}
{% assign color_dark = '#286734' %} {% assign color_dark = '#286734' %}
{% assign color_light = '#82C342' %} {% assign color_light = '#82C342' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Finance & HCM' %} {% 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_logo = 'https://cdn.northpass.io/anthology/Finance+%26+HCM.svg' %}
{% assign product_alt = 'Anthology Finance & HCM' %}
{% assign color_main = '#82C342' %} {% assign color_main = '#82C342' %}
{% assign color_dark = '#539542' %} {% assign color_dark = '#539542' %}
{% assign color_light = '#C9BD2E' %} {% assign color_light = '#C9BD2E' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Payroll' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Payroll' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Payroll.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Payroll.svg' %}
{% assign product_alt = 'Anthology Payroll' %}
{% assign color_main = '#82C342' %} {% assign color_main = '#82C342' %}
{% assign color_dark = '#000000' %} {% assign color_dark = '#000000' %}
{% assign color_light = '#82C342' %} {% assign color_light = '#82C342' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Academic Economics' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Academic Economics' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Academic+Economics.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Academic+Economics.svg' %}
{% assign product_alt = 'Anthology Academic Economics' %}
{% assign color_main = '#82C342' %} {% assign color_main = '#82C342' %}
{% assign color_dark = '#000000' %} {% assign color_dark = '#000000' %}
{% assign color_light = '#286734' %} {% assign color_light = '#286734' %}
{% elsif course.properties.product_names_for_course_cards == 'Blackboard Learn' %} {% elsif course.properties.product_names_for_course_cards == 'Blackboard Learn' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/BBLearn.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/BBLearn.svg' %}
{% assign product_alt = 'Blackboard Learn' %}
{% assign color_main = '#1BA8E1' %} {% assign color_main = '#1BA8E1' %}
{% assign color_dark = '#027BB6' %} {% assign color_dark = '#027BB6' %}
{% assign color_light = '#1BA8E1' %} {% assign color_light = '#1BA8E1' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Ally' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Ally' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Ally.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Ally.svg' %}
{% assign product_alt = 'Anthology Ally' %}
{% assign color_main = '#1BA8E1' %} {% assign color_main = '#1BA8E1' %}
{% assign color_dark = '#1BA8E1' %} {% assign color_dark = '#1BA8E1' %}
{% assign color_light = '#A3DBDC' %} {% assign color_light = '#A3DBDC' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Course Evaluations' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Course Evaluations' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Course+Evaluations.svg' %} {% 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_main = '#1BA8E1' %}
{% assign color_dark = '#004C6D' %} {% assign color_dark = '#004C6D' %}
{% assign color_light = '#027BB6' %} {% assign color_light = '#027BB6' %}
@ -106,21 +123,25 @@
{% assign color_light = '#A3DBDC' %} {% assign color_light = '#A3DBDC' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Portfolio' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Portfolio' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Portfolio.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Portfolio.svg' %}
{% assign product_alt = 'Anthology Portfolio' %}
{% assign color_main = '#1BA8E1' %} {% assign color_main = '#1BA8E1' %}
{% assign color_dark = '#0090A1' %} {% assign color_dark = '#0090A1' %}
{% assign color_light = '#5CC6CC' %} {% assign color_light = '#5CC6CC' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Program Review' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Program Review' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Program+Review.svg' %} {% 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_main = '#1BA8E1' %}
{% assign color_dark = '#027BB6' %} {% assign color_dark = '#027BB6' %}
{% assign color_light = '#5CC6CC' %} {% assign color_light = '#5CC6CC' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Planning' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Planning' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Planning.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Planning.svg' %}
{% assign product_alt = 'Anthology Planning' %}
{% assign color_main = '#1BA8E1' %} {% assign color_main = '#1BA8E1' %}
{% assign color_dark = '#000000' %} {% assign color_dark = '#000000' %}
{% assign color_light = '#004C6D' %} {% assign color_light = '#004C6D' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Accreditation' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Accreditation' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Accreditation.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Accreditation.svg' %}
{% assign product_alt = 'Anthology Accreditation' %}
{% assign color_main = '#1BA8E1' %} {% assign color_main = '#1BA8E1' %}
{% assign color_dark = '#0090A1' %} {% assign color_dark = '#0090A1' %}
{% assign color_light = '#1BA8E1' %} {% assign color_light = '#1BA8E1' %}
@ -170,13 +191,13 @@
{% endunless %} {%- endcomment -%} {% endunless %} {%- endcomment -%}
<div class="np-progress-bar-container" style="background: {{ color_light }}"> <div class="np-progress-bar-container" style="background: {{ color_light }}">
<div <div
style="width: {{ course.progress }}%; background: {{ color_dark }}" style="width: 75%; background: {{ color_dark }}"
class="np-button-background-color np-card-progress-bar course-card-progress-bar"> class="np-button-background-color np-card-progress-bar course-card-progress-bar">
</div> </div>
</div> </div>
<div class="card-product-banner"> <div class="card-product-banner">
{% if product_logo != 'blank' %} {% if product_logo != 'blank' %}
<img src='{{ product_logo }}' class="product-logo"/> <img src='{{ product_logo }}' alt='{{ product_alt }}' class="product-logo"/>
{% else %} {% else %}
Anthology Anthology
{% endif %} {% endif %}
@ -231,7 +252,7 @@
</div> </div>
</div> </div>
<div> <div>
{{course.properties.course_duration}} left {%- comment -%} {{course.properties.course_duration}} left {%- endcomment -%}
</div> </div>
</div> </div>
{% else %} {% else %}
@ -239,21 +260,31 @@
{% t shared.progress, count: course.progress %} {% t shared.progress, count: course.progress %}
</div> {%- endcomment -%} </div> {%- endcomment -%}
<div style="padding-left: 15px"> <div style="padding-left: 15px">
{{course.properties.course_duration}} duration {%- comment -%} {{course.properties.course_duration}} duration {%- endcomment -%}
</div> </div>
{% endif %} {% endif %}
<a class="np-button np-button-wide course-card-button" href="{{ course_path }}"> <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 %} {% if course.progress > 0 and course.progress < 100 %}
Continue Continue
{% else %} {% else %}
View View
{% endif %} {% endif %}
{%- comment -%} {% t shared.view %} {%- endcomment -%}
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<style> <style>
.card-product-banner{ .card-product-banner{
align-items: center; align-items: center;
@ -261,6 +292,7 @@
box-shadow: 0 3px 30px rgba(0,0,0,.1); box-shadow: 0 3px 30px rgba(0,0,0,.1);
display: flex; display: flex;
height: 32px; height: 32px;
overflow: hidden;
padding: 6px 8px; padding: 6px 8px;
width: 100%; width: 100%;
} }
@ -270,7 +302,8 @@
} }
.card-image-replacement{ .card-image-replacement{
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(225,235,243,1) 60%); /* 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; height: 12rem;
width: 100%; width: 100%;
} }
@ -289,6 +322,7 @@
.course-card-info{ .course-card-info{
height: calc(100% - 38px); height: calc(100% - 38px);
justify-content: center;
position: absolute; position: absolute;
top: 0; top: 0;
} }
@ -297,7 +331,7 @@
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
line-height: 25px; line-height: 25px;
margin-top: 32px !important; margin-top: 8px !important;
} }
.course-card-button{ .course-card-button{
@ -309,6 +343,10 @@
width: 30%; width: 30%;
} }
.course-card-button:focus{
border: 2px solid blue;
}
.np-progress-bar-container, .np-progress-bar-container,
.np-card-progress-bar{ .np-card-progress-bar{
border-radius: 0; border-radius: 0;

View File

@ -241,12 +241,14 @@
<style> <style>
.course-image-replacement{ .course-image-replacement{
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(225,235,243,1) 60%); /* 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%);
} }
.course-cover-title{ .course-cover-title{
font-size: 2rem; font-size: 2em;
line-height: 50px; line-height: 45px;
margin-bottom: 20px;
} }
.course-cover-info{ .course-cover-info{

View File

@ -7,7 +7,7 @@
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}"> <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> <i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
</a> </a>
Back <span class="desktop-back-label">Back</span>
</div> </div>
{%- comment -%} <img {%- comment -%} <img
src="{{ course.image_url }}" src="{{ course.image_url }}"
@ -15,15 +15,16 @@
alt="{{ course.name }}" alt="{{ course.name }}"
/> {%- endcomment -%} /> {%- endcomment -%}
{%- comment -%} <div class="card-product-banner">
<div class="product-banner np-hidden-desktop">
{% if product_logo != 'blank' %} {% if product_logo != 'blank' %}
<img src='{{ product_logo }}' class="product-logo"/> <img src='{{ product_logo }}' class="product-logo" style="height: 36px;"/>
{% else %} {% else %}
Anthology Anthology
{% endif %} {% endif %}
</div> {%- endcomment -%} </div>
{%- comment -%} <div class="np-top-image np-top-image-spacing course-image-replacement" style="border-radius: 0; margin-top: -32px;"> {%- comment -%} <div class="course-image-replacement np-hidden-desktop" style="border-radius: 0;"> {%- endcomment -%}
<div class="course-cover-info"> <div class="course-cover-info np-hidden-desktop">
<div class="np-flex-1"> <div class="np-flex-1">
<h3 class="course-cover-title"> <h3 class="course-cover-title">
{{ course.name }} {{ course.name }}
@ -43,4 +44,25 @@
{% if course.has_to_restart? %} {% if course.has_to_restart? %}
{% include "course_version_outdated_popup", path: course_path %} {% include "course_version_outdated_popup", path: course_path %}
{% endif %} {% endif %}
</div> {%- endcomment -%} </div>
<style>
.desktop-back-label{
font-size: 16px;
}
@media screen and (max-width: 767px){
.desktop-back-label{
display: none;
}
.course-cover-info{
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(225,235,243,1) 60%);
}
.np-flex-1{
padding-left: 25px;
}
}
</style>

View File

@ -1,4 +1,4 @@
{% assign shell_redirect_url = course.properties.external_course_url %} {% assign external_course_url = course.properties.external_course_url %}
<div class="np-top-cta-progress-content"> <div class="np-top-cta-progress-content">
<div class="np-top-cta-progress-title np-text-title"> <div class="np-top-cta-progress-title np-text-title">
@ -18,13 +18,19 @@
</div> </div>
</div> </div>
{% if shell_redirect_url %} {% if external_course_url != '' %}
<a <a
class="np-top-button np-button-font-color np-button np-button-big" class="np-top-button np-button-font-color np-button np-button-big"
href="http://{{shell_redirect_url}}" href="{{external_course_url}}"
target="_blank" target="_blank"
> >
View Course {% if 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> </a>
{% else %} {% else %}
{% if course.learner_can_retake? %} {% if course.learner_can_retake? %}

View File

@ -5,7 +5,7 @@
<div class="np-catalog-courses row row-with-thumbnails"> <div class="np-catalog-courses row row-with-thumbnails">
{% for course in courses.enrolled %} {% for course in courses.enrolled %}
{% unless course.progress > 0 %} {% 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}}"> <div class="col-xs-12 col-sm-6 col-lg-3 np-stretch-content course-card-wrapper" data-product="{{ course.properties.product_names_for_course_cards}}">
{%- comment -%} {% include "cards_course" with course, flag: 'catalog' %} {%- endcomment -%} {%- comment -%} {% include "cards_course" with course, flag: 'catalog' %} {%- endcomment -%}
{% include "cards_course" with course, flag: 'null' %} {% include "cards_course" with course, flag: 'null' %}
</div> </div>

View File

@ -5,7 +5,7 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% if totalCountCompleted > 3 %} {%- comment -%} {% if totalCountCompleted > 3 %}
<div class="carousel-buttons-container"> <div class="carousel-buttons-container">
<div class="np-dashboard-resources-title"> <div class="np-dashboard-resources-title">
Completed Completed
@ -20,7 +20,7 @@
</div> </div>
</div> </div>
{% else %} {% else %}
{% endif %} {% endif %} {%- endcomment -%}
<div class="np-dashboard-resources-title"> <div class="np-dashboard-resources-title">
Completed Completed
</div> </div>
@ -39,7 +39,7 @@
{% endif %}> {% endif %}>
{% for course in courses.enrolled %} {% for course in courses.enrolled %}
{% if course.progress == 100 %} {% 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}}"> <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_names_for_course_cards}}">
{% include "cards_course" with course, flag:'completed' %} {% include "cards_course" with course, flag:'completed' %}
</div> </div>
{% endif %} {% endif %}
@ -53,7 +53,7 @@
style="padding: 0;"> style="padding: 0;">
{% for course in courses.enrolled %} {% for course in courses.enrolled %}
{% if course.progress == 100 %} {% 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}}"> <div class="course-card-wrapper col-xs-12 col-sm-6 col-md-4" style="padding: 0" data-product="{{ course.properties.product_names_for_course_cards}}">
{% if outerClass == "dashboard-courses-index" %} {% if outerClass == "dashboard-courses-index" %}
{% include "cards_course" with course, flag: 'dashboard' %} {% include "cards_course" with course, flag: 'dashboard' %}
{% else %} {% else %}

View File

@ -21,9 +21,9 @@
</div> </div>
{% else %} {% else %}
{% endif %} {%- endcomment -%} {% endif %} {%- endcomment -%}
<div class="np-dashboard-resources-title"> {%- comment -%} <div class="np-dashboard-resources-title">
In Progress In Progress
</div> </div> {%- endcomment -%}
{%- comment -%} <div class="row row-with-thumbnails courses-in-prog-carousel {%- comment -%} <div class="row row-with-thumbnails courses-in-prog-carousel
{% if outerClass %} {% if outerClass %}
@ -39,7 +39,7 @@
{% endif %}> {% endif %}>
{% for course in courses.enrolled %} {% for course in courses.enrolled %}
{% if course.progress > 0 and course.progress < 100 %} {% 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}}"> <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_names_for_course_cards}}">
{% include "cards_course" with course, flag: 'inProg' %} {% include "cards_course" with course, flag: 'inProg' %}
</div> </div>
{% endif %} {% endif %}
@ -53,7 +53,7 @@
style="padding: 0;"> style="padding: 0;">
{% for course in courses.enrolled %} {% for course in courses.enrolled %}
{% if course.progress > 0 and course.progress < 100 %} {% 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}}"> <div class="course-card-wrapper col-xs-12 col-sm-6 col-md-4" style="padding: 0" data-product="{{ course.properties.product_names_for_course_cards}}">
{% if outerClass == "dashboard-courses-index" %} {% if outerClass == "dashboard-courses-index" %}
{% include "cards_course" with course, flag: 'dashboard' %} {% include "cards_course" with course, flag: 'dashboard' %}
{% else %} {% else %}

View File

@ -1,4 +1,4 @@
<div class="np-filter"> <div class="np-filter" tabindex="0">
<div class="dropdown"> <div class="dropdown">
<select <select
class="category-filter-dropdown np-input" class="category-filter-dropdown np-input"

View File

@ -7,7 +7,7 @@
id="product-filter-dropdown" id="product-filter-dropdown"
onchange="filterByProduct()" onchange="filterByProduct()"
> >
<option class="product-filter-entry" value="Default" selected>All Products</option> <option class="product-filter-entry" value="Default" selected>Product</option>
</select> </select>
</div> </div>
</div> </div>
@ -19,16 +19,20 @@
{% for course in courses.enrolled %} {% for course in courses.enrolled %}
{% if course.progress == 0 or course.properties.most_popular == true %} {% if course.progress == 0 or course.properties.most_popular == true %}
if(!allProductTypesHome.includes('{{ course.properties.product_type }}')){ if('{{ course.properties.product_names_for_course_cards }}' != 'Anthology [Catch-all]'){
allProductTypesHome.push("{{ course.properties.product_type }}"); if(!allProductTypesHome.includes('{{ course.properties.product_names_for_course_cards }}')){
allProductTypesHome.push("{{ course.properties.product_names_for_course_cards }}");
}
} }
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% for course in courses.enrolled %} {% for course in courses.enrolled %}
{% unless course.progress == 0 %} {% unless course.progress == 0 %}
if(!allProductTypesDash.includes('{{ course.properties.product_type }}')){ if('{{ course.properties.product_names_for_course_cards }}' != 'Anthology [Catch-all]'){
allProductTypesDash.push("{{ course.properties.product_type }}"); if(!allProductTypesDash.includes('{{ course.properties.product_names_for_course_cards }}')){
allProductTypesDash.push("{{ course.properties.product_names_for_course_cards }}");
}
} }
{% endunless %} {% endunless %}
{% endfor %} {% endfor %}
@ -36,16 +40,17 @@
allProductTypesHome = allProductTypesHome.sort(); allProductTypesHome = allProductTypesHome.sort();
allProductTypesDash = allProductTypesDash.sort(); allProductTypesDash = allProductTypesDash.sort();
{% if page == 'Homepage' %} {% if page == 'Homepage' or page == 'Search' %}
if(allProductTypesHome.length > 1){ if(allProductTypesHome.length > 1){
allProductTypesHome.map((product) => { allProductTypesHome.map((product) => {
if(product != 'Anthology-Default'){ if(product != 'Anthology-Default'){
if(product.indexOf('&amp;') > -1){ if(product.indexOf('&amp;') > -1){
product = product.replace('&amp;', '&'); product = product.replaceAll('&amp;', '&');
} }
let productOption = document.createElement('option'); let productOption = document.createElement('option');
productOption.classList.add('product-filter-entry'); productOption.classList.add('product-filter-entry');
productOption.setAttribute('value', product); productOption.setAttribute('value', product);
//productionOption.setAttribute('href', `/search/23777883-6b85-449d-8d25-2e548c6e9ecc?q=${product}`);
productOption.innerHTML = `${product}`; productOption.innerHTML = `${product}`;
productFilterEl.appendChild(productOption); productFilterEl.appendChild(productOption);
} }
@ -55,32 +60,48 @@
} }
let filterByProduct = () => { let filterByProduct = () => {
let allLearning = document.querySelector('.np-catalog-courses').children; let filter = event.target.value.toLowerCase();
let popular = document.querySelector('.popular-courses').children; filter = filter.replaceAll(' ', '+');
filter = filter.replaceAll('&amp;', '%26');
console.log(filter);
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++){ window.location.assign(`https://newacademy.anthology.com/app/search/23777883-6b85-449d-8d25-2e548c6e9ecc?q=${filter}`);
if(event.target.value == 'Default'){
popular[i].style.display = 'block'; //let allLearning = document.querySelector('.np-catalog-courses').children;
} else {
if(popular[i].dataset.product != event.target.value){ //for(let i = 0; i < allLearning.length; i++){
popular[i].style.display = 'none'; // if(event.target.value == 'Default'){
} else {
popular[i].style.display = 'block'; // if(!allLearning[i].classList.contains('hidden-by-search')){
}; // allLearning[i].style.display = 'block';
}; // }
}; // allLearning[i].classList.remove('filtered')
// } else {
// if(allLearning[i].dataset.product != event.target.value){
// allLearning[i].style.display = 'none';
// allLearning[i].classList.add('filtered');
// } else {
// if(!allLearning[i].classList.contains('hidden-by-search')){
// allLearning[i].style.display = 'block';
// }
// allLearning[i].classList.remove('filtered');
// };
// };
//};
//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' %} {% elsif page == 'Dashboard' %}
if(allProductTypesDash.length > 1){ if(allProductTypesDash.length > 1){
@ -99,6 +120,7 @@
}) })
} else { } else {
productFilterEl.style.display = 'none'; productFilterEl.style.display = 'none';
document.querySelector('.view-swapper-container').style.marginBottom = '0';
} }
let filterByProduct = () => { let filterByProduct = () => {
@ -109,6 +131,7 @@
if(event.target.value == 'Default'){ if(event.target.value == 'Default'){
inProgressCourses[i].style.display = 'block'; inProgressCourses[i].style.display = 'block';
} else { } else {
//console.log(event.target.value)
//console.log(inProgressCourses[i].dataset.product) //console.log(inProgressCourses[i].dataset.product)
if(inProgressCourses[i].dataset.product != event.target.value){ if(inProgressCourses[i].dataset.product != event.target.value){
inProgressCourses[i].style.display = 'none'; inProgressCourses[i].style.display = 'none';
@ -133,3 +156,9 @@
} }
{% endif %} {% endif %}
</script> </script>
<style>
.filtered{
display: none !important;
}
</style>

View File

@ -0,0 +1,100 @@
<footer class="np-footer">
<div class="np-footer-top">
{% if website_footer.show_navigation_links? %}
<div class="np-footer-navigation">
<ul class="np-footer-navigation-list">
{% for website_navigation in navigations.footer_navigations %}
{% unless website_navigation.name == 'Learning Paths' %}
<li class="np-footer-navigation-item">
<a
class="np-footer-navigation-link np-button-color"
href="{{ website_navigation.path }}"
{% if website_navigation.external? %} target="_blank" {% endif %}
>
{{ website_navigation.name }}
</a>
</li>
{% endunless %}
{% endfor %}
{%- comment -%} <li class="np-footer-navigation-item">
<a
type="button"
class="np-footer-navigation-link np-button-color info-form-trigger"
data-toggle-class-on-target
data-toggle-target="#dialog_Q6szN"
data-toggle-escape
data-toggle-modal>
toggle
</a>
</li> {%- endcomment -%}
<li class="np-footer-navigation-item">
<a
class="np-footer-navigation-link np-button-color"
href="https://baseline.campuslabs.com/htu/beta"
target="_blank"
>
Tell Us What You Think!
</a>
</li>
</ul>
</div>
{% endif %}
{% if current_school.logo_url %}
<h2 class="np-footer-logo">
<a href="{% route home %}">
<img
alt="{{ current_school.name }}"
class="np-footer-logo-image"
src="{{ current_school.logo_url }}"
/>
</a>
</h2>
{% else %}
<div class="np-school-name np-header-font-color">
{{ current_school.name }}
</div>
{% endif %}
</div>
<div class="np-footer-bottom">
<nav class="np-footer-social-links">
{% if website_footer.show_social_media_links? %}
<ul class="np-footer-social-links-list">
{% for social_media_link in website_footer.social_media_links %}
<li class="np-footer-social-links-item">
<a
class="np-footer-social-links-link np-button-color"
href="{{ social_media_link.link }}"
target="_blank" title="{{ social_media_link.name }}"
>
<i class="np-footer-social-links-icon
np-button-color
fab fa-{{ social_media_link.name }}"
></i>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</nav>
{% if website_footer.show_customer_service_email? and
website_footer.school_customer_service_email
%}
<div class="np-footer-support">
<div class="np-footer-support-item np-footer-support-help">
{% t .need_help %}
</div>
<div class="np-footer-support-item np-footer-support-email">
{% t .email %}
</div>
<a
class="np-footer-support-item np-footer-support-link np-button-color"
href="mailto:{{ website_footer.school_customer_service_email }}"
>
{{ website_footer.school_customer_service_email }}
</a>
</div>
{% endif %}
</div>
</footer>

View File

@ -1,3 +1,49 @@
{% if current_person.signed_in? == false %}
<script>
if (localStorage.getItem('learnerCompletedAdditionalInfo') == null) {
if(localStorage.getItem('registered') == null){
window.location.href = '/learners/sign_in'
} else {
if(localStorage.getItem('learnerCompletedAdditionalInfo') == true){
window.location.href = '/app/dashboard'
} else {
window.location.href = '/app/sign-up-follow-up'
}
}
//setTimeout(() => {
//}, 500)
}
</script>
{% else %}
{% if current_person.properties.learner_completed_additional_info == false %}
{% unless current_person.email contains '+preview-' %}
<script>
if (localStorage.getItem('learnerCompletedAdditionalInfo') == null || localStorage.getItem('learnerCompletedAdditionalInfo') == false) {
window.location.href = '/app/sign-up-follow-up'
}
</script>
{% endunless %}
{% else %}
<script>
localStorage.removeItem('registered');
localStorage.removeItem('learnerCompletedAdditionalInfo')
</script>
{% endif %}
{% endif %}
{%- comment -%} {% if current_person.signed_in? == true and current_person.properties.learner_completed_additional_info == false %}
{% unless current_person.email contains '+preview-' %}
<script>
if (localStorage.getItem('learnerCompletedAdditionalInfo') == null || localStorage.getItem('learnerCompletedAdditionalInfo') == false) {
window.location.href = '/app/sign-up-follow-up'
} else {
window.location.href = '/app/dashboard'
}
</script>
{% endunless %}
{% endif %} {%- endcomment -%}
{%- comment -%} Desktop Header {%- endcomment -%} {%- comment -%} Desktop Header {%- endcomment -%}
<header class="np-header np-header-color"> <header class="np-header np-header-color">
<div class="np-header-content"> <div class="np-header-content">
@ -86,8 +132,14 @@
</form> </form>
</div> {%- endcomment -%} </div> {%- endcomment -%}
{%- comment -%} Desktop Profile Button {%- endcomment -%} {%- comment -%} Desktop Profile Button {%- endcomment -%}
<div class="np-hidden-mobile np-header-avatar"> <div class="np-hidden-mobile np-header-avatar">
<a class="header-survey-link" href="https://baseline.campuslabs.com/htu/beta" target="_blank">
Tell Us What You Think!
</a>
<button <button
class="np-header-avatar-button desktop-avatar-button" class="np-header-avatar-button desktop-avatar-button"
data-test="open-desktop-menu" data-test="open-desktop-menu"
@ -184,6 +236,12 @@
{{ website_navigation.name }} {{ website_navigation.name }}
</a> </a>
{% endfor %} {% endfor %}
<a
href="https://baseline.campuslabs.com/htu/beta" target="_blank"
class="np-header-mobile-menu-content-button"
>
Survey
</a>
<div class="np-header-mobile-menu-content-line"></div> <div class="np-header-mobile-menu-content-line"></div>
{% unless current_school.sso_active? %} {% unless current_school.sso_active? %}
<a <a
@ -204,3 +262,35 @@
</div> </div>
{% include "messages" %} {% include "messages" %}
<script>
let nameAdjuster = () => {
let allCardNames = document.querySelectorAll('.course-card-title');
for(let i = 0; i < allCardNames.length; i++){
let base = allCardNames[i].textContent.slice(0, 95);
if(base.length > 94){
allCardNames[i].textContent = base.trim() + '...'
}
}
}
$( document ).ready(function() {
nameAdjuster();
});
</script>
<style>
@media screen and (min-width: 678px){
.header-survey-link{
color: #000;
cursor: pointer;
font-size: 16px;
font-weight: 400;
line-height: 25px;
padding-right: 15px;
text-decoration: none;
}
}
</style>

View File

@ -2,9 +2,9 @@
Most Popular Most Popular
</div> </div>
<div class="row row-with-thumbnails popular-courses" style="margin: 0; margin-left: -10px; padding: 5px;"}> <div class="row row-with-thumbnails popular-courses" style="margin: 0; margin-left: -10px; padding: 5px;"}>
{% for course in courses.in_catalog %} {% for course in courses.enrolled %}
{% if course.properties.most_popular == true %} {% 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 }}"> <div class="col-xs-12 col-sm-6 col-lg-3 np-stretch-content course-card-wrapper" data-product="{{ course.properties.product_names_for_course_cards }}">
{% include "cards_course" with course, flag: 'null' %} {% include "cards_course" with course, flag: 'null' %}
</div> </div>
{% endif %} {% endif %}

View File

@ -0,0 +1,503 @@
<div class="info-form" id="dialog_Q6szN">
<section class="info-form-container">
<div class="info-form-content">
<div class="modal-intro">
<div class="header">Tell Us More!</div>
<p>Providing more information about yourself can unlock more relevent content</p>
</div>
{%- comment -%} <div class="input-wrapper">
<label for="learner-name">Name</label>
<input type="text" name="learner-name" value="" />
</div>
<div class="input-wrapper">
<label for="learner-email">Email Address</label>
<input type="text" name="learner-email" value="" />
</div> {%- endcomment -%}
<div class="input-wrapper">
<label for="learner-title">Title</label>
<input type="text" name="learner-title" value="" />
</div>
<div class="input-wrapper">
<label for="role"><span class="required">*</span>What brought you to Anthology Academy?</label>
<select name="primary-role">
<option value="" selected>Select</option>
<option value="Product Expert">Id like to become an expert user of my Anthology product(s).</option>
<option value="Product Implementation">I am implementing a new Anthology product.</option>
{%- comment -%} <option value="Parent">Parent</option> {%- endcomment -%}
<option value="Professional Development">Im seeking professional development for higher ed faculty and staff.</option>
<option value="Reference">I was directed to this site by someone on my campus.</option>
<option value="Blackboard Learner">I am a Blackboard Academy user and am here to explore.</option>
<option value="Anthology Academy User">I am an Anthology Academy user, ready to check out the new site.</option>
<option value="Other">Other</option>
</select>
<div class="input-wrapper" style="display:none;" id="primaryRoleOther">
<label for="primary-role-other">If other, please specify</label>
<input type="text" name="primary-role-other" value="" />
</div>
</div>
<div class="input-wrapper">
<input type="checkbox" id="privacy" name="privacy" value="yes">
<label class="checkbox" for="privacy">Please confirm that you have read and agree to Anthology's <a href="{{current_school.terms_of_service_url}}" target="_blank">Terms of Service.</a></label>
</div>
<div class="input-wrapper">
<input type="checkbox" id="consent" name="consent" value="yes">
<label class="checkbox" for="consent">Please confirm that you have read and agree to Anthology's <a href="https://www.anthology.com/trust-center/privacy-statement" target="_blank">Privacy Policy.</a></label>
</div>
<button class="np-button disabled" id="updateInfoBtn">Update</button>
</div>
</section>
</div>
<script>
let unlockButton = () => {
let privacyCheckboxField = $("input[name='privacy']");
let consentCheckboxField = $("input[name='consent']");
if(privacyCheckboxField[0].checked && consentCheckboxField[0].checked){
$("#updateInfoBtn").removeClass('disabled');
} else {
$("#updateInfoBtn").addClass('disabled');
}
}
$("input[name='privacy']").change(function(){
unlockButton();
})
$("input[name='consent']").change(function(){
unlockButton();
})
$("#updateInfoBtn").click(function(e) {
e.preventDefault()
validateForm()
})
$("select[name='primary-role']").change(function() {
if ($(this).val() == "Other") {
$("#primaryRoleOther").show()
} else {
$("#primaryRoleOther").hide()
$("#primaryRoleOther").find("input").val('')
}
})
function validateForm() {
let allDataValidated = false;
//Final user data
let userData = {
learner_uuid: '{{current_person.id}}',
learner_name: '{{current_person.first_name}} {{current_person.last_name}}',
learner_email: '{{current_person.email}}',
learner_title: '',
primaryRole: '',
primaryRoleOther: '',
}
// get all form values
//let learnerName = $("input[name='learner-name']").val();
//let learnerEmail = $("input[name='learner-email']").val();
let learnerTitle = $("input[name='learner-title']").val();
let primaryRoleField = $("select[name='primary-role']").val();
let primaryRoleOtherField = $("input[name='primary-role-other']").val();
let privacyCheckboxField = $("input[name='privacy']");
let consentCheckboxField = $("input[name='consent']");
//learnerName == "" ? "" : userData.learner_name = learnerName;
//learnerEmail == "" ? "" : userData.learner_email = learnerEmail;
learnerTitle == "" ? "" : userData.learner_title = learnerTitle;
primaryRoleField == "" ? "" : userData.primaryRole = primaryRoleField;
if (primaryRoleField == "Other") {
primaryRoleOtherField == "" ? "" : userData.primaryRoleOther = primaryRoleOtherField
};
privacyCheckboxField[0].checked ? userData.privacyCheckbox = true : userData.privacyCheckbox = false;
consentCheckboxField[0].checked ? userData.consentCheckbox = true : userData.consentCheckbox = false;
console.log(userData)
let formHasErrors = false
//if(!learnerName){
// $("input[name='learner-name']").addClass('err')
// formHasErrors = true
//}
//if(!learnerEmail){
// $("input[name='learner-email']").addClass('err')
// formHasErrors = true
//}
if(!learnerTitle){
$("input[name='learner-title']").addClass('err')
formHasErrors = true
}
if (!primaryRoleField) {
$("select[name='primary-role']").addClass('err')
formHasErrors = true
} else {
$("select[name='primary-role']").removeClass('err')
if (primaryRoleField == "Other") {
if (!primaryRoleOtherField) {
$("input[name='primary-role-other']").addClass('err')
formHasErrors = true
} else {
$("input[name='primary-role-other']").removeClass('err')
}
}
}
if (formHasErrors) {
console.log("has errors")
} else {
console.log("submit form info")
formHasErrors = false
submitValidatedDataToLocalStorage(userData)
submitValidatedDataToWorkato(userData)
}
}
function submitValidatedDataToLocalStorage(data) {
console.log("submitting user data to local storage")
// Save entered data as individual variables in local storage for later use
//localStorage.setItem("learnerDiocese", data.diocese);
//localStorage.setItem("learnerGuardianEmail", data.guardianEmail);
//localStorage.setItem("learnerGroups", data.northpassGroups);
//localStorage.setItem("learnerAge", data.overEighteen);
//localStorage.setItem("learnerName", data.learner_name);
//localStorage.setItem("learnerEmail", data.learner_email);
localStorage.setItem("learnerTitle", data.learner_title);
localStorage.setItem("learnerPrimaryRole", data.primaryRole);
localStorage.setItem("learnerPrimaryRoleOther", data.primaryRoleOther);
//localStorage.setItem("learnerSecondaryRoles", data.secondaryRoles);
//localStorage.setItem("learnerStudentsTaughtCount", data.studentsTaughtCount);
//localStorage.setItem("learnerWorkplace", data.workplace);
// Set isValidated value in local storage to true
localStorage.setItem("learnerCompletedAdditionalInfo", "true");
}
function submitValidatedDataToWorkato(data) {
console.log("submitting user data to Workato")
console.log(data);
//const secondaryInfoStored = localStorage.getItem("learnerCompletedAdditionalInfo")
$('#updateInfoBtn').prop("disabled",true);
$('#updateInfoBtn').addClass('submitting')
$('.loader').show()
$('#updateInfoBtn span').text('Completing Registration')
$.ajax({
url: "https://webhooks.workato.com/webhooks/rest/604b4fc0-fcd9-4f3b-b715-b42d7f740ba6/additional-info-form-submitted",
data: JSON.stringify(data),
method: 'POST',
success: function(res){
console.log(res)
window.location.replace('/app/dashboard');
},
error: function (xhr, status, error) {
//console.error("Error posting to workato!");
//if (secondaryInfoStored == "true") {
//console.log("secondary information completed and stored in local storage")
//setTimeout(function() {
// document.querySelector(".info-form-trigger").click()
//}, 1000)
//}
}
});
}
</script>
<style>
.info-form {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 900;
display: flex;
padding: 1em;
/*background-color: rgba(0,0,0,.75);
pointer-events: none; */
transition: .25s ease-out;
overflow: scroll;
max-width: 900px;
margin: auto;
}
.disabled{
background: #808080;
pointer-events: none;
}
.disabled:hover{
background: #808080;
}
.err {
border: 2px solid red!important;
}
.radio-err {
outline: 2px solid red;
}
.info-form-trigger {
color: #015893;
opacity:0;
}
.info-form-trigger:hover,
.info-form-trigger:focus {
text-decoration: none;
}
.info-form.is-active {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.info-form-container {
width: 100%;
margin: auto;
transform: translateY(-1em) scale(.95);
background-color: white;
transition: transform .25s ease-out;
}
.info-form.is-active .info-form-container {
transform: translateY(0) scale(1);
}
.info-form-header,
.info-form-content,
.info-form-footer {
padding: 16px;
}
.info-form-footer {
background-color: whitesmoke;
text-align: right;
}
.info-form-footer button {
display: inline-block;
padding: .25em .5em;
border: none;
background-color: #015893;
color: white;
}
.info-form-footer button:hover,
.info-form-footer button:focus {
background-color: white ;
color: #fff;
}
.modal-intro {
text-align:center;
margin:12px 32px 32px;
}
.modal-intro .header {
font-size:26px;
font-weight:700;
}
.info-form-content {
max-height: 90vh;
overflow: scroll;
}
.info-form-content .input-wrapper {
margin-bottom: 16px;
}
.info-form-content .input-wrapper label,
.info-form-content .input-wrapper p {
display: block;
margin-bottom: 6px;
font-size: 14px;
color:#264c6f;
font-weight: 500;
}
.info-form-content .input-wrapper label.checkbox {
display: inline;
}
.info-form-content .input-wrapper input[type='text'],
.info-form-content .input-wrapper input[type='number'],
.info-form-content .input-wrapper select {
width:100%;
background-color: hsla(0,0%,40%,.05);
border: 1px solid #264c6f;
border-radius: 6px;
padding: 14px 18px;
}
.info-form-content .input-wrapper select {
cursor:pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg fill='%23000000' height='800px' width='800px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 330 330' xml:space='preserve'%3E%3Cpath id='XMLID_225_' d='M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393 c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393 s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z'/%3E%3C/svg%3E");
background-position: 98% 50%;
background-size: 15px;
background-repeat: no-repeat;
}
.info-form-content .input-wrapper select:after {
content: "";
position: absolute;
right: 14px;
top: calc(50% - 6px);
display: inline-block;
border-right: 2px solid black;
border-bottom: 2px solid black;
width: 8px;
height: 8px;
transform: rotate(45deg) translateY(calc(-50% + 5px));
}
.info-form-content .input-wrapper select:focus {
-webkit-box-shadow: inset 0 0 0 2px #264c6f;
box-shadow: inset 0 0 0 1px #264c6f;
border-color: #264c6f;
}
#addAdditionalRole {
margin-bottom: 18px;
cursor: pointer;
font-size: 14px;
font-weight: 700;
}
fieldset {
padding:16px;
display: flex;
flex-wrap: wrap;
}
legend {
font-size: 14px;
padding: 0 8px;
}
.checkbox-wrapper {
display:flex;
align-items:center;
margin-bottom:8px;
width:50%;
}
.checkbox-wrapper label {
margin:0 0 0 8px!important;
}
.diocese-dropdown-btn {
cursor: pointer;
width: 100%;
text-align: left;
position:relative;
background-color: hsla(0,0%,40%,.05);
border: 1px solid #264c6f;
border-radius: 6px;
padding: 16px 18px;
}
.diocese-dropdown-btn:after {
content: "";
position: absolute;
right: 14px;
top: calc(50% - 6px);
display: inline-block;
border-right: 2px solid black;
border-bottom: 2px solid black;
width: 8px;
height: 8px;
transform: rotate(45deg) translateY(calc(-50% + 5px));
}
.diocese-dropdown.dropdown-open .diocese-dropdown-btn:after {
transform: rotate(-135deg) translateY(-50%);
}
/* The search field */
#dioceseInput {
box-sizing: border-box;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 490.4 490.4' style='enable-background:new 0 0 490.4 490.4;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M484.1,454.796l-110.5-110.6c29.8-36.3,47.6-82.8,47.6-133.4c0-116.3-94.3-210.6-210.6-210.6S0,94.496,0,210.796 s94.3,210.6,210.6,210.6c50.8,0,97.4-18,133.8-48l110.5,110.5c12.9,11.8,25,4.2,29.2,0C492.5,475.596,492.5,463.096,484.1,454.796z M41.1,210.796c0-93.6,75.9-169.5,169.5-169.5s169.6,75.9,169.6,169.5s-75.9,169.5-169.5,169.5S41.1,304.396,41.1,210.796z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
background-position: 12px 50%;
background-repeat: no-repeat;
background-size: 16px auto;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
width:100%;
}
#dioceseInput:focus {outline: 3px solid #c9c2bc;}
.diocese-dropdown {
position: relative;
display: inline-block;
width:100%;
}
/* Dropdown Content (Hidden by Default) */
.diocese-dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
z-index: 1;
width:100%;
max-height: 250px;
overflow: scroll;
}
.diocese-dropdown-content .diocese-item {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.diocese-dropdown-content .diocese-item:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.dropdown-show {display:block;}
#updateInfoBtn.submitting {
background-color:#63666a;
cursor:text;
}
@media (min-width:768px) {
.info-form-header,
.info-form-content,
.info-form-footer {
padding: 32px 64px;
}
.info-form-content .input-wrapper {
margin-bottom: 22px;
}
}
</style>

View File

@ -0,0 +1,318 @@
<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;"
/>
{%- comment -%} <div class="profile-bio-header">
Account Details
</div> {%- endcomment -%}
<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>
</div>
</div>
<div class="product-subscriptions-card-wrapper">
<div class="product-subscriptions-card">
{% 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">
<span class="subscription-name" style="border: none;">
Product Subscriptions
</span>
{%- comment -%} <span class="subscription-level">
PLAN
</span> {%- endcomment -%}
</div>
<ul class="product-subscriptions">
{% assign subscription_levels = current_person.properties.subscription_levels | split: "," %}
{% assign essentials_found_flag = false %}
{% for subscription_level in subscription_levels %}
{% assign name_level_pair = subscription_level | split: ":"%}
{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
{% if product_sub_level contains 'Essential' %}
{% assign essentials_found_flag = true %}
{% endif %}
{% endfor %}
{% if essentials_found_flag %}
<div class="product-subscription-level-header">
Essential
</div>
<div style="background: #795CA0; height: 3px; margin: 5px; width: 20px;"></div>
{% endif %}
{% for subscription_level in subscription_levels %}
{% assign name_level_pair = subscription_level | split: ":"%}
{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
{% if product_sub_level contains 'Essential' %}
<li class="product-subscription">
{% include "profile_logo_calculator", product: name_level_pair[0] %}
{%- comment -%} <span class="subscription-name">
{{ name_level_pair[0] }}
</span> {%- endcomment -%}
{%- comment -%} <span class="subscription-level">
{{ name_level_pair[1] }}
</span> {%- endcomment -%}
{%- 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 -%}
</li>
{% endif %}
{% endfor %}
{% assign enhanced_found_flag = false %}
{% for subscription_level in subscription_levels %}
{% assign name_level_pair = subscription_level | split: ":"%}
{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
{% if product_sub_level contains 'Enhanced' %}
{% unless product_sub_level contains 'Enhanced+' %}
{% assign enhanced_found_flag = true %}
{% endunless %}
{% endif %}
{% endfor %}
{% if enhanced_found_flag %}
<div class="product-subscription-level-header" style="margin-top: 20px;">
Enhanced
</div>
<div style="background: #49A9E1; height: 3px; margin: 5px; width: 20px;"></div>
{% endif %}
{% for subscription_level in subscription_levels %}
{% assign name_level_pair = subscription_level | split: ":"%}
{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
{% if product_sub_level contains 'Enhanced' %}
{% unless product_sub_level contains 'Enhanced+' %}
<li class="product-subscription">
{% include "profile_logo_calculator", product: name_level_pair[0] %}
{%- comment -%} <span class="subscription-name">
{{ name_level_pair[0] }}
</span> {%- endcomment -%}
{%- comment -%} <span class="subscription-level">
{{ name_level_pair[1] }}
</span> {%- endcomment -%}
{%- 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 -%}
</li>
{% endunless %}
{% endif %}
{% endfor %}
{% assign enhanced_plus_found_flag = false %}
{% for subscription_level in subscription_levels %}
{% assign name_level_pair = subscription_level | split: ":"%}
{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
{% if product_sub_level contains 'Enhanced+' %}
{% assign enhanced_plus_found_flag = true %}
{% endif %}
{% endfor %}
{% if enhanced_plus_found_flag %}
<div class="product-subscription-level-header" style="margin-top: 20px;">
Enhanced Plus
</div>
<div style="background: #E26B37; height: 3px; margin: 5px; width: 20px;"></div>
{% endif %}
{% for subscription_level in subscription_levels %}
{% assign name_level_pair = subscription_level | split: ":"%}
{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
{% if product_sub_level contains 'Enhanced+' %}
<li class="product-subscription">
{% include "profile_logo_calculator", product: name_level_pair[0] %}
{%- comment -%} <span class="subscription-name">
{{ name_level_pair[0] }}
</span> {%- endcomment -%}
{%- comment -%} <span class="subscription-level">
{{ name_level_pair[1] }}
</span> {%- endcomment -%}
{%- 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 -%}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
</div>
<style>
.profile-card-container{
margin-bottom: 45px;
}
/* .profile-card-wrapper{
background: #AA7FB8;
border: 1px solid #EFEFEF;
padding-top: 14px;
} */
.profile-card{
background: #FFF;
border: 1px solid #f2f4f5;
box-shadow: 0 3px 5px rgba(0,0,0,.1);
margin-bottom: 25px;
/* padding: 12px;
padding-bottom: 32px; */
padding: 45px 0;
width: 100%;
}
.profile-bio{
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.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{
line-height: 25px;
text-align: center;
}
.profile-bio-name{
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
}
.profile-bio-email{
font-size: 16px;
font-weight: 400;
margin-bottom: 35px;
}
.profile-bio-account-settings-button{
background-color: #aa7fb8;
border-radius: 25px;
color: #FFF;
font-weight: 400;
line-height: 1;
margin: 20px 30px;
padding: 12px 18px 12px;
position: relative;
text-align: center;
text-decoration: none;
transition: .3s ease all;
}
.product-subscriptions-card{
border: 1px solid #f2f4f5;
box-shadow: 0 3px 5px rgba(0,0,0,.1);
}
.product-subscriptions-banner{
align-items: center;
/* background: #EAEAEA; */
border-bottom: 1px solid #f2f4f5;
display: flex;
/* font-size: 14px;
font-weight: 400; */
font-size: 16px;
font-weight: 600;
height: 55px;
justify-content: center;
/* line-height: 25px; */
}
.product-subscriptions{
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0;
}
.product-subscription-level-header{
color: #595959;
font-size: 1em;
/* margin-bottom: 10px; */
}
.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: 25px; */
margin: 3px 0;
}
.profile-card-product-logo{
height: 1.25em;
}
/* .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>

View File

@ -33,20 +33,20 @@
{% elsif product_name contains 'Payroll' %} {% elsif product_name contains 'Payroll' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Payroll.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Payroll.svg' %}
{% elsif product_name contains 'Academic Economics' %} {% elsif product_name contains 'Academic Economics' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Academic+Economics.svg' %} {% assign product_logo = 'https://s3.amazonaws.com/static.northpass.com/anthology/Academic+Economics.svg' %}
{% elsif product_name contains 'Blackboard Learn' %} {% elsif product_name contains 'Blackboard Learn' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/BBLearn.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/BBLearn.svg' %}
{% elsif product_name contains 'Ally' %} {% elsif product_name contains 'Ally' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Ally.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Ally.svg' %}
{% elsif product_name contains 'Course Evaluations' %} {% elsif product_name contains 'Course Evaluations' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Course+Evaluations.svg' %} {% assign product_logo = 'https://s3.amazonaws.com/static.northpass.com/anthology/Course+Evaluations.svg' %}
{%- comment -%} NEED DIFF IMG FORMAT FOR THIS ONE {%- endcomment -%} {%- comment -%} NEED DIFF IMG FORMAT FOR THIS ONE {%- endcomment -%}
{% elsif product_name contains 'Evaluate' %} {% elsif product_name contains 'Evaluate' %}
{% assign product_logo = 'blank' %} {% assign product_logo = 'blank' %}
{% elsif product_name contains 'Portfolio' %} {% elsif product_name contains 'Portfolio' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Portfolio.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Portfolio.svg' %}
{% elsif product_name contains 'Program Review' %} {% elsif product_name contains 'Program Review' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Program+Review.svg' %} {% assign product_logo = 'https://s3.amazonaws.com/static.northpass.com/anthology/Program+Review.svg' %}
{% elsif product_name contains 'Planning' %} {% elsif product_name contains 'Planning' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Planning.svg' %} {% assign product_logo = 'https://cdn.northpass.io/anthology/Planning.svg' %}
{% elsif product_name contains 'Accreditation' %} {% elsif product_name contains 'Accreditation' %}
@ -73,6 +73,6 @@
</span> </span>
{% else %} {% else %}
<span class="subscription-name" data-profile-product="{{ product_name }}"> <span class="subscription-name" data-profile-product="{{ product_name }}">
<img src='{{ product_logo }}' alt="{{ product_name }}" class='profil-card-product-logo' style="height: 60%;"/> <img src='{{ product_logo }}' alt="{{ product_name }}" class='profile-card-product-logo'/>
</span> </span>
{% endif %} {% endif %}

View File

@ -50,7 +50,7 @@
</div> </div>
{% else %} {% else %}
{% endif %} {%- endcomment -%} {% endif %} {%- endcomment -%}
<div class="np-dashboard-resources-title">Upcoming</div> <div class="np-dashboard-resources-title">Upcoming Events</div>
<div class="row row-with-thumbnails events-grid"> <div class="row row-with-thumbnails events-grid">
{% for training_event in training_events.available %} {% for training_event in training_events.available %}

View File

@ -9,6 +9,9 @@
<div class="dashboard-main-title"> <div class="dashboard-main-title">
Dashboard Dashboard
</div> </div>
<div class="dashboard-subtitle">
Track Progress and Continue Learning
</div>
<div class='dashboard-control-panel' style=" <div class='dashboard-control-panel' style="
"> ">
@ -37,11 +40,15 @@
{%- comment -%} =============== THIS IS WHERE THE PRODUCT FILTER WILL LIVE =============== {%- endcomment -%} {%- comment -%} =============== THIS IS WHERE THE PRODUCT FILTER WILL LIVE =============== {%- endcomment -%}
<div class="filter-buttons-container"> <div class="filter-buttons-container">
<div class="dashboard-filter-label">Filter By: </div>
{% include "filter_by_product", page: 'Dashboard' %} {% include "filter_by_product", page: 'Dashboard' %}
</div> </div>
</div> </div>
<div id="dashboard-resources-pane"> <div id="dashboard-resources-pane">
<div class="np-dashboard-resources-title">
Your Resources
</div>
{% assign ipCourseFound = false %} {% assign ipCourseFound = false %}
{% if courses.enrolled.any? %} {% if courses.enrolled.any? %}
{% for course in courses.enrolled %} {% for course in courses.enrolled %}
@ -105,7 +112,6 @@
document.getElementById('dashboard-completed-pane').style.display = 'none'; document.getElementById('dashboard-completed-pane').style.display = 'none';
document.getElementById('dashboard-resources-pane').style.display = 'block'; document.getElementById('dashboard-resources-pane').style.display = 'block';
} else if(event.target.id == 'events-view-button'){ } else if(event.target.id == 'events-view-button'){
document.getElementById('dashboard-view-button').classList.remove('view-swapper-button-active'); document.getElementById('dashboard-view-button').classList.remove('view-swapper-button-active');
if(document.getElementById('completed-view-button')){ if(document.getElementById('completed-view-button')){
@ -129,44 +135,61 @@
} }
} }
</script> </script>
{%- comment -%} {% assign swapper_spacer = 0 %}
{% for course in courses.enrolled %}
{% unless course.progress == 0 %}
{% assign swapper_spacer = 1 %}
{% endunless %}
{% endfor %} {%- endcomment -%}
<style> <style>
.dashboard-main-title{ .dashboard-main-title{
color: #000000; color: #0a0a0a;
font-size: 32px; font-size: 2em;
font-weight: 900;
line-height: 2.375REM;
margin-bottom: 12px;
}
.dashboard-subtitle{
color: #595959;
font-size: 1.25rem;
font-weight: 400; font-weight: 400;
line-height: 25px; margin-bottom: 24px;
} }
.np-dashboard-resources-title{ .np-dashboard-resources-title{
color: #000000; color: #000000;
font-size: 24px; font-size: 1.5em;
font-weight: 600; font-weight: 600;
line-height: 25px; line-height: 25px;
margin-bottom: 25px;
text-transform: none;
} }
.dashboard-control-panel{ .dashboard-control-panel{
align-items: center; align-items: center;
border-bottom: 1px solid #000000; border-bottom: 1px solid #F2F4F5;
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
justify-content: center; justify-content: center;
margin-top: 24px; margin-top: 24px;
margin-bottom: 24px; margin-bottom: 30px;
} }
.view-swapper-container{ .view-swapper-container{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 50px; height: 40px;
justify-content: flex-start; justify-content: flex-start;
width: 100%; width: 100%;
} }
.view-swapper-button{ .view-swapper-button{
align-items: center; align-items: center;
color: #595959;
display: flex; display: flex;
font-size: 18px; font-size: 15px;
font-weight: 400; font-weight: 400;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
@ -174,7 +197,10 @@
} }
.view-swapper-button-active{ .view-swapper-button-active{
border-bottom: 2px solid #000000; background: #f2f4f5;
color: #000;
font-weight: 600;
/* border-bottom: 2px solid #000000; */
margin-bottom: -1px; margin-bottom: -1px;
} }
@ -182,6 +208,19 @@
cursor: pointer; cursor: pointer;
} }
.filter-buttons-container{
display: flex;
flex-direction: row;
margin-bottom: 20px;
}
.dashboard-filter-label{
color: #595959;
font-size: 1em;
font-weight: 700;
padding-right: 10px;
}
#dashboard-events-pane, #dashboard-events-pane,
#dashboard-completed-pane{ #dashboard-completed-pane{
display: none; display: none;
@ -189,7 +228,6 @@
.product-filter-container{ .product-filter-container{
margin: 0; margin: 0;
margin-bottom: 6px;
} }
@media screen and (min-width: 768px){ @media screen and (min-width: 768px){
@ -201,10 +239,6 @@
margin-bottom: 16px; margin-bottom: 16px;
} }
.np-dashboard-resources-title{
margin-bottom: 25px;
}
.dashboard-control-panel{ .dashboard-control-panel{
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
@ -212,7 +246,7 @@
} }
.view-swapper-container{ .view-swapper-container{
margin-bottom: -14px; margin-bottom: -38px;
width: unset; width: unset;
} }
@ -223,7 +257,15 @@
.dashboard-courses-index{ .dashboard-courses-index{
margin: 0; margin: 0;
margin-left: -6px; margin-left: -10px;
} }
} }
</style> </style>
{%- comment -%} {% if swapper_spacer == 0 %}
<style>
.view-swapper-container{
margin-bottom: 0 !important;
}
</style>
{% endif %} {%- endcomment -%}

View File

@ -0,0 +1,371 @@
<script>
function showPopup() {
setTimeout(function() {
console.log("show popup")
document.querySelector(".info-form-trigger").click()
}, 3000)
}
function rerunAdditionalLearnerInfoWorkflow(data) {
console.log("re-running workflow with local storage data: ", data)
$.ajax({
url: "https://webhooks.workato.com/webhooks/rest/604b4fc0-fcd9-4f3b-b715-b42d7f740ba6/additional-info-form-submitted",
data: JSON.stringify(data),
method: 'POST',
success: function(res){
console.log(res)
window.location.replace('/app/dashboard');
},
error: function (xhr, status, error) {
console.error("Error posting to workato!");
if (secondaryInfoStored == "true") {
console.log("secondary information completed and stored in local storage")
setTimeout(function() {
document.querySelector(".info-form-trigger").click()
}, 1000)
}
}
});
}
</script>
{% 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">
{%- comment -%} <span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Search: </span> {%- endcomment -%}
{%- comment -%} {% if current_person.email contains "+preview" %}
<form 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=""
onkeyup="searchCourses()"
/>
<i class="far fa-search search-icon"></i>
</form>
{% else %}
<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>
{% endif %} {%- endcomment -%}
{%- comment -%} <form 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=""
onkeyup="searchCourses()"
/>
<i class="far fa-search search-icon"></i>
</form> {%- endcomment -%}
</div>
{%- comment -%} {% if current_person.email contains "+preview" %}
<div class="catalog-filter-component">
<span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Filter By:</span>
<div class="filter-buttons-container">
{% include "filter_by_product", page: 'Homepage' %}
</div>
</div>
{% endif %} {%- endcomment -%}
<div class="catalog-filter-component">
<span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Filter By:</span>
<div class="filter-buttons-container">
{% include "filter_by_product", page: 'Homepage' %}
</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 %}
{%- comment -%} {% if renderPopular == true %}
{% include "popular_courses_non_carousel" %}
{% endif %} {%- endcomment -%}
{% 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" %}
<script>
let searchCourses = () => {
let homepageCourses = document.querySelector('.np-catalog-courses').children;
for(let i = 0; i < homepageCourses.length; i++){
if(event.target.value.length == 0){
if(!homepageCourses[i].classList.contains('filtered')){
homepageCourses[i].style.display = 'block';
}
homepageCourses[i].classList.remove('hidden-by-search');
}
let courseName = homepageCourses[i].querySelector('.np-card-content-title').textContent.toLowerCase();
if(courseName.indexOf(event.target.value) > -1){
if(!homepageCourses[i].classList.contains('filtered')){
homepageCourses[i].style.display = 'block';
}
homepageCourses[i].classList.remove('hidden-by-search');
} else {
homepageCourses[i].style.display = 'none';
homepageCourses[i].classList.add('hidden-by-search');
}
};
}
</script>
{% if current_person.signed_in? %}
{% unless current_person.email contains "+preview" %}
{% if current_person.properties.learner_completed_additional_info == false %}
<script>
console.log('user not completed additional info')
if (localStorage.getItem('learnerCompletedAdditionalInfo') != null) {
const secondaryInfoStored = localStorage.getItem("learnerCompletedAdditionalInfo")
const learnerName = localStorage.getItem("learnerName");
const learnerEmail = localStorage.getItem("learnerEmail");
const learnerTitle = localStorage.getItem("learnerTitle");
const learnerPrimaryRole = localStorage.getItem("learnerPrimaryRole");
const learnerPrimaryRoleOther = localStorage.getItem("learnerPrimaryRoleOther");
let userData = {
learner_uuid: '{{current_person.id}}',
learner_name: learnerName,
leaner_northpass_name: '{{current_person.first_name}} {{current_person.last_name}}',
learner_email: learnerEmail,
learner_northpass_email: '{{current_person.email}}',
learner_title: learnerTitle,
primaryRole: learnerPrimaryRole,
primaryRoleOther: learnerPrimaryRoleOther,
}
rerunAdditionalLearnerInfoWorkflow(userData)
} else {
showPopup()
}
</script>
{% elsif current_person.properties.learner_completed_additional_info == true %}
<script>
console.log("property is set, deleting local storage")
localStorage.removeItem("learnerCompletedAdditionalInfo")
localStorage.removeItem("learnerName");
localStorage.removeItem("learnerEmail");
localStorage.removeItem("learnerTitle");
localStorage.removeItem("learnerPrimaryRole");
localStorage.removeItem("learnerPrimaryRoleOther");
</script>
{% else %}
<script>
console.log('custom prop doesnt yet exist')
if (localStorage.getItem('learnerCompletedAdditionalInfo') != null) {
const secondaryInfoStored = localStorage.getItem("learnerCompletedAdditionalInfo");
const learnerName = localStorage.getItem("learnerName");
const learnerEmail = localStorage.getItem("learnerEmail");
const learnerTitle = localStorage.getItem("learnerTitle");
const learnerPrimaryRole = localStorage.getItem("learnerPrimaryRole");
const learnerPrimaryRoleOther = localStorage.getItem("learnerPrimaryRoleOther");
let userData = {
learner_uuid: '{{current_person.id}}',
learner_name: '{{current_person.first_name}} {{current_person.last_name}}',
learner_email: '{{current_person.email}}',
learner_title: learnerTitle,
primaryRole: learnerPrimaryRole,
primaryRoleOther: learnerPrimaryRoleOther,
}
rerunAdditionalLearnerInfoWorkflow(userData)
} else {
showPopup()
}
</script>
{% endif %}
{% endunless %}
{% endif %}
<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; */
}
}
@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>

View File

@ -0,0 +1,28 @@
{% include "header" %}
<main class="np-main np-search np-subpage-container np-max-width">
<div class="np-resource-title">
{% t .title %}
</div>
<div class="np-search-header">
<div class="np-resource-subtitle">
{% t .showing %}
<span class="np-resource-subtitle-number">{{ results.count }}</span>
{% t .results_for %}
<span class="np-button-color">"{{ results.term }}"</span>
</div>
{% capture label %}{% t shared.filters.by_type %}{% endcapture %}
{%- comment -%} {%
include "filter_dropdown",
filters: results.filters,
key: "type",
label: label
%} {%- endcomment -%}
{% include "filter_by_product", page: 'Search' %}
</div>
{% if results.items.any? %}
{% render "search_result" for results.items as result %}
{% else %}
{% include "search_zero_state" %}
{% endif %}
</main>
{% include "footer" %}

View File

@ -0,0 +1 @@
{% include "popup_additional_info" %}

View File

@ -0,0 +1,124 @@
<main class="np-main np-box-container">
<div class="np-box">
{% include "header_minimal" %}
<div class="np-box-content-container">
<form class="np-form np-box-content" id="sign-up-form" action="{% route sign_up %}" method="post" novalidate autocomplete="off">
<div class="np-form-title"> {% t .create_account %} </div>
{% form_authenticity_token %}
<div class="np-form-flex-desktop">
<div class="np-form-field">
<label class="np-input-label" for="learner_first_name">
{% t shared.first_name %}
</label>
<input
class="np-input"
autofocus="autofocus"
type="text"
name="learner[first_name]"
id="learner_first_name"
>
</div>
<div class="np-form-field">
<label class="np-input-label" for="learner_last_name">
{% t shared.last_name %}
</label>
<input
class="np-input"
type="text"
name="learner[last_name]"
id="learner_last_name"
>
</div>
</div>
<div class="np-form-field">
<label class="np-input-label" for="learner_email">
{% t shared.email_address %}
</label>
<input
class="np-input"
autofocus="autofocus"
type="email"
name="learner[email]"
id="learner_email"
{%- comment -%} onkeyup="emailValidator()" {%- endcomment -%}
onchange="emailValidator()"
>
</div>
<div class="np-form-field">
<label class="np-input-label" for="learner_password">
{% t shared.password %}
</label>
<input
class="np-input"
type="password"
name="learner[password]"
id="learner_password"
>
</div>
<button type="submit" id='sign-up-button' class="np-button np-button-big np-button-large-font np-form-action" onclick="redirectSecurer()">
{% t shared.sign_up %}
</button>
<span class="np-form-terms">
{% t .terms %}
<a
class="np-form-link np-button-color"
target="_blank"
href="{{ current_school.terms_of_service_url }}"
>
{% t .terms_link %}
</a>
</span>
</form>
</div>
</div>
</main>
<script>
let redirectSecurer = () => {
localStorage.setItem("registered", true);
}
let emailValidator = () => {
let learnerEmail = event.target.value;
const regexExp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(regexExp.test(learnerEmail) == true){
let domain = learnerEmail.split('@')[1];
domain = `@${domain.toLowerCase()}`
let allDomains = (`{{ current_school.properties.master_domain_list }}`);
allDomains = allDomains.split('\n');
if(allDomains.indexOf(domain) > -1){
if(document.querySelector('.invalid-domain-error')){
document.getElementById('sign-up-form').children[3].removeChild(document.querySelector('.invalid-domain-error'))
document.getElementById('sign-up-button').classList.remove('disabled');
}
} else {
if(!document.querySelector('.invalid-domain-error')){
let errorMessage = document.createElement('span');
errorMessage.textContent = 'Please enter your work email'
errorMessage.classList.add('np-form-terms');
errorMessage.classList.add('invalid-domain-error')
document.getElementById('sign-up-form').children[3].appendChild(errorMessage);
document.getElementById('sign-up-button').classList.add('disabled');
}
}
}
}
</script>
<style>
.disabled{
background: #808080;
pointer-events: none;
}
.invalid-domain-error{
color: #f05a24;
margin-bottom: 20px;
margin-top: 10px;
}
</style>

View File

@ -1,7 +1,6 @@
/* /*
Put your custom overlay styles in here Put your custom overlay styles in here
You can use your northpass color palette in this file You can use your northpass color palette in this file
{{ color_palette.button_font_color }} {{ color_palette.button_font_color }}
{{ color_palette.button_color }} {{ color_palette.button_color }}
{{ color_palette.button_hover_color }} {{ color_palette.button_hover_color }}
@ -20,14 +19,14 @@ body{
body, body,
main{ main{
background-color: #FEFEFE; background-color: #FEFEFE !important;
} }
/* HEADER STYLES */ /* HEADER STYLES */
.np-header{ .np-header{
border-top: 15px solid #f6f9fc; border-top: 15px solid #e1ebf3;
border-bottom: 2px solid #f6f9fc; border-bottom: 2px solid #e1ebf3;
height: 95px; height: 95px;
padding: 0 22px; padding: 0 22px;
} }
@ -82,7 +81,9 @@ main{
.course-card .np-card-container{ .course-card .np-card-container{
border-radius: 0; border-radius: 0;
box-shadow: 0 3px 30px rgba(0,0,0,.1) box-shadow: 0 3px 30px rgba(0,0,0,.1);
/* overflow: hidden; */
z-index: unset;
} }
.course-card .np-card-image{ .course-card .np-card-image{
@ -97,9 +98,13 @@ main{
justify-content: space-between; justify-content: space-between;
} }
.np-course-outline-content-activity-title, .np-course-outline-content-activity-link{
font-size: 16px;
}
/* CAROUSEL BUTTON STYLES */ /* CAROUSEL BUTTON STYLES */
.carousel-buttons-container{ /*.carousel-buttons-container{
/* align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@ -147,6 +152,7 @@ main{
margin-right: 15px; margin-right: 15px;
} }
.filter-buttons-container{ .filter-buttons-container{
align-items: center; align-items: center;
display: flex; display: flex;
@ -156,13 +162,27 @@ main{
.product-filter-dropdown, .product-filter-dropdown,
.category-filter-dropdown{ .category-filter-dropdown{
background-color: #fefefe; background-color: #fefefe;
border: 1px solid #ce9dc7;
border-radius: 30px; border-radius: 30px;
color: #595959;
font-size: 1em;
font-weight: 700; font-weight: 700;
height: 60px; height: 60px;
line-height: 1; line-height: 1;
padding-top: 12px; padding: 5px 12px;
text-decoration: none text-decoration: none;
}
.product-filter-dropdown:focus,
.category-filter-dropdown:focus{
border: 2px solid blue;
}
.product-filter-dropdown{
border: 1px solid #aa7fb9;
}
.category-filter-dropdown{
border: 1px solid #ce9dc7;
} }
@media screen and (min-width: 768px){ @media screen and (min-width: 768px){

View File

@ -1,54 +0,0 @@
<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>

View File

@ -1,192 +0,0 @@
<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>

View File

@ -1,225 +0,0 @@
{% 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>

View File

@ -1,42 +0,0 @@
<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>

View File

@ -26,7 +26,7 @@
</div> </div>
<div class="np-sub-navigation-content-item"> <div class="np-sub-navigation-content-item">
<a class="np-sub-navigation-content-item-link" <a class="np-sub-navigation-content-item-link"
href="https://hackerrank.northpass.com/courses/5b921409-d7ab-49d1-83e4-fe9fc77844ad"> href="https://hackerrank.northpass.com/app/new-product-releases">
<i style="color: #bac4ca;" class="fal fa-rocket-launch np-sub-navigation-content-item-icon"></i> <i style="color: #bac4ca;" class="fal fa-rocket-launch np-sub-navigation-content-item-icon"></i>
New Product Releases New Product Releases
</a> </a>

View File

@ -0,0 +1,193 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.featured %}
<main class="np-main np-homepage">
{% include "sub_navigation" %}
<div class="np-homepage-featured np-max-width custom-page-main-content">
<div class="custom-page-filter-bars">
<div>
<h1>{{ custom_page.headline }}</h1>
<div class="custom-page-label">
{{ custom_page.subheadline }}
</div>
</div>
</div>
{% if courses.in_catalog.any? %}
<div class="catalog-courses">
{% for course in courses.in_catalog %}
{% for category in course.categories %}
{% if category.id == '37ebf83e-69fb-4b12-ae98-e1be1ecd3342' %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% endif %}
{% endfor %}
{% endfor %}
</div>
{% else %}
<div class="np-homepage-featured-empty">
<div class="np-zero-state-text">
{% t .empty, key: current_school.course_vocabulary %}
</div>
<img
class="np-zero-state-courses"
alt="{% t .empty, key: current_school.course_vocabulary %}"
/>
</div>
{% endif %}
</div>
</main>
{% include "footer" %}
<style>
.custom-page-top-info-bar{
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 5%;
}
.custom-page-nametag h4{
color: #016aab;
}
.custom-page-profile-button{
border: 1px solid #016aab;
border-radius: 8px;
color: #016aab;
padding: 10px 25px;
text-decoration: none;
}
.custom-page-main-content{
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 5%;
width: 100%;
}
.custom-page-label{
font-size: 18px;
margin-bottom: 40px;
}
.custom-page-filter-bars{
display: flex;
flex-direction: column;
margin-bottom: 50px;
}
.custom-page-content-search{
max-width: unset;
}
.np-filter{
margin: 0;
}
.custom-page-content-filter .np-input{
margin-top: 20px;
padding: 10px 12px;
}
.custom-page-content-filter .dropdown{
width: 100%;
}
.custom-page-courses{
display: flex;
flex-direction: column;
padding: 0 5%;
width: 100%;
}
.custom-page-courses .np-card{
padding: 0;
}
.custom-page-courses .np-card-container{
display: flex;
flex-direction: row;
}
.custom-page-courses .np-card-image{
border-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
max-width: 20%;
}
.custom-page-courses .np-card-content{
display: flex;
flex-direction: column;
padding: 5px;
}
.custom-page-courses .np-card-info{
display: flex;
flex-direction: column;
}
.custom-page-courses .np-card-content-progress-and-cta{
display: flex;
width: 100%;
height: 100%;
align-items: center;
flex-direction: row;
justify-content: flex-end;
}
.custom-page-courses .np-card-content-progress{
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px){
.custom-page-main-content{
margin-top: 0;
}
.custom-page-filter-bars{
align-items: center;
flex-direction: row;
justify-content: space-between;
}
.custom-page-courses .np-card-content{
align-items: center;
flex-direction: row;
padding: 10px 35px;
}
.custom-page-courses .np-card-info{
max-width: 80%;
}
.custom-page-courses .np-card-content-title{
margin: 0;
margin-bottom: 8px;
}
.custom-page-courses .np-card-content-progress-and-cta{
align-items: center;
flex-direction: row;
height: 100%;
width: 100%;
}
.custom-page-courses .np-card-content-progress{
align-items: flex-start;
height: 100%;
justify-content: center;
padding-right: 25px;
width: 60%;
}
.custom-page-courses .np-card-content-progress-and-cta .np-button{
width: 40%;
}
}
</style>

View File

@ -298,3 +298,28 @@ Questions and Topics are mostly around Aaron's workflow.
* Manager permissions issues - when a manager creates a course, they don't have access to it. How to automate it? * Manager permissions issues - when a manager creates a course, they don't have access to it. How to automate it?
* Rachel and design to discuss search results page and requested changes. * Rachel and design to discuss search results page and requested changes.
## 10/27/2023
### Katie and KC - Topics
Login:
* Email validation - some people won't like that there is no email validation
* Amit pointed out that competitors _could_ come in
* Click a link in email to update property - leadership will be concerned and pissed.
* Uphill climb with buy-in to convince people to not be pissed.
* Learner signs up > Prop is false > Learner gets email > Clicks link > Landing Page & Prop becomes true
* Might need second prop to store datetime
* If Prop is false for 24 hours > Deactivate Learner API
* Need to figure out when and how often to check the datetime difference
* On page load, it will check one user at a time, if time based, it will iterate through everyone (consuming CPUs)
* Auto-validate '@knowledgestate.edu'
* Auto-validate existing users
Workflow:
* Notification system for when the workflow is turned off and on
Sign up page Modal/warning - Ask Rachel for designs
Create Google Form for Amit to submit new domains

View File

@ -100,11 +100,16 @@ Austin reached out to Michael Stalenwart. Michael emailed Glassdoor on 7/5 and s
* Paul wants to learn more best practices to keep interest up with clients * Paul wants to learn more best practices to keep interest up with clients
* What is the flow? * What is the flow?
* JO sends automated email based on Salesforce/GS data for all new closed * JO sends automated email based on Salesforce/GS data for all new [closed](2023-10-27_closed.md)
deals deals
* Pooled kick-off call every Tuesday - learn about GSU, click into University * Pooled kick-off call every Tuesday - learn about GSU, click into University
* JO email is tokenized - auto-enrolled in courses * JO email is tokenized - auto-enrolled in courses
* Kick off call is just a general link. * Kick off call is just a general link.
* Talked strategy most of the meeting * Talked strategy most of the meeting
* Needs to decide if he wants to improve completions OR overall numbers in the * Needs to decide if he wants to improve completions OR overall numbers in the academy.
academy.
## 10/27/2023
### Post-EBR sync with Austin and Mark

View File

@ -254,3 +254,34 @@ Implementation call for 60 minutes, 2nd week of January.
9-13th 9-13th
Ask who else should be on the call. Ask who else should be on the call.
## 10/27/2023
### CIO - Erich Gazaui
Immediately asking for the recording to be stopped
Notes:
* 2 months in at Papa
* Came from Ziprecruiter
* In charge of Sec, IT, Cloud infrastructure
* Erich is in charge building formal procurement process - as a result, he is removing a TON of vendors.
* Erich wants to cancel contract with Northpass
* Tropic told him that they are "stuck" and "can't do anything about Northpass "
* Additionally confusing because he was told "they are not using it at all" when I (Norm) has been in touch with Mini and
Chapin.
* Tropic - procurement vendor is being sun setted
GS CS Opportunity?
* Mark Petito - looking at Gainsight
* Stalled because of Erich. $65k?
* Goal vs Gain - How does GS Measure this?
* How does GS measure goals and gains
* He talked for a long time - definitely hired to be the bulldog and make the org more efficient
Erich claims to be a good partner. Says he doesn't expect vendors to do all the work because meeting in the middle means the
client also needs to come half way.
Papa Employees:
* Sam - Head of sales

View File

@ -875,3 +875,35 @@ Other Notes:
TODO: Roadmap session - schedule some time with same team for Allyson and Joris to lead. TODO: Roadmap session - schedule some time with same team for Allyson and Joris to lead.
* Krystal - Enhancement of video capabilities. Wants to double-down. * Krystal - Enhancement of video capabilities. Wants to double-down.
* Travis - Track all tasks across - Monday.com access? * Travis - Track all tasks across - Monday.com access?
## 10/27/2023
### Postman curls from Travis
Resources:
```bash
curl --location --request POST 'https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=AIzaSyB5i2RzWjqjq5Sa9nXwzrTZHGoj07WwyYI' \
--header 'Content-Type: text/plain' \
--data-raw '{
"longDynamicLink": "https://sparkdriverapp.page.link/?link=https://sparkdriver.com/resourcehub?id=90bbdf4d-c674-403c-93d1-1c2e43364e0e&apn=com.walmart.sparkdriver&ibi=com.walmart.sparkdriver",
"suffix": {
"option": "UNGUESSABLE"
}
}'
```
2022 Tax Filing Course UUID: `90bbdf4d-c674-403c-93d1-1c2e43364e0e`
Preview Course UUID that isn't working: `18f860db-9039-4e87-b0f7-80946367eea1`
Categories:
```bash
curl --location --request POST 'https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=AIzaSyB5i2RzWjqjq5Sa9nXwzrTZHGoj07WwyYI' \
--header 'Content-Type: text/plain' \
--data-raw '{
"longDynamicLink": "https://sparkdriverapp.page.link/?link=https://sparkdriver.com/resourcehub?category=DROP_OFF_AND_RETURNS&apn=com.walmart.sparkdriver&ibi=com.walmart.sparkdriver",
"suffix": {
"option": "UNGUESSABLE"
}
}'
```