Tons of Solutions Engineering work done today for the rest of the CS team! Headway, Howard Hanna, Engels, Brighton, etc. Also completed Datasnippers auth flow and worked on Anthology's script. Cloned Anthology's courses (900..) and will clone Full Story on Monday.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,31 @@
|
||||
<div class="np-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">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.short_description }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
<a class="np-button course-button" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,88 @@
|
||||
{% assign any_course = false %}
|
||||
{% assign category_id = category_name | replace: " ", "-" %}
|
||||
|
||||
<div class="category-carousel-title np-homepage-featured-text" id="{{category_id}}-text">
|
||||
<div class="np-homepage-headline">
|
||||
{{ category_name }}
|
||||
</div>
|
||||
<div class="np-homepage-subheadline">
|
||||
{{ category_desc }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-wrapper" id="{{category_id}}">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% assign course_categories = course.categories | map: "name" %}
|
||||
{% if course_categories contains category_name %}
|
||||
{% assign any_course = true %}
|
||||
<div class="carousel-item">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var slider = tns({
|
||||
container: '#{{category_id}}',
|
||||
items: 1,
|
||||
slideBy: 'page',
|
||||
nav: false,
|
||||
controlsText: ["<i class='fal fa-angle-left arrow-left '></i>","<i class='fal fa-angle-right arrow-right'></i>"],
|
||||
responsive: {
|
||||
768: {
|
||||
items: 2
|
||||
},
|
||||
1140: {
|
||||
items: 3
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
{% unless any_course %}
|
||||
#{{category_id}}-text {
|
||||
display: none;
|
||||
}
|
||||
{% endunless %}
|
||||
|
||||
.arrow-right {
|
||||
font-size: 2.5rem;
|
||||
margin-right: -2rem;
|
||||
color: #77728d;
|
||||
}
|
||||
.arrow-left {
|
||||
font-size: 2.5rem;
|
||||
margin-left: -2rem;
|
||||
color: #77728d;
|
||||
}
|
||||
.carousel-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.np-card {
|
||||
height: 100%;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.tns-outer {
|
||||
position: relative;
|
||||
margin: 0 4% 20px;
|
||||
}
|
||||
.tns-controls {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.tns-outer [aria-controls], .tns-outer [data-action] {
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #000
|
||||
}
|
||||
.carousel-wrapper .np-card {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,20 @@
|
||||
<div class="np-card-content-subtitle course-points">
|
||||
{{ course.properties.points }} CEU
|
||||
</div>
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header, key: current_school.course_vocabulary %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-top-image-spacing {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.course-points {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,17 @@
|
||||
<div>
|
||||
<div class="np-dashboard-resources-title">My CEU</div>
|
||||
<div class="np-card">
|
||||
<div class="np-card-container np-dashboard-border" style="text-align: center;">
|
||||
<h1 class="user-point-num" style="margin-bottom: 1rem;">
|
||||
{% assign learner_points = 0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign learner_points = learner_points | plus: course.properties.points %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{{ learner_points }}
|
||||
</h1>
|
||||
<h3 class="user-point-label" style="margin-top: 1rem;">CEU</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
|
||||
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
|
||||
269
Custom_Templates/customer_templates/Headway/_header.html.liquid
Normal file
269
Custom_Templates/customer_templates/Headway/_header.html.liquid
Normal file
@ -0,0 +1,269 @@
|
||||
<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 link in navigations.sub_navigation %}
|
||||
{% unless link.label == "Catalog" %}
|
||||
<li class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</li>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
<li class="np-sub-navigation-content-item">
|
||||
<a class="np-sub-navigation-content-item-link" href="https://protect-us.mimecast.com/s/yLUACL9zwoTmPllJiBRreN?domain=joinviolet.com">
|
||||
Continuing Education (CEUs)
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</li>
|
||||
</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">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% unless link.label == "Catalog" or link.label == "Events" %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link dropdown-navigation"
|
||||
href="{{ link.url }}">
|
||||
{{ link.label }}
|
||||
</a>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% 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 %}
|
||||
</a>
|
||||
{% 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-sub-navigation-content-item-link {
|
||||
color: #353535;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item-bar {
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
margin-top: 4px;
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item-active {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-navigation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-header-desktop-nav-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li.np-sub-navigation-content-item {
|
||||
margin: 0 20px 0 0;
|
||||
}
|
||||
|
||||
.np-header-search-input, .np-header-search-input:focus {
|
||||
background: #fff;
|
||||
border: 1px solid #DADCE0;
|
||||
border-radius: 4px;
|
||||
color: #353535;
|
||||
font-size: 15px;
|
||||
opacity: 1;
|
||||
outline: none;
|
||||
padding: 0 20px 0 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.np-header-search-icon {
|
||||
color: #bebebe;
|
||||
left: 12px;
|
||||
right: 0;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.np-header-search-input::placeholder {
|
||||
color: #717171;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 999px) {
|
||||
.dropdown-navigation {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
li.np-sub-navigation-content-item {
|
||||
margin: 0 12px 0 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,5 @@
|
||||
<div class="np-max-width" id="courses-carousels">
|
||||
{% include 'category_carousel', category_name: 'Onboarding', category_desc: "Step-by-step instructions for getting started with Headway" %}
|
||||
{% include 'category_carousel', category_name: 'Practice growth and expansion', category_desc: "Resources, tips, and insights from other private practice providers" %}
|
||||
{% include 'category_carousel', category_name: 'Compliance', category_desc: "Understand insurers' expectations and industry standards" %}
|
||||
</div>
|
||||
@ -0,0 +1,14 @@
|
||||
<div class="np-learning-paths-resources">
|
||||
{% if items.any? %}
|
||||
{% for learning_path in items %}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
You're not assigned to any learning paths.
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,128 @@
|
||||
{% comment %}
|
||||
For this widget to work you must import Slick CSS and JS
|
||||
{% endcomment %}
|
||||
|
||||
{% assign courseCompletedCouter = 0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign courseCompletedCouter = courseCompletedCouter | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="achievements-box" style="{% if courseCompletedCouter > 0%}display: block !important;{% endif %}">
|
||||
<div class="np-dashboard-resources-title">Recent achievements</div>
|
||||
<div class="np-dashboard-resources">
|
||||
<div class="np-card">
|
||||
<div class="np-card-container np-dashboard-border">
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="np-card-content-achievements">
|
||||
<div class="achievements-carousel">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
<div>
|
||||
<div class="np-card-content-title col-12">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="col-12 ">
|
||||
<img class="np-achievement-icon" src="{{ course.properties.badge }}" />
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
$('.achievements-carousel').slick({
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
infinite: true,
|
||||
autoplay: false,
|
||||
autoplaySpeed: 5000,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
responsive: [{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
|
||||
dots: false
|
||||
}
|
||||
}]
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.achievements-carousel{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.np-card-content-achievements .np-card-content-title {
|
||||
font-size: 0.937rem;
|
||||
text-align:center;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.np-achievement-icon {
|
||||
color: #bec2c6;
|
||||
margin:14px auto 26px;
|
||||
width:130px;
|
||||
}
|
||||
|
||||
.np-card-content-achievements .slick-slider {
|
||||
width:100%;
|
||||
max-width: 375px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.np-view-all-achievements {
|
||||
color:#2BB24C;
|
||||
font-size:0.75rem;
|
||||
text-transform:uppercase;
|
||||
text-align:center;
|
||||
text-decoration:none;
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
|
||||
.np-card-content-achievements {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem 2rem .5rem;
|
||||
}
|
||||
|
||||
.slick-arrow {
|
||||
opacity: 0.5;
|
||||
font-size: 1.5rem;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 50%;
|
||||
cursor:pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.slick-arrow.fa-chevron-left { left:0 }
|
||||
.slick-arrow.fa-chevron-right { right:0; }
|
||||
|
||||
@media (min-width:1024px) {
|
||||
.np-card-content-achievements .slick-slider {
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,51 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
<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>
|
||||
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-4">
|
||||
{% comment %} {% include 'dashboard_widget_ceu_points' %} {% endcomment %}
|
||||
{% include "widget_achievements" %}
|
||||
|
||||
|
||||
{% comment %} {% if features.training_events? %}
|
||||
<div>
|
||||
<div class="np-dashboard-resources-title">
|
||||
Upcoming events
|
||||
</div>
|
||||
{% include "training_events_dashboard" %}
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.achievements-box{
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px){
|
||||
.user-point-num{
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.user-point-label{
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
158
Custom_Templates/customer_templates/Headway/homepage.html.liquid
Normal file
158
Custom_Templates/customer_templates/Headway/homepage.html.liquid
Normal file
@ -0,0 +1,158 @@
|
||||
{% 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-content">
|
||||
<div class="np-homepage-hero-content-headers">
|
||||
<div class="np-homepage-headline np-header-font-color">
|
||||
{{ homepage.headline }}
|
||||
</div>
|
||||
<div class="np-homepage-subheadline np-header-font-color">
|
||||
{{ homepage.subheadline }}
|
||||
</div>
|
||||
</div>
|
||||
<a class="np-homepage-hero-cta np-button" href="#courses-carousels">
|
||||
See Courses
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% include "sub_navigation" %}
|
||||
{% comment %} <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 class="view-all-button-container">
|
||||
<a href="/catalog" class="view-all-button">View all</a>
|
||||
</div>
|
||||
</div> {% endcomment %}
|
||||
|
||||
{% include 'homepage_category_carousels' %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.np-homepage-hero {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.np-homepage-hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 64px;
|
||||
right: 64px;
|
||||
bottom: 0;
|
||||
border-bottom: 1px solid #DADCE0;
|
||||
}
|
||||
|
||||
.np-homepage-hero-content {
|
||||
padding: 36px 56px;
|
||||
width: -webkit-fill-available;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
height: -webkit-fill-available;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.np-homepage-hero-cta {
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.np-homepage-hero-content-headers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.np-homepage-headline {
|
||||
font-weight: unset;
|
||||
}
|
||||
|
||||
.np-homepage-featured {
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.np-homepage-headline {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.category-carousel-title .np-homepage-subheadline {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.category-carousel-title .np-homepage-subheadline {
|
||||
color: #353535;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.np-homepage-featured .np-homepage-headline {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.col-xs-12.col-md-6.col-lg-4.np-stretch-content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.view-all-button-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view-all-button {
|
||||
color: #353535;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #DADCE0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-homepage-featured .np-homepage-headline,
|
||||
.category-carousel-title .np-homepage-headline {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.category-carousel-title .np-homepage-subheadline {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.np-homepage-hero .np-homepage-headline {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,80 @@
|
||||
/*
|
||||
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 }}
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
|
||||
|
||||
html > body,
|
||||
.np-dashboard.np-dashboard,
|
||||
.np-learning-paths.np-learning-paths {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
body *:not(i) {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.np-homepage-headline, .np-card-content-title,
|
||||
.np-dashboard-resources-title, .np-resource-title,
|
||||
.np-training-session-sessions-title, .np-top-title,
|
||||
.np-text-title, .np-card-heading, .np-text-title-bold {
|
||||
font-family: 'Marcellus', serif;
|
||||
color: #353535;
|
||||
}
|
||||
|
||||
.np-homepage-headline.np-homepage-headline,
|
||||
.np-homepage-subheadline.np-homepage-subheadline,
|
||||
.np-resource-title.np-resource-title,
|
||||
.np-resource-subtitle.np-resource-subtitle {
|
||||
color: #353535;
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title.np-dashboard-resources-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.np-top-title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-resource-header .np-top-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.course-points {
|
||||
background-color: {{ color_palette.button_color }};
|
||||
color: {{ color_palette.button_font_color }};
|
||||
width: fit-content;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
font-weight: 700;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.np-button.course-button {
|
||||
color: #353535;
|
||||
background-color: transparent;
|
||||
border: 1px solid #DADCE0;
|
||||
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.np-button.course-button:hover {
|
||||
background-color: rgba(33, 35, 38, 0.04);
|
||||
}
|
||||
|
||||
.np-card-container {
|
||||
box-shadow: 0px 0px 16px 0 rgb(161 171 171 / 45%);
|
||||
}
|
||||
Reference in New Issue
Block a user