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

Updated cin7 templates while Hubert was out, and downloaded all of Chubb's templates since something needed to be udpated. Ran a script for SPS Commerce to get all the courses.

Browse Source
This commit is contained in:
Norm Rasmussen
2024-01-31 17:32:20 -05:00
parent 60399985b5
commit 111d6412d6
144 changed files with 5414 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
Custom_Templates/customer_templates/Cin7 Customers/_badges_cards.html.liquid Normal file
View File

@ -0,0 +1,243 @@
{% assign completed_courses = 0 %}
{% for course in courses.enrolled %}
{% if course.progress == 100 %}
{% assign completed_courses = completed_courses | plus: 1 %}
{% endif %}
{% endfor %}
{% if omni %}
{% if completed_courses > 0%}
<div class="card-wrapper">
<div class="card">
<div class="lp-link">
<div class="card-badge">
<img
alt=""
src="https://s3.amazonaws.com/static.northpass.com/Cin7/badges/academy-badge_omni.png"
class="badge-card-image"
/>
</div>
<div class="card-content card-content-badge">
<h3 class="card-content-title course-name">
Omni Course Completed
</h3>
<div class="completed-courses">
You completed 1 course!
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if completed_courses > 4 %}
<div class="card-wrapper">
<div class="card">
<div class="lp-link">
<div class="card-badge">
<img
alt=""
src="https://s3.amazonaws.com/static.northpass.com/Cin7/badges/academy-badge_omni.png"
class="badge-card-image"
/>
</div>
<div class="card-content card-content-badge">
<h3 class="card-content-title course-name">
Omni Course Completed
</h3>
<div class="completed-courses">
You completed 5 courses!
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if completed_courses > 9 %}
<div class="card-wrapper">
<div class="card">
<div class="lp-link">
<div class="card-badge">
<img
alt=""
src="https://s3.amazonaws.com/static.northpass.com/Cin7/badges/academy-badge_omni.png"
class="badge-card-image"
/>
</div>
<div class="card-content card-content-badge">
<h3 class="card-content-title course-name">
Omni Course Completed
</h3>
<div class="completed-courses">
You completed 10 courses!
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if completed_courses > 14 %}
<div class="card-wrapper">
<div class="card">
<div class="lp-link">
<div class="card-badge">
<img
alt=""
src="https://s3.amazonaws.com/static.northpass.com/Cin7/badges/academy-badge_omni.png"
class="badge-card-image"
/>
</div>
<div class="card-content card-content-badge">
<h3 class="card-content-title course-name">
Omni Course Completed
</h3>
<div class="completed-courses">
You completed 15 courses!
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if completed_courses > 19 %}
<div class="card-wrapper">
<div class="card">
<div class="lp-link">
<div class="card-badge">
<img
alt=""
src="https://s3.amazonaws.com/static.northpass.com/Cin7/badges/academy-badge_omni.png"
class="badge-card-image"
/>
</div>
<div class="card-content card-content-badge">
<h3 class="card-content-title course-name">
Omni Course Completed
</h3>
<div class="completed-courses">
You completed 20 courses!
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% if core %}
{% if completed_courses > 0%}
<div class="card-wrapper">
<div class="card">
<div class="lp-link">
<div class="card-badge">
<img
alt=""
src="https://s3.amazonaws.com/static.northpass.com/Cin7/badges/academy-badge_core.png"
class="badge-card-image"
/>
</div>
<div class="card-content card-content-badge">
<h3 class="card-content-title course-name">
Core Course Completed
</h3>
<div class="completed-courses">
You completed 1 course!
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if completed_courses > 4%}
<div class="card-wrapper">
<div class="card">
<div class="lp-link">
<div class="card-badge">
<img
alt=""
src="https://s3.amazonaws.com/static.northpass.com/Cin7/badges/academy-badge_core.png"
class="badge-card-image"
/>
</div>
<div class="card-content card-content-badge">
<h3 class="card-content-title course-name">
Core Course Completed
</h3>
<div class="completed-courses">
You completed 5 courses!
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if completed_courses > 9%}
<div class="card-wrapper">
<div class="card">
<div class="lp-link">
<div class="card-badge">
<img
alt=""
src="https://s3.amazonaws.com/static.northpass.com/Cin7/badges/academy-badge_core.png"
class="badge-card-image"
/>
</div>
<div class="card-content card-content-badge">
<h3 class="card-content-title course-name">
Core Course Completed
</h3>
<div class="completed-courses">
You completed 10 courses!
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if completed_courses > 14%}
<div class="card-wrapper">
<div class="card">
<div class="lp-link">
<div class="card-badge">
<img
alt=""
src="https://s3.amazonaws.com/static.northpass.com/Cin7/badges/academy-badge_core.png"
class="badge-card-image"
/>
</div>
<div class="card-content card-content-badge">
<h3 class="card-content-title course-name">
Core Course Completed
</h3>
<div class="completed-courses">
You completed 15 courses!
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if completed_courses > 19%}
<div class="card-wrapper">
<div class="card">
<div class="lp-link">
<div class="card-badge">
<img
alt=""
src="https://s3.amazonaws.com/static.northpass.com/Cin7/badges/academy-badge_core.png"
class="badge-card-image"
/>
</div>
<div class="card-content card-content-badge">
<h3 class="card-content-title course-name">
Core Course Completed
</h3>
<div class="completed-courses">
You completed 20 courses!
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endif %}

31
Custom_Templates/customer_templates/Cin7 Customers/_cards_course.html.liquid
View File

@ -1,4 +1,4 @@
<div class="card">
<div class="card" categories="{%for category in course.categories%}{{category.name}},{%endfor%}" duration="{{course.properties.course_duration}}">
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
<a class="lp-link" href="{{ course_path }}">
<div class="card-image">
@ -7,21 +7,32 @@
src="{{ course.image_url }}"
class="learning-path-card-image"
/>
{% if course.ribbon %}
<div class="np-card-ribbon" {% if course.ribbon == "Omni" %} style="background: #0026b2;"{% endif %}>
{{ course.ribbon }}
</div>
{% endif %}
</div>
<div class="card-content">
<h3 class="card-content-title">
{% assign course_name = course.name | split: "]" %}
{{ course_name.last }}
<h3 class="card-content-title course-name">
{{ course.name }}
</h3>
<div class="course-desc">
{{ course.short_description }}
</div>
{% if course.properties.course_duration %}
<div class="course-time">
<i class="far fa-clock"></i>
{{course.properties.course_duration}} min
</div>
{% endif %}
<div class="course-details">
{% if course.properties.course_duration %}
<div class="course-time">
<i class="far fa-clock"></i>
{{course.properties.course_duration}} min
</div>
{% endif %}
{% comment %} {% if course.properties.recommended_for %}
<div class="recommended">
Recommended For: {{course.properties.recommended_for}}
</div>
{% endif %} {% endcomment %}
</div>
</div>
</a>
</div>

8
Custom_Templates/customer_templates/Cin7 Customers/_category_cards.html.liquid
View File

@ -1,7 +1,11 @@
<a class="card category-card" href="/app/catalog?filter[category_uuid][in][]={{category.id}}">
<a class="card category-card" href="/app/catalog?category={{category.name}}">
<div class="card-category">
<img class="badge-card-image" src="{{category_images[counter]}}" alt="">
</div>
<div class="card-content">
<h3 class="card-content-title">{{category.name}}</h3>
<div class="course-desc">See all courses related to managing products in Cin7 Omni.</div>
<div class="course-desc">Browse all courses for {{category.name}}.</div>
</div>
</a>

28
Custom_Templates/customer_templates/Cin7 Customers/_category_carousel.html.liquid
View File

@ -1,12 +1,19 @@
{% assign unique_category = "" %}
{% assign category_images = 'https://s3.amazonaws.com/static.northpass.com/Cin7/categories+images/Category+Icon+1.png,https://s3.amazonaws.com/static.northpass.com/Cin7/categories+images/Category+Icon+2.png,https://s3.amazonaws.com/static.northpass.com/Cin7/categories+images/Category+Icon+3.png,https://s3.amazonaws.com/static.northpass.com/Cin7/categories+images/Category+Icon+4.png' | split: ',' %}
{% assign category_counter = 0 %}
<div class="category-carousel">
{% for course in courses.in_catalog %}
{% for category in course.categories %}
{% if category.name contains 'Omni' %}
{% unless unique_category contains category.name %}
{% include 'category_cards' %}
{% include 'category_cards' counter: category_counter %}
{% assign unique_category = unique_category | append: category.name %}
{% assign category_counter = category_counter | plus: 1 %}
{% if category_counter > 3 %}
{% assign category_counter = 0 %}
{% endif %}
{% endunless %}
{% endif %}
{% endfor %}
@ -19,7 +26,24 @@
slidesToShow: 4,
slidesToScroll: 5,
prevArrow: "<i class='control-carousel fas fa-chevron-left left-arrow'></i>",
nextArrow: "<i class='control-carousel fas fa-chevron-right right-arrow'></i>"
nextArrow: "<i class='control-carousel fas fa-chevron-right right-arrow'></i>",
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</script>

2
Custom_Templates/customer_templates/Cin7 Customers/_course_desktop_view.html.liquid
View File

@ -1,6 +1,6 @@
<div class="np-card-container">
<div class="lp-header-container">
<div class="lp-heading lora"> {{ course.name }}</div>
<div class="lp-heading lora course-name"> {{ course.name }}</div>
</div>
<div class="np-divider"></div>

7
Custom_Templates/customer_templates/Cin7 Customers/_course_header.html.liquid
View File

@ -3,15 +3,14 @@
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
</i>
</div>
<div class="np-top-title">
<div class="np-top-title course-name">
<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>
{% assign course_name = course.name | split: "]" %}
{{ course_name.last }}
{{ course.name }}
</div>
<img
src="{{ course.image_url }}"
class="np-top-image np-hidden-desktop"
alt="{{ course_name.last }}"
alt="{{ course.name }}"
/>

24
Custom_Templates/customer_templates/Cin7 Customers/_courses_catalog.html.liquid
View File

@ -1,9 +1,25 @@
{% if courses.in_catalog.any? %}
<div class=" row">
{% for course in courses.in_catalog %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% for course in courses.in_catalog %}
{% if current_person.signed_in? %}
{% if omni %}
{% if course.name contains 'Omni' %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% endif %}
{% elsif core %}
{% if course.name contains 'Core' %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% endif %}
{% endif %}
{% else %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% endif %}
{% endfor %}
</div>
{% else %}

60
Custom_Templates/customer_templates/Cin7 Customers/_featured_courses.html.liquid
View File

@ -1,12 +1,41 @@
{% assign omni = false %}
{% assign core = false %}
{% if current_person.signed_in? %}
{% assign signed_in = true %}
{% for group in current_person.groups %}
{% if group.id == '9daeef1e-bd6c-47da-a343-ef772ba88300' %}
{% assign core = true %}
{% elsif group.id == 'afa31e2d-646e-4b7e-b65e-c426dc30ec5c' %}
{% assign omni = true %}
{% endif %}
{% endfor %}
{% endif %}
<div class="carousel-wrapper">
<div class="feature-courses-carousel">
{% for course in courses.in_catalog %}
{% if course.properties.feature_course %}
<div class="card-wrapper">
{% include 'cards_course' %}
</div>
{% if core %}
{% if course.properties.feature_course_core == true %}
<div class="card-wrapper">
{% include 'cards_course' %}
</div>
{% endif %}
{% elsif omni %}
{% if course.properties.feature_course_omni == true %}
<div class="card-wrapper">
{% include 'cards_course' %}
</div>
{% endif %}
{% else %}
{% if course.properties.feature_course_omni == true or course.properties.feature_course_core == true %}
<div class="card-wrapper">
{% include 'cards_course' %}
</div>
{% endif %}
{% endif %}
{% endfor %}
{% endfor %}
</div>
</div>
@ -16,7 +45,24 @@
slidesToShow: 4,
slidesToScroll: 5,
prevArrow: "<i class='control-carousel fas fa-chevron-left left-arrow'></i>",
nextArrow: "<i class='control-carousel fas fa-chevron-right right-arrow'></i>"
nextArrow: "<i class='control-carousel fas fa-chevron-right right-arrow'></i>",
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</script>
@ -34,4 +80,4 @@
.my-courses-carousel {
margin: 0 1rem;
}
</style>
</style>

216
Custom_Templates/customer_templates/Cin7 Customers/_filters_catalog.html.liquid Normal file
View File

@ -0,0 +1,216 @@
<div class="filter-heading lora">Filters</div>
<div class="filters-option-container">
<div class="filter-categories">
<div class="filter-option-heading">Categories</div>
{% if omni %}
<div class="filter-option-container" id="categoryFilters">
{% assign unique_omni_categories = "" %}
{% for course in courses.in_catalog %}
{% for category in course.categories %}
{% if category.name contains 'Omni' %}
{% unless unique_omni_categories contains category.name %}
<div class="category-option">
<input class="filter-checkbox" type="checkbox" id="{{category.name}}" />
<label>{{category.name}}</label>
</div>
{% assign unique_omni_categories = unique_omni_categories | append: category.name %}
{% endunless %}
{% endif %}
{% endfor %}
{% endfor %}
</div>
{% elsif core %}
<div class="filter-option-container" id="categoryFilters">
{% assign unique_core_categories = "" %}
{% for course in courses.in_catalog %}
{% if course.name contains '[Core]' %}
{% for category in course.categories %}
{% if category.name contains 'Core' %}
{% unless unique_core_categories contains category.name %}
<div class="category-option">
<input class="filter-checkbox" type="checkbox" id="{{category.name}}" />
<label>{{category.name}}</label>
</div>
{% assign unique_core_categories = unique_core_categories | append: category.name %}
{% endunless %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
{% endif %}
</div>
<div class="fiter-duration">
<div class="filter-option-heading">Course Duration</div>
<div class="filter-option-container" id="course-duration">
<div class="time-option">
<input class="duration-checkbox" type="checkbox" id="<10" />
<label>< 10 min</label>
</div>
<div class="time-option">
<input class="duration-checkbox" type="checkbox" id="<20" />
<label>< 20 min</label>
</div>
<div class="time-option">
<input class="duration-checkbox" type="checkbox" id="<30" />
<label>< 30 min</label>
</div>
<div class="time-option">
<input class="duration-checkbox" type="checkbox" id="<45" />
<label>< 45 min</label>
</div>
<div class="time-option">
<input class="duration-checkbox" type="checkbox" id="<60" />
<label>< 60 min</label>
</div>
</div>
</div>
</div>
<style>
.filter-container {
width: 25%;
height: fit-content;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
padding: 1.5rem;
border-radius: 20px;
color: #002f6f;
}
.filter-heading {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 20px;
}
.filter-option-heading {
font-weight: 700;
}
.filter-option-container {
margin: 15px 10px;
}
.category-option, .time-option {
display: flex;
gap: 10px;
}
.hidden {
display: none;
}
</style>
<script>
function sortLabelsAlphabetically() {
const categoryContainer = document.getElementById("categoryFilters");
const categoryOptions = categoryContainer.querySelectorAll(".category-option");
const categoryOptionsArray = Array.from(categoryOptions);
categoryOptionsArray.sort((a, b) => {
const labelA = a.querySelector("label").innerText.toLowerCase();
const labelB = b.querySelector("label").innerText.toLowerCase();
return labelA.localeCompare(labelB);
});
categoryContainer.innerHTML = "";
categoryOptionsArray.forEach((categoryOption) => {
categoryContainer.appendChild(categoryOption);
});
}
document.addEventListener("DOMContentLoaded", function() {
var categoryCheckboxes = document.querySelectorAll('.filter-checkbox');
var durationCheckboxes = document.querySelectorAll('.duration-checkbox');
categoryCheckboxes.forEach(function (checkbox) {
checkbox.addEventListener('change', function () {
filterCourses();
});
});
durationCheckboxes.forEach(function (checkbox) {
checkbox.addEventListener('change', function () {
filterCourses();
});
});
var urlParams = new URLSearchParams(window.location.search);
var categoryFromUrl = urlParams.get('category');
var durationFromUrl = urlParams.get('duration');
if (categoryFromUrl) {
var categoryCheckbox = document.getElementById(categoryFromUrl);
if (categoryCheckbox) {
categoryCheckbox.click();
}
}
if (durationFromUrl) {
var durationCheckbox = document.getElementById(durationFromUrl);
if (durationCheckbox) {
durationCheckbox.click();
}
}
sortLabelsAlphabetically();
filterCourses();
});
function filterCourses() {
var selectedCategories = getSelectedCategories();
var selectedDurations = getSelectedDurations();
var cards = document.querySelectorAll('.card');
cards.forEach(function (card) {
var categories = card.getAttribute('categories');
var duration = parseInt(card.getAttribute('duration'), 10);
var categoryMatch = selectedCategories.length === 0 || matchesCategories(categories, selectedCategories);
var durationMatch = selectedDurations.length === 0 || matchesDuration(duration, selectedDurations);
if (categoryMatch && durationMatch) {
card.parentElement.style.display = 'flex';
} else {
card.parentElement.style.display = 'none';
}
});
}
function getSelectedCategories() {
var selectedCategories = [];
var checkboxes = document.querySelectorAll('.filter-checkbox:checked');
checkboxes.forEach(function (checkbox) {
selectedCategories.push(checkbox.id);
});
return selectedCategories;
}
function getSelectedDurations() {
var selectedDurations = [];
var checkboxes = document.querySelectorAll('.duration-checkbox:checked');
checkboxes.forEach(function (checkbox) {
selectedDurations.push(checkbox.id);
});
return selectedDurations;
}
function matchesCategories(courseCategories, selectedCategories) {
var courseCategoriesArray = courseCategories.split(',').map(function (category) {
return category.trim();
});
return selectedCategories.some(function (selectedCategory) {
return courseCategoriesArray.includes(selectedCategory);
});
}
function matchesDuration(courseDuration, selectedDurations) {
return selectedDurations.every(function (selectedDuration) {
var durationRange = parseInt(selectedDuration.replace('<', ''), 10);
return courseDuration < durationRange;
});
}
</script>

51
Custom_Templates/customer_templates/Cin7 Customers/_footer.html.liquid
View File

@ -1,33 +1,58 @@
{% assign omni = false %}
{% assign core = false %}
{% if current_person.signed_in? %}
{% for group in current_person.groups %}
{% if group.id == '9daeef1e-bd6c-47da-a343-ef772ba88300' %}
{% assign core = true %}
{% elsif group.id == 'afa31e2d-646e-4b7e-b65e-c426dc30ec5c' %}
{% assign omni = true %}
{% endif %}
{% endfor %}
{% endif %}
<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">
<div class="footer-heading lora">Resources</div>
<li class="np-footer-navigation-item">
{% if omni %}
<a
class="np-footer-navigation-link"
href="https://connect.cin7.com/s/knowledge"
target="_blank"
>
Knowledge Base
</a>
{% else %}
<a
class="np-footer-navigation-link"
href="https://support.dearsystems.com/"
target="_blank"
>
Knowledge Base
</a>
{% endif %}
</li>
<li class="np-footer-navigation-item">
<a
class="np-footer-navigation-link"
href="#"
href="https://www.cin7.com/product-updates/"
target="_blank"
>
Knowledge Base
Release Notes
</a>
</li>
<li class="np-footer-navigation-item">
<a
class="np-footer-navigation-link"
href="#"
href="mailto:academy-admin@cin7.com"
target="_blank"
>
Relase Notes
</a>
</li>
<li class="np-footer-navigation-item">
<a
class="np-footer-navigation-link"
href="#"
target="_blank"
>
Contact
Contact: academy-admin@cin7.com
</a>
</li>
</ul>

19
Custom_Templates/customer_templates/Cin7 Customers/_head.html.liquid
View File

@ -15,4 +15,21 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<script>
document.addEventListener('DOMContentLoaded', function() {
function modifyCourseNames() {
var courseElements = document.querySelectorAll('.course-name');
courseElements.forEach(function(courseElement) {
var courseName = courseElement.textContent;
var modifiedCourseName = courseName.replace(/\[[^\]]+\]/g, '');
courseElement.textContent = modifiedCourseName;
});
}
modifyCourseNames();
});
</script>

2
Custom_Templates/customer_templates/Cin7 Customers/_header.html.liquid
View File

@ -86,7 +86,7 @@
{% 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">
<i id="search-icon" class="header-search-icon far fa-search np-header-font-color"></i>
<i id="search-icon" class="header-search-icon fas fa-search np-header-font-color"></i>
<input
aria-label="{% t .search %}"
class="header-search-input"

55
Custom_Templates/customer_templates/Cin7 Customers/_homepage_testimonials.html.liquid Normal file
View File

@ -0,0 +1,55 @@
{% if omni %}
<div class="heading lora info-section-heading">Empowering education for Connected Inventory Performance</div>
<div class="section-content section-content-info">
<div class="info-wrapper">
<div class="info">
<img class="info-icon" src="https://s3.amazonaws.com/static.northpass.com/Cin7/icons/in+depth+learning.png" alt="">
<div class="info-content">
<div class="info-heading">In-depth learning</div>
<div class="info-desc">Created by our subject matter experts.</div>
</div>
</div>
<div class="info">
<img class="info-icon" src="https://s3.amazonaws.com/static.northpass.com/Cin7/icons/Always+available.png" alt="">
<div class="info-content">
<div class="info-heading">Always available</div>
<div class="info-desc">Choose when and what to learn at your own pace.</div>
</div>
</div>
<div class="info">
<img class="info-icon" src="https://s3.amazonaws.com/static.northpass.com/Cin7/icons/Designed+for+everyone.png" alt="">
<div class="info-content">
<div class="info-heading">Designed for everyone</div>
<div class="info-desc">From basic to advanced, courses for your whole team.</div>
</div>
</div>
</div>
</div>
{% elsif core %}
<div class="heading lora info-section-heading">Transformative education for Connected Inventory Performance</div>
<div class="section-content section-content-info">
<div class="info-wrapper">
<div class="info">
<img class="info-icon" src="https://s3.amazonaws.com/static.northpass.com/Cin7/icons/in+depth+learning.png" alt="">
<div class="info-content">
<div class="info-heading">Dynamic courses</div>
<div class="info-desc">Developed by our product education professionals</div>
</div>
</div>
<div class="info">
<img class="info-icon" src="https://s3.amazonaws.com/static.northpass.com/Cin7/icons/Always+available.png" alt="">
<div class="info-content">
<div class="info-heading">Results-driven education</div>
<div class="info-desc">Designed for you to meet your business goals</div>
</div>
</div>
<div class="info">
<img class="info-icon" src="https://s3.amazonaws.com/static.northpass.com/Cin7/icons/Designed+for+everyone.png" alt="">
<div class="info-content">
<div class="info-heading">Customer-centered</div>
<div class="info-desc">Supporting you through all stages of your journey</div>
</div>
</div>
</div>
</div>
{% endif %}

48
Custom_Templates/customer_templates/Cin7 Customers/_learning_path_carousel.html.liquid Normal file
View File

@ -0,0 +1,48 @@
{% assign counter = 0 %}
<div class="carousel-wrapper">
<div class="learning-path-carousel">
{% for learning_path in learning_paths.available %}
{% if learning_path.name contains 'Core' %}
<div class="card-wrapper">
{% include "cards_learning_path_homepage" with learning_path %}
</div>
{% assign counter = counter | plus: 1 %}
{% endif %}
{% endfor %}
</div>
{% if counter == 0 %}
<div class="zero-state-wrapper">
<img class="zero-img" src="https://s3.amazonaws.com/static.northpass.com/Cin7/zero+state/no+courses+or+lps+(no+button).png" alt="">
<div class="zero-button-wrapper">
<a class="lp-button" href="/app/catalog">Continue learning now!</a>
</div>
</div>
{% endif %}
</div>
<script>
$('.learning-path-carousel').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
prevArrow: "<i class='control-carousel fas fa-chevron-left left-arrow'></i>",
nextArrow: "<i class='control-carousel fas fa-chevron-right right-arrow'></i>"
});
</script>
<style>
.slick-track {
display: flex;
}
.card {
height: 100%;;
}
.card-wrapper {
padding: 1rem 0;
height: auto;
}
.learning-path-carousel {
margin: 0 1rem;
}
</style>

4
Custom_Templates/customer_templates/Cin7 Customers/_learning_path_course.html.liquid
View File

@ -5,7 +5,7 @@
>
<div class="np-card-content np-card-padding">
<div class="learning-path-outline-content">
<div class="np-learning-path-outline-name np-top-title">
<div class="np-learning-path-outline-name np-top-title course-name">
{{ course.name }}
</div>
<div class="learning-path-outline-progress
@ -25,7 +25,7 @@
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
<div class="np-card-content np-card-padding">
<div class="learning-path-outline-content">
<div class="np-learning-path-outline-name np-top-title">
<div class="np-learning-path-outline-name np-top-title course-name">
{{ course.name }}
</div>
</div>

2
Custom_Templates/customer_templates/Cin7 Customers/_learning_path_description.html.liquid
View File

@ -1,5 +1,5 @@
<h3 class="np-card-heading">
{% t .about %}
About this Learning Path
</h3>
<div class="np-card-text">
{{ learning_path.description }}

10
Custom_Templates/customer_templates/Cin7 Customers/_learning_paths_index.html.liquid
View File

@ -1,7 +1,15 @@
<div class="np-learning-paths-resources">
{% if items.any? %}
{% for learning_path in items %}
{% include "cards_learning_path" with learning_path %}
{% if core %}
{% if learning_path.name contains 'Core' %}
{% include "cards_learning_path" with learning_path %}
{% endif %}
{% elsif omni %}
{% if learning_path.name contains 'Omni'%}
{% include "cards_learning_path" with learning_path %}
{% endif %}
{% endif %}
{% endfor %}
{% else %}
<div class="np-learning-paths-resources-container">

84
Custom_Templates/customer_templates/Cin7 Customers/_my_badges_carousel.html.liquid Normal file
View File

@ -0,0 +1,84 @@
{% assign completed_courses = 0 %}
{% for course in courses.enrolled %}
{% if course.progress == 100 %}
{% assign completed_courses = completed_courses | plus: 1 %}
{% endif %}
{% endfor %}
<div class="carousel-wrapper">
<div class="my-badges-carousel">
{% include 'badges_cards' %}
</div>
{% if completed_courses == 0 %}
<div class="zero-state-wrapper">
<img class="zero-img" src="https://s3.amazonaws.com/static.northpass.com/Cin7/zero+state/No+badges+(no+button).png" alt="">
<div class="zero-button-wrapper">
<a class="lp-button" href="/app/catalog">Complete your first course now!</a>
</div>
</div>
{% endif %}
</div>
<script>
$('.my-badges-carousel').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
prevArrow: "<i class='control-carousel fas fa-chevron-left left-arrow'></i>",
nextArrow: "<i class='control-carousel fas fa-chevron-right right-arrow'></i>",
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</script>
<style>
.slick-track {
display: flex;
}
.card {
height: 100%;;
}
.card-wrapper {
padding: 1rem 0;
height: auto;
}
.my-badges-carousel {
margin: 0 1rem;
}
</style>
<style>
.badge-card-image {
width: 60%;
}
.card-badge {
background: #f8f5f2;
display: flex;
justify-content: center;
padding: 2rem;
border-radius: 20px 20px 0 0;
}
.card-content-badge {
text-align: center;
}
.completed-courses {
margin-top: 10px;
font-weight: 500;
color: #002f6f;
}
</style>

37
Custom_Templates/customer_templates/Cin7 Customers/_my_courses_carousel.html.liquid
View File

@ -1,11 +1,23 @@
{% assign counter = 0 %}
<div class="carousel-wrapper">
<div class="my-courses-carousel">
{% for course in courses.enrolled %}
<div class="card-wrapper">
{% include 'cards_course' %}
</div>
{% if course.progress == 100 %}
<div class="card-wrapper">
{% include 'cards_course' %}
</div>
{% assign counter = counter | plus: 1 %}
{% endif %}
{% endfor %}
</div>
{% if counter == 0 %}
<div class="zero-state-wrapper">
<img class="zero-img" src="https://s3.amazonaws.com/static.northpass.com/Cin7/zero+state/no+completed+courses+(no+button).png" alt="">
<div class="zero-button-wrapper">
<a class="lp-button" href="/app/catalog">Start learning now!</a>
</div>
</div>
{% endif %}
</div>
<script>
@ -14,7 +26,24 @@
slidesToShow: 4,
slidesToScroll: 4,
prevArrow: "<i class='control-carousel fas fa-chevron-left left-arrow'></i>",
nextArrow: "<i class='control-carousel fas fa-chevron-right right-arrow'></i>"
nextArrow: "<i class='control-carousel fas fa-chevron-right right-arrow'></i>",
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</script>

67
Custom_Templates/customer_templates/Cin7 Customers/_my_learning_paths_and_courses_carousel.html.liquid Normal file
View File

@ -0,0 +1,67 @@
{% assign counter = 0 %}
<div class="carousel-wrapper">
<div class="my-learning-path-carousel">
{% for learning_path in learning_paths.enrolled %}
{% if learning_path.progress < 100 %}
<div class="card-wrapper">
{% include "cards_learning_path_homepage" with learning_path %}
</div>
{% assign counter = counter | plus: 1 %}
{% endif %}
{% endfor %}
{% if core %}
{% for course in courses.enrolled %}
{% if course.name contains 'Core' and course.progress < 100 %}
<div class="card-wrapper">
{% include 'cards_course' %}
</div>
{% assign counter = counter | plus: 1 %}
{% endif %}
{% endfor %}
{% elsif omni %}
{% for course in courses.enrolled %}
{% if course.name contains 'Omni' and course.progress < 100 %}
<div class="card-wrapper">
{% include 'cards_course' %}
</div>
{% assign counter = counter | plus: 1 %}
{% endif %}
{% endfor %}
{% endif %}
</div>
{% if counter == 0 %}
<div class="zero-state-wrapper">
<img class="zero-img" src="https://s3.amazonaws.com/static.northpass.com/Cin7/zero+state/no+courses+or+lps+(no+button).png" alt="">
<div class="zero-button-wrapper">
<a class="lp-button" href="/app/catalog">Continue learning now!</a>
</div>
</div>
{% endif %}
</div>
<script>
$('.my-learning-path-carousel').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
prevArrow: "<i class='control-carousel fas fa-chevron-left left-arrow'></i>",
nextArrow: "<i class='control-carousel fas fa-chevron-right right-arrow'></i>"
});
</script>
<style>
.slick-track {
display: flex;
}
.card {
height: 100%;;
}
.card-wrapper {
padding: 1rem 0;
height: auto;
}
.my-learning-path-carousel {
margin: 0 1rem;
}
</style>

30
Custom_Templates/customer_templates/Cin7 Customers/_my_learning_paths_carousel.html.liquid
View File

@ -1,11 +1,41 @@
{% assign counter = 0 %}
<div class="carousel-wrapper">
<div class="my-learning-path-carousel">
{% for learning_path in learning_paths.enrolled %}
<div class="card-wrapper">
{% include "cards_learning_path_homepage" with learning_path %}
</div>
{% assign counter = counter | plus: 1 %}
{% endfor %}
{% if core %}
{% for course in courses.enrolled %}
{% if course.name contains 'Core' %}
<div class="card-wrapper">
{% include 'cards_course' %}
</div>
{% assign counter = counter | plus: 1 %}
{% endif %}
{% endfor %}
{% elsif omni %}
{% for course in courses.enrolled %}
{% if course.name contains 'Omni' %}
<div class="card-wrapper">
{% include 'cards_course' %}
</div>
{% assign counter = counter | plus: 1 %}
{% endif %}
{% endfor %}
{% endif %}
</div>
{% if counter == 0 %}
<div class="zero-state-wrapper">
<img class="zero-img" src="https://s3.amazonaws.com/static.northpass.com/Cin7/zero+state/no+courses+or+lps+(no+button).png" alt="">
<div class="zero-button-wrapper">
<a class="lp-button" href="/app/catalog">Continue learning now!</a>
</div>
</div>
{% endif %}
</div>
<script>

53
Custom_Templates/customer_templates/Cin7 Customers/_omni_learning_paths_carousel.html.liquid Normal file
View File

@ -0,0 +1,53 @@
<div class="carousel-wrapper">
<div class="my-learning-path-carousel">
{% for learning_path in learning_paths.enrolled %}
<div class="card-wrapper">
{% include "cards_learning_path_homepage" with learning_path %}
</div>
{% endfor %}
</div>
</div>
<script>
$('.my-learning-path-carousel').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
prevArrow: "<i class='control-carousel fas fa-chevron-left left-arrow'></i>",
nextArrow: "<i class='control-carousel fas fa-chevron-right right-arrow'></i>",
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</script>
<style>
.slick-track {
display: flex;
}
.card {
height: 100%;;
}
.card-wrapper {
padding: 1rem 0;
height: auto;
}
.my-learning-path-carousel {
margin: 0 1rem;
}
</style>

68
Custom_Templates/customer_templates/Cin7 Customers/_training_events_dashboard.html.liquid
View File

@ -1,7 +1,71 @@
<div class="np-dashboard-resources">
{% comment %} <div class="np-dashboard-resources">
{% if training_events.enrolled.any? %}
{% for training_event in training_events.enrolled %}
{% include "cards_training_event" with training_event %}
<div class="card-wrapper">
{% include "cards_training_event" with training_event %}
</div>
{% endfor %}
{% endif %}
</div> {% endcomment %}
{% assign counter = 0 %}
<div class="carousel-wrapper">
<div class="my-events-carousel">
{% if training_events.enrolled.any? %}
{% for training_event in training_events.enrolled %}
<div class="card-wrapper">
{% include "cards_training_event" with training_event %}
</div>
{% assign counter = counter | plus: 1 %}
{% endfor %}
{% endif %}
</div>
{% if counter == 0 %}
<div class="zero-state-wrapper">
<img class="zero-img" src="https://s3.amazonaws.com/static.northpass.com/Cin7/zero+state/no+live+events.png" alt="">
</div>
{% endif %}
</div>
<script>
$('.my-events-carousel').slick({
infinite: true,
slidesToShow: 5,
slidesToScroll: 5,
prevArrow: "<i class='control-carousel fas fa-chevron-left left-arrow'></i>",
nextArrow: "<i class='control-carousel fas fa-chevron-right right-arrow'></i>",
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 4,
slidesToScroll: 4,
infinite: true
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</script>
<style>
.slick-track {
display: flex;
}
.card {
height: 100%;;
}
.card-wrapper {
padding: 1rem 0;
height: auto;
}
.my-events-carousel {
margin: 0 1rem;
}
</style>

9
Custom_Templates/customer_templates/Cin7 Customers/_training_events_index.html.liquid
View File

@ -1,11 +1,18 @@
{% assign counter = 0 %}
<div class="np-dashboard-resources">
{% if training_events.available.any? %}
<div class="row events-container">
{% for training_event in training_events.available %}
<div class="np-stretch-content">
<div class="event-card np-stretch-content">
{% include "cards_training_event" with training_event %}
</div>
{% assign counter = counter | plus: 1 %}
{% endfor %}
</div>
{% endif %}
{% if counter == 0 %}
<div class="zero-state-wrapper">
<img class="zero-img" src="https://s3.amazonaws.com/static.northpass.com/Cin7/zero+state/no+live+events.png" alt="">
</div>
{% endif %}
</div>

2
Custom_Templates/customer_templates/Cin7 Customers/_training_session_calendars.html.liquid
View File

@ -1,6 +1,6 @@
<div class="dropdown dropdown-calendar">
<button
class="np-top-button np-button-font-color np-button np-button-big dropdown-calendar-button"
class="lp-button"
data-toggle-class="is-open"
data-toggle-escape
data-toggle-outside

2
Custom_Templates/customer_templates/Cin7 Customers/_training_session_cta.html.liquid
View File

@ -31,7 +31,7 @@
{% if training_session.internal? and training_session.approved? %}
{% if features.training_events_google_calendar? %}
{% include "training_session_calendars" %}
<button type="submit" class="np-top-button np-button np-button-big np-button-secondary">
<button type="submit" class="lp-button">
{% t .unregister %}
</button>
{% else %}

2
Custom_Templates/customer_templates/Cin7 Customers/_training_session_header.html.liquid
View File

@ -2,7 +2,7 @@
{% t shared.event_types, key: training_event.event_type %}
<i class="fal fa-users-class np-button-color np-training-session-icon"></i>
</div>
<div class="np-top-title">
<div class="lp-heading lora course-name">
<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>

6
Custom_Templates/customer_templates/Cin7 Customers/catalog.html.liquid
View File

@ -20,7 +20,7 @@
<div class="hero-subheading">Get the skills and knowledge you need at the moment you need them. Explore our full course catalog.</div>
</div>
</div>
<main class="np-main np-catalog np-subpage-container np-max-width catalog-container">
<main class="np-main np-catalog np-max-width catalog-container">
<div class="filter-container">
{% include 'filters_catalog' %}
</div>
@ -36,7 +36,7 @@
.catalog-container {
display: flex;
gap: 20px;
padding: 5% 20px;
}
.filter-container {
width: 25%;
@ -69,4 +69,4 @@
}
</style>
</style>

38
Custom_Templates/customer_templates/Cin7 Customers/dashboard.html.liquid
View File

@ -1,26 +1,46 @@
{% assign omni = false %}
{% assign core = false %}
{% if current_person.signed_in? %}
{% for group in current_person.groups %}
{% if group.id == '9daeef1e-bd6c-47da-a343-ef772ba88300' %}
{% assign core = true %}
{% elsif group.id == 'afa31e2d-646e-4b7e-b65e-c426dc30ec5c' %}
{% assign omni = true %}
{% endif %}
{% endfor %}
{% endif %}
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
<div class="hero-homepage">
<div class="np-max-width">
<div class="hero-text ">My Dashboard & Progress</div>
<div class="hero-text ">My Dashboard</div>
<div class="hero-subheading">Easily view your badges, start and resume courses and learning paths, and revisit courses you’ve completed here on your dashboard.</div>
</div>
</div>
<div class="section np-max-width">
<div class="heading-dashboard lora">My Courses</div>
<div class="heading-dashboard lora">My Badges</div>
<div class="section-content">
{% include 'my_badges_carousel' %}
</div>
</div>
<div class="section np-max-width">
<div class="heading-dashboard lora">My Courses & Paths in Progress</div>
<div class="section-content">
{% include 'my_learning_paths_and_courses_carousel' %}
</div>
</div>
<div class="section np-max-width">
<div class="heading-dashboard lora">Completed Courses</div>
<div class="section-content">
{% include 'my_courses_carousel' %}
</div>
</div>
<div class="section np-max-width">
<div class="heading-dashboard lora">My Learning Paths</div>
<div class="section-content">
{% include 'my_learning_paths_carousel' %}
</div>
</div>
<div class="section np-max-width">
<div class="heading-dashboard lora">My Events</div>
<div class="heading-dashboard lora">My Live Events</div>
<div class="section-content">
{% include "training_events_dashboard" %}
</div>

12
Custom_Templates/customer_templates/Cin7 Customers/homepage.html.liquid
View File

@ -17,12 +17,12 @@
<main class="np-main homepage">
<div class="hero-homepage">
<div class="np-max-width">
{% if core %}
<div class="hero-text lora">Welcome to Cin7 Core Academy</div>
{% elsif omni %}
<div class="hero-text lora">Welcome to Cin7 Omni Academy</div>
{% endif %}
<div class="hero-subheading">Learn to create and manage a best-in-class inventory operation for your business.</div>
{% if core %}
<div class="hero-text lora">Welcome to Cin7 Core Academy</div>
{% elsif omni %}
<div class="hero-text lora">Welcome to Cin7 Omni Academy</div>
{% endif %}
<div class="hero-subheading">Learn to create and manage a best-in-class inventory operation for your business.</div>
</div>
</div>

20
Custom_Templates/customer_templates/Cin7 Customers/learning_paths.html.liquid
View File

@ -1,12 +1,30 @@
{% assign omni = false %}
{% assign core = false %}
{% if current_person.signed_in? %}
{% for group in current_person.groups %}
{% if group.id == '9daeef1e-bd6c-47da-a343-ef772ba88300' %}
{% assign core = true %}
{% elsif group.id == 'afa31e2d-646e-4b7e-b65e-c426dc30ec5c' %}
{% assign omni = true %}
{% endif %}
{% endfor %}
{% endif %}
{% include "header" %}
<div class="hero-homepage">
<div class="np-max-width">
<div class="hero-text">Learning Paths</div>
<div class="hero-subheading">Explore curated learning paths tailored to your function and role.</div>
</div>
</div>
<main class="np-main np-learning-paths np-subpage-container ">
<div class="np-learning-paths-main np-max-width">
{% include "learning_paths_index", items: learning_paths.available %}
{% if current_person.signed_in? %}
{% include "learning_paths_index", items: learning_paths.available %}
{% else %}
<div class="hero-subheading"> You must be signed in to view Learning Paths. </div>
{% endif %}
</div>
</main>
{% include "footer" %}

7
Custom_Templates/customer_templates/Cin7 Customers/search.html.liquid
View File

@ -10,13 +10,6 @@
{% t .results_for %}
<span class="np-button-color">"{{ results.term }}"</span>
</div>
{% capture label %}{% t shared.filters.by_type %}{% endcapture %}
{%
include "filter_dropdown",
filters: results.filters,
key: "type",
label: label
%}
</div>
{% if results.items.any? %}
{% render "search_result" for results.items as result %}

70
Custom_Templates/customer_templates/Cin7 Customers/styles.css.liquid
View File

@ -20,22 +20,17 @@ body {
.hero-text {
font-family: 'Lora';
}
.np-header-desktop-nav {
display: flex;
flex-direction: row-reverse;
flex-grow: 0;
}
.np-header-desktop-nav-link {
font-weight: 700;
}
.np-header-desktop-nav-link:hover {
color: #002EFF;
}
.header-search-input {
border: 3px solid #002e6e;
border-radius: 8px;
max-width: 150px;
}
.header-search-icon {
font-weight: 800;
}
.note-desc {
font-size: 1vw
}
@ -44,7 +39,7 @@ body {
font-weight: 400;
}
.hero-homepage {
background: url('https://s3.amazonaws.com/static.northpass.com/Cin7/Hero+image+swirl+1020x300+-+all+instances.png');
background: linear-gradient(257.71deg, rgba(255, 255, 255, 0) 41.81%, #FFF 99.32%), url('https://s3.amazonaws.com/static.northpass.com/Cin7/1920x300.png');
background-position: center;
background-size: cover;
padding: 5%;
@ -161,12 +156,11 @@ body {
text-decoration: none;
font-weight: 700;
white-space: nowrap;
border: 1px solid #002f6f;
border: none;
}
.lp-button:hover {
background: none;
border: 1px solid #002f6f;
color: #002f6f;
background: #05CBBF;
color: #fff;
}
.lp-course-card {
margin: 30px 0;
@ -194,7 +188,7 @@ body {
margin-top: 20px;
}
.card {
margin: 10px;
margin: 10px;
}
.right-arrow {
@ -242,6 +236,7 @@ body {
text-decoration: none;
}
.events-container {
display: flex;
margin: 0 20px;
}
@ -319,7 +314,6 @@ body {
border-radius: 25px;
text-decoration: none;
font-weight: 700;
border: 1px solid #002f6f;
}
.button-wrapper {
display: flex;
@ -329,7 +323,7 @@ body {
.info {
display: flex;
align-items: center;
max-width: 350px;
max-width: 400px;
gap: 5%;
}
.info-wrapper {
@ -355,14 +349,17 @@ body {
}
.section-info {
background: #f5f1ed;
background: linear-gradient(257.71deg, rgba(255, 255, 255, 0) 41.81%, #FFFFFF 99.32%), #F2EDE8;
}
.np-footer {
background: url('https://s3.amazonaws.com/static.northpass.com/Cin7/Footer+background.png');
background-size: cover;
background-repeat: round;
height: 25%;
height: 28%;
}
.np-alert {
display: none;
}
.footer-heading {
@ -394,7 +391,7 @@ body {
.np-footer-top {
display: flex;
flex-direction: row;
align-items:flex-start;
align-items:flex-start;
}
.np-footer-navigation-list {
@ -445,6 +442,7 @@ body {
}
.category-card {
text-decoration: none;
height: auto !important;
}
.page-content {
@ -453,8 +451,7 @@ body {
.catalog-btn:hover {
background: #05CBBF;
border: 1px solid #002f6f;
color: #002f6f;
color: #fff;
}
.info-section-padding {
@ -479,14 +476,14 @@ body {
background: #f8f5f2;
display: flex;
justify-content: center;
padding: 2rem;
padding: 2rem;
border-radius: 20px 20px 0 0;
}
.card-category {
background: #002f6f;
display: flex;
justify-content: center;
padding: 2rem;
padding: 2rem;
border-radius: 20px 20px 0 0;
}
.card-content-badge {
@ -497,6 +494,16 @@ body {
font-weight: 500;
color: #002f6f;
}
.recommended {
margin-top: 10px;
color: #000000b5;
}
.np-header-desktop-nav-list {
justify-content: end;
}
.event-card {
max-width: 330px;
}
@media only screen and (max-width: 768px) {
.hero-text {
@ -521,14 +528,13 @@ body {
padding: 0;
margin: 10px;
}
.catalog-container {
flex-direction: column;
align-items: center;
.events-container {
justify-content: center;
}
.filter-container {
width: 100%;
.dropdown {
display: flex;
justify-content: flex-start;
position: relative;
margin-bottom: 20px;
}
.catalog-content-wrapper {
width: 100%;
}
}
}

2
Custom_Templates/customer_templates/Cin7 Customers/training_events.html.liquid
View File

@ -2,7 +2,7 @@
<div class="hero-homepage">
<div class="np-max-width">
<div class="hero-text">Events</div>
<div class="hero-text">Live Training Events</div>
</div>
</div>
<div class="section events np-max-width">