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

Datasnipper nav and page updates. Supplier sub nav color updates. nTransit added SVGs icons for their categories.

Browse Source
This commit is contained in:
Norm Rasmussen
2024-09-27 15:04:33 -04:00
parent c61c1e4410
commit 14a3266b89
123 changed files with 3644 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
Custom_Templates/customer_templates/Walmart Supplier Prod/_cards_course.html.liquid
View File

@ -1,3 +1,9 @@
{% assign skip_course_page = false %}
{% for category in course.categories %}
{% if category.name == 'Blog' or category.name == 'HelpDoc' %}
{% assign skip_course_page = true %}
{% endif %}
{% endfor %}
<div class="card-course">
<div class="np-card-container">
{% if course.ribbon %}
@ -26,9 +32,15 @@
{% include "course_version_outdated_popup", path: course_path %}
{% endif %}
<div class="button-container">
<a class="button-course" {% if course.properties.skip_course_cover_page == true and course.enrolled? == true %}href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"{% else %}href="{{ course_path }}"{% endif %}>
{% if skip_course_page %}
<a class="button-course" {% if course.enrolled? == true %}href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"{% else %}href="{{ course_path }}"{% endif %}>
{% t shared.view %}
</a>
{% else %}
<a class="button-course" {% if course.properties.skip_course_page == true and course.enrolled? == true %}href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"{% else %}href="{{ course_path }}"{% endif %}>
{% t shared.view %}
</a>
{% endif %}
</div>
</div>
</div>

71
Custom_Templates/customer_templates/Walmart Supplier Prod/_catalog_categories.html.liquid
View File

@ -1,7 +1,8 @@
{% assign available_categories = "Ethics and Compliance,Item 360,Getting Paid,Modulars and Assortments,Onboarding,Packaging and Labeling,Replenishment,Retail Basics,Transportation" %}
<div class="catalog-categories-container">
<div class="text-container">
<div class="text-heading text-center">
Explore the Course Catalog
Start you learning journey below.
</div>
</div>
@ -9,12 +10,14 @@
{% assign uniq_cats = '' %}
{% for course in courses.in_catalog %}
{% for category in course.categories %}
{% unless uniq_cats contains category.name %}
<a class="category-card" href="/app/catalog?filter[category_uuid][in][]={{category.id}}&search_terms=">
{{category.name}}
</a>
{% assign uniq_cats = uniq_cats | append: category.name%}
{% endunless %}
{% if available_categories contains category.name %}
{% unless uniq_cats contains category.name %}
<a class="category-card" id="{{category.name}}" href="/app/catalog?filter[category_uuid][in][]={{category.id}}&search_terms=">
<img class="category-card-image" src="" alt="">
</a>
{% assign uniq_cats = uniq_cats | append: category.name%}
{% endunless %}
{% endif %}
{% endfor %}
{% endfor %}
</div>
@ -24,12 +27,62 @@
.category-links-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.category-card {
text-decoration: none;
color: #fff;
text-align: center;
padding: 20px;
font-size: 20px;
cursor: pointer;
border-radius: 10px;
overflow: hidden;
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
background: #13244c;
padding: 20px;
}
</style>
.category-card:hover {
transform: scale(1.075);
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}
.category-card-image {
width: 100%;
height: auto;
border-radius: 8px;
}
.category-card-image {
width: 100%;
}
</style>
<script>
const categoryCards = document.querySelectorAll('.category-card');
const images = [
{name: 'Ethics and Compliance', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Ethics_and_Compliance.png"},
{name: 'Getting Paid', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Getting_Paid.png"},
{name: 'Item 360', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Item_360.png"},
{name: 'Modulars and Assortments', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Modulars_and_Assortments.png"},
{name: 'Onboarding', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Onboarding.png"},
{name: 'Packaging and Labeling', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Packaging_and_Labeling.png"},
{name: 'Replenishment', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Replinishment.png"},
{name: 'Retail Basics', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Retail_Basics.png"},
{name: 'Transportation', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Transportation.png"}
]
function addCategoryCardImage() {
categoryCards.forEach((card) => {
const cardName = card.id;
const cardImage = card.querySelector('.category-card-image');
for (const i of images) {
if (cardName === i.name) {
cardImage.src = i.url;
}
}
});
}
addEventListener("DOMContentLoaded", (event) => {
addCategoryCardImage();
});
</script>

21
Custom_Templates/customer_templates/Walmart Supplier Prod/_courses_blogs.html.liquid Normal file
View File

@ -0,0 +1,21 @@
{% if courses.in_catalog.any? %}
<div class="np-catalog-courses row row-with-thumbnails">
{% for course in courses.in_catalog %}
{% for category in course.categories %}
{% if category.name == 'Blog' %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content card-course-container">
{% include "cards_course" with course %}
</div>
{% endif %}
{% endfor %}
{% endfor %}
</div>
{% else %}
{% capture message %}
{% t shared.zero_state.courses.catalog,
key: current_school.course_vocabulary
%}
{% endcapture %}
{% include "courses_zero_state", message: message %}
{% endif %}

15
Custom_Templates/customer_templates/Walmart Supplier Prod/_courses_catalog.html.liquid
View File

@ -1,9 +1,18 @@
{% assign uniq_courses = '' %}
{% if courses.in_catalog.any? %}
<div class="np-catalog-courses row row-with-thumbnails">
{% for course in courses.in_catalog %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content card-course-container">
{% include "cards_course" with course %}
</div>
{% for category in course.categories %}
{% unless category.name == 'Blog' %}
{% unless uniq_courses contains course.name %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content card-course-container">
{% include "cards_course" with course %}
</div>
{% assign uniq_courses = uniq_courses | append: course.name %}
{% endunless %}
{% endunless %}
{% endfor %}
{% endfor %}
</div>
{% else %}

16
Custom_Templates/customer_templates/Walmart Supplier Prod/_header.html.liquid
View File

@ -29,14 +29,6 @@
</a>
</li>
{% endfor %}
<li class= "np-header-desktop-nav-item">
<a
href="/app"
class="np-header-desktop-nav-link np-header-font-color"
>
Home
</a>
</li>
<li class= "np-header-desktop-nav-item">
<div
class="np-header-desktop-nav-link np-header-font-color header-dropdown-link"
@ -49,14 +41,6 @@
</div>
</div>
</li>
<li class= "np-header-desktop-nav-item">
<a
href="/app/dashboard"
class="np-header-desktop-nav-link np-header-font-color"
>
Dashboard
</a>
</li>
<li class= "np-header-desktop-nav-item">
<a
href="#"

48
Custom_Templates/customer_templates/Walmart Supplier Prod/_in-progress-carousel.html.liquid Normal file
View File

@ -0,0 +1,48 @@
<div class="carousel-wrapper">
<div class="carousel-heading">In Progress</div>
<div class="in-progress-carousel">
{% for course in courses.enrolled %}
{% if course.progress > 0 and course.progress < 100 %}
<div class="carousel-cards-container">
{% include 'cards_course' %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
<style>
.in-progress-carousel {
margin-top: 25px;
}
</style>
<script>
$(document).ready(function(){
$(".in-progress-carousel").slick({
slidesToShow: 3,
cssEase: 'linear',
prevArrow: '<i class="fal fa-chevron-left arrow-left"></i>',
nextArrow: '<i class="fal fa-chevron-right arrow-right"></i>',
infinite: false,
responsive: [
{
breakpoint: 1170,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: false,
arrows: true,
}
}
]
});
});
</script>

28
Custom_Templates/customer_templates/Walmart Supplier Prod/_sub_navigation.html.liquid
View File

@ -3,28 +3,40 @@
{% for link in navigations.sub_navigation %}
<div class="np-sub-navigation-content-item {{ link.active_class }}">
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
{{ link.label }}
</a>
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
</div>
{% endfor %}
{% comment %} <div id="navBlog" class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
<a class="np-sub-navigation-content-item-link" href="/app/articles">
<i class="far fa-file-alt np-button-color np-sub-navigation-content-item-icon"></i>
<div id="navBlog" class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
<a class="np-sub-navigation-content-item-link" href="/app/blog">
Blog
</a>
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
</div> {% endcomment %}
</div>
</div>
{% comment %}
<div id="navBlog" class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
<a class="np-sub-navigation-content-item-link" href="">
<i class="far fa-file-alt np-button-color np-sub-navigation-content-item-icon"></i>
Help Docs
</a>
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
</div>
</div>
{% endcomment %}
</nav>
<script>
const url = window.location.pathname;
const navBlogBtn = document.querySelector('#navBlog');
if (url === '/app/articles') {
if (url === '/app/blog') {
navBlogBtn.classList.add('np-sub-navigation-content-item-active');
navBlogBtn.classList.remove('np-sub-navigation-content-item-inactive');
}
</script>
} else if (url === '') {
navBlogBtn.classList.add('np-sub-navigation-content-item-active');
navBlogBtn.classList.remove('np-sub-navigation-content-item-inactive');
}
</script>

13
Custom_Templates/customer_templates/Walmart Supplier Prod/blog.html.liquid Normal file
View File

@ -0,0 +1,13 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
{% include "sub_navigation" %}
<main class="np-main np-catalog np-subpage-container np-max-width">
<div class="np-catalog-header-wrapper">
<div class="np-catalog-header">
<div class="np-resource-title">Blogs</div>
<div class="np-resource-subtitle"></div>
</div>
</div>
{% include "courses_blogs" %}
</main>
{% include "footer" %}

18
Custom_Templates/customer_templates/Walmart Supplier Prod/dashboard.html.liquid
View File

@ -1,6 +1,7 @@
{% assign getting_started_courses = false %}
{% assign merchandising_courses = false %}
{% assign analysis_and_reporting_courses = false %}
{% assign courses_in_progress = false %}
{% for course in courses.in_catalog %}
{% for category in course.categories %}
@ -16,6 +17,12 @@
{% endfor %}
{% endfor %}
{% for course in courses.enrolled %}
{% if course.progress > 0 and course.progress < 100 %}
{% assign courses_in_progress = true %}
{% endif %}
{% endfor %}
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
@ -34,11 +41,22 @@
</div>
<div class="np-grid-spacing col-xs-12 col-md-4 progress-section">
{% include "widget_course_progress" %}
{% if features.training_events? %}
<div class="heading-container">
<div class="carousel-heading">
Upcoming Events
</div>
</div>
{% include "training_events_dashboard" %}
{% endif %}
</div>
</div>
<div class="row dashboard-section-courses">
<div class="col-xs-12">
{% if courses_in_progress %}
{% include 'in-progress-carousel' %}
{% endif %}
{% if getting_started_courses %}
{% include 'getting-started-carousel' %}
{% endif %}

4
Custom_Templates/customer_templates/Walmart Supplier Prod/homepage.html.liquid
View File

@ -9,9 +9,9 @@
</div>
{% include "sub_navigation" %}
<div class="np-max-width">
<section>
{% comment %} <section>
{% include 'feature_learning_paths' %}
</section>
</section> {% endcomment %}
<section>
{% include 'catalog_categories' %}
</section>

42
Custom_Templates/customer_templates/Walmart Supplier Prod/styles.css.liquid
View File

@ -76,6 +76,43 @@ body {
color: #fff;
}
.np-sub-navigation {
background-color: #041E42 !important;
padding: 25px 0 0 0;
margin: 0 0 0 0;
}
.np-sub-navigation-content-item-link {
height: 15px;
}
.np-sub-navigation-content-item-inactive {
--np-button-color: #ffffff !important;
--np-button-font-color: #ffffff !important;
color: #ffffff !important;
}
.np-sub-navigation-content-item-inactive
.np-sub-navigation-content-item-link {
color: #ffffff;
}
.np-sub-navigation-content-item-inactive
.np-sub-navigation-content-item-icon {
color: #ffffff;
}
.np-sub-navigation-content-item-active
.np-sub-navigation-content-item-link {
color: #FFC220;
}
.np-sub-navigation-content-item-active {
--np-button-color: #FFC220 !important;
--np-button-font-color: #FFC220 !important;
color: #FFC220 !important;
}
.feature-lp-card {
text-decoration: none;
}
@ -172,4 +209,7 @@ section {
}
.np-content-categories-content-item {
margin-bottom: 12px;
}
}
.np-zero-state-text {
color: #fff;
}