norm/Gainsight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Figured out Workato recipe with Python node to reduce the scope of the original anthology flow.

Browse Source
This commit is contained in:
Norm Rasmussen
2023-11-05 20:52:25 -05:00
parent 2912377102
commit 1342c10ac8
29 changed files with 2040 additions and 595 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Custom_Templates/customer_templates/.DS_Store vendored
View File

Binary file not shown.

158
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_cards_course.html.liquid
View File

@ -1,155 +1,176 @@
{% if course.properties.product_type == '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' %}
{% elsif course.properties.product_type == 'Radius' %} {% elsif course.properties.product_names_for_course_cards == 'Radius' %}
{% assign product_logo = 'blank' %} {% assign product_logo = 'blank' %}
{% assign color_main = '#F06A32' %} {% assign color_main = '#F06A32' %}
{% assign color_dark = '#F3798A' %} {% assign color_dark = '#F3798A' %}
{% assign color_light = '#F58545' %} {% assign color_light = '#F58545' %}
{% elsif course.properties.product_type == '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_type == '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_type == '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_type == '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_type == '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_type == '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_type == '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_type == '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' %}
{% elsif course.properties.product_type == 'Talisma' %} {% elsif course.properties.product_names_for_course_cards == 'Talisma' %}
{% assign product_logo = 'blank' %} {% assign product_logo = 'blank' %}
{% assign color_main = '#F06A32' %} {% assign color_main = '#F06A32' %}
{% assign color_dark = '#D94827' %} {% assign color_dark = '#D94827' %}
{% assign color_light = '#F3798A' %} {% assign color_light = '#F3798A' %}
{% elsif course.properties.product_type == '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' %}
{% elsif course.properties.product_type == 'CVue' %} {% elsif course.properties.product_names_for_course_cards == 'CVue' %}
{% assign product_logo = 'blank' %} {% assign product_logo = 'blank' %}
{% assign color_main = '#82C342' %} {% assign color_main = '#82C342' %}
{% assign color_dark = '#286734' %} {% assign color_dark = '#286734' %}
{% assign color_light = '#F3E588' %} {% assign color_light = '#F3E588' %}
{% elsif course.properties.product_type == '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_type == '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_type == '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_type == '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_type == '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_type == '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_type == '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' %}
{%- comment -%} NEED DIFF IMG FORMAT FOR THIS ONE {%- endcomment -%} {%- comment -%} NEED DIFF IMG FORMAT FOR THIS ONE {%- endcomment -%}
{% elsif course.properties.product_type == 'Anthology Evaluate' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology Evaluate' %}
{% assign product_logo = 'blank' %} {% assign product_logo = 'blank' %}
{% assign color_main = '#1BA8E1' %} {% assign color_main = '#1BA8E1' %}
{% assign color_dark = '#027BB6' %} {% assign color_dark = '#027BB6' %}
{% assign color_light = '#A3DBDC' %} {% assign color_light = '#A3DBDC' %}
{% elsif course.properties.product_type == '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_type == '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_type == '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_type == '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' %}
{% elsif course.properties.product_type == 'Anthology 101' %} {% elsif course.properties.product_names_for_course_cards == 'Anthology 101' %}
{% assign product_logo = 'blank' %} {% assign product_logo = 'blank' %}
{% assign color_main = '#7F59A5' %} {% assign color_main = '#7F59A5' %}
{% assign color_dark = '#573376' %} {% assign color_dark = '#573376' %}
{% assign color_light = '#7F59A5' %} {% assign color_light = '#7F59A5' %}
{% elsif course.properties.product_type == 'Academy Use & Navigation' %} {% elsif course.properties.product_names_for_course_cards == 'Academy Use & Navigation' %}
{% assign product_logo = 'blank' %} {% assign product_logo = 'blank' %}
{% assign color_main = '#7F59A5' %} {% assign color_main = '#7F59A5' %}
{% assign color_dark = '#6283C2' %} {% assign color_dark = '#6283C2' %}
{% assign color_light = '#87ADDB' %} {% assign color_light = '#87ADDB' %}
{% elsif course.properties.product_type == 'Data Strategy' %} {% elsif course.properties.product_names_for_course_cards == 'Data Strategy' %}
{% assign product_logo = 'blank' %} {% assign product_logo = 'blank' %}
{% assign color_main = '#7F59A5' %} {% assign color_main = '#7F59A5' %}
{% assign color_dark = '#000000' %} {% assign color_dark = '#000000' %}
{% assign color_light = '#573376' %} {% assign color_light = '#573376' %}
{% elsif course.properties.product_type == 'Faculty Development' %} {% elsif course.properties.product_names_for_course_cards == 'Faculty Development' %}
{% assign product_logo = 'blank' %} {% assign product_logo = 'blank' %}
{% assign color_main = '#7F59A5' %} {% assign color_main = '#7F59A5' %}
{% assign color_dark = '#7F59A5' %} {% assign color_dark = '#7F59A5' %}
{% assign color_light = '#AA7FB8' %} {% assign color_light = '#AA7FB8' %}
{% elsif course.properties.product_type == 'Power BI' %} {% elsif course.properties.product_names_for_course_cards == 'Power BI' %}
{% assign product_logo = 'blank' %} {% assign product_logo = 'blank' %}
{% assign color_main = '#7F59A5' %} {% assign color_main = '#7F59A5' %}
{% assign color_dark = '#573376' %} {% assign color_dark = '#573376' %}
{% assign color_light = '#87ADDB' %} {% assign color_light = '#87ADDB' %}
{% elsif course.properties.product_type == 'Professional Development' %} {% elsif course.properties.product_names_for_course_cards == 'Professional Development' %}
{% assign product_logo = 'blank' %} {% assign product_logo = 'blank' %}
{% assign color_main = '#7F59A5' %} {% assign color_main = '#7F59A5' %}
{% assign color_dark = '#000000' %} {% assign color_dark = '#000000' %}
@ -170,28 +191,39 @@
{% 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 %}
</div> </div>
<div class="np-card-container"> <div class="np-card-container">
<img <div class="card-image-replacement"></div>
{%- comment -%} <img
class="np-card-image" class="np-card-image"
alt="{{ course.name }}" alt="{{ course.name }}"
src="{{ course.image_url }}" src="{{ course.image_url }}"
> > {%- endcomment -%}
<div class="np-card-content np-card-content-vertical np-card-padding course-card-info"> <div class="np-card-content np-card-content-vertical np-card-padding course-card-info">
<div class="np-flex-1"> <div class="np-flex-1">
<h3 class="np-card-content-title course-card-title"> <h3 class="np-card-content-title course-card-title">
{{ course.name }} {{ course.name }}
</h3> </h3>
{% assign act_count = 0 %}
{% for section in course.sections %}
{% for activity in section.activities %}
{% assign act_count = act_count| plus: 1 %}
{% endfor %}
{% endfor %}
<span style="color: #757575; font-size: 14px">
{{ act_count }} {% if act_count == 1 %}Activity{% else %}Activities{% endif %}
</span>
</div> </div>
{% capture course_path %}{% route course, id: course.id %}{% endcapture %} {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
{% if course.has_to_restart? %} {% if course.has_to_restart? %}
@ -208,7 +240,7 @@
padding-left: 15px; padding-left: 15px;
width: 70%;"> width: 70%;">
<div style=" <div style="
background: {{ color_light }}; background: #BACCE9;
border-radius: 10px; border-radius: 10px;
height: 8px; height: 8px;
margin-right: 15px; margin-right: 15px;
@ -220,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 %}
@ -228,28 +260,40 @@
{% 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;
background: #FFF; background: #FFF;
box-shadow: 0 3px 30px rgba(0,0,0,.1);
display: flex; display: flex;
height: 32px; height: 32px;
padding: 6px 8px 2px; overflow: hidden;
padding: 6px 8px;
width: 100%; width: 100%;
} }
@ -257,8 +301,28 @@
height: 100%; height: 100%;
} }
.card-image-replacement{
/* background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(225,235,243,1) 60%); */
background: linear-gradient(325deg, rgba(255,255,255,1) 0%, rgb(225 235 343 / 30%) 60%);
height: 12rem;
width: 100%;
}
@media screen and (min-width: 550px) and (max-width: 649px){
.card-image-replacement{
height: 15rem;
}
}
@media screen and (min-width: 650px) and (max-width: 767px){
.card-image-replacement{
height: 20rem;
}
}
.course-card-info{ .course-card-info{
height: calc(100% - 41px); height: calc(100% - 38px);
justify-content: center;
position: absolute; position: absolute;
top: 0; top: 0;
} }
@ -267,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{
@ -279,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;

260
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_course_desktop_view.html.liquid Normal file
View File

@ -0,0 +1,260 @@
{% if course.properties.product_names_for_course_cards == 'Anthology Reach' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Reach.svg' %}
{% assign color_main = '#F06A32' %}
{% assign color_dark = '#731013' %}
{% assign color_light = '#F58545' %}
{% elsif course.properties.product_names_for_course_cards == 'Radius' %}
{% assign product_logo = 'blank' %}
{% assign color_main = '#F06A32' %}
{% assign color_dark = '#F3798A' %}
{% assign color_light = '#F58545' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Engage' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Engage.svg' %}
{% assign color_main = '#F06A32' %}
{% assign color_dark = '#F16423' %}
{% assign color_light = '#F3798A' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Beacon' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Beacon.svg' %}
{% assign color_main = '#F06A32' %}
{% assign color_dark = '#D94827' %}
{% assign color_light = '#F16423' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Milestone' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Milestone.svg' %}
{% assign color_main = '#F06A32' %}
{% assign color_dark = '#F3798A' %}
{% assign color_light = '#F9B5B5' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Occupation Insight' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Occupation+Insight.svg' %}
{% assign color_main = '#F06A32' %}
{% assign color_dark = '#F58545' %}
{% assign color_light = '#F9B5B5' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Raise' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Raise.svg' %}
{% assign color_main = '#F06A32' %}
{% assign color_dark = '#D94827' %}
{% assign color_light = '#F9B5B5' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Digital Assistant' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Digital+Assistant.svg' %}
{% assign color_main = '#F06A32' %}
{% assign color_dark = '#D94827' %}
{% assign color_light = '#F58545' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Baseline' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Baseline.svg' %}
{% assign color_main = '#F06A32' %}
{% assign color_dark = '#731013' %}
{% assign color_light = '#D94827' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Encompass' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Encompass.svg' %}
{% assign color_main = '#F06A32' %}
{% assign color_dark = '#731013' %}
{% assign color_light = '#F3798A' %}
{% elsif course.properties.product_names_for_course_cards == 'Talisma' %}
{% assign product_logo = 'blank' %}
{% assign color_main = '#F06A32' %}
{% assign color_dark = '#D94827' %}
{% assign color_light = '#F3798A' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Student' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Student.svg' %}
{% assign color_main = '#82C342' %}
{% assign color_dark = '#96CA51' %}
{% assign color_light = '#F3E588' %}
{% elsif course.properties.product_names_for_course_cards == 'CVue' %}
{% assign product_logo = 'blank' %}
{% assign color_main = '#82C342' %}
{% assign color_dark = '#286734' %}
{% assign color_light = '#F3E588' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Insight' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Insight.svg' %}
{% assign color_main = '#82C342' %}
{% assign color_dark = '#286734' %}
{% assign color_light = '#82C342' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Finance & HCM' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Finance+%26+HCM.svg' %}
{% assign color_main = '#82C342' %}
{% assign color_dark = '#539542' %}
{% assign color_light = '#C9BD2E' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Payroll' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Payroll.svg' %}
{% assign color_main = '#82C342' %}
{% assign color_dark = '#000000' %}
{% assign color_light = '#82C342' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Academic Economics' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Academic+Economics.svg' %}
{% assign color_main = '#82C342' %}
{% assign color_dark = '#000000' %}
{% assign color_light = '#286734' %}
{% elsif course.properties.product_names_for_course_cards == 'Blackboard Learn' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/BBLearn.svg' %}
{% assign color_main = '#1BA8E1' %}
{% assign color_dark = '#027BB6' %}
{% assign color_light = '#1BA8E1' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Ally' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Ally.svg' %}
{% assign color_main = '#1BA8E1' %}
{% assign color_dark = '#1BA8E1' %}
{% assign color_light = '#A3DBDC' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Course Evaluations' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Course+Evaluations.svg' %}
{% assign color_main = '#1BA8E1' %}
{% assign color_dark = '#004C6D' %}
{% assign color_light = '#027BB6' %}
{%- comment -%} NEED DIFF IMG FORMAT FOR THIS ONE {%- endcomment -%}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Evaluate' %}
{% assign product_logo = 'blank' %}
{% assign color_main = '#1BA8E1' %}
{% assign color_dark = '#027BB6' %}
{% assign color_light = '#A3DBDC' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Portfolio' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Portfolio.svg' %}
{% assign color_main = '#1BA8E1' %}
{% assign color_dark = '#0090A1' %}
{% assign color_light = '#5CC6CC' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Program Review' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Program+Review.svg' %}
{% assign color_main = '#1BA8E1' %}
{% assign color_dark = '#027BB6' %}
{% assign color_light = '#5CC6CC' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Planning' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Planning.svg' %}
{% assign color_main = '#1BA8E1' %}
{% assign color_dark = '#000000' %}
{% assign color_light = '#004C6D' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Accreditation' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Accreditation.svg' %}
{% assign color_main = '#1BA8E1' %}
{% assign color_dark = '#0090A1' %}
{% assign color_light = '#1BA8E1' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology 101' %}
{% assign product_logo = 'blank' %}
{% assign color_main = '#7F59A5' %}
{% assign color_dark = '#573376' %}
{% assign color_light = '#7F59A5' %}
{% elsif course.properties.product_names_for_course_cards == 'Academy Use & Navigation' %}
{% assign product_logo = 'blank' %}
{% assign color_main = '#7F59A5' %}
{% assign color_dark = '#6283C2' %}
{% assign color_light = '#87ADDB' %}
{% elsif course.properties.product_names_for_course_cards == 'Data Strategy' %}
{% assign product_logo = 'blank' %}
{% assign color_main = '#7F59A5' %}
{% assign color_dark = '#000000' %}
{% assign color_light = '#573376' %}
{% elsif course.properties.product_names_for_course_cards == 'Faculty Development' %}
{% assign product_logo = 'blank' %}
{% assign color_main = '#7F59A5' %}
{% assign color_dark = '#7F59A5' %}
{% assign color_light = '#AA7FB8' %}
{% elsif course.properties.product_names_for_course_cards == 'Power BI' %}
{% assign product_logo = 'blank' %}
{% assign color_main = '#7F59A5' %}
{% assign color_dark = '#573376' %}
{% assign color_light = '#87ADDB' %}
{% elsif course.properties.product_names_for_course_cards == 'Professional Development' %}
{% assign product_logo = 'blank' %}
{% assign color_main = '#7F59A5' %}
{% assign color_dark = '#000000' %}
{% assign color_light = '#87ADDB' %}
{% else %}
{% assign product_logo = 'blank' %}
{% assign color_main = '#DCE4E9' %}
{% assign color_dark = '#747A7B' %}
{% assign color_light = '#B2B7BA' %}
{% endif %}
<div class="np-card-container">
<div class="np-resource-header np-course-header np-card-padding-large">
{% include "course_header" %}
</div>
<div class="np-divider"></div>
<div class="row np-course-content np-card-padding-dynamic">
<div class="col-xs-12 col-sm-6">
{%- comment -%} <div class="np-progress-bar-container" style="background: {{ color_light }}; border-radius: 0;">
<div
style="width: {{ course.progress }}%; background: {{ color_dark }}"
class="np-button-background-color np-card-progress-bar course-card-progress-bar">
</div>
</div> {%- endcomment -%}
<div class="product-banner">
{% if product_logo != 'blank' %}
<img src='{{ product_logo }}' class="product-logo" style="height: 36px;"/>
{% else %}
Anthology
{% endif %}
</div>
<div class="np-top-image np-top-image-spacing course-image-replacement" style="border-radius: 0;">
<div class="course-cover-info">
<div class="np-flex-1">
<h3 class="course-cover-title">
{{ course.name }}
</h3>
{% assign act_count = 0 %}
{% for section in course.sections %}
{% for activity in section.activities %}
{% assign act_count = act_count| plus: 1 %}
{% endfor %}
{% endfor %}
<span style="color: #757575; font-size: 18px">
{{ act_count }} {% if act_count == 1 %}Activity{% else %}Activities{% endif %}
</span>
</div>
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
{% if course.has_to_restart? %}
{% include "course_version_outdated_popup", path: course_path %}
{% endif %}
</div>
</div>
{%- comment -%} <img
src="{{ course.image_url }}"
class="np-top-image np-top-image-spacing"
alt="{{ course.name }}"
/> {%- endcomment -%}
{% include "course_description" %}
{% if course.categories.any? %}
<div class="np-card-content-divider">
{% include "course_categories" %}
</div>
{% endif %}
{% if course.instructors.any? %}
<div class="np-card-content-divider">
{% include "course_instructors" %}
</div>
{% endif %}
{% if course.events.any? %}
<div class="np-card-content-divider">
{% include "course_events" %}
</div>
{% endif %}
</div>
<div class="np-grid-spacing col-xs-12 col-sm-6">
<div class="np-top-cta">
{% include "course_progress_and_cta" %}
</div>
{% include "course_outline" %}
</div>
</div>
</div>
<style>
.course-image-replacement{
/* background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(225,235,243,1) 60%); */
background: linear-gradient(325deg, rgba(255,255,255,1) 0%, rgb(225 235 343 / 30%) 60%);
}
.course-cover-title{
font-size: 2em;
line-height: 45px;
margin-bottom: 20px;
}
.course-cover-info{
display: flex;
flex-direction: column;
height: 25em;
justify-content: center;
}
</style>

68
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_course_header.html.liquid Normal file
View File

@ -0,0 +1,68 @@
<div class="np-top-vocabulary np-text-title np-text-muted">
{{ current_school.course_vocabulary }}
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
</i>
</div>
<div class="np-top-title">
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
</a>
<span class="desktop-back-label">Back</span>
</div>
{%- comment -%} <img
src="{{ course.image_url }}"
class="np-top-image np-hidden-desktop"
alt="{{ course.name }}"
/> {%- endcomment -%}
<div class="product-banner np-hidden-desktop">
{% if product_logo != 'blank' %}
<img src='{{ product_logo }}' class="product-logo" style="height: 36px;"/>
{% else %}
Anthology
{% endif %}
</div>
{%- comment -%} <div class="course-image-replacement np-hidden-desktop" style="border-radius: 0;"> {%- endcomment -%}
<div class="course-cover-info np-hidden-desktop">
<div class="np-flex-1">
<h3 class="course-cover-title">
{{ course.name }}
</h3>
{% assign act_count = 0 %}
{% for section in course.sections %}
{% for activity in section.activities %}
{% assign act_count = act_count| plus: 1 %}
{% endfor %}
{% endfor %}
<span style="color: #757575; font-size: 18px">
{{ act_count }} {% if act_count == 1 %}Activity{% else %}Activities{% endif %}
</span>
</div>
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
{% if course.has_to_restart? %}
{% include "course_version_outdated_popup", path: course_path %}
{% endif %}
</div>
<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>

40
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_course_mobile_view.html.liquid Normal file
View File

@ -0,0 +1,40 @@
<div class="np-card-container np-card-padding-large">
{% include "course_header" %}
<div class="np-top-cta">
{% include "course_progress_and_cta" %}
</div>
</div>
{% if course.progress == 0 %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_description" %}
</div>
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_outline" %}
</div>
{% else %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_outline" %}
</div>
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_description" %}
</div>
{% endif %}
{% if course.categories.any? %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_categories" %}
</div>
{% endif %}
{% if course.instructors.any? %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_instructors" %}
</div>
{% endif %}
{% if course.events.any? %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_events" %}
</div>
{% endif %}

15
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_course_progress_and_cta.html.liquid
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? %}
@ -55,4 +61,3 @@
</a> </a>
{% endif %} {% endif %}
{% endif %} {% endif %}

4
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_courses_catalog.html.liquid
View File

@ -1,11 +1,11 @@
<div class="homepage-resource-header catalog-header"> <div class="homepage-resource-header catalog-header" style="margin-top: 50px; margin-bottom: 20px;">
All Learning All Learning
</div> </div>
{%- comment -%} Catalog is not used in this school. The "catalog" is the set of unstarted enrolled courses shown at the homepage {%- endcomment -%} {%- comment -%} Catalog is not used in this school. The "catalog" is the set of unstarted enrolled courses shown at the homepage {%- endcomment -%}
<div class="np-catalog-courses row row-with-thumbnails"> <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>

8
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_courses_index_completed.html.liquid
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 %}

8
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_courses_index_in_prog.html.liquid
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 %}

4
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_filter_by_category.html.liquid
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"
@ -8,7 +8,7 @@
onchange="filterCatalog()" onchange="filterCatalog()"
> >
{% assign sorted_categories = current_school.filterable_categories | sort: "name" %} {% assign sorted_categories = current_school.filterable_categories | sort: "name" %}
<option class="category-filter-entry" value="" selected disabled>Filter By Category</option> <option class="category-filter-entry" value="" selected disabled>All Categories</option>
<option class="category-filter-entry" value="0">All Categories</option> <option class="category-filter-entry" value="0">All Categories</option>
{% for category in sorted_categories %} {% for category in sorted_categories %}

60
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_filter_by_product.html.liquid
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>Product: All</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 %}
@ -46,7 +50,7 @@
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);
productOption.innerHTML = `Product: ${product}`; productOption.innerHTML = `${product}`;
productFilterEl.appendChild(productOption); productFilterEl.appendChild(productOption);
} }
}) })
@ -55,32 +59,42 @@
} }
let filterByProduct = () => { let filterByProduct = () => {
console.log(event.target.value);
let allLearning = document.querySelector('.np-catalog-courses').children; let allLearning = document.querySelector('.np-catalog-courses').children;
let popular = document.querySelector('.popular-courses').children;
for(let i = 0; i < allLearning.length; i++){ for(let i = 0; i < allLearning.length; i++){
if(event.target.value == 'Default'){ if(event.target.value == 'Default'){
if(!allLearning[i].classList.contains('hidden-by-search')){
allLearning[i].style.display = 'block'; allLearning[i].style.display = 'block';
}
allLearning[i].classList.remove('filtered')
} else { } else {
if(allLearning[i].dataset.product != event.target.value){ if(allLearning[i].dataset.product != event.target.value){
allLearning[i].style.display = 'none'; allLearning[i].style.display = 'none';
allLearning[i].classList.add('filtered');
} else { } else {
if(!allLearning[i].classList.contains('hidden-by-search')){
allLearning[i].style.display = 'block'; allLearning[i].style.display = 'block';
}
allLearning[i].classList.remove('filtered');
}; };
}; };
}; };
for(let i = 0; i < popular.length; i++){ //for(let i = 0; i < popular.length; i++){
if(event.target.value == 'Default'){ // if(event.target.value == 'Default'){
popular[i].style.display = 'block'; // popular[i].style.display = 'block';
} else { // } else {
if(popular[i].dataset.product != event.target.value){ // if(popular[i].dataset.product != event.target.value){
popular[i].style.display = 'none'; // popular[i].style.display = 'none';
} else { // } else {
popular[i].style.display = 'block'; // popular[i].style.display = 'block';
}; // };
}; // };
}; //};
} }
{% elsif page == 'Dashboard' %} {% elsif page == 'Dashboard' %}
if(allProductTypesDash.length > 1){ if(allProductTypesDash.length > 1){
@ -92,13 +106,14 @@
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)
productOption.innerHTML = `Product: ${product}`; productOption.innerHTML = `${product}`;
productFilterEl.appendChild(productOption); productFilterEl.appendChild(productOption);
} }
}) })
} else { } else {
productFilterEl.style.display = 'none'; productFilterEl.style.display = 'none';
document.querySelector('.view-swapper-container').style.marginBottom = '0';
} }
let filterByProduct = () => { let filterByProduct = () => {
@ -109,6 +124,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 +149,9 @@
} }
{% endif %} {% endif %}
</script> </script>
<style>
.filtered{
display: none !important;
}
</style>

39
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_filter_dropdown.html.liquid
View File

@ -1,39 +0,0 @@
<div class="np-filter">
<div class="dropdown">
<select
class="category-filter-dropdown np-input"
type="text"
name="category-filter-dropdown"
id="category-filter-dropdown"
onchange="filterCatalog()"
>
{% assign sorted_categories = current_school.filterable_categories | sort: "name" %}
<option class="category-filter-entry" value="" selected disabled>Filter By Category</option>
<option class="category-filter-entry" value="0">All Categories</option>
{% for category in sorted_categories %}
<option class="category-filter-entry" value="{{ category.id }}">{{ category.name }}</option>
{% endfor %}
</select>
</div>
</div>
<script>
let filterCatalog = () => {
console.log(event.target.value);
if(event.target.value.length > 0){
if(event.target.value == 0){
window.location.href = '/app'
} else {
window.location.href = `/app?filter[category_uuid][in][]=${event.target.value}`
}
}
}
</script>
<style>
.category-filter-dropdown{
padding-top: 12px;
}
</style>

100
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_footer.html.liquid Normal file
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>

73
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_header.html.liquid
View File

@ -1,3 +1,26 @@
{% if current_person.signed_in? == false %}
<script>
if (localStorage.getItem('registered') == true) {
localStorage.removeItem('registered')
} else {
window.location.href = '/app/sign-up-follow-up'
}
</script>
{% endif %}
{% if current_person.signed_in? and current_person.properties.learner_completed_additional_info == false %}
{% unless current_person.email contains '+preview-' %}
<script>
if (localStorage.getItem('learnerCompletedAdditionalInfo') != null) {
window.location.href = '/app/dashboard'
} else {
window.location.href = '/app/sign-up-follow-up'
}
</script>
{% endunless %}
{% endif %}
{%- 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">
@ -58,7 +81,7 @@
</ul> {%- endcomment -%} </ul> {%- endcomment -%}
<div class="np-sub-navigation-content"> <div class="np-sub-navigation-content">
{% for link in navigations.sub_navigation %} {% for link in navigations.sub_navigation %}
{% unless link.label == 'Catalog' %} {% unless link.label == 'Catalog' or link.label == 'Learning Paths' %}
<div class="np-sub-navigation-content-item {{ link.active_class }}"> <div class="np-sub-navigation-content-item {{ link.active_class }}">
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}"> <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i> <i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
@ -86,8 +109,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"
@ -149,7 +178,7 @@
{%- comment -%} Mobile Header {%- endcomment -%} {%- comment -%} Mobile Header {%- endcomment -%}
<div class="np-hidden-desktop"> <div class="np-hidden-desktop">
<div class="np-header-mobile-menu-content np-hidden"> <div class="np-header-mobile-menu-content np-hidden">
{% if current_person.signed_in? %} {%- comment -%} {% if current_person.signed_in? %}
<img <img
alt="{{ current_person.name }}" alt="{{ current_person.name }}"
class="np-header-mobile-menu-content-avatar" class="np-header-mobile-menu-content-avatar"
@ -158,7 +187,7 @@
<div class="np-header-mobile-menu-content-name"> <div class="np-header-mobile-menu-content-name">
{{ current_person.name }} {{ current_person.name }}
</div> </div>
{% endif %} {% endif %} {%- endcomment -%}
<div class="np-header-mobile-menu-content-nav"> <div class="np-header-mobile-menu-content-nav">
<form <form
class="np-header-search" class="np-header-search"
@ -184,6 +213,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 +239,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>

189
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_header_default.html.liquid
View File

@ -1,189 +0,0 @@
<header class="np-header np-header-color">
<div class="np-header-content">
<div class="np-hidden-desktop np-header-mobile-menu-nav">
{% if current_person.signed_in? %}
<button
data-toggle-class="np-hidden"
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
data-toggle-target=".np-header-mobile-avatar-menu,
.np-header-mobile-menu-content, .np-main, .np-footer"
></button>
<button
data-test="open-mobile-menu"
data-toggle-class="np-hidden"
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
>
<img
alt="{{ current_person.name }}"
class="np-header-avatar-image"
src="{{ current_person.avatar_url }}"
/>
</button>
{% endif %}
</div>
{% if current_school.logo_url %}
<h1 class="np-header-logo">
<a href="{% route home %}">
<img
alt="{{ current_school.name }}"
class="np-header-logo-image"
src="{{ current_school.logo_url }}"
/>
</a>
</h1>
{% else %}
<a href="{% route home %}" class="np-school-name np-header-font-color">
{{ current_school.name }}
</a>
{% endif %}
<div class="np-hidden-mobile np-header-desktop-nav">
<ul class="np-header-desktop-nav-list">
{%- comment -%} {% if current_school.filterable_categories.any? %}
<li class="np-header-desktop-nav-item courses-dropdown">
{%
include "dropdown_courses",
title: "Courses",
categories: current_school.filterable_categories,
courses: courses.in_catalog
%}
</li>
{% endif %} {%- endcomment -%}
{% for website_navigation in navigations.header_navigations_external %}
<li class= "np-header-desktop-nav-item">
<a
href="{{ website_navigation.path }}"
class="np-header-desktop-nav-link np-header-font-color"
target="_blank"
>
{{ website_navigation.name }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% if current_person.signed_in? %}
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
<form action="{% route search %}" method="get" data-test="desktop-search">
<input
aria-label="{% t .search %}"
class="np-header-search-input np-header-font-background-color"
type="text"
name="q"
placeholder="{% t .search %}"
/>
<i class="np-header-search-icon far fa-search"></i>
</form>
</div>
<div class="np-hidden-mobile np-header-avatar">
<button
class="np-header-avatar-button"
data-test="open-desktop-menu"
data-toggle-class-on-target="np-hidden"
data-toggle-target=".np-header-avatar-tooltip"
data-toggle-outside
>
<img
alt="{{ current_person.name }}"
class="np-header-avatar-image"
src="{{ current_person.avatar_url }}"
>
</button>
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
<span class="np-header-avatar-tooltip-arrow-up"></span>
<div class="np-header-avatar-tooltip-learner">
<div class="np-header-avatar-tooltip-learner-name">
{{ current_person.name }}
</div>
<div class="np-header-avatar-tooltip-learner-email">
{{ current_person.email }}
</div>
</div>
<nav class="np-header-avatar-tooltip-navigation">
{% unless current_school.sso_active? %}
<a
class="np-header-avatar-tooltip-navigation-link"
href="{% route account %}"
>
Profile Settings
</a>
{% endunless %}
<a
class="np-header-avatar-tooltip-navigation-link np-danger"
href="{% route logout %}"
>
Sign Out
</a>
</nav>
</div>
</div>
{% else %}
<a
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
href="{% route login %}"
>
<span style="font-weight: 700; color: #fff; text-decoration: underline;">Log in / Register</span>
</div>
{% endif %}
</div>
</header>
<div class="np-hidden-desktop">
<div class="np-header-mobile-menu-content np-hidden">
{% if current_person.signed_in? %}
<img
alt="{{ current_person.name }}"
class="np-header-mobile-menu-content-avatar"
src="{{ current_person.avatar_url }}"
/>
<div class="np-header-mobile-menu-content-name">
{{ current_person.name }}
</div>
{% endif %}
<div class="np-header-mobile-menu-content-nav">
<form
class="np-header-search"
data-test="mobile-search"
method="get"
action="{% route search %}"
>
<input
aria-label="{% t .search %}"
class="np-header-search-input"
type="text"
name="q"
placeholder="{% t .search %}"
/>
<i class="np-header-search-icon far fa-search"></i>
</form>
{% for website_navigation in navigations.header_navigations %}
<a
href="{{ website_navigation.path }}"
class="np-header-mobile-menu-content-button"
{% if website_navigation.external? %} target="_blank" {% endif %}
>
{{ website_navigation.name }}
</a>
{% endfor %}
<div class="np-header-mobile-menu-content-line"></div>
{% unless current_school.sso_active? %}
<a
class="np-header-mobile-menu-content-button"
href="{% route account %}"
>
Profile Settings
</a>
{% endunless %}
<a
class="np-header-mobile-menu-content-button np-danger"
href="{% route logout %}"
>
Sign Out
</a>
</div>
</div>
</div>
{% include "messages" %}

6
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_popular_courses_non_carousel.html.liquid
View File

@ -1,10 +1,10 @@
<div class="homepage-resource-header most-popular-header"> <div class="homepage-resource-header most-popular-header" style="margin-top: 50px; margin-bottom: 20px;">
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 %}

503
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_popup_additional_info.html.liquid Normal file
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">I’d 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">I’m 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>

186
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_profile_card.html.liquid
View File

@ -11,9 +11,9 @@
margin-bottom: 23px; margin-bottom: 23px;
width: 102px;" width: 102px;"
/> />
<div class="profile-bio-header"> {%- comment -%} <div class="profile-bio-header">
Account Details Account Details
</div> </div> {%- endcomment -%}
<span class="profile-bio-name">{{ current_person.first_name }} {{current_person.last_name}}</span> <span class="profile-bio-name">{{ current_person.first_name }} {{current_person.last_name}}</span>
<span class="profile-bio-email">{{ current_person.email }}</span> <span class="profile-bio-email">{{ current_person.email }}</span>
@ -26,31 +26,44 @@
</a> </a>
{% endunless %} {% endunless %}
</div> </div>
{% assign sub_level_length = current_person.properties.subscription_levels | size %}
{% if sub_level_length > 0 %} </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-container">
<div class="product-subscriptions-banner"> <div class="product-subscriptions-banner">
<div class="product-subscription-banner-content">
<span class="subscription-name" style="border: none;"> <span class="subscription-name" style="border: none;">
PRODUCT SUBSCRIPTION Product Subscriptions
</span> </span>
<span class="subscription-level"> {%- comment -%} <span class="subscription-level">
PLAN PLAN
</span> </span> {%- endcomment -%}
</div>
</div> </div>
<ul class="product-subscriptions"> <ul class="product-subscriptions">
{% assign subscription_levels = current_person.properties.subscription_levels | split: "," %} {% assign subscription_levels = current_person.properties.subscription_levels | split: "," %}
<div class="product-subscription-level-header">
Essential
</div>
<div style="background: #795CA0; height: 3px; margin: 5px; width: 20px;"></div>
{% for subscription_level in subscription_levels %} {% for subscription_level in subscription_levels %}
{% assign name_level_pair = subscription_level | split: ":"%} {% 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"> <li class="product-subscription">
{% include "profile_logo_calculator", product: name_level_pair[0] %} {% include "profile_logo_calculator", product: name_level_pair[0] %}
{%- comment -%} <span class="subscription-name"> {%- comment -%} <span class="subscription-name">
{{ name_level_pair[0] }} {{ name_level_pair[0] }}
</span> {%- endcomment -%} </span> {%- endcomment -%}
<span class="subscription-level"> {%- comment -%} <span class="subscription-level">
{{ name_level_pair[1] }}
</span> {%- endcomment -%}
{%- comment -%} {% if '{{name_level_pair[1]}}' == 'ESS' %} {%- comment -%} {% if '{{name_level_pair[1]}}' == 'ESS' %}
Essential Essential
{% elsif '{{name_level_pair[1]}}' == 'ENH' %} {% elsif '{{name_level_pair[1]}}' == 'ENH' %}
@ -58,10 +71,68 @@
{% elsif '{{name_level_pair[1]}}' == 'ENH+' %} {% elsif '{{name_level_pair[1]}}' == 'ENH+' %}
Enhanced Plus Enhanced Plus
{% endif %} {%- endcomment -%} {% endif %} {%- endcomment -%}
{{ name_level_pair[1] }}
</span>
</li> </li>
{% endif %}
{% endfor %}
<div class="product-subscription-level-header" style="margin-top: 20px;">
Enhanced
</div>
<div style="background: #49A9E1; height: 3px; margin: 5px; width: 20px;"></div>
{% 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 %}
<div class="product-subscription-level-header" style="margin-top: 20px;">
Enhanced Plus
</div>
<div style="background: #E26B37; height: 3px; margin: 5px; width: 20px;"></div>
{% 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 %} {% endfor %}
</ul> </ul>
</div> </div>
@ -75,17 +146,20 @@
margin-bottom: 45px; margin-bottom: 45px;
} }
.profile-card-wrapper{ /* .profile-card-wrapper{
background: #AA7FB8; background: #AA7FB8;
border: 1px solid #EAEAEA; border: 1px solid #EFEFEF;
padding-top: 14px; padding-top: 14px;
} } */
.profile-card{ .profile-card{
background: #fafafa; background: #FFF;
height: 100%; border: 1px solid #f2f4f5;
padding: 12px; box-shadow: 0 3px 5px rgba(0,0,0,.1);
padding-bottom: 32px; margin-bottom: 25px;
/* padding: 12px;
padding-bottom: 32px; */
padding: 45px 0;
width: 100%; width: 100%;
} }
@ -94,7 +168,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 35px 0 85px
} }
.profile-bio-header{ .profile-bio-header{
@ -110,52 +183,67 @@
.profile-bio-name, .profile-bio-name,
.profile-bio-email{ .profile-bio-email{
font-size: 16px;
font-weight: 400;
line-height: 25px; line-height: 25px;
text-align: center; text-align: center;
} }
.profile-bio-name{ .profile-bio-name{
font-size: 18px;
font-weight: 600;
margin-bottom: 12px; margin-bottom: 12px;
} }
.profile-bio-email{ .profile-bio-email{
font-size: 16px;
font-weight: 400;
margin-bottom: 35px; margin-bottom: 35px;
} }
.profile-bio-account-settings-button{ .profile-bio-account-settings-button{
color: #000; background-color: #aa7fb8;
border: 1px solid #000; border-radius: 25px;
padding: 12px 25px; color: #FFF;
font-weight: 400;
line-height: 1;
margin: 20px 30px;
padding: 12px 18px 12px;
position: relative;
text-align: center;
text-decoration: none; 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{ .product-subscriptions-banner{
align-items: center; align-items: center;
background: #EAEAEA; /* background: #EAEAEA; */
border-bottom: 1px solid #f2f4f5;
display: flex; display: flex;
font-size: 14px; /* font-size: 14px;
font-weight: 400; font-weight: 400; */
height: 36px; font-size: 16px;
font-weight: 600;
height: 55px;
justify-content: center; justify-content: center;
line-height: 25px; /* 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{ .product-subscriptions{
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0; padding: 0;
padding-right: 8px; }
.product-subscription-level-header{
color: #595959;
font-size: 1em;
/* margin-bottom: 10px; */
} }
.product-subscription{ .product-subscription{
@ -167,20 +255,24 @@
} }
.subscription-name{ .subscription-name{
align-items: center; /* align-items: center;
border-right: 2px solid #EAEAEA; border-right: 2px solid #EAEAEA;
display: flex; display: flex;
height: 100%; height: 25px; */
width: 70%; margin: 3px 0;
} }
.subscription-level{ .profile-card-product-logo{
height: 1.25em;
}
/* .subscription-level{
align-items: center; align-items: center;
display: flex; display: flex;
height: 100%; height: 100%;
padding-left: 10px; padding-left: 10px;
width: 30%; width: 30%;
} } */
@media screen and (min-width: 768px){ @media screen and (min-width: 768px){
.profile-card-container{ .profile-card-container{

6
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_profile_logo_calculator.html.liquid
View File

@ -33,13 +33,13 @@
{% 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' %}
@ -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 %}

26
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_sub_navigation.html.liquid
View File

@ -1,7 +1,7 @@
<nav class="np-sub-navigation"> <nav class="np-sub-navigation">
<div class="np-sub-navigation-content"> <div class="np-sub-navigation-content">
{% for link in navigations.sub_navigation %} {% for link in navigations.sub_navigation %}
{% unless link.label == 'Catalog' or link.label == 'Learning Paths' or link.label == 'Events' %} {% unless link.label == 'Catalog' or link.label == 'Learning Paths' %}
<div class="np-sub-navigation-content-item {{ link.active_class }}"> <div class="np-sub-navigation-content-item {{ link.active_class }}">
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}"> <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i> <i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
@ -11,29 +11,5 @@
</div> </div>
{% endunless %} {% endunless %}
{% endfor %} {% endfor %}
{% for link in navigations.sub_navigation %}
{% if link.label == 'Learning Paths' %}
<div class="np-sub-navigation-content-item {{ link.active_class }}">
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
{{ link.label }}
</a>
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
</div>
{% endif %}
{% endfor %}
{% for link in navigations.sub_navigation %}
{% if link.label == 'Catalog' %}
<div class="np-sub-navigation-content-item {{ link.active_class }}">
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
{{ link.label }}
</a>
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
</div>
{% endif %}
{% endfor %}
</div> </div>
</nav> </nav>

2
Custom_Templates/customer_templates/Anthology Academy - Sandbox/_training_events_index.html.liquid
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 %}

195
Custom_Templates/customer_templates/Anthology Academy - Sandbox/dashboard.html.liquid
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 %}
@ -88,119 +95,6 @@
</main> </main>
{% include "footer" %} {% include "footer" %}
{%- comment -%} {% assign totalCountEnrolledDash = 0 %}
{% assign totalCountInProgDash = 0 %}
{% assign totalCountCompletedDash = 0 %}
{% if courses.enrolled.any? %}
{% for course in courses.enrolled %}
{% assign totalCountEnrolledDash = totalCountEnrolledDash | plus: 1 %}
{% if course.progress > 0 and course.progress < 100 %}
{% assign totalCountInProgDash = totalCountInProgDash | plus: 1 %}
{% elsif course.progress == 100 %}
{% assign totalCountCompletedDash = totalCountCompletedDash | plus: 1 %}
{% endif %}
{% endfor %}
{% endif %}
{% if totalCountEnrolledDash > 3 %}
<script>
var indexSlider = tns({
container: '.courses-index-carousel',
controls: false,
items: 1,
nav: false,
navPosition: 'bottom',
responsive: {
768: {
items: 3
}
}
});
</script>
{% endif %}
{% if totalCountInProgDash > 3 %}
<script>
var sliderInProg = tns({
container: '.courses-in-prog-carousel',
controls: false,
items: 1,
nav: false,
navPosition: 'bottom',
responsive: {
768: {
items: 3
}
}
});
</script>
{% endif %}
{% if totalCountCompletedDash > 3 %}
<script>
var sliderCompleted = tns({
container: '.courses-in-prog-carousel',
controls: false,
items: 1,
nav: false,
navPosition: 'bottom',
responsive: {
768: {
items: 3
}
}
});
</script>
{% endif %}
{% assign availableEventsDash = 0 %}
{% if training_events.available.any? %}
{% for training_event in training_events.available %}
{% assign availableEventsDash = availableEventsDash | plus: 1 %}
{% endfor %}
{% endif %}
{% assign enrolledEventsDash = 0 %}
{% if training_events.enrolled.any? %}
{% for training_event in training_events.enrolled %}
{% assign enrolledEventsDash = enrolledEventsDash | plus: 1 %}
{% endfor %}
{% endif %}
{% if availableEventsDash > 3 %}
<script>
var eventsASlider = tns({
container: '.events-available-carousel',
controls: false,
items: 1,
nav: false,
navPosition: 'bottom',
responsive: {
768: {
items: 3
}
}
});
</script>
{% endif %}
{% if enrolledEventsDash > 3 %}
<script>
var eventsESlider = tns({
container: '.events-enrolled-carousel',
controls: false,
items: 1,
nav: false,
navPosition: 'bottom',
responsive: {
768: {
items: 3
}
}
});
</script>
{% endif %} {%- endcomment -%}
<script> <script>
let swapView = () => { let swapView = () => {
console.log(event.target.classList); console.log(event.target.classList);
@ -218,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')){
@ -242,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;
@ -287,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;
} }
@ -295,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;
@ -302,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){
@ -314,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;
@ -325,12 +246,8 @@
} }
.view-swapper-container{ .view-swapper-container{
margin-bottom: -6px; margin-bottom: -38px;
} width: unset;
.product-filter-container{
margin: 0;
margin-bottom: 6px;
} }
.dashboard-learning-content{ .dashboard-learning-content{
@ -340,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 -%}

293
Custom_Templates/customer_templates/Anthology Academy - Sandbox/homepage.html.liquid
View File

@ -1,35 +1,123 @@
<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 "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %} {% 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"> <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-wrapper catalog-header-wrapper">
<div class="np-catalog-header"> <div class="np-catalog-header">
<div class="np-resource-title catalog-title">Catalog</div> <div class="np-resource-title catalog-title">Catalog</div>
<div class="catalog-subtitle">Explore our collection of learning resources</div>
</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>
{%- 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"> <form action="{% route search %}" method="get" data-test="desktop-search" class="catalog-search-wrapper">
<input <input
aria-label="search_topics" aria-label="search_topics"
class="np-header-font-background-color catalog-search" class="np-header-font-background-color catalog-search"
type="text" type="text"
name="q" name="q"
placeholder="Search Topics" placeholder=""
/>
<i class="far fa-search search-icon"></i>
</form>
{% endif %} {%- endcomment -%}
<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> <i class="far fa-search search-icon"></i>
</form> </form>
</div> </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"> <div class="filter-buttons-container">
{% include "filter_by_product", page: 'Homepage' %} {% 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>
{% 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 renderPopular = false %}
{% assign totalCount = 0 %} {% assign totalCount = 0 %}
@ -42,13 +130,9 @@
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% if renderPopular == true %} {%- comment -%} {% if renderPopular == true %}
{%- comment -%} {% if totalCount > 3 %}
{% include "popular_courses_carousel" %}
{% else %}
{% endif %} {%- endcomment -%}
{% include "popular_courses_non_carousel" %} {% include "popular_courses_non_carousel" %}
{% endif %} {% endif %} {%- endcomment -%}
{% if courses.enrolled.any? %} {% if courses.enrolled.any? %}
{% include "courses_catalog" %} {% include "courses_catalog" %}
@ -65,6 +149,104 @@
</main> </main>
{% include "footer" %} {% 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> <style>
.catalog-header-wrapper{ .catalog-header-wrapper{
display: flex; display: flex;
@ -72,21 +254,50 @@
} }
.catalog-title{ .catalog-title{
color: #000000; color: #0A0A0A;
font-size: 32px; font-size: 2em;
font-weight: 900;
line-height: 2.375rem;
margin-bottom: 12px;
}
.catalog-subtitle{
color: #595959;
font-size: 1.25em;
font-weight: 400; font-weight: 400;
line-height: 25px; margin-bottom: 24px;
margin-bottom: 30px; }
.search-and-filter-component{
align-items: flex-start;
display: flex;
flex-direction: column;
} }
.catalog-search-wrapper{ .catalog-search-wrapper{
position: relative; position: relative;
} }
.catalog-search-component,
.catalog-filter-component{
display: flex;
flex-direction: column;
}
.catalog-search-component{
margin-bottom: 15px;
width: 100%;
}
.catalog-search{ .catalog-search{
border: 1px solid #D9D9D9; background-color: #fefefe;
border: 1px solid #ce9dc7;
border-radius: 30px;
font-weight: 400;
height: 60px; height: 60px;
line-height: 1;
padding-left: 75px; padding-left: 75px;
text-decoration: none;
width: 100%; width: 100%;
} }
@ -105,18 +316,56 @@
} }
@media screen and (min-width: 768px){ @media screen and (min-width: 768px){
.mobile-subnav{
display: none;
}
.search-and-filter-component{
align-items: center;
flex-direction: row;
}
.np-catalog-courses{ .np-catalog-courses{
margin: 0; margin: 0;
max-width: 100%; max-width: 100%;
} }
.np-subpage-container{ .np-subpage-container{
padding: 50px 24px 184px; padding: 50px 50px 184px;
} }
.dropdown-menu{ .dropdown-menu{
left: 0; left: 0;
right: unset; 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> </style>

1
Custom_Templates/customer_templates/Anthology Academy - Sandbox/sign-up-follow-up.html.liquid Normal file
View File

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

124
Custom_Templates/customer_templates/Anthology Academy - Sandbox/sign_up.html.liquid Normal file
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>

72
Custom_Templates/customer_templates/Anthology Academy - Sandbox/styles.css.liquid
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 }}
@ -18,10 +17,17 @@ body{
font-family: 'Nunito Sans', sans-serif; font-family: 'Nunito Sans', sans-serif;
} }
body,
main{
background-color: #FEFEFE !important;
}
/* HEADER STYLES */ /* HEADER STYLES */
.np-header{ .np-header{
height: 77px; border-top: 15px solid #e1ebf3;
border-bottom: 2px solid #e1ebf3;
height: 95px;
padding: 0 22px; padding: 0 22px;
} }
@ -39,6 +45,10 @@ body{
flex-grow: unset; flex-grow: unset;
} }
.np-header-mobile-menu-nav{
position: unset;
}
.np-header-avatar{ .np-header-avatar{
align-items: center; align-items: center;
height: 100%; height: 100%;
@ -55,6 +65,12 @@ body{
line-height: 25px; line-height: 25px;
} }
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-link,
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-bar{
color: #0A0A0A
}
/* GLOBAL CARD STYLES */ /* GLOBAL CARD STYLES */
.np-card-padding{ .np-card-padding{
@ -65,7 +81,8 @@ body{
.course-card .np-card-container{ .course-card .np-card-container{
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: 0 3px 30px rgba(0,0,0,.1);
overflow: hidden;
} }
.course-card .np-card-image{ .course-card .np-card-image{
@ -75,12 +92,17 @@ body{
.card-bottom-details{ .card-bottom-details{
align-items: center; align-items: center;
display: flex; display: flex;
font-size: 0.875em;
flex-direction: row; flex-direction: row;
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;
@ -98,7 +120,6 @@ body{
} }
.next-carousel-button{ .next-carousel-button{
/* margin-left: 18px; */
margin-left: 39px; margin-left: 39px;
} }
@ -110,7 +131,7 @@ body{
.fa-arrow-left, .fa-arrow-left,
.fa-arrow-right{ .fa-arrow-right{
font-size: 24px; font-size: 24px;
} } */
/* EVENT CARDS */ /* EVENT CARDS */
.event-card{ .event-card{
@ -126,9 +147,11 @@ body{
/* FILTER STYLES */ /* FILTER STYLES */
.np-filter{ .np-filter{
justify-content: center; justify-content: center;
margin-bottom: 0;
margin-right: 15px; margin-right: 15px;
} }
.filter-buttons-container{ .filter-buttons-container{
align-items: center; align-items: center;
display: flex; display: flex;
@ -137,5 +160,40 @@ body{
.product-filter-dropdown, .product-filter-dropdown,
.category-filter-dropdown{ .category-filter-dropdown{
padding-top: 12px; background-color: #fefefe;
border-radius: 30px;
color: #595959;
font-size: 1em;
font-weight: 700;
height: 60px;
line-height: 1;
padding: 5px 12px;
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){
.np-filter{
margin-top: 0;
margin-bottom: 0;
}
}
/* HERO STYLING */
@media screen and (min-width: 768px){
.np-homepage-hero{
margin: 0 -24px;
}
} }

12
CustomerNotes/Anthology/Workflows_js_nodes.js
View File

@ -12,12 +12,12 @@ const fetch = require("node-fetch")
exports.main = async ({ user_email }) => { exports.main = async ({ user_email }) => {
let all_domains = [ let all_domains = [
'@newanthology.com', 'newanthology.com',
'@knowledgestate.edu', 'knowledgestate.edu',
'@creighton.edu', 'creighton.edu',
'@tc.columbia.edu', 'tc.columbia.edu',
'@mstc.edu', 'mstc.edu',
'@gvltec.edu', 'gvltec.edu',
] ]
let user_domain = user_email.slice(user_email.indexOf('@')); let user_domain = user_email.slice(user_email.indexOf('@'));

41
CustomerNotes/Anthology/other_nodes.js Normal file
View File

@ -0,0 +1,41 @@
// Process Groups and Subs
// Two lists - organized_sub_list and organized_group_list
// CODE BELOW
// @param input fields supplied in the recipe step, as an object
// @return object matching the output schema
// Eg: Code for returning time zone for an IP address
/**/
const fetch = require("node-fetch")
exports.main = async ({ allGroups, allSubLevels }) => {
let organized_group_list = [];
let organized_sub_list = [];
for(let i = 0; i < allGroups.length; i++){
organized_group_list.push(allGroups[i].group_uuid)
}
for(let i = 0; i < allSubLevels.length; i++){
organized_sub_list.push(allSubLevels[i].productName_productLevel_pair)
}
//organized_group_list = `${organized_group_list}`
organized_sub_list = `${organized_sub_list}`
return { organized_group_list, organized_sub_list };
// THIS IS THE OUTPUT IN WORKATO
}
// Add sub levels custom prop via HTTP
// POST
// https://api.northpass.com/v2/properties/people/bulk
{"data":[{"attributes":{"properties":{"subscription_levels":"#{_('data.js_eval.1ec2b92b.output.organized_sub_list')}"}},"id":"#{_('data.northpass_connector_2339630_1687360845.c9d81bc3.data.included.first.id')}","type":"person_properties"}]}
// Add to groups via HTTP
// POST
// https://api.northpass.com/v2/bulk/people/membership
{"payload":{"person_ids":["#{_('data.northpass_connector_2339630_1687360845.c9d81bc3.data.included.first.id')}"],"group_ids":#{_('data.js_eval.1ec2b92b.output.organized_group_list')}}}
// Anthology Sandbox API: BwDUDT3mM6xzubFOgrPZNfL53

74
Scripts/workato_antho_testing.py Normal file
View File

@ -0,0 +1,74 @@
"""
This needs to be made into a much smaller node in Workato, so here is a test for it.
"""
input = {"user_email": "hellofriend@newanthology.com"}
mappings = [
# Accreditation Group
{ "uuid": "601eca77-0d33-412f-a9b7-7e2423c77c4f",
"domains" : [ "newanthology.com",
"knowledgestate.edu",
"creighton.edu",
"tc.columbia.edu",
"mstc.edu",
"gvltec.edu"],
"props": "Westmoreland County Community College: Enhanced+",
},
# Ally Group
{
"uuid" : "c84b5100-afd1-47ac-9b95-a6e557d0a8ab",
"domains": [
"newanthology.com",
"knowledgestate.edu",
"gvltec.edu",
"lipscomb.edu",
"dts.edu",
"brazosport.edu",
"lsua.edu",
"fnu.edu",
"lbc.edu",
"csusb.edu",
"laverne.edu",
"desu.edu",
"gwinnetttech.edu",
"musc.edu",
"sentara.edu",
"smu.edu",
"utc.edu",
"uttyler.edu",
"lynchburg.edu",
"alliant.edu",
],
"props": "Another Custom Prop Value: Enhanced",
},
]
def main(input):
email = input["user_email"]
domain = email.split("@")[1]
groups = []
props = []
"""
List Comprehension won't work here because trying to append
will mutate the list. Instead, use a nested for loop
"""
# putput = [tup for tup in mappings if domain in tup[1]]
# print(tup)
# print(f"And here is the group uuid is {putput[0][0]}")
for tup in mappings:
if domain in tup['domains']:
groups.append(str(tup['uuid']))
props.append(str(tup['props']))
# return {"group_list": groups, "prop_list": props}
# print(f"List of properties: {props}")
# print(f"List of groups: {groups}")
# print(x)
# print(y)
groups = str(groups)
groups = groups[0:-1].replace("'",'"')
print(groups[1:-1])
print(type(groups))
if __name__ == "__main__":
main(input)