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

new directory

Browse Source
This commit is contained in:
Norm Rasmussen
2022-02-23 13:18:41 -05:00
commit 26beb4c7f2
312 changed files with 20068 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
customer_templates/Walmart/_cards_course.html.liquid Normal file
View File

@ -0,0 +1,37 @@
<div class="np-card carousel-card">
<div class="np-card-container">
{% if course.ribbon %}
<div class="np-card-ribbon">
{{ course.ribbon }}
</div>
{% endif %}
<img
class="np-card-image"
alt="{{ course.name }}"
src="{{ course.image_url }}"
>
<div class="np-card-content np-card-content-vertical np-card-padding">
<div class="np-flex-1">
<h3 class="np-card-content-title">
{{ course.name }}
</h3>
{% if course.instructor_names != "" %}
<div class="np-card-content-subtitle">
{{ course.instructor_names }}
</div>
{% endif %}
</div>
{% include "course_content_info", info: course.sections %}
<div class="np-card-content-footer">
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
<a class="np-button np-button-wide" href="{{ course_path }}">
{% t shared.view %}
</a>
{% if course.has_to_restart? %}
{% include "course_version_outdated_popup", path: course_path %}
{% endif %}
</div>
</div>
</div>
</div>

45
customer_templates/Walmart/_cards_video.html.liquid Normal file
View File

@ -0,0 +1,45 @@
<div class="np-card carousel-card">
<div class="np-card-container">
{% if course.ribbon %}
<div class="np-card-ribbon">
{{ course.ribbon }}
</div>
{% endif %}
<img
class="np-card-image"
alt="{{ course.name }}"
src="{{ course.image_url }}"
>
<div class="np-card-content np-card-content-vertical np-card-padding">
<div class="np-flex-1 card-title-flex">
<h3 class="np-card-content-title">
{{ course.name }}
</h3>
<div class="video-duration">{{course.properties.video_duration}}</div>
</div>
<div class="np-card-content-footer">
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
<a class="np-button np-button-wide" href="{{ course_path }}">
Watch
</a>
</div>
</div>
</div>
</div>
<style>
.card-title-flex {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.video-duration {
color: #f9c221;
font-weight: bold;
margin-left:10px;
}
</style>

18
customer_templates/Walmart/_course_content_info.html.liquid Normal file
View File

@ -0,0 +1,18 @@
<div class="np-course-content-info">
<div class="info-line">
<div>Total Sections</div>
<div>{{info | size }} </div>
</div>
<div class="info-line">
<div>Total Activities</div>
{% assign activityCount = 0 %}
{% for sections in info %}
{% for activities in sections.activities %}
{% assign activityCount = activityCount | plus: 1 %}
{% endfor %}
{% endfor %}
<div>{{ activityCount }} </div>
</div>
</div>

13
customer_templates/Walmart/_courses_carousel.html.liquid Normal file
View File

@ -0,0 +1,13 @@
{% assign category_name_split = category | split: " " %}
{% assign category_name_joined = category_name_split | join: "-" | downcase %}
<div class="category-carousel" data-slider-size="{{num_of_slides}}">
{% for course in courses.in_catalog %}
{% for course_categories in course.categories %}
{% if category == course_categories.name %}
<div>{% include "cards_course" with course %}</div>
{% endif %}
{% endfor %}
{% endfor %}
</div>

20
customer_templates/Walmart/_courses_catalog.html.liquid Normal file
View File

@ -0,0 +1,20 @@
{% 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 != "Videos" %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% endif %}
{% endfor %}
{% endfor %}
</div>
{% else %}
{% capture message %}
{% t shared.zero_state.courses.catalog,
key: current_school.course_vocabulary
%}
{% endcapture %}
{% include "courses_zero_state", message: message %}
{% endif %}

61
customer_templates/Walmart/_dropdown_courses.html.liquid Normal file
View File

@ -0,0 +1,61 @@
<a
class="np-header-desktop-nav-item"
data-test="open-desktop-menu"
data-toggle-event="mouseover"
data-toggle-class-on-target="np-hidden"
data-toggle-target=".np-courses-tooltip"
data-toggle-outside
>
{{ title }}
</a>
<div class="np-dropdown-tooltip np-courses-tooltip np-hidden" role="tooltip">
<nav class="np-tooltip-navigation">
<a class="np-dropdown-tooltip-link" href="#featured-courses">
Featured Courses
</a>
<a class="np-dropdown-tooltip-link" href="#assigned-courses">
Assigned Courses
</a>
<a class="np-dropdown-tooltip-link" href="/catalog">
Course Library
</a>
{% comment %} {% assign categories_by_name = categories | sort: "name" %}
{% for category in categories_by_name %}
{% assign category_name_split = category.name | split: " " %}
{% assign category_name_joined = category_name_split | join: "-" | downcase %}
{% assign category_name = "" %}
{% assign courses_per_carousel = 0 %}
{% assign catalog_courses = courses %}
{% if courses.any? %}
{% for course in courses %}
{% for course_category in course.categories %}
{% if category.name == course_category.name %}
{% assign courses_per_carousel = courses_per_carousel | plus: 1 %}
{% if courses_per_carousel > 0 %}
{% assign category_name = category.name %}
{% endif %}
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}
{% if category_name != "" %}
<a class="np-dropdown-tooltip-link" href="#{{category_name_joined}}">
{{category_name}}
</a>
{% endif %}
{% endfor %} {% endcomment %}
</nav>
</div>
<script>
$(document).ready(function() {
if (!$('.np-homepage').length) {
console.log("not the homepage")
$(".np-dropdown-tooltip-link").each(function() {
let homeLink = "/app" + $(this).attr("href");
$(this).attr("href", homeLink);
})
}
})
</script>

217
customer_templates/Walmart/_faq.html.liquid Normal file
View File

@ -0,0 +1,217 @@
<div class="row faq-section">
<div class="col-md-6 offset-md-3">
<h2 class="mb-5" style="text-align:center;">Frequently asked questions</h2>
<div>
<p class="d-flex justify-content-between faq-item" data-bs-toggle="collapse" href="#is-free-question" role="button"
aria-expanded="false" aria-controls="collapseExample">
<span>GETTING STARTED</span> <i class="fal fa-plus"></i>
</p>
<div class="collapse" id="is-free-question">
<div class="card card-body">
<strong>How do I sign up with Spark Driver?</strong>
<p>Visit the Join Spark Driver tab on the Spark Driver website to view the service area map, select your preferred area, and complete the enrollment form. Once your information has been submitted for review, you will receive a confirmation email from our third-party administrator, Delivery Drivers, Inc. (DDI), which will provide details on how to complete the enrollment and create your Spark Driver account.</p>
<strong>How long will it take to get approval after submitting my enrollment form? </strong>
<p>Background check results are typically available within 2-7 business days, depending on state and county processes. You can expect to receive updates from DDI via email throughout the process, and you will be notified of any significant delays. Once the background check results are completed, you will receive a confirmation email with details on next steps.</p>
<strong>What is the relationship between DDI and Spark Driver?</strong>
<p>As the third-party administrator for driver management, DDI is responsible for the driver sourcing and onboarding of new drivers, which includes such processes as screenings, background checks, payments, and accounting. Given this involvement, you can expect to receive periodic emails and text messages from DDI once you’ve started delivering on Spark Driver.</p>
<strong>How old do I need to be?</strong>
<p>You must be 18 years of age or older to complete deliveries with Spark Driver.</p>
<strong>Do I need to use a certain type of vehicle?</strong>
<p>You can use any car that is able to transport orders safely and reliably to customers. Motorcycles, motorized bicycles, and motorized scooters do not provide adequate space to complete deliveries with Spark Driver.</p>
<strong>What kind of auto insurance do I need?</strong>
<p>As part of your enrollment with Spark Driver, DDI will specify and collect proof of valid insurance.</p>
</div>
</div>
</div>
<div>
<p class="d-flex justify-content-between faq-item" role="button" data-bs-toggle="collapse" href="#where-courses-question"
aria-expanded="false" aria-controls="collapseExample">
<span>ACCOUNT SET-UP</span> <i class="fal fa-plus"></i>
</p>
<div class="collapse" id="where-courses-question">
<div class="card card-body">
<div>
<strong>Can I create more than one Spark Driver account?</strong>
<p>No, only one Spark Driver account per individual is allowed, and sharing accounts with multiple drivers is prohibited. </p>
<strong>I'm getting an error when attempting to sign-in to the Spark Driver App. What should I do?</strong>
<p>First try logging out of your App and logging back in. If this doesn't work, follow the additional troubleshooting steps below. Verify that your phone has the latest version of its operating system. Double-check that your Spark Driver App has been updated to the latest version. Try turning off the phone completely and restarting. Once restarted, if you still receive an error when logging into the Spark Driver App, email driver support at Spark Driversupport@custhelp.com.</p>
<strong>Why do I see the notification "Retrieving location to match you with nearby offers"?</strong>
<p>This notification is intended to inform you that Spark Driver is accessing your location as a way to help ensure you are matched with the most convenient and appropriate offers based on your specific location. Keep in mind that this feature is <b>only enabled when you have 'Spark Now' turned on</b>, meaning that your location is not being tracked when you’re not delivering for Spark Driver, as as outlined in the Spark Driver App Services Privacy Statement. </p>
</div>
</div>
</div>
</div>
<div>
<p class="d-flex justify-content-between faq-item" role="button" data-bs-toggle="collapse" href="#can-remove-question"
aria-expanded="false" aria-controls="collapseExample">
<span>ACCOUNT MANAGEMENT</span> <i class="fal fa-plus"></i>
</p>
<div class="collapse" id="can-remove-question">
<div class="card card-body">
<div>
<strong>How do I update my driver's license or vehicle information?</strong>
<p>For changes to driver’s license or vehicle information, please contact DDI at 877-947-0877 or Spark Driver@ddiwork.com.</p>
<strong>How can I see what zones are available in my area?</strong>
<p>Visit the “Join Spark Driver” page of the Spark Driver website to access the map of all available zones. From there, you can click into your region to see the specific zones and stores available in your area.</p>
<strong>Will my zone be changed immediately after I submit it in the App?</strong>
<p>Yes. After affirming the confirmation prompt and receiving the notification of completion, your zone will be updated and you will begin receiving offers for the surrounding stores as available. </p>
</div>
</div>
</div>
</div>
<div>
<p class="d-flex justify-content-between faq-item" role="button" data-bs-toggle="collapse" href="#video-question"
aria-expanded="false" aria-controls="collapseExample">
<span>OFFERS</span> <i
class="fal fa-plus"></i>
</p>
<div class="collapse" id="video-question">
<div class="card card-body">
<div>
<strong>How will I receive offers for deliveries?</strong>
<p>Once you turn on "Spark Now" in the Spark Driver App, you will start receiving offers as they become available in your specified delivery zone. Each offer will provide details on the type of order(s) included, the pick-up and delivery timeframe, and the estimated minimum payment amount. Remember, the decision of whether to accept an order is entirely up to you!</p>
<strong>What is 'Spark Now'?</strong>
<p>The ‘Spark Now’ feature will give you access to real-time offers, indicating that you’re ready to deliver and helping ensure you receive offers at the most effective and opportune times based on your schedule.</p>
<strong>How do I turn on 'Spark Now'?</strong>
<p>Click the ‘Spark Now’ icon in the top right corner of your Spark Driver App to set your timeframe and turn on.</p>
</div>
</div>
</div>
</div>
<div>
<p class="d-flex justify-content-between faq-item" role="button" data-bs-toggle="collapse" href="#how-often-question"
aria-expanded="false" aria-controls="collapseExample">
<span>ORDERS</span> <i class="fal fa-plus"></i>
</p>
<div class="collapse" id="how-often-question">
<div class="card card-body">
<strong>How big are the orders I'll be delivering?</strong>
<p>The size of each order will vary depending on the specific items it includes. Order size is determined by weight and classified on a scale of “Small” to “Extra-Large”, as shown in the table below:</p>
<strong>Where do I go to pick-up an order at the store?</strong>
<p>When picking-up a regular Curbside order, follow the directional signs throughout the parking lot, park your vehicle in any reserved space, and a Walmart associate will load the order into your vehicle. Dotcom and Express deliveries will be dispensed from inside the store, and the Spark Driver App will provide you with information on where to pick-up the order. </p>
<strong>Do I need to put orders in a specific place in my vehicle?</strong>
<p>When picking up a Curbside delivery order, including batched orders, a Walmart store associate will bring the order contents directly to your vehicle and will place them inside. Fragile items may be placed separately in your front seat to ensure nothing gets broken or damaged in transit. </p>
<p>When picking up orders that are dispensed from inside the store, place the items in a clean space to avoid contamination, and consider separating batched orders in separate locations within your vehicle. For example, place one order in the trunk and the other in the back seat, as shown in the image below.</p>
</div>
</div>
</div>
<div>
<p class="d-flex justify-content-between faq-item" role="button" data-bs-toggle="collapse" href="#more-about-question"
aria-expanded="false" aria-controls="collapseExample">
<span>DELIVERIES</span> <i class="fal fa-plus"></i>
</p>
<div class="collapse" id="more-about-question">
<div class="card card-body">
<div>
<strong>Is there any equipment I need to bring with me while delivering?</strong>
<p>No equipment is necessary to complete a delivery with Spark Driver, however, some drivers find it helpful to keep an insulated storage bag in their trunk for orders containing cold-chain items, or a cart for heavy objects. </p>
<strong>Can I bring my child or another passenger along on deliveries?</strong>
<p>Children who should not be left alone in vehicles are prohibited from riding along on deliveries, as are rideshare passengers. Keep in mind that passengers are not authorized drivers on the Spark Driver platform and therefore cannot participate in the performance of the work.</p>
<strong>Is there a certain dress code I need to follow?</strong>
<p>No, you may choose your preferred attire while delivering with Spark Driver. (Some drivers prefer to purchase apparel and accessories from the Spark Shop to help identify themselves to customers!) Remember that customers appreciate a clean appearance and clothing that does not contain offensive slogans or imagery.
</p>
</div>
</div>
</div>
</div>
<div>
<p class="d-flex justify-content-between faq-item" role="button" data-bs-toggle="collapse" href="#feedback-question"
aria-expanded="false" aria-controls="collapseExample">
<span>EARNINGS</span> <i class="fal fa-plus"></i>
</p>
<div class="collapse" id="feedback-question">
<div class="card card-body">
<strong>How much will I earn delivering with Spark Driver?</strong>
<p>As a driver, you will be paid for each delivery you complete. Each offer will list the minimum amount you will receive for completing the delivery. Additionally, you can also expect to receive opportunities for incentive earnings as part of Spark Driver Bonus Programs!</p>
<strong>Will I be able to see the tip amount for all types of orders?</strong>
<p>Yes, pre-tip visibility will be available for all eligible order types. Keep in mind that dotcom orders are currently not eligible to receive tips.</p>
<strong>Am I able to accept tips from customers?</strong>
<p>Yes! Walmart customers can add a pre-delivery tip to their Online Grocery* order during check-out, which you will see reflected in the “Earnings” tab of your Spark Driver App 48-hours after delivery. Keep in mind that customers can make edits to their pre-delivery tip up to 48-hours after the delivery is completed, so you will not see the tip reflected in your Earnings tab right away. (This makes providing top-notch service even more important!)</p>
</div>
</div>
</div>
</div>
</div>
<style>
.faq-section {
background: rgba(0, 113, 220, 0.15);
padding: 60px 0;
}
.faq-item {
background: #fff;
color:#0c3c92;
padding: 16px;
border-radius: 4px;
font-size:20px;
line-height:30px;
}
.faq-item .fa-plus {
font-size: 30px;
margin-right: 10px;
transition: all 0.2s;
}
.faq-item[aria-expanded='true'] .fa-plus {
transform:rotate(45deg);
}
.faq-section .card-body {
margin-bottom:16px;
}
</style>

117
customer_templates/Walmart/_footer.html.liquid Normal file
View File

@ -0,0 +1,117 @@
<footer class="np-footer">
<div class="np-footer-top">
{% if website_footer.show_navigation_links? %}
<div class="np-footer-navigation">
<ul class="np-footer-navigation-list">
{% for website_navigation in navigations.footer_navigations %}
{% if website_navigation.name != "Home" %}
{% if website_navigation.name != "Events" %}
{% if website_navigation.name != "Dashboard" %}
{% if website_navigation.name != "Learning Paths" %}
<li class="np-footer-navigation-item">
<a
class="np-footer-navigation-link np-button-color"
href="{{ website_navigation.path }}"
>
{{ website_navigation.name }}
</a>
</li>
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
<li class="np-footer-navigation-item">
<a
class="np-footer-navigation-link np-button-color"
href="/training_events"
>
Events
</a>
</li>
</ul>
</div>
{% endif %}
{% if current_school.logo_url %}
<h2 class="np-footer-logo">
<a href="{% route home %}">
<img
alt="{{ current_school.name }}"
class="np-footer-logo-image"
src="{{ current_school.logo_url }}"
/>
</a>
</h2>
{% else %}
<div class="np-school-name np-header-font-color">
{{ current_school.name }}
</div>
{% endif %}
</div>
<div class="np-footer-bottom">
<nav class="np-footer-social-links">
{% if website_footer.show_social_media_links? %}
<ul class="np-footer-social-links-list">
{% for social_media_link in website_footer.social_media_links %}
<li class="np-footer-social-links-item">
<a
class="np-footer-social-links-link np-button-color"
href="{{ social_media_link.link }}"
target="_blank" title="{{ social_media_link.name }}"
>
<i class="np-footer-social-links-icon
np-button-color
fab fa-{{ social_media_link.name }}"
></i>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</nav>
{% if website_footer.show_customer_service_email? and
website_footer.school_customer_service_email
%}
<div class="np-footer-support">
<div class="np-footer-support-item np-footer-support-help">
{% t .need_help %}
</div>
<div class="np-footer-support-item np-footer-support-email">
{% t .email %}
</div>
<a
class="np-footer-support-item np-footer-support-link np-button-color"
href="mailto:{{ website_footer.school_customer_service_email }}"
>
{{ website_footer.school_customer_service_email }}
</a>
</div>
{% endif %}
</div>
</footer>
<script>
window.onload = function() {
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function() {
if (this.getAttribute('href') != "#") {
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
}
});
});
if (window.location.hash) {
setTimeout(() => {
let categorySection = document.querySelector(window.location.hash)
categorySection.scrollIntoView({
behavior: 'smooth'
});
}, 500)
};
}
</script>

11
customer_templates/Walmart/_head.html.liquid Normal file
View File

@ -0,0 +1,11 @@
{% styles default %}
{% styles colors %}
{% styles custom %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>

189
customer_templates/Walmart/_header.html.liquid Normal file
View File

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

62
customer_templates/Walmart/_resources.html.liquid Normal file
View File

@ -0,0 +1,62 @@
<div class="section-resources np-max-width">
<hr />
<div class="np-section-title">
Resources
</div>
<div class="resources-list-container">
<div class="resource">
<div class="resource-title">White Papers</div>
<a class="np-button download-btn" href="https://drive.google.com/file/d/1O8-IWXb2Rni5iM1QDVDfZjPQo9g34kzM/view?usp=sharing" target="_blank">
Download PDF
<i class="far fa-file-download"></i>
</a>
</div>
<div class="resource">
<div class="resource-title">Tutorial Sheets</div>
<a class="np-button download-btn" href="https://drive.google.com/file/d/1up_2ObeUPmrLUN7WRV9-6eZpj5QQzSSC/view?usp=sharing" target="_blank">
Download PDF
<i class="far fa-file-download"></i>
</a>
</div>
</div>
</div>
<style>
.section-resources {
padding:32px 0;
}
.np-section-title {
font-size:40px;
font-weight:500;
text-align:center;
margin-top:48px;
margin-bottom:48px;
}
.resources-list-container {
display:flex;
}
.resource {
width:100%;
padding: 12px 18px;
margin-bottom:32px;
display:flex;
justify-content:space-between;
align-items:center;
font-size:18px;
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 4px 0 rgb(89 105 123 / 50%);
margin: 16px;
width: 50%;
}
.fa-file-download {
margin-left:12px;
font-size:16px;
}
</style>

23
customer_templates/Walmart/catalog.html.liquid Normal file
View File

@ -0,0 +1,23 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
{% comment %} {% include "sub_navigation" %} {% endcomment %}
<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">{{ catalog.headline }}</div>
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
</div>
{% capture label %}{% t shared.filters.by_category %}{% endcapture %}
{% if courses.in_catalog.any? %}
{%
include "filter_dropdown",
filters: courses.filters,
key: "category_uuid",
label: label
%}
{% endif %}
</div>
{% include "courses_catalog" %}
</main>
{% include "footer" %}

28
customer_templates/Walmart/dashboard.html.liquid Normal file
View File

@ -0,0 +1,28 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
{% comment %} {% include "sub_navigation" %} {% endcomment %}
<main class="np-main np-dashboard np-subpage-container np-max-width">
<div class="row np-flex-center">
<div class="col-xs-12 col-sm-8">
{% if features.learning_paths? %}
<div class="np-dashboard-resources-title">
{% t shared.learning_paths %}
</div>
{% include "learning_paths_index", items: learning_paths.enrolled %}
{% endif %}
<div class="np-dashboard-resources-title">
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
</div>
{% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
</div>
{% if features.training_events? %}
<div class="np-grid-spacing col-xs-12 col-sm-4">
<div class="np-dashboard-resources-title">
{% t .upcoming_events %}
</div>
{% include "training_events_dashboard" %}
</div>
{% endif %}
</div>
</main>
{% include "footer" %}

138
customer_templates/Walmart/homepage.html.liquid Normal file
View File

@ -0,0 +1,138 @@
{% include "header" %}
<main class="np-main np-homepage">
<div class="np-homepage-hero">
<img class="np-homepage-hero-image"
src="{{ homepage.artwork_url }}"
alt="{{ homepage.headline }}"
/>
<div class="np-homepage-hero-content">
<div class="np-homepage-headline np-header-font-color" style="color:#fff">
{{ homepage.headline }}
</div>
<div class="np-homepage-subheadline np-header-font-color" style="color:#fff">
{{ homepage.subheadline }}
</div>
{% comment %} <a class="np-homepage-hero-cta np-button" href="{% route catalog %}">
Explore Courses
</a> {% endcomment %}
</div>
</div>
{% comment %} {% include "sub_navigation" %} {% endcomment %}
<div class="np-course-library np-max-width">
{% comment %} <h2 class="library-title">Course Library</h2> {% endcomment %}
{% if current_school.filterable_categories.any? %}
{% assign categories_by_name = current_school.filterable_categories %}
{% assign carousel_count = 1 %}
{% for category in categories_by_name %}
{% assign carousel_count = carousel_count | plus: 1 %}
{% assign courses_per_carousel = 0 %}
{% assign category_name_split = category.name | split: " " %}
{% assign category_name_joined = category_name_split | join: "-" | downcase %}
<div class="category-section" data-carousel="{{carousel_count}}" style="display:none;" id="{{ category_name_joined }}">
<div class="carousel-header-wrapper">
<h3 class="carousel-header">{{category.name}}</h3>
<a href="#" class="show-more" data-toggle-carousel="{{carousel_count}}" data-carousel-state="initialized">Show More</a>
</div>
{% assign catalog_courses = courses.in_catalog %}
{% if catalog_courses.any? %}
{% for course in catalog_courses %}
{% for course_category in course.categories %}
{% if category.name != "Videos" %}
{% if category.name == course_category.name %}
{% assign courses_per_carousel = courses_per_carousel | plus: 1 %}
{% endif %}
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}
{% include "courses_carousel", category: category.name, num_of_slides: courses_per_carousel %}
</div>
{% endfor %}
{% endif %}
</div>
{% include "faq" %}
</main>
{% include "footer" %}
<script>
$(document).ready(function() {
$(".category-section").each(function() {
let carousel = $(this).find(".category-carousel")
let carouselSize = $(carousel).attr("data-slider-size")
carousel.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
if(!slick.$dots){ return; }
(slick.$dots[0].children.length > 1) ? null : hideDotsAndShowMore()
function hideDotsAndShowMore() {
slick.$dots[0].classList.add("np-hidden")
carousel.closest(".category-section").find(".show-more").addClass("np-hidden")
}
});
if (carouselSize > 0) {
initSlickCarousel(carousel)
$(this).css("display", "block")
setTimeout(() => { $(this).css("opacity", "1") }, 300)
}
})
})
function initSlickCarousel(carousel) {
$(carousel).slick({
slidesToShow: 3,
slidesToScroll: 3,
cssEase: 'linear',
prevArrow: '<i class="fal fa-chevron-left"></i>',
nextArrow: '<i class="fal fa-chevron-right"></i>',
infinite: false,
dots: true,
arrows: true,
responsive: [
{
breakpoint: 1170,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
arrows: true,
dots: true,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
arrows: false,
}
}
]
});
}
$('.show-more').click(function(e) {
e.preventDefault();
let currentCarousel = $(this).closest(".category-section").find(".category-carousel");
if ($(this).attr("data-carousel-state") == "initialized") {
$(this).text("Show Less")
currentCarousel.slick('unslick');
$(this).attr("data-carousel-state", "destroyed")
} else if ($(this).attr("data-carousel-state") == "destroyed" ) {
$(this).text("Show More")
initSlickCarousel(currentCarousel);
$(this).attr("data-carousel-state", "initialized")
}
});
</script>

14
customer_templates/Walmart/learning_paths.html.liquid Normal file
View File

@ -0,0 +1,14 @@
{% include "header" %}
{% comment %} {% include "sub_navigation" %} {% endcomment %}
<main class="np-main np-learning-paths np-subpage-container np-max-width">
<div class="np-learning-paths-main">
<div class="np-resource-title">
{% t shared.learning_paths %}
</div>
<div class="np-resource-subtitle">
{% t .subtitle %}
</div>
{% include "learning_paths_index", items: learning_paths.available %}
</div>
</main>
{% include "footer" %}

30
customer_templates/Walmart/media.html.liquid Normal file
View File

@ -0,0 +1,30 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
<main class="np-main np-catalog np-subpage-container np-max-width" id="videos">
<div class="np-catalog-header-wrapper">
<div class="np-catalog-header">
<div class="np-resource-title" style="margin-bottom:32px;">Spark Driver Media</div>
</div>
</div>
{% 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 == "Videos" %}
<div class="col-xs-12 col-md-6 col-lg-3 np-stretch-content">
{% include "cards_video" with course %}
</div>
{% endif %}
{% endfor %}
{% endfor %}
</div>
{% endif %}
</main>
{% include "footer" %}
<style>
#videos .np-card {
padding-right:1rem;
padding-left:1rem;
}
</style>

187
customer_templates/Walmart/news.html.liquid Normal file
View File

@ -0,0 +1,187 @@
{% include "header" %}
<div class="hero">
<img class="np-homepage-hero-image" src="https://s3.amazonaws.com/static.northpass.com/walmart/news-header.png" alt="">
<div class="hero-content-container">
<div class="hero-content">
<div class="np-resource-title">Spark Driver News</div>
<div class="np-resource-subtitle">View the latest news and announcements from Spark Driver.</div>
</div>
</div>
</div>
<main class="np-main np-catalog np-subpage-container np-max-width" id="news">
<div class="np-catalog-header-wrapper">
<div class="np-catalog-header">
<div class="np-resource-title" style="margin-bottom:16px;">Featured Article</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 np-stretch-content">
<a class="featured-article" href="#">
<div class="img-container">
<img src="https://s3.amazonaws.com/static.northpass.com/walmart/delivery-card.png" />
</div>
<div class="featured-article-content">
<h3>Vivamus suscipit tortor eget felis porttitor volutpa proin eget tortor risus.</h3>
<div class="intro">
Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada. […]
</div>
<div style="margin-top:16px;"> <time><i class="fa fa-clock-o" aria-hidden="true"></i> 5 Minute Read</time></div>
</div>
</a>
</div>
</div>
<div class="recent-news">
<div class="col-xs-12 np-stretch-content">
<h2>Recent News</h2>
<ul>
<li><a href="#"><span>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt.</span><b>Nov 23</b></a></li>
<li><a href="#/"><span>Vestibulum ante ipsum primis</span><b>Nov 16</b></a></li>
<li><a href="#"><span>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed.</span><b>Nov 8</b></a></li>
<li><a href="#"><span>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus.</span><b>Nov 3</b></a></li>
<li><a href="#"><span>Cras ultricies ligula sed magna dictum porta id enim.</span><b>Nov 29</b></a></li>
<li><a href="#"><span>Donec rutrum congue leo eget malesuada.</span></a></li>
<li><a href="#"><span>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat.</span><b>Nov 23</b></a></li>
<li><a href="#"><span>Vestibulum ante ipsum primis.</span><b>Nov 23</b></a></li>
</ul>
<a href="/news/" class="seeall">See All</a>
</div>
</div>
</main>
{% include "footer" %}
<style>
.hero {
position:relative;
}
.hero-content-container {
position: absolute;
top: 17%;
width: 100%;
}
.hero-content {
max-width: 1440px;
margin: auto;
padding: 0 5%;
}
.hero-content .np-resource-title,
.hero-content .np-resource-subtitle {
color:#fff;
}
.hero-content .np-resource-title{
font-size:3rem;
}
.hero-content .np-resource-subtitle {
font-size: 1.5rem;
margin-top: 22px;
}
.featured-article {
display:flex;
background: #fff;
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
border-radius: 4px;
margin-bottom: 44px;
text-decoration:none;
}
.img-container {
width:40%;
position:relative;
overflow:hidden;
}
.img-container img {
width: 100%;
height: 100%;
position: absolute;
}
.featured-article-content {
width: 60%;
padding: 32px 40px;
}
.featured-article-content {
text-decoration:none!important;
color:#35404e!important;
}
.recent-news ul {
list-style-type: none;
margin: 0 0 28px;
padding: 0;
}
.recent-news ul li {
margin: 0 0 10px;
padding: 0 0 12px;
border-bottom: 1px solid #dadada;
}
.recent-news h2 {
margin-bottom: 37px;
}
.recent-news ul li a {
text-decoration: none;
color: #4d4d4d;
display: flex;
justify-content: space-between;
}
.recent-news ul li a span {
font-weight: 700;
font-size: 18px;
line-height: 34px;
}
.recent-news ul li a b {
padding-left: 20px;
font-weight: 400;
font-size: 18px;
line-height: 34px;
white-space: nowrap;
}
.recent-news a.seeall {
text-decoration: none;
color: #2a71dc;
font-size: 14px;
line-height: 18px;
font-weight: 700;
}
@media (max-width:767px) {
.hero-content .np-resource-title{
font-size:2rem;
}
.hero-content .np-resource-subtitle {
font-size: 1.25rem;
}
.featured-article {
display:block;
}
.img-container {
height: 250px;
width:100%;
}
.featured-article-content {
width: 100%;
}
}
</style>

241
customer_templates/Walmart/styles.css.liquid Normal file
View File

@ -0,0 +1,241 @@
/*
Put your custom overlay styles in here
You can use your northpass color palette in this file
{{ color_palette.button_font_color }}
{{ color_palette.button_color }}
{{ color_palette.button_hover_color }}
{{ color_palette.header_font_color }}
{{ color_palette.header_font_hover_color }}
{{ color_palette.header_color }}
*/
/* GLOBAL STYLES */
html { scroll-behavior: smooth; }
.np-powered-by { background:#fff;}
.np-flex-1 { flex:1 }
.d-flex { display:flex; }
@media (min-width:768px) {
.d-md-flex { display:flex; }
}
.np-dashboard { background:#fff}
/* HOMEPAGE STYLES */
.np-homepage-title-content {
margin: 0 auto 32px;
text-align: center;
}
.np-homepage-title-content {
margin: 0 auto 32px;
text-align: center;
}
.np-homepage-headline {
font-size: 3rem;
}
.np-homepage-subheadline {
font-size: 1.5rem;
line-height: 2rem;
}
@media (min-width:768px) {
.np-homepage-title-content { padding: 0 4%; }
.np-homepage-hero-image {
max-height: 600px
}
}
@media (max-width:1500px) {
.np-max-width { margin:auto 18px;}
}
.library-title {
padding-top: 48px;
margin: 0;
font-size: 32px;
font-weight: 500;
}
.np-sub-navigation { margin-bottom: 0; }
.np-course-library { padding-bottom: 40px;
padding-top: 60px; }
/* NAVIGATION LINKS AND DROPDOWNS*/
.np-header-desktop-nav-list {
margin-bottom:0;
}
.np-header-desktop-nav-item {
position: relative;
cursor:pointer;
color:#fff;
text-decoration:none;
font-size: 18px;
font-weight: 500;
}
.np-header-desktop-nav-item:hover {
color:#f9c221;
}
.np-header-desktop-nav-link {
font-size: 18px;
font-weight: 500;
}
.np-dropdown-tooltip {
background: #fff;
position: absolute;
left: 31px;
top: 3rem;
z-index: 50;
min-width: 200px;
cursor:pointer;
box-shadow: 0 0 8px rgb(89 105 123 / 20%);
max-width: 250px;
white-space: normal;
border-radius: 4px;
overflow: auto;
}
.np-dropdown-tooltip-link {
color:rgba(33, 43, 53, 0.75);
text-decoration:none;
display:block;
padding: 16px 20px;
font-size: 0.95rem;
}
.np-dropdown-tooltip-link:hover {
color:#2a71dc;
}
.np-dropdown-tooltip-link:nth-of-type(odd) {
background-color: rgb(249, 250, 252);
}
.np-dropdown-tooltip {
box-shadow: 0 0 8px rgb(89 105 123 / 20%);
max-width: 250px;
white-space: normal;
}
/* SLICK CAROUSEL */
.category-section {
transition:opacity 0.5s;
opacity:0;
margin-bottom:32px;
}
.carousel-header-wrapper {
display:flex;
padding-bottom:16px;
border-bottom:1px solid #212b35;
margin-bottom:32px;
align-items: end;
justify-content: space-between;
}
.carousel-header {
font-size:32px;
font-weight:500;
margin-bottom:0;
}
.show-more {
text-decoration: none;
font-size:18px;
color:#2a71dc;
}
.slick-track {
margin-left:0!important;
display: flex !important;
}
.slick-slide {
height: auto!important;
padding-bottom: 5px;
}
.slick-dots {
display:flex;
justify-content:center;
}
.slick-dots li {
cursor:pointer;
padding:0 12px;
}
.slick-dots li::marker {
cursor:pointer;
padding:0 12px;
font-size:18px;
color:#bfbfbf;
transition: 0.5s;
}
.slick-dots li.slick-active::marker { color:#212b35; }
.slick-dots li button { display:none; }
.slick-arrow {
position: absolute;
top:calc(50% - 47px);
box-shadow: 0 2px 4px 0 rgb(89 105 123 / 50%);
border-radius:50%;
background:#fff;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
z-index:2;
cursor:pointer;
transition:opacity 0.2s;
}
.slick-arrow.slick-disabled { opacity:0;}
.slick-arrow.fa-chevron-left { left:-12px; }
.slick-arrow.fa-chevron-right { right:-12px; }
/* END SLICK CAROUSEL */
/* COURSE CARDS */
.category-carousel .np-card {
margin-bottom: 0px;
height:100%;
padding: 0 .75rem;
}
.np-card-content-desc { margin-top:1.3rem;}
.info-line {
display:flex;
justify-content: space-between;
margin-top:22px;
padding-bottom:8px;
border-bottom:1px solid #212b35;
}
.category-carousel:not(.slick-initialized) {
display: flex;
flex-wrap: wrap;
}
.category-carousel:not(.slick-initialized) > div {
width: 33%;
margin-bottom: 32px;
}
/* Footer (Sticky) */
main { min-height: calc(100vh - 408px); }

19
customer_templates/Walmart/training_events.html.liquid Normal file
View File

@ -0,0 +1,19 @@
{% include "header" %}
{% comment %} {% include "sub_navigation" %} {% endcomment %}
<main class="np-main np-training-events np-subpage-container np-max-width">
<div class="row">
<div class="col-xs-12 col-sm-10">
<div class="np-resource-title">
{% t .title %}
</div>
<div class="np-resource-subtitle">
{% t .subtitle %}
</div>
</div>
<div class="col-xs-12 col-sm-2">
{% include "training_events_filter" %}
</div>
</div>
{% include "training_events_index" %}
</main>
{% include "footer" %}