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

Zenjob Notes, and new Templates

Browse Source
This commit is contained in:
Norm Rasmussen
2022-11-11 21:54:43 -05:00
parent 22704920d8
commit c599b8b792
1222 changed files with 2246 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
Custom_Templates/customer_templates/Postman/_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>

18
Custom_Templates/customer_templates/Postman/_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
Custom_Templates/customer_templates/Postman/_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>

52
Custom_Templates/customer_templates/Postman/_dropdown_courses.html.liquid Normal file
View File

@ -0,0 +1,52 @@
<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">
{% 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 %}
</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>

102
Custom_Templates/customer_templates/Postman/_footer.html.liquid Normal file
View File

@ -0,0 +1,102 @@
<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 %}
<li class="np-footer-navigation-item">
<a
class="np-footer-navigation-link np-button-color"
href="{{ website_navigation.path }}"
{% if website_navigation.external? %} target="_blank" {% endif %}
>
{{ website_navigation.name }}
</a>
</li>
{% endfor %}
</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>

8
Custom_Templates/customer_templates/Postman/_head.html.liquid Normal file
View File

@ -0,0 +1,8 @@
{% styles default %}
{% styles colors %}
{% styles custom %}
<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/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>

191
Custom_Templates/customer_templates/Postman/_header.html.liquid Normal file
View File

@ -0,0 +1,191 @@
<header class="np-header np-header-color">
<div class="np-header-content">
<div class="np-hidden-desktop np-header-mobile-menu-nav">
{% if current_person.signed_in? %}
<button
data-toggle-class="np-hidden"
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
data-toggle-target=".np-header-mobile-avatar-menu,
.np-header-mobile-menu-content, .np-main, .np-footer"
></button>
<button
data-test="open-mobile-menu"
data-toggle-class="np-hidden"
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
>
<img
alt="{{ current_person.name }}"
class="np-header-avatar-image"
src="{{ current_person.avatar_url }}"
/>
</button>
{% endif %}
</div>
{% if current_school.logo_url %}
<h1 class="np-header-logo">
<a href="{% route home %}">
<img
alt="{{ current_school.name }}"
class="np-header-logo-image"
src="{{ current_school.logo_url }}"
/>
</a>
</h1>
{% else %}
<a href="{% route home %}" class="np-school-name np-header-font-color">
{{ current_school.name }}
</a>
{% endif %}
<div class="np-hidden-mobile np-header-desktop-nav">
<ul class="np-header-desktop-nav-list">
{% 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"
target="_blank"
>
{{ website_navigation.name }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% if current_person.signed_in? %}
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
<form action="{% route search %}" method="get" data-test="desktop-search">
<input
aria-label="{% t .search %}"
class="np-header-search-input np-header-font-background-color"
type="text"
name="q"
placeholder="{% t .search %}"
/>
<i class="np-header-search-icon far fa-search"></i>
</form>
</div>
<div class="np-hidden-mobile np-header-avatar">
<button
class="np-header-avatar-button"
data-test="open-desktop-menu"
data-toggle-class-on-target="np-hidden"
data-toggle-target=".np-header-avatar-tooltip"
data-toggle-outside
>
<img
alt="{{ current_person.name }}"
class="np-header-avatar-image"
src="{{ current_person.avatar_url }}"
>
</button>
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
<span class="np-header-avatar-tooltip-arrow-up"></span>
<div class="np-header-avatar-tooltip-learner">
<div class="np-header-avatar-tooltip-learner-name">
{{ current_person.name }}
</div>
<div class="np-header-avatar-tooltip-learner-email">
{{ current_person.email }}
</div>
</div>
<nav class="np-header-avatar-tooltip-navigation">
{% unless current_school.sso_active? %}
<a
class="np-header-avatar-tooltip-navigation-link"
href="{% route account %}"
>
{% 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
Custom_Templates/customer_templates/Postman/_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">How to Book an Appointment</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">How to Batch</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>

142
Custom_Templates/customer_templates/Postman/homepage.html.liquid Normal file
View File

@ -0,0 +1,142 @@
{% 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>
{% include "sub_navigation" %}
<div class="np-course-library np-max-width">
<h2 class="library-title">Course Library</h2>
{% if current_school.filterable_categories.any? %}
{% assign categories_by_name = current_school.filterable_categories | sort: "name" %}
{% 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 == course_category.name %}
{% assign courses_per_carousel = courses_per_carousel | plus: 1 %}
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}
{% include "courses_carousel", category: category.name, num_of_slides: courses_per_carousel %}
</div>
{% endfor %}
{% endif %}
</div>
{% include "resources" %}
</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>
<style>
</style>

223
Custom_Templates/customer_templates/Postman/styles.css.liquid Normal file
View File

@ -0,0 +1,223 @@
/*
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; }
}
/* HOMEPAGE STYLES */
/* .np-homepage {
background:#fff;
} */
.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:32px; }
/* NAVIGATION LINKS AND DROPDOWNS*/
.np-header-desktop-nav-item {
position: relative;
cursor:pointer;
color:#fff;
}
.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;
}
.np-dropdown-tooltip-link {
color:#212b35;
text-decoration:none;
display:block;
padding: 16px 20px;
font-size: 0.95rem;
}
.np-dropdown-tooltip-link:hover {
color:#329678;
}
.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:24px;
border-bottom:1px solid #212b35;
margin-bottom:32px;
align-items: end;
justify-content: space-between;
}
.carousel-header {
font-size:24px;
font-weight:500;
margin-bottom:0;
}
.show-more {
text-decoration: none;
font-size:18px;
color:#329678;
}
.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); }