Templates changes for a few clients.
This commit is contained in:
Norm Rasmussen
BIN
Custom_Templates/customer_templates/.DS_Store
vendored
BIN
Custom_Templates/customer_templates/.DS_Store
vendored
Binary file not shown.
@ -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>
|
||||
|
||||
BIN
Custom_Templates/customer_templates/Glassdoor/.DS_Store
vendored
Normal file
BIN
Custom_Templates/customer_templates/Glassdoor/.DS_Store
vendored
Normal file
Binary file not shown.
@ -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>
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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 %}
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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 %}
|
||||
@ -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>
|
||||
@ -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" %}
|
||||
@ -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>
|
||||
@ -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" %}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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" %}
|
||||
Reference in New Issue
Block a user