Updated Anthology templates. Walmart and Datasnipper notes. Todos.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,358 @@
|
||||
{% if course.properties.product_names_for_course_cards == 'Anthology Reach' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Reach.svg' %}
|
||||
{% assign product_alt = 'Anthology Reach' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#731013' %}
|
||||
{% assign color_light = '#F58545' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Radius' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#F3798A' %}
|
||||
{% assign color_light = '#F58545' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Engage' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Engage.svg' %}
|
||||
{% assign product_alt = 'Anthology Engage' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#F16423' %}
|
||||
{% assign color_light = '#F3798A' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Beacon' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Beacon.svg' %}
|
||||
{% assign product_alt = 'Anthology Beacon' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#D94827' %}
|
||||
{% assign color_light = '#F16423' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Milestone' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Milestone.svg' %}
|
||||
{% assign product_alt = 'Anthology Milestone' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#F3798A' %}
|
||||
{% assign color_light = '#F9B5B5' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Occupation Insight' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Occupation+Insight.svg' %}
|
||||
{% assign product_alt = 'Anthology Occupation Insight' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#F58545' %}
|
||||
{% assign color_light = '#F9B5B5' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Raise' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Raise.svg' %}
|
||||
{% assign product_alt = 'Anthology Raise' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#D94827' %}
|
||||
{% assign color_light = '#F9B5B5' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Digital Assistant' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Digital+Assistant.svg' %}
|
||||
{% assign product_alt = 'Anthology Digital Assistant' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#D94827' %}
|
||||
{% assign color_light = '#F58545' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Baseline' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Baseline.svg' %}
|
||||
{% assign product_alt = 'Anthology Baseline' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#731013' %}
|
||||
{% assign color_light = '#D94827' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Encompass' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Encompass.svg' %}
|
||||
{% assign product_alt = 'Anthology Encompass' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#731013' %}
|
||||
{% assign color_light = '#F3798A' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Talisma' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#D94827' %}
|
||||
{% assign color_light = '#F3798A' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Student' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Student.svg' %}
|
||||
{% assign product_alt = 'Anthology Student' %}
|
||||
{% assign color_main = '#82C342' %}
|
||||
{% assign color_dark = '#96CA51' %}
|
||||
{% assign color_light = '#F3E588' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'CVue' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#82C342' %}
|
||||
{% assign color_dark = '#286734' %}
|
||||
{% assign color_light = '#F3E588' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Insight' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Insight.svg' %}
|
||||
{% assign product_alt = 'Anthology Insight' %}
|
||||
{% assign color_main = '#82C342' %}
|
||||
{% assign color_dark = '#286734' %}
|
||||
{% assign color_light = '#82C342' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Finance & HCM' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Finance+%26+HCM.svg' %}
|
||||
{% assign product_alt = 'Anthology Finance & HCM' %}
|
||||
{% assign color_main = '#82C342' %}
|
||||
{% assign color_dark = '#539542' %}
|
||||
{% assign color_light = '#C9BD2E' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Payroll' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Payroll.svg' %}
|
||||
{% assign product_alt = 'Anthology Payroll' %}
|
||||
{% assign color_main = '#82C342' %}
|
||||
{% assign color_dark = '#000000' %}
|
||||
{% assign color_light = '#82C342' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Academic Economics' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Academic+Economics.svg' %}
|
||||
{% assign product_alt = 'Anthology Academic Economics' %}
|
||||
{% assign color_main = '#82C342' %}
|
||||
{% assign color_dark = '#000000' %}
|
||||
{% assign color_light = '#286734' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Blackboard Learn' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/BBLearn.svg' %}
|
||||
{% assign product_alt = 'Blackboard Learn' %}
|
||||
{% assign color_main = '#1BA8E1' %}
|
||||
{% assign color_dark = '#027BB6' %}
|
||||
{% assign color_light = '#1BA8E1' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Ally' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Ally.svg' %}
|
||||
{% assign product_alt = 'Anthology Ally' %}
|
||||
{% assign color_main = '#1BA8E1' %}
|
||||
{% assign color_dark = '#1BA8E1' %}
|
||||
{% assign color_light = '#A3DBDC' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Course Evaluations' %}
|
||||
{% assign product_logo = 'https://s3.amazonaws.com/static.northpass.com/anthology/Course+Evaluations.svg' %}
|
||||
{% assign product_alt = 'Anthology Course Evaluations' %}
|
||||
{% assign color_main = '#1BA8E1' %}
|
||||
{% assign color_dark = '#004C6D' %}
|
||||
{% assign color_light = '#027BB6' %}
|
||||
{%- comment -%} NEED DIFF IMG FORMAT FOR THIS ONE {%- endcomment -%}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Evaluate' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#1BA8E1' %}
|
||||
{% assign color_dark = '#027BB6' %}
|
||||
{% assign color_light = '#A3DBDC' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Portfolio' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Portfolio.svg' %}
|
||||
{% assign product_alt = 'Anthology Portfolio' %}
|
||||
{% assign color_main = '#1BA8E1' %}
|
||||
{% assign color_dark = '#0090A1' %}
|
||||
{% assign color_light = '#5CC6CC' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Program Review' %}
|
||||
{% assign product_logo = 'https://s3.amazonaws.com/static.northpass.com/anthology/Program+Review.svg' %}
|
||||
{% assign product_alt = 'Anthology Program Review' %}
|
||||
{% assign color_main = '#1BA8E1' %}
|
||||
{% assign color_dark = '#027BB6' %}
|
||||
{% assign color_light = '#5CC6CC' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Planning' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Planning.svg' %}
|
||||
{% assign product_alt = 'Anthology Planning' %}
|
||||
{% assign color_main = '#1BA8E1' %}
|
||||
{% assign color_dark = '#000000' %}
|
||||
{% assign color_light = '#004C6D' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Accreditation' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Accreditation.svg' %}
|
||||
{% assign product_alt = 'Anthology Accreditation' %}
|
||||
{% assign color_main = '#1BA8E1' %}
|
||||
{% assign color_dark = '#0090A1' %}
|
||||
{% assign color_light = '#1BA8E1' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology 101' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#7F59A5' %}
|
||||
{% assign color_dark = '#573376' %}
|
||||
{% assign color_light = '#7F59A5' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Academy Use & Navigation' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#7F59A5' %}
|
||||
{% assign color_dark = '#6283C2' %}
|
||||
{% assign color_light = '#87ADDB' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Data Strategy' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#7F59A5' %}
|
||||
{% assign color_dark = '#000000' %}
|
||||
{% assign color_light = '#573376' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Faculty Development' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#7F59A5' %}
|
||||
{% assign color_dark = '#7F59A5' %}
|
||||
{% assign color_light = '#AA7FB8' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Power BI' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#7F59A5' %}
|
||||
{% assign color_dark = '#573376' %}
|
||||
{% assign color_light = '#87ADDB' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Professional Development' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#7F59A5' %}
|
||||
{% assign color_dark = '#000000' %}
|
||||
{% assign color_light = '#87ADDB' %}
|
||||
{% else %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#DCE4E9' %}
|
||||
{% assign color_dark = '#747A7B' %}
|
||||
{% assign color_light = '#B2B7BA' %}
|
||||
{% endif %}
|
||||
|
||||
{% unless flag == 'dashboard' %}
|
||||
{% assign flag = '' %}
|
||||
{% endunless %}
|
||||
|
||||
<div class="np-card course-card">
|
||||
<div class="np-progress-bar-container" style="background: {{ color_light }}">
|
||||
<div
|
||||
style="width: 75%; background: {{ color_dark }}"
|
||||
class="np-button-background-color np-card-progress-bar course-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-product-banner">
|
||||
{% if product_logo != 'blank' %}
|
||||
<img src='{{ product_logo }}' alt='{{ product_alt }}' class="product-logo"/>
|
||||
{% else %}
|
||||
Anthology
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-card-container">
|
||||
{% comment %} <div class="card-image-replacement"></div> {% endcomment %}
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding course-card-info">
|
||||
<div class="np-flex-1">
|
||||
<h3 class="np-card-content-title course-card-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="card-bottom-details">
|
||||
{% if flag == 'dashboard' %}
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
padding-left: 15px;
|
||||
width: 70%;">
|
||||
<div style="
|
||||
background: #BACCE9;
|
||||
border-radius: 10px;
|
||||
height: 8px;
|
||||
margin-right: 15px;
|
||||
width: 60%;
|
||||
">
|
||||
<div
|
||||
style="height: 8px; background: {{ color_main }}; border-radius: 10px; width: {{ course.progress }}%; "
|
||||
class="np-button-background-color np-card-progress-bar course-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<span style="color: #757575; font-size: 14px">
|
||||
{% assign act_count = 0 %}
|
||||
{% for section in course.sections %}
|
||||
{% for activity in section.activities %}
|
||||
{% assign act_count = act_count| plus: 1 %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{{ act_count }} {% if act_count == 1 %}Activity{% else %}Activities{% endif %}
|
||||
</span>
|
||||
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
<a class="np-button np-button-wide course-card-button"
|
||||
{% if course.properties.video_on_demand == true %}
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}
|
||||
{% else %}
|
||||
href="{{ course_path }}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
Continue
|
||||
{% else %}
|
||||
View
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.course-card-wrapper{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.course-card{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-product-banner{
|
||||
align-items: center;
|
||||
background: #FFF;
|
||||
box-shadow: 0 3px 30px rgba(0,0,0,.1);
|
||||
display: flex;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
padding: 6px 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-logo{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.course-card-info{
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.course-card-title{
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 25px;
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
|
||||
.course-card-button{
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
height: 100%;
|
||||
line-height: 21px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.course-card-button:focus{
|
||||
border: 2px solid blue;
|
||||
}
|
||||
|
||||
.np-progress-bar-container,
|
||||
.np-card-progress-bar{
|
||||
border-radius: 0;
|
||||
height: 6px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.np-card-content-progress{
|
||||
height: 25px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.course-card-progress-bar{
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.np-card-content-progress{
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.course-card-wrapper{
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.course-card{
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -190,7 +190,12 @@
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="np-card course-card col-md-4" data-product="{{course.properties.product_names_for_course_cards}}">
|
||||
{% assign allCats = '' %}
|
||||
{% for category in course.categories %}
|
||||
{% assign allCats = allCats | append: category.name | append: ' || '%}
|
||||
{% endfor %}
|
||||
|
||||
<div class="np-card course-card col-md-4" data-product="{{course.properties.product_names_for_course_cards}}" data-categories="{{ allCats }}">
|
||||
<div class="np-progress-bar-container" style="background: {{ color_light }}">
|
||||
<div
|
||||
style="width: 75%; background: {{ color_dark }}"
|
||||
|
||||
@ -2,13 +2,18 @@
|
||||
All Learning
|
||||
</div>
|
||||
{%- comment -%} Catalog is not used in this school. The "catalog" is the set of unstarted enrolled courses shown at the homepage {%- endcomment -%}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
<div class="np-catalog-courses" style="display: flex; flex-direction: row; flex-wrap: wrap;">
|
||||
{% comment %} row row-with-thumbnails {% endcomment %}
|
||||
{% for course in courses.enrolled %}
|
||||
{%- comment -%} {% unless course.progress > 0 %}
|
||||
{% endunless %} {%- endcomment -%}
|
||||
<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 -%}
|
||||
{% include "cards_course" with course, flag: 'null' %}
|
||||
{% if current_person.email contains '+preview' or current_person.email == 'kfelton@anthology.com'%}
|
||||
{% include "cards_course_revamped" with course, flag: 'null' %}
|
||||
{% else %}
|
||||
{% include "cards_course" with course, flag: 'null' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@ -5,29 +5,89 @@
|
||||
type="text"
|
||||
name="category-filter-dropdown"
|
||||
id="category-filter-dropdown"
|
||||
onchange="filterCatalog()"
|
||||
onchange="filterByCategory()"
|
||||
>
|
||||
{% assign sorted_categories = current_school.filterable_categories | sort: "name" %}
|
||||
<option class="category-filter-entry" value="" selected disabled>All Categories</option>
|
||||
<option class="category-filter-entry" value="Default" selected>All Categories</option>
|
||||
|
||||
<option class="category-filter-entry" value="0">All Categories</option>
|
||||
{% for category in sorted_categories %}
|
||||
<option class="category-filter-entry" value="{{ category.id }}">{{ category.name }}</option>
|
||||
{% assign renderCat = false %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% for course_category in course.categories %}
|
||||
{% if course_category.id == category.id %}
|
||||
{% assign renderCat = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
{% comment %} Need to iterate over all filterable categories, target all searched cards, check if cat exists, render if found {% endcomment %}
|
||||
|
||||
{% comment %} Need to generate category entires dynamically? Might not be possible because liquid is server side. Would need to pull all cats before load but all Searched Results after render {% endcomment %}
|
||||
|
||||
{%if renderCat %}
|
||||
<option class="category-filter-entry" value="{{ category.name }}">{{ category.name }}</option>
|
||||
{% endif %}
|
||||
{% 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}`
|
||||
$('document').ready(function(){
|
||||
let allCategoryFilters = document.querySelectorAll('.category-filter-entry');
|
||||
let allSearchedResults = document.querySelectorAll('.course-card');
|
||||
|
||||
for(let i = 1; i < allCategoryFilters.length; i++){
|
||||
let catFound = false;
|
||||
for(let j = 0; j < allSearchedResults.length; j++){
|
||||
|
||||
if(allSearchedResults[j].dataset.categories.indexOf(allCategoryFilters[i].getAttribute('value')) > -1){
|
||||
catFound = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(!catFound){
|
||||
// if(allCategoryFilters[i].textContent != 'All Categories'){
|
||||
// allCategoryFilters[i].style.display = 'none';
|
||||
// }
|
||||
allCategoryFilters[i].style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let filterByCategory = () => {
|
||||
// console.log(event.target.value);
|
||||
|
||||
let allLearning = document.querySelector('.np-catalog-courses').children;
|
||||
|
||||
// console.log(allLearning);
|
||||
|
||||
for(let i = 0; i < allLearning.length; i++){
|
||||
if(event.target.value == 'Default'){
|
||||
// if(!allLearning[i].classList.contains('hidden-by-search')){
|
||||
// allLearning[i].style.display = 'block';
|
||||
// }
|
||||
|
||||
if(!allLearning[i].classList.contains('hidden-by-product')){
|
||||
allLearning[i].style.display = 'block';
|
||||
}
|
||||
allLearning[i].classList.remove('filtered');
|
||||
} else {
|
||||
if(allLearning[i].dataset.categories.indexOf(event.target.value) == -1){
|
||||
allLearning[i].style.display = 'none';
|
||||
allLearning[i].classList.add('filtered');
|
||||
} else {
|
||||
// if(!allLearning[i].classList.contains('hidden-by-search')){
|
||||
// allLearning[i].style.display = 'block';
|
||||
// }
|
||||
|
||||
if(!allLearning[i].classList.contains('hidden-by-product')){
|
||||
allLearning[i].style.display = 'block';
|
||||
}
|
||||
allLearning[i].classList.remove('filtered');
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
</script>
|
||||
@ -7,7 +7,7 @@
|
||||
id="product-filter-dropdown"
|
||||
onchange="filterByProduct()"
|
||||
>
|
||||
<option class="product-filter-entry" value="Default" selected>Product</option>
|
||||
<option class="product-filter-entry" value="Default" selected>All Products</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@ -64,35 +64,67 @@
|
||||
|
||||
for(let i = 0; i < allLearning.length; i++){
|
||||
if(event.target.value == 'Default'){
|
||||
if(!allLearning[i].classList.contains('hidden-by-search')){
|
||||
allLearning[i].style.display = 'block';
|
||||
}
|
||||
allLearning[i].classList.remove('filtered')
|
||||
} else {
|
||||
// if(!allLearning[i].classList.contains('hidden-by-search')){
|
||||
// allLearning[i].style.display = 'block';
|
||||
// }
|
||||
|
||||
allLearning[i].style.display = 'block';
|
||||
allLearning[i].classList.remove('hidden-by-product');
|
||||
allLearning[i].classList.remove('filtered');
|
||||
} else {
|
||||
if(allLearning[i].dataset.product != event.target.value){
|
||||
allLearning[i].style.display = 'none';
|
||||
allLearning[i].classList. add('hidden-by-product');
|
||||
allLearning[i].classList.add('filtered');
|
||||
} else {
|
||||
if(!allLearning[i].classList.contains('hidden-by-search')){
|
||||
allLearning[i].style.display = 'block';
|
||||
}
|
||||
// if(!allLearning[i].classList.contains('hidden-by-search')){
|
||||
// allLearning[i].style.display = 'block';
|
||||
// }
|
||||
allLearning[i].style.display = 'block';
|
||||
allLearning[i].classList.remove('hidden-by-product');
|
||||
allLearning[i].classList.remove('filtered');
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
// for(let i = 0; i < popular.length; i++){
|
||||
// if(event.target.value == 'Default'){
|
||||
// popular[i].style.display = 'block';
|
||||
// } else {
|
||||
// if(popular[i].dataset.product != event.target.value){
|
||||
// popular[i].style.display = 'none';
|
||||
// } else {
|
||||
// popular[i].style.display = 'block';
|
||||
// };
|
||||
// };
|
||||
// };
|
||||
}
|
||||
console.log($("#product-filter-dropdown > option:selected").text());
|
||||
|
||||
|
||||
|
||||
let allCategoryFiltersProduct = document.querySelectorAll('.category-filter-entry');
|
||||
let allSearchedResultsProduct = document.querySelectorAll('.course-card');
|
||||
|
||||
for(let i = 1; i < allCategoryFiltersProduct.length; i++){
|
||||
allCategoryFiltersProduct[i].style.display = 'block';
|
||||
}
|
||||
|
||||
for(let i = 1; i < allCategoryFiltersProduct.length; i++){
|
||||
let catFound = false;
|
||||
|
||||
for(let j = 0; j < allSearchedResultsProduct.length; j++){
|
||||
|
||||
if(allSearchedResultsProduct[j].dataset.categories.indexOf(allCategoryFiltersProduct[i].getAttribute('value')) > -1){
|
||||
if(allSearchedResultsProduct[j].style.display == 'block'){
|
||||
catFound = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(!catFound){
|
||||
allCategoryFiltersProduct[i].style.display = 'none';
|
||||
} else {
|
||||
allCategoryFiltersProduct[i].style.display = 'block';
|
||||
}
|
||||
|
||||
$('#category-filter-dropdown > option:nth-child(1)').attr('selected', true);
|
||||
|
||||
// Last step is to return cat dropdown to always be all cats on product selection
|
||||
// This will prevent cats that shouldnt be present from remaining selected
|
||||
|
||||
// $('#category-filter-dropdown > option:nth-child(1)').text('All Categories');
|
||||
$('#category-filter-dropdown').val('Default');
|
||||
}
|
||||
};
|
||||
}
|
||||
{% elsif page == 'Dashboard' %}
|
||||
if(allProductTypesDash.length > 1){
|
||||
allProductTypesDash.map((product) => {
|
||||
@ -121,8 +153,6 @@
|
||||
if(event.target.value == 'Default'){
|
||||
inProgressCourses[i].style.display = 'block';
|
||||
} else {
|
||||
//console.log(event.target.value)
|
||||
//console.log(inProgressCourses[i].dataset.product)
|
||||
if(inProgressCourses[i].dataset.product != event.target.value){
|
||||
inProgressCourses[i].style.display = 'none';
|
||||
} else {
|
||||
@ -135,7 +165,6 @@
|
||||
if(event.target.value == 'Default'){
|
||||
completedCourses[i].style.display = 'block';
|
||||
} else {
|
||||
console.log(completedCourses[i].dataset.product)
|
||||
if(completedCourses[i].dataset.product != event.target.value){
|
||||
completedCourses[i].style.display = 'none';
|
||||
} else {
|
||||
|
||||
@ -161,7 +161,7 @@
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul> {%- endcomment -%}
|
||||
<div class="np-sub-navigation-content">
|
||||
{% comment %} <div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% unless link.label == 'Catalog' or link.label == 'Learning Paths' %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
@ -174,7 +174,7 @@
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div> {% endcomment %}
|
||||
|
||||
{%- comment -%} Desktop Search Box {%- endcomment -%}
|
||||
{% if current_person.signed_in? %}
|
||||
|
||||
@ -0,0 +1,97 @@
|
||||
<nav class="np-sub-navigation product-bar" style="padding: 0 15px;">
|
||||
<div class="np-sub-navigation-content col-xs-12" style="align-items: center; flex-wrap: wrap;">
|
||||
<div class="product-bar-text col-xs-12 col-sm-3">
|
||||
Browse By Product
|
||||
</div>
|
||||
|
||||
<ul class="product-subscriptions col-xs-12 col-sm-9">
|
||||
{% assign subscription_levels = current_person.properties.subscription_levels | split: "," %}
|
||||
|
||||
{% for subscription_level in subscription_levels %}
|
||||
{% assign name_level_pair = subscription_level | split: ":"%}
|
||||
{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
|
||||
{% include "profile_logo_calculator", product: name_level_pair[0] %}
|
||||
{% comment %} <li class="product-subscription">
|
||||
</li> {% endcomment %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.product-bar{
|
||||
box-shadow: 0 3px 5px rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
.browse-by-product{
|
||||
align-items: center;
|
||||
border-bottom: 1px solid grey;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 40px;
|
||||
justify-content: space-evenly;
|
||||
margin: -20px -50px 20px;
|
||||
padding: 0 50px 20px;
|
||||
}
|
||||
|
||||
.product-subscription img{
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.product-bar .product-bar-text{
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-bar .product-subscriptions{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.product-bar .product-subscription{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 35px;
|
||||
justify-content: space-between;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.product-bar .np-sub-navigation-content{
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.product-bar .product-bar-text{
|
||||
margin: 0;
|
||||
/* padding-right: 35px; */
|
||||
padding-left: 4%;
|
||||
/* text-align: right; */
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.product-bar .product-subscriptions{
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.product-bar .product-subscription{
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64em){
|
||||
.product-bar .product-bar-text{
|
||||
/* padding-right: 120px; */
|
||||
/* padding-right: 4%; */
|
||||
}
|
||||
|
||||
.product-bar .product-subscriptions{
|
||||
padding-left: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -67,22 +67,22 @@
|
||||
{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
|
||||
|
||||
{% if product_sub_level contains 'Essential' %}
|
||||
<li class="product-subscription">
|
||||
{% include "profile_logo_calculator", product: name_level_pair[0] %}
|
||||
{%- comment -%} <span class="subscription-name">
|
||||
{% include "profile_logo_calculator", product: name_level_pair[0] %}
|
||||
{%- comment -%} <li class="product-subscription">
|
||||
<span class="subscription-name">
|
||||
{{ name_level_pair[0] }}
|
||||
</span> {%- endcomment -%}
|
||||
{%- comment -%} <span class="subscription-level">
|
||||
</span>
|
||||
<span class="subscription-level">
|
||||
{{ name_level_pair[1] }}
|
||||
</span> {%- endcomment -%}
|
||||
{%- comment -%} {% if '{{name_level_pair[1]}}' == 'ESS' %}
|
||||
</span>
|
||||
{% 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 %}
|
||||
</li> {%- endcomment -%}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
@ -110,22 +110,9 @@
|
||||
|
||||
{% 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>
|
||||
{% include "profile_logo_calculator", product: name_level_pair[0] %}
|
||||
{% comment %} <li class="product-subscription">
|
||||
</li> {% endcomment %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
@ -151,22 +138,9 @@
|
||||
{% 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>
|
||||
{% include "profile_logo_calculator", product: name_level_pair[0] %}
|
||||
{% comment %} <li class="product-subscription">
|
||||
</li> {% endcomment %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
@ -2,69 +2,101 @@
|
||||
|
||||
{% if product_name contains 'Reach' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Reach.svg' %}
|
||||
{% assign product_query = 'Reach' %}
|
||||
{% elsif product_name contains 'Radius' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign product_query = 'Radius' %}
|
||||
{% elsif product_name contains 'Engage' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Engage.svg' %}
|
||||
{% assign product_query = 'Engage' %}
|
||||
{% elsif product_name contains 'Beacon' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Beacon.svg' %}
|
||||
{% assign product_query = 'Beacon' %}
|
||||
{% elsif product_name contains 'Milestone' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Milestone.svg' %}
|
||||
{% assign product_query = 'Milestone' %}
|
||||
{% elsif product_name contains 'Occupation Insight' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Occupation+Insight.svg' %}
|
||||
{% assign product_query = 'Occupation Insight' %}
|
||||
{% elsif product_name contains 'Raise' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Raise.svg' %}
|
||||
{% assign product_query = 'Raise' %}
|
||||
{% elsif product_name contains 'Digital Assistant' %}
|
||||
{% assign product_logo = 'https://s3.amazonaws.com/static.northpass.com/anthology/Digital+Assistant.svg' %}
|
||||
{% assign product_query = 'Digital Assistant' %}
|
||||
{% elsif product_name contains 'Baseline' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Baseline.svg' %}
|
||||
{% assign product_query = 'Baseline' %}
|
||||
{% elsif product_name contains 'Encompass' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Encompass.svg' %}
|
||||
{% assign product_query = 'Encompass' %}
|
||||
{% elsif product_name contains 'Talisma' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign product_query = 'Talisma' %}
|
||||
{% elsif product_name contains 'Student' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Student.svg' %}
|
||||
{% assign product_query = 'Student' %}
|
||||
{% elsif product_name contains 'CVue' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign product_query = 'CVue' %}
|
||||
{% elsif product_name contains 'Insight' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Insight.svg' %}
|
||||
{% assign product_query = 'Insight' %}
|
||||
{% elsif product_name contains 'Finance & HCM' %}
|
||||
{% assign product_logo = 'https://s3.amazonaws.com/static.northpass.com/anthology/Finance+%26+HCM.svg' %}
|
||||
{% assign product_query = 'Finance & HCM' %}
|
||||
{% elsif product_name contains 'Payroll' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Payroll.svg' %}
|
||||
{% assign product_query = 'Payroll' %}
|
||||
{% elsif product_name contains 'Academic Economics' %}
|
||||
{% assign product_logo = 'https://s3.amazonaws.com/static.northpass.com/anthology/Academic+Economics.svg' %}
|
||||
{% assign product_query = 'Academic Economics' %}
|
||||
{% elsif product_name contains 'Blackboard Learn' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/BBLearn.svg' %}
|
||||
{% assign product_query = 'Blackboard Learn' %}
|
||||
{% elsif product_name contains 'Ally' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Ally.svg' %}
|
||||
{% assign product_query = 'Ally' %}
|
||||
{% elsif product_name contains 'Course Evaluations' %}
|
||||
{% assign product_logo = 'https://s3.amazonaws.com/static.northpass.com/anthology/Course+Evaluations.svg' %}
|
||||
{% assign product_query = 'Course Evaluations' %}
|
||||
{%- comment -%} NEED DIFF IMG FORMAT FOR THIS ONE {%- endcomment -%}
|
||||
{% elsif product_name contains 'Evaluate' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign product_query = 'Evaluate' %}
|
||||
{% elsif product_name contains 'Portfolio' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Portfolio.svg' %}
|
||||
{% assign product_query = 'Portfolio' %}
|
||||
{% elsif product_name contains 'Program Review' %}
|
||||
{% assign product_logo = 'https://s3.amazonaws.com/static.northpass.com/anthology/Program+Review.svg' %}
|
||||
{% assign product_query = 'Program Review' %}
|
||||
{% elsif product_name contains 'Planning' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Planning.svg' %}
|
||||
{% assign product_query = 'Planning' %}
|
||||
{% elsif product_name contains 'Accreditation' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Accreditation.svg' %}
|
||||
{% assign product_query = 'Accreditation' %}
|
||||
{% elsif product_name contains '101' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign product_query = '101' %}
|
||||
{% elsif product_name contains 'Academy Use & Navigation' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign product_query = 'Academy Use & Navigation' %}
|
||||
{% elsif product_name contains 'Data Strategy' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign product_query = 'Data Strategy' %}
|
||||
{% elsif product_name contains 'Faculty Development' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign product_query = 'Faculty Development' %}
|
||||
{% elsif product_name contains 'Power BI' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign product_query = 'Power BI' %}
|
||||
{% elsif product_name contains 'Professional Development' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign product_query = 'Professional Development' %}
|
||||
{% else %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign product_query = 'blank' %}
|
||||
{% endif %}
|
||||
|
||||
{% comment %} {% if product_logo contains 'blank' %}
|
||||
@ -78,7 +110,11 @@
|
||||
{% endif %} {% endcomment %}
|
||||
|
||||
{% unless product_logo contains 'blank' %}
|
||||
<span class="subscription-name" data-profile-product="{{ product_name }}">
|
||||
<img src='{{ product_logo }}' alt="{{ product_name }}" class='profile-card-product-logo'/>
|
||||
</span>
|
||||
<li class="product-subscription">
|
||||
<span class="subscription-name" data-profile-product="{{ product_name }}">
|
||||
<a href="/app/search/00000000-0000-0000-0000-000000000000?q={{ product_query }}">
|
||||
<img src='{{ product_logo }}' alt="{{ product_name }}" class='profile-card-product-logo'/>
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
{% endunless %}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<nav class="np-sub-navigation">
|
||||
{% comment %} <nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% unless link.label == 'Catalog' or link.label == 'Learning Paths' %}
|
||||
@ -12,4 +12,18 @@
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
</nav> {% endcomment %}
|
||||
<nav class="np-sub-navigation custom-home-subnav" style="background: rgba(68, 68, 68, 1); margin: 0; padding: 15px 15px 0;">
|
||||
<div class="np-sub-navigation-content" style="align-items: center;">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% unless link.label == 'Catalog' or link.label == 'Learning Paths' %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}" style="color: #FFF; height: 36px;">
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color" style="background: #FFF; margin-top: -4px"></div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
@ -1,6 +1,12 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
|
||||
{% include "sub_navigation" %}
|
||||
{% comment %} {% if current_person.email contains '+preview' or current_person.email == 'kfelton@anthology.com'%}
|
||||
{% assign sub_levels_length = current_person.properties.subscription_levels | size %}
|
||||
{% if sub_levels_length > 0 %}
|
||||
{% include "product_bar" %}
|
||||
{% endif %}
|
||||
{% endif %} {% endcomment %}
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row np-flex-center">
|
||||
{% include "profile_card" %}
|
||||
|
||||
@ -52,6 +52,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if current_person.email contains '+preview' or current_person.email == 'kfelton@anthology.com'%}
|
||||
{% assign sub_levels_length = current_person.properties.subscription_levels | size %}
|
||||
{% if sub_levels_length > 0 %}
|
||||
{% include "product_bar" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
|
||||
{% comment %} {% include "browse_by_product" %} {% endcomment %}
|
||||
@ -81,8 +89,8 @@
|
||||
|
||||
{% comment %} ----------------------------------------------------------------- {% endcomment %}
|
||||
{% comment %} FOR NORM: {% endcomment %}
|
||||
{% comment %} Ln 67-80 >> new search {% endcomment %}
|
||||
{% comment %} Ln 83-92 >> old search {% endcomment %}
|
||||
{% comment %} Ln 70-80 >> new search {% endcomment %}
|
||||
{% comment %} Ln 89-99 >> old search {% endcomment %}
|
||||
{% comment %} ----------------------------------------------------------------- {% endcomment %}
|
||||
|
||||
|
||||
@ -315,18 +323,6 @@
|
||||
margin-bottom: 12px
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1651px){
|
||||
.np-main{
|
||||
margin-top: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1440px){
|
||||
.np-main{
|
||||
margin-top: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.np-main{
|
||||
margin-top: none;
|
||||
@ -342,12 +338,6 @@
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
{% comment %}
|
||||
/*.np-subpage-container{
|
||||
padding: 50px 50px 184px;
|
||||
}*/
|
||||
{% endcomment %}
|
||||
|
||||
.dropdown-menu{
|
||||
left: 0;
|
||||
right: unset;
|
||||
@ -355,23 +345,38 @@
|
||||
|
||||
.catalog-search-component{
|
||||
margin-bottom: 0;
|
||||
/* margin-right: 50px; */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1440px){
|
||||
/* .np-main{
|
||||
margin-top: 350px;
|
||||
} */
|
||||
|
||||
.product-bar{
|
||||
margin-top: 25.5%;
|
||||
}
|
||||
|
||||
.np-homepage-hero{
|
||||
width: calc(100vw + 1.75em);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* .catalog-header-wrapper{
|
||||
margin-top: 300px;
|
||||
} */
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2200px){
|
||||
@media screen and (min-width: 1651px){
|
||||
.np-main{
|
||||
margin-top: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1900px){
|
||||
.np-main{
|
||||
margin-top: 425px;
|
||||
}
|
||||
}
|
||||
|
||||
/* @media screen and (min-width: 2200px){
|
||||
.catalog-header-wrapper{
|
||||
margin-top: 350px;
|
||||
}
|
||||
@ -381,5 +386,5 @@
|
||||
.catalog-header-wrapper{
|
||||
margin-top: 400px;
|
||||
}
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-search np-subpage-container np-max-width">
|
||||
<div class="np-resource-title">
|
||||
{% comment %} <div class="np-resource-title">
|
||||
{% t .title %}
|
||||
</div>
|
||||
</div> {% endcomment %}
|
||||
<div class="np-search-header">
|
||||
{% assign render_search = false %}
|
||||
{% if results.items.any? %}
|
||||
@ -27,19 +27,25 @@
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .showing %}
|
||||
<div class="np-resource-title">
|
||||
{% comment %} {% t .showing %} {% endcomment %}
|
||||
{% if render_search %}
|
||||
<span class="np-resource-subtitle-number">{{ result_count }}</span>
|
||||
{% else %}
|
||||
<span class="np-resource-subtitle-number">{{ results.count }}</span>
|
||||
{% endif %}
|
||||
{% t .results_for %}
|
||||
{% comment %} {% t .results_for %} {% endcomment %}
|
||||
Resources For
|
||||
<span class="np-button-color">"{{ results.term }}"</span>
|
||||
</div>
|
||||
{% if render_search %}
|
||||
{% capture label %}{% t shared.filters.by_type %}{% endcapture %}
|
||||
{% include "filter_by_product", page: 'Search' %}
|
||||
<div style="align-items: center; display: flex; flex-direction: row;">
|
||||
<div style="font-weight: 700; margin-right: 15px;">Filter By: </div>
|
||||
|
||||
{% capture label %}{% t shared.filters.by_type %}{% endcapture %}
|
||||
{% include "filter_by_product", page: 'Search' %}
|
||||
{% include "filter_by_category", page: 'Search' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if render_search %}
|
||||
@ -62,6 +68,18 @@
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-search-header{
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.np-resource-title{
|
||||
color: #363636;
|
||||
font-family: "Nunito Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.np-card{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
@ -116,7 +134,7 @@
|
||||
}
|
||||
|
||||
.course-card-button{
|
||||
border-radius: 0;
|
||||
/* border-radius: 0; */
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
height: 100%;
|
||||
@ -154,7 +172,25 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.product-filter-dropdown,
|
||||
.category-filter-dropdown{
|
||||
padding: 0 5px;
|
||||
/* border-radius: 0; */
|
||||
height: 45px;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.np-filter{
|
||||
margin: 12px 10px !important;
|
||||
}
|
||||
|
||||
.np-resource-title{
|
||||
margin-bottom: 0;
|
||||
font-size: 32px;
|
||||
line-height: 25.25px;
|
||||
}
|
||||
|
||||
.np-card{
|
||||
margin-bottom: 15px !important;
|
||||
min-width: unset;
|
||||
@ -175,4 +211,4 @@
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@ -92,10 +92,13 @@ main{
|
||||
|
||||
.card-bottom-details{
|
||||
align-items: center;
|
||||
background: #f2f4f5;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
font-size: 0.875em;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.np-course-outline-content-activity-title, .np-course-outline-content-activity-link{
|
||||
@ -162,8 +165,8 @@ main{
|
||||
.product-filter-dropdown,
|
||||
.category-filter-dropdown{
|
||||
background-color: #fefefe;
|
||||
border-radius: 30px;
|
||||
color: #595959;
|
||||
border-radius: 4px;
|
||||
color: #393939;
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
height: 60px;
|
||||
@ -178,11 +181,11 @@ main{
|
||||
}
|
||||
|
||||
.product-filter-dropdown{
|
||||
border: 1px solid #aa7fb9;
|
||||
border: 1px solid #CE9DC7;
|
||||
}
|
||||
|
||||
.category-filter-dropdown{
|
||||
border: 1px solid #ce9dc7;
|
||||
border: 1px solid #CE9DC7;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-training-events np-subpage-container np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-10">
|
||||
|
||||
Reference in New Issue
Block a user