Templates changes for a few clients.

This commit is contained in:
Norm Rasmussen
2023-05-01 17:07:21 -04:00
parent 3e6a6e5266
commit 26c55d54f6
27 changed files with 1128 additions and 9 deletions

Binary file not shown.

View File

@ -11,16 +11,16 @@
}
</script>
{% comment %} <script> window.intercomSettings = { app_id: "hal1rveh" }; </script>
<script>
(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/hal1rveh';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
</script>
{% comment %} <script> window.intercomSettings = { app_id: "hal1rveh" }; </script>
<script>
(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/hal1rveh';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
</script>
<style> .intercom-lightweight-app-launcher { float: right; bottom: 45px !important; margin-right: 40px; } </style> {% endcomment %}
<style>
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;700;800&display=swap');
body {
font-family: "Barlow", sans-serif !important;
}
</style>
</style>

Binary file not shown.

View File

@ -0,0 +1,116 @@
<div class="catalog-category-carousels np-max-width">
{% if categories.in_catalog.any? %}
{% assign categories_by_name = categories.in_catalog | 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 }}" data-filter='{{category.id}}'>
<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>
<style>
.catalog-category-carousels {
padding: 0 24px;
}
.category-section {
padding: 40px 0 16px;
border-bottom:1px solid #ddd;
}
.category-section:last-child {
border-bottom:none;
}
.carousel-header-wrapper {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 16px;
}
.carousel-header-wrapper .carousel-header {
margin:0;
}
.carousel-header-wrapper .show-more {
margin-left:12px;
border: 1px solid #0caa41;
padding: 3px 16px;
border-radius: 3px;
font-size: 15px;
font-weight: 700;
line-height: 28px;
color: #0caa41;
text-decoration: none;
white-space:nowrap;
transition: color .2s ease-out 0s,background-color .2s ease-out 0s;
}
.carousel-header-wrapper .show-more:hover {
border: 1px solid #0caa41;
color: #fff;
background-color: #0caa41;
}
.category-carousel .np-card {
height: 100%;
padding-bottom: 32px;
}
.category-carousel:not(.slick-initialized) {
display:flex;
flex-wrap:wrap;
}
@media (min-width:768px) {
.catalog-category-carousels {
padding: 0 64px;
}
.carousel-header-wrapper {
justify-content: flex-start;
margin-bottom:24px;
}
.carousel-header-wrapper .carousel-header {
font-size:24px;
}
.category-carousel:not(.slick-initialized) > div {
width:50%;
}
}
@media (min-width:1200px) {
.category-carousel:not(.slick-initialized) > div {
width:33.33%;
}
}
</style>

View File

@ -0,0 +1,15 @@
{% 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 class="carousel-card-wrapper">{% include "cards_course" with course %}</div>
{% endif %}
{% endfor %}
{% endfor %}
</div>

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 %}
{% assign course_category_ids = "" %}
{% for cat in course.categories %}
{% assign course_category_ids = course_category_ids | append: cat.id %}
{% endfor %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content courses-catalog-column" data-filter='{{course_category_ids}}'>
{% include "cards_course" with course %}
</div>
{% endfor %}
</div>
{% else %}
{% capture message %}
{% t shared.zero_state.courses.catalog,
key: current_school.course_vocabulary
%}
{% endcapture %}
{% include "courses_zero_state", message: message %}
{% endif %}

View File

@ -0,0 +1,12 @@
{% styles default %}
{% styles colors %}
{% styles custom %}
<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=Lato:wght@400;700;900&display=swap" rel="stylesheet">
<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" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>

View File

@ -0,0 +1,213 @@
<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">
{% 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 %}
{% 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 }}">
{{ link.label }}
</a>
</div>
{% 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"
aria-label="{% t shared.sign_in %}"
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" %}
<style>
.np-header {
box-shadow: 0 1px 1px 1px hsl(0deg 0% 50% / 30%);
z-index: 1;
position: relative;
}
.np-sub-navigation-content-item-link {
height:auto;
font-size:16px;
}
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-link {
color: #0caa41;
}
@media (min-width: 768px) {
.np-header-avatar-image, .np-header-logo-image {
height: 70px;
}
.np-sub-navigation-content-item-link {
font-size:20px;
}
}
</style>

View File

@ -0,0 +1,17 @@
<header class="np-box-header np-header-color">
<a class="np-box-header-link" href="{% route home %}">
{% if current_school.logo_url %}
<img
alt="{{ current_school.name }}"
src="{{ current_school.logo_url }}"
class="np-box-header-logo"
/>
{% else %}
<span class="np-school-name np-header-font-color">
{{ current_school.name }}
</span>
{% endif %}
</a>
</header>

View File

@ -0,0 +1,41 @@
<div class="page-header">
<div class="page-header-content">
<div class="np-resource-title">{{ page_headline }}</div>
<div class="np-resource-subtitle">{{ page_subheadline }}</div>
</div>
</div>
<style>
.page-header {
background:linear-gradient(120deg, rgba(0,104,103,0.75) 0%, rgba(0,141,86,0.75) 50%, rgba(10,163,74,0.75) 100%);
text-align:center;
padding:64px 24px;
}
.page-header-content {
max-width:800px;
margin:auto;
}
.page-header-content .np-resource-title,
.page-header-content .np-resource-subtitle {
color:#fff;
text-align:center;
}
.page-header-content .np-resource-subtitle {
margin-bottom:0;
}
@media (min-width:768px) {
.page-header {
padding:76px 24px;
}
.page-header-content .np-resource-title {
font-size:36px;
margin-bottom:24px;
}
}
</style>

View File

@ -0,0 +1,59 @@
<div class="popular-topics np-max-width">
<h2>Browse Courses by Popular Topics</h2>
<div class="topics-btns-wrapper">
{% for category in categories.in_catalog %}
<a class="topics-btn" data-filter='{{category.id}}'>{{category.name}}</a>
{% endfor %}
</div>
</div>
<style>
.popular-topics {
padding: 32px 24px;
}
.popular-topics h2 {
font-size: 24px;
font-weight: 900;
line-height: 36px;
margin-top: 0;
margin-bottom: 24px;
}
.popular-topics .topics-btn {
background-color: #dee0e3;
border: 0;
border-radius: 16px;
color: #20262e;
font-size: 15px;
font-weight: 400;
line-height: 24px;
margin: 0 8px 8px 0;
padding: 4px 16px;
text-decoration:none;
display: inline-block;
cursor:pointer;
transition: background-color .1s ease-in-out;
}
.popular-topics .topics-btn:hover {
background-color: #c4c7cc;
border: 0;
}
.popular-topics .topics-btn.active {
background-color: #126666;
border-color: #126666;
color:#fff;
font-weight:700;
}
@media (min-width:768px) {
.popular-topics {
padding: 64px 64px 32px;
}
}
</style>

View File

@ -0,0 +1,47 @@
<div class="search-bar">
<form
class="np-header-search"
data-test="mobile-search"
method="get"
action="{% route search %}"
>
<input
aria-label="Search"
class="np-header-search-input"
type="text"
name="q"
placeholder="Search"
/>
<i class="np-header-search-icon far fa-search"></i>
</form>
</div>
<style>
.search-bar {
text-align: center;
background: #f7f7f7;
border-bottom: none;
margin-bottom: 64px;
padding: 24px 22px;
}
.search-bar .np-header-search {
display:flex;
max-width:400px;
margin:auto;
}
.search-bar .np-header-search-input {
border: 1px solid #c4c7cc;
border-radius: 3px;
padding: 10px 16px 10px 16px;
background-color: #fff;
opacity: 1;
width:100%;
cursor: text;
}
.search-bar .np-header-search-icon {
color:#0caa41;
}
</style>

View File

@ -0,0 +1,13 @@
{% comment %} <nav class="np-sub-navigation">
<div class="np-sub-navigation-content">
{% 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 %}
</div>
</nav> {% endcomment %}

View File

@ -0,0 +1,97 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
{% comment %} {% include "sub_navigation" %} {% endcomment %}
{% include
"page_header",
page_headline: catalog.headline,
page_subheadline: catalog.subheadline
%}
<main class="np-main np-catalog np-subpage-container np-max-width">
<div class="np-catalog-header-wrapper">
{% comment %} <div class="np-catalog-header">
<div class="np-resource-title">{{ catalog.headline }}</div>
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
</div> {% endcomment %}
{% comment %} {% 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 %} {% endcomment %}
</div>
<div class="catalog-filters-wrapper">
<a class="catalog-filter-btn active" data-filter='all'>All</a>
{% for category in categories.in_catalog %}
<a class="catalog-filter-btn" data-filter='{{category.id}}'>{{category.name}}</a>
{% endfor %}
</div>
{% include "courses_catalog" %}
</main>
{% include "footer" %}
<style>
.catalog-filters-wrapper .catalog-filter-btn {
background-color: #dee0e3;
border: 0;
border-radius: 16px;
color: #20262e;
font-size: 15px;
font-weight: 400;
line-height: 24px;
margin: 0 8px 8px 0;
padding: 4px 16px;
text-decoration:none;
display: inline-block;
cursor:pointer;
transition: background-color .1s ease-in-out;
}
.catalog-filters-wrapper .catalog-filter-btn:hover {
background-color: #c4c7cc;
border: 0;
}
.catalog-filters-wrapper .catalog-filter-btn.active {
background-color: #126666;
border-color: #126666;
color:#fff;
font-weight:700;
}
@media (min-width:768px) {
.catalog-filters-wrapper {
padding: 32px 0 32px;
}
}
</style>
<script>
$(".catalog-filter-btn").click(function() {
const selectedFilter = $(this).data("filter")
$(".catalog-filter-btn").removeClass("active")
$(this).addClass("active")
if (selectedFilter == "all") {
$(".courses-catalog-column").show()
} else {
$(".courses-catalog-column").hide()
$(".courses-catalog-column").each(function() {
if ($(this).data("filter").includes(selectedFilter)) {
$(this).show()
}
})
}
})
</script>

View File

@ -0,0 +1,33 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
{% include "sub_navigation" %}
{% include
"page_header",
page_headline: "My Learning Dashboard",
page_subheadline: ""
%}
<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" %}

View File

@ -0,0 +1,187 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.featured %}
<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-overlay"></div>
<div class="np-homepage-hero-content">
<div class="np-homepage-headline">
{{ homepage.headline }}
</div>
<div class="np-homepage-subheadline">
{{ homepage.subheadline }}
</div>
<a class="np-homepage-hero-cta np-button" href="{% route catalog %}">
{% t .discover %}
</a>
</div>
</div>
{% include "search_bar" %}
<div class="np-homepage-featured np-max-width">
<div class="np-homepage-featured-text">
<div class="np-homepage-headline">
{{ homepage.featured_courses_headline }}
</div>
<div class="np-homepage-subheadline">
{{ homepage.featured_courses_subheadline }}
</div>
</div>
{% if courses.featured.any? %}
<div class="np-homepage-featured-courses row">
{% for course in courses.featured %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% endfor %}
</div>
{% else %}
<div class="np-homepage-featured-empty">
<div class="np-zero-state-text">
{% t .empty, key: current_school.course_vocabulary %}
</div>
<img
class="np-zero-state-courses"
alt="{% t .empty, key: current_school.course_vocabulary %}"
/>
</div>
{% endif %}
</div>
{% include "popular_topics" %}
{% include "catalog_category_carousels" %}
</main>
{% include "footer" %}
<style>
.np-homepage-hero-overlay {
background: rgb(18,102,102);
background: linear-gradient(43deg, rgba(18,102,102,1) 0%, rgba(12,170,65,1) 100%);
position: absolute;
width: 100%;
height: 100%;
opacity: 85%;
}
.np-homepage-headline,
.np-homepage-subheadline {
color: #fff;
}
.np-homepage-headline {
font-weight: 900;
}
.np-homepage-hero-cta {
color: #126666;
padding: 8px 1pc;
margin-top: 36px;
background-color:#fff;
}
.np-homepage-hero-cta:hover {
background-color:rgba(255, 255, 255, 0.8);
}
@media (min-width:768px) {
.np-homepage-headline {
font-size: 52px;
line-height: 60px;
}
}
</style>
<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")
}
});
$(".topics-btn").click(function() {
const selectedFilter = $(this).data("filter")
$(".topics-btn").removeClass("active")
$(this).addClass("active")
$(".category-section").hide()
$(".category-section").each(function() {
if (selectedFilter == $(this).data("filter")) {
$(this).show()
}
})
})
</script>

View File

@ -0,0 +1,19 @@
{% include "header" %}
{% include "sub_navigation" %}
{% include
"page_header",
page_headline: "Learning Paths",
page_subheadline: "Explore curated sets of courses for a tailored learning experience"
%}
<main class="np-main np-learning-paths np-subpage-container np-max-width">
<div class="np-learning-paths-main">
{% comment %} <div class="np-resource-title">
{% t shared.learning_paths %}
</div>
<div class="np-resource-subtitle">
{% t .subtitle %}
</div> {% endcomment %}
{% include "learning_paths_index", items: learning_paths.available %}
</div>
</main>
{% include "footer" %}

View File

@ -0,0 +1,96 @@
/*
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 }}
*/
body, html {
font-family: 'Lato', 'Roboto', sans-serif;
background: #fff;
color: #0d0d0d;
}
.np-footer,
.np-footer+.np-powered-by,
.np-powered-by {
background-color:#dee0e3;
}
.np-dashboard,
.np-learning-paths {
background: #fff;
}
.np-card-container {
box-shadow: 0 0 4px 0 #b6bbc2;
border-radius:3px;
}
.np-button {
font-size: 15px;
line-height: 24px;
border-radius:3px;
transition:all 0.2s;
}
.np-button:hover {
background-color: rgba(12, 169, 65, 0.8);
}
.np-card-ribbon {
background: #126666;
padding: 4px 8px;
border-radius: 3px;
font-size: 11px;
line-height: 16px;
}
.slick-track {
margin-left:0!important;
display:flex!important;
}
.slick-list {
margin: 0 -12px!important;
}
.slick-slide {
height: inherit !important;
margin: 0 12px;
}
.slick-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 32px;
cursor:pointer;
}
.slick-arrow.slick-disabled {
opacity:0.3;
cursor:text;
}
.slick-arrow.fa-chevron-left {
left:-24px;
}
.slick-arrow.fa-chevron-right {
right:-24px;
}
@media (min-width:768px) {
.slick-slide,
.slick-list {
margin: 0!important;
}
}

View File

@ -0,0 +1,24 @@
{% include "header" %}
{% include "sub_navigation" %}
{% include
"page_header",
page_headline: "Training Events",
page_subheadline: "Discover in-person and online events to maximize your learning"
%}
<main class="np-main np-training-events np-subpage-container np-max-width">
<div class="row">
{% comment %} <div class="col-xs-12 col-sm-10">
<div class="np-resource-title">
{% t .title %}
</div>
<div class="np-resource-subtitle">
{% t .subtitle %}
</div> {% endcomment %}
</div>
<div class="col-xs-12 col-sm-2">
{% include "training_events_filter" %}
</div>
</div>
{% include "training_events_index" %}
</main>
{% include "footer" %}

View File

@ -28,3 +28,13 @@
* Something about multiple tokens. Has to do with UUID in their own system and APIs. She didn't explain more, just that it was an "issue".
* What is the token? It follows the user.
* Middleware - zaneray or mambo might create the token
## 04/25/2023
### New Instance Discussion
What is key for the additional registration page is:
* What dealer they are part of - General RV of Okala, FL
* City & State
*

View File

@ -207,3 +207,17 @@ Reach out to Gennet regarding language preferences for accounts.
If a user picks a language, update the property.
They would want a page per language, so app/en or app/es etc. This is a requirement.
### Sending details regarding Redirect problems
Text from Engineers (synopsis):
Lets imagine we redirect the user from page A to B using 301. Later we decided to change the redirect from A to C using
301. The user will be redirected to B because it was cached in their browser. Experience: User visits A > User was
redirected to B > Browser sees its a 301 redirection so it adds this redirect to cache > We change in NP from
A->B to A->C > User visits A > User was redirected to B (because his browser has this redirect in cache).
The only way to fix it its a requesting the user to clean cache in his browser. So if the user is unauthorized and goes
to app/courses, we will redirect him to sign_in page with 301. The browser will cache sign_in page, and the user will be automatically redirected to sign_in page when the user tries visit app/courses. This will cause a loop.
301 makes sense if the website they are accessing was permanently moved to other location. In this case they are trying to access courses list but are redirected to sign in page because they have to be authenticated before they can access it. If we redirected them from courses to sign in page with 301 the users browser would save the redirect location (sign in page) and whenever the user tried to access courses web page their browser would move them automatically to sign in page making courses page inaccessible for the user. The only way out of it is cleaning browsers cache. However once they cleared the cache they would remove the cookies as well. The cookies keep the information about users identity. This is helpful because with that they dont have to log in each time they visit our platform. But once the cookies are removed they would be again redirected to sign in page keeping them in this vicious circle. The reason to use 301 is to tell the browser “forget about this old location of the page you are accessing, this page is now here, also store this location and use it whenever you try to access this old location”.

View File

@ -202,6 +202,26 @@ Increasingly difficult to find what message is what. On the main comms page, the
For incomplete groups, the ppl change each month. She needs to run a report of everyone it was sent to each month.
TODO: Research what comms metrics are exposed in Looker.
TODO: Ask Marek why the duplicate message/email wasn't there.
TODO: 2023 March HW Reminder is the template she is using.
## 04/28/2023
### Friday Sync
Certification software - now doing with QuestionMark. Alexa thinks YouTestMe is a good company, but their reputation was
tarnished. Skuid's text team won't let them use YTM at all anymore.
Alexa's team currently using QuestionMark for demo and testing.
YouTestMe is still recommended by Alexa.
No schedule, likely. Might be "click here to take your exam."
Still starting with one exam, and likely won't do another one for another year or two.
TODO: Casually talk with Nikki about Skuid's Cert Program.
She wants to get notifications for when someone completes Level 1 or Level 2 LPs.
AppCues pop-up for ALL NINE learning paths.
Notification after x number of learning paths complete.
Can we run a report that shows ALL course attempts?
TODO: Create Looker organized by attempts, show all attempts across all people & courses.

View File

@ -459,3 +459,11 @@ Pull in Aditi after making a list for her. The items for Aditi are:
*
Update: Travis and MJ to meet with Aditi internally regarding this issues.
## 04/28/2023
### Metrics Requests
* Help and Question clicks
* Number of times driver clicks into resource after entering Resrouce Center

View File

@ -28,9 +28,9 @@ const CARDS = [
link: "https://calendar.google.com",
},
{
name: "Hubspot",
name: "Hubspot - Service Board",
icon: "ri-space-ship-line",
link: "https://app.hubspot.com/reports-dashboard/392014/view/8969543",
link: "https://app.hubspot.com/contacts/392014/objects/0-5/views/all/board",
},
{
name: "Jira - SE Board",

View File

@ -0,0 +1 @@
{"scriptId":"1fpmVgeHRDeloPnTHHnlFqsmAGERjxWB7qlyDx3rpeB8el3oHfOaRMcZl","rootDir":"/Users/normrasmussen/Documents/Work/Scripts/GoogleScripts/Talkspace_BBHR"}

View File

@ -0,0 +1,49 @@
function checkBamboo() {
const apiKey = 'okhjnTXhK2L96z2TKswBXeHeK';
var api_url = 'https://api.northpass.com/v2/apps/bamboo_hr';
const settings = {
async: true,
crossDomain: true,
method: 'GET',
headers: {
accept: 'application/json',
'X-Api-Key': apiKey
}
};
const sendMsg = UrlFetchApp.fetch(api_url, settings);
var txtResponse = sendMsg.getContentText();
var parseProps = JSON.parse(txtResponse);
var switched_on = parseProps["data"]["attributes"]["switched_on"];
var configured = parseProps["data"]["attributes"]["configured"];
console.log(switched_on)
console.log(configured)
// var emailQuotaRemaining = MailApp.getRemainingDailyQuota();
// console.log(emailQuotaRemaining)
// This is just for testing purposes tp make sure the emails work. This setup did.
// MailApp.sendEmail("nrasmussen@northpass.com",
// "cbencivenga@northpass.com",
// "BambooHR Is Down",
// "Your Bamboo HR Integration is currently turned off."
// );
if (switched_on == "true" && configured == "true") {
MailApp.sendEmail("nrasmussen@northpass.com",
"BambooHR Is Down",
"Your Bamboo HR Integration is currently turned off."
);
}
// var sheet = SpreadsheetApp.openById('1dJJ4no9j4sJ8fKvhxh6mGiailv4YyI0EsqvjJPYVtIM');
var ss = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/1dJJ4no9j4sJ8fKvhxh6mGiailv4YyI0EsqvjJPYVtIM/');
var sheet = ss.getActiveSheet();
var lastRow = sheet.getLastRow()+1;
console.log(lastRow)
//sheet.getRange(lastRow, 1).setValue(datetime);
sheet.getRange(lastRow, 2).setValue(switched_on);
sheet.getRange(lastRow, 3).setValue(configured);
}

View File

@ -0,0 +1,7 @@
{
"timeZone": "America/New_York",
"dependencies": {
},
"exceptionLogging": "STACKDRIVER",
"runtimeVersion": "V8"
}