WilliamsSonoma sub navigation changes.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,134 @@
|
||||
|
||||
{% assign architect_certification_course_image = 'https://s3.amazonaws.com/static.northpass.com/Crayon+Academy/course+images/ArchitectBadge-512x566.png' %}
|
||||
{% assign activator_certification_course_image = 'https://s3.amazonaws.com/static.northpass.com/Crayon+Academy/course+images/AcademyBadge-Activator.png' %}
|
||||
{% assign accelerator_certification_course_image = 'https://s3.amazonaws.com/static.northpass.com/Crayon+Academy/course+images/AcceleratorBadge-512x566.png' %}
|
||||
|
||||
{% assign is_architect_certification_course_image = false %}
|
||||
{% assign is_activator_certification_course_image = false %}
|
||||
{% assign is_accelerator_certification_course_image = false %}
|
||||
|
||||
{% if course.name == 'Architect Certification Course' %}
|
||||
{% assign is_architect_certification_course_image = true %}
|
||||
{% elsif course.name == 'Activator Certification Course' %}
|
||||
{% assign is_activator_certification_course_image = true %}
|
||||
{% elsif course.name == 'Accelerator Certification Course' %}
|
||||
{% assign is_accelerator_certification_course_image = true %}
|
||||
{%endif%}
|
||||
|
||||
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if is_architect_certification_course_image == true %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ architect_certification_course_image }}"
|
||||
>
|
||||
{% elsif is_activator_certification_course_image == true %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ activator_certification_course_image }}"
|
||||
>
|
||||
{% elsif is_accelerator_certification_course_image == true %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ accelerator_certification_course_image }}"
|
||||
>
|
||||
{% else %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
{%endif%}
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title custom-course-description">
|
||||
{% if is_architect_certification_course_image == true %}
|
||||
Learn how to drive adoption <br> of competitive intelligence
|
||||
{% elsif is_activator_certification_course_image == true %}
|
||||
Learn how to gather & <br>distribute competitive intelligence
|
||||
{% elsif is_accelerator_certification_course_image == true %}
|
||||
Learn how to analyze
|
||||
competitive intelligence
|
||||
{%else%}
|
||||
{{course.name}}
|
||||
{% endif %}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class='course-button-container'>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if is_architect_certification_course_image == true %}
|
||||
<a class="np-button np-button-wide np-course-card-button orange-btn " href="{{ course_path }}">
|
||||
{% if course.progress == 0 %}
|
||||
BEGIN COURSE
|
||||
{% elsif course.progress > 0 and course.progress < 100%}
|
||||
RESUME COURSE
|
||||
{% elsif course.progress == 100 %}
|
||||
RETAKE COURSE
|
||||
{% endif %}
|
||||
</a>
|
||||
{% elsif is_activator_certification_course_image == true %}
|
||||
<a class="np-button np-button-wide np-course-card-button purple-btn" href="{{ course_path }}">
|
||||
{% if course.progress == 0 %}
|
||||
BEGIN COURSE
|
||||
{% elsif course.progress > 0 and course.progress < 100%}
|
||||
RESUME COURSE
|
||||
{% elsif course.progress == 100 %}
|
||||
RETAKE COURSE
|
||||
{% endif %}
|
||||
</a>
|
||||
{% elsif is_accelerator_certification_course_image == true %}
|
||||
<a class="np-button np-button-wide np-course-card-button red-btn" href="{{ course_path }}">
|
||||
{% if course.progress == 0 %}
|
||||
BEGIN COURSE
|
||||
{% elsif course.progress > 0 and course.progress < 100%}
|
||||
RESUME COURSE
|
||||
{% elsif course.progress == 100 %}
|
||||
RETAKE COURSE
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
|
||||
|
||||
|
||||
{%- comment -%} {% if course.name == 'Accelerator Certification Course' %}
|
||||
<a class="np-button np-button-wide np-course-card-button"
|
||||
{% if course.enrolled? %}
|
||||
href="#" style="pointer-events: none; color: #486776; background: #F2F4F5"
|
||||
{% else %}
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
Pre-Register
|
||||
{% else %}
|
||||
Coming Soon
|
||||
{% endif %}
|
||||
</a>
|
||||
{% else %}
|
||||
<a class="np-button np-button-wide np-course-card-button" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
{% endif %} {%- endcomment -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-card-container {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,82 @@
|
||||
{% assign topic_classname = topic | split: " " %}
|
||||
|
||||
<div class="courses-carousel np-carousel" data-topic="{{ topic_classname | join: '-' | downcase }}">
|
||||
{% assign sorted_items =items | sort: "name" %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% assign course_status = "" %}
|
||||
{% if course.started? == false %}
|
||||
{% assign course_status = "not-started" %}
|
||||
{% elsif course.completed? %}
|
||||
{% assign course_status = "completed" %}
|
||||
{% elsif course.started? %}
|
||||
{% assign course_status = "in-progress" %}
|
||||
{% endif %}
|
||||
<div class="np-carousel-card {{course_status}}"> {% include "onboarding_cards_course" with course %}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".courses-carousel").not('.slick-initialized').slick({
|
||||
slidesToShow: 3,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left left-arrow"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right right-arrow"></i>',
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(){
|
||||
let npHideLang = getCookie("npLang");
|
||||
if (npHideLang == "es")
|
||||
{
|
||||
npHideLang = "English";
|
||||
}
|
||||
else if (npHideLang == "en")
|
||||
{
|
||||
npHideLang = "Spanish";
|
||||
}
|
||||
var element = document.querySelectorAll(`[language=${npHideLang}]`);
|
||||
element.forEach(card => {card.classList.add("np-hidden")});
|
||||
})
|
||||
function getCookie(name) {
|
||||
var dc = document.cookie;
|
||||
var prefix = name + "=";
|
||||
var begin = dc.indexOf("; " + prefix);
|
||||
if (begin == -1) {
|
||||
begin = dc.indexOf(prefix);
|
||||
if (begin != 0) return null;
|
||||
}
|
||||
else
|
||||
{
|
||||
begin += 2;
|
||||
var end = document.cookie.indexOf(";", begin);
|
||||
if (end == -1) {
|
||||
end = dc.length;
|
||||
}
|
||||
}
|
||||
return decodeURI(dc.substring(begin + prefix.length, end));
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,37 @@
|
||||
<div class="events-carousel np-carousel np-carousel-bg-blue" id="events-carousel">
|
||||
{% if items.any? %}
|
||||
{% for training_event in items %}
|
||||
<div class="np-carousel-card"> {% include "cards_training_event" with training_event %}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".events-carousel").slick({
|
||||
slidesToShow: 3,
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: false,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,16 @@
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
{{ current_school.course_vocabulary }}
|
||||
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
|
||||
</i>
|
||||
</div>
|
||||
<div class="np-top-title" style='font-weight: 600;'>
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-hidden-desktop"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
@ -0,0 +1,16 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="np-text-title np-course-outline-title">
|
||||
{% t .header, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-course-outline-content">
|
||||
<ol class="np-course-outline-content-section">
|
||||
{% for section in course.sections %}
|
||||
<li class="np-course-outline-content-section-list">
|
||||
<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold" style='font-weight: 600;'>
|
||||
{{ section.name }}
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,170 @@
|
||||
<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>
|
||||
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image school-logo"
|
||||
src="https://www.crayon.co/hubfs/Logo.svg"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
|
||||
{%include 'sub_navigation'%}
|
||||
|
||||
{% 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 %}"
|
||||
>
|
||||
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>
|
||||
@media screen and (min-width: 768px) {
|
||||
.school-logo {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,116 @@
|
||||
{% assign topic_classname = topic | split: " " %}
|
||||
|
||||
<div class="np-progress-filter-wrapper">
|
||||
{% if label %}
|
||||
<div class="np-progress-filter-label">
|
||||
<span class="lang-en">{{ label }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="progress-filter filter-select-wrapper select-wrapper np-button lang-en" data-topic="{{ topic_classname | join: '-' | downcase }}" style="border-radius: 8px;">
|
||||
|
||||
<select >
|
||||
<option selected disabled hidden>{{ default_option}}</option>
|
||||
<option value="a">All Courses</option>
|
||||
<option value="n">Not Started</option>
|
||||
<option value="i">In Progress</option>
|
||||
<option value="c">Completed</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-progress-filter-label {
|
||||
color: #000;
|
||||
padding-right: 7px;
|
||||
text-transform: none;
|
||||
font-weight:500;
|
||||
font-size:0.812rem;
|
||||
}
|
||||
.np-progress-filter-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.filter-select-wrapper {
|
||||
position: relative;
|
||||
padding:0;
|
||||
border: 2px solid rgba(0, 0, 0, 0.25);
|
||||
color: #000;
|
||||
height:auto;
|
||||
text-transform: none;
|
||||
background: transparent;
|
||||
border-radius:0;
|
||||
}
|
||||
.filter-select-wrapper:hover {
|
||||
background:transparent;
|
||||
color:#000;
|
||||
}
|
||||
.select-items {
|
||||
position: absolute;
|
||||
background-color: #062531;
|
||||
top: 105%;
|
||||
left: -2px;
|
||||
z-index: 99;
|
||||
width: 102%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.25);
|
||||
border-top:none;
|
||||
}
|
||||
.select-items div {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border-top:none;
|
||||
cursor: pointer;
|
||||
width:100%;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.select-items div:hover { color: rgba(255, 255, 255, 1); }
|
||||
.select-selected {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 9px 66px 9px 20px;
|
||||
position: relative;
|
||||
color:#000;
|
||||
}
|
||||
.select-selected::after {
|
||||
content:"\f078";
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
position: absolute;
|
||||
width:20px;
|
||||
height:100%;
|
||||
color:rgba(0, 0, 0, 0.5);
|
||||
right:10px;
|
||||
top:0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size:1rem;
|
||||
}
|
||||
.select-selected::before {
|
||||
content:"";
|
||||
position: absolute;
|
||||
width:20px;
|
||||
height:100%;
|
||||
border-left:2px solid rgba(0, 0, 0, 0.25);
|
||||
right:20px;
|
||||
top:0;
|
||||
}
|
||||
.select-selected.select-arrow-active::after { transform: rotate(180deg); }
|
||||
.same-as-selected,
|
||||
.filter-select-wrapper select,
|
||||
.select-hide {
|
||||
display: none;
|
||||
}
|
||||
.mo-filter-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.select-items div:hover,
|
||||
.same-as-selected {
|
||||
background-color: #062531;
|
||||
}
|
||||
</style>
|
||||
|
||||
12
Custom_Templates/customer_templates/Crayon/_head.html.liquid
Normal file
12
Custom_Templates/customer_templates/Crayon/_head.html.liquid
Normal file
@ -0,0 +1,12 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<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>
|
||||
<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" />
|
||||
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap');
|
||||
</style>
|
||||
@ -0,0 +1,34 @@
|
||||
<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 onboarding-course-card">
|
||||
<h3 class="np-card-content-title onboarding-course-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle onboarding-course-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
{% 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 np-button-wide onboarding-course-button" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,47 @@
|
||||
<div class="progress-ring-wrapper">
|
||||
<svg
|
||||
class="progress-ring"
|
||||
width="{{ size }}"
|
||||
height="{{ size }}">
|
||||
<circle
|
||||
class="circle circle-bg"
|
||||
stroke="{{ stroke_color_bg }}"
|
||||
stroke-width="10"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"
|
||||
/>
|
||||
<circle
|
||||
class="circle circle-{{ name }}"
|
||||
stroke="{{ stroke_color }}"
|
||||
stroke-width="10"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"
|
||||
/>
|
||||
<text x="50%" y="50%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="{{ number_color }}" dy=".3em">
|
||||
{{ count }}
|
||||
</text>
|
||||
</svg>
|
||||
<h3 class="np-card-content-title progress-circle-label">
|
||||
{{ name }}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
let circle = document.getElementsByClassName("circle-{{ name }}")[0];
|
||||
let radius = circle.r.baseVal.value;
|
||||
let circumference = radius * 2 * Math.PI;
|
||||
|
||||
circle.style.strokeDasharray = `${circumference} ${circumference}`;
|
||||
circle.style.strokeDashoffset = `${circumference}`;
|
||||
|
||||
function setProgress(percent) {
|
||||
circle.style.strokeDashoffset = circumference - percent * circumference;
|
||||
}
|
||||
setProgress('{{ count | divided_by: total }}')
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,52 @@
|
||||
<nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% if link.label == 'Home'%}
|
||||
<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>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="np-sub-navigation-content-item">
|
||||
<a class="np-sub-navigation-content-item-link" href="#">
|
||||
Blog
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class="np-sub-navigation-content-item">
|
||||
<a class="np-sub-navigation-content-item-link" href="#">
|
||||
Support Center
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class="np-sub-navigation-content-item">
|
||||
<a class="np-sub-navigation-content-item-link" href="#">
|
||||
Community
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class="np-sub-navigation-content-item">
|
||||
<a class="np-sub-navigation-content-item-link" href="#">
|
||||
Case Studies
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.np-sub-navigation-content-item-link {
|
||||
color: #000;
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item-link:hover {
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
transition: all .15s ease;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,131 @@
|
||||
{% assign ring_background_color = 'rgba(192, 220, 246, 0.6)' %}
|
||||
{% assign ring_fill_color = '#0274de' %}
|
||||
{% assign number_color = 'rgb(0, 0, 0)' %}
|
||||
{% assign text_color = '#0274de' %}
|
||||
{% assign background_color = 'white' %}
|
||||
|
||||
<div class="progress-card-wrapper">
|
||||
<div class="progress-card">
|
||||
{% if courses.enrolled.any? %}
|
||||
{% assign countComplete = 0 %}
|
||||
{% assign countInProgress = 0 %}
|
||||
{% assign countNotStarted = 0 %}
|
||||
{% assign countTotal = 0 | times: 1.0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% assign countTotal = countTotal | plus: 1 %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign countComplete = countComplete | plus: 1 %}
|
||||
{% endif %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign countInProgress = countInProgress | plus: 1 %}
|
||||
{% endif %}
|
||||
{% if course.progress == 0 %}
|
||||
{% assign countNotStarted = countNotStarted | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<ul class="progress-circle-list">
|
||||
<li>
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: 'Completed' ,
|
||||
count: countComplete ,
|
||||
total: countTotal,
|
||||
size: "120",
|
||||
stroke_color: ring_fill_color,
|
||||
stroke_color_bg: ring_background_color,
|
||||
text_color: text_color,
|
||||
number_color: number_color
|
||||
%}
|
||||
</li>
|
||||
<li>
|
||||
{%
|
||||
include "progress_circle",
|
||||
name:'In Progress' ,
|
||||
count: countInProgress ,
|
||||
total: countTotal,
|
||||
size: "120",
|
||||
stroke_color: ring_fill_color,
|
||||
stroke_color_bg: ring_background_color,
|
||||
text_color: text_color,
|
||||
number_color: number_color
|
||||
%}
|
||||
</li>
|
||||
</ul>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.progress-card {
|
||||
border-radius: 8px;
|
||||
background: {{ background_color }};
|
||||
padding: 0;
|
||||
display: flex;
|
||||
margin-bottom: 2.187rem;
|
||||
width: 100%;
|
||||
border: 2px solid rgba(0,0,0, 0.25);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.progress-circle-list {
|
||||
padding: 0;
|
||||
list-style-type: none !important;
|
||||
justify-content: space-around;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: 400px;
|
||||
margin: auto;
|
||||
}
|
||||
.progress-ring-wrapper {
|
||||
flex: 0;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 1.5rem 1rem 1rem 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
.progress-ring circle {
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset 0.35s;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
.progress-ring text {
|
||||
font-size:2rem;
|
||||
}
|
||||
.progress-circle-label {
|
||||
color: {{ text_color }};
|
||||
text-transform: uppercase;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.progress-ring-wrapper {
|
||||
padding: 1.5rem 0.4rem 1rem 0.4rem;
|
||||
}
|
||||
.progress-circle-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1023px) {
|
||||
.progress-circle-list {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
@media (min-width:1170px) {
|
||||
.progress-ring text {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.progress-ring-wrapper {
|
||||
padding: 1.5rem 1rem 1rem 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,217 @@
|
||||
<main class="np-box-container np-open-access">
|
||||
<div class="np-box sign-up-body">
|
||||
<div class="np-box-content-container sign-up-body-content-container login-body-content-container">
|
||||
|
||||
<div class="sign-in-text-content-wrapper login-text-content-wrapper">
|
||||
<img class="login-logo" src="https://s3.amazonaws.com/static.northpass.com/Crayon/crayon_logo_horizontal.png" alt="Welcome To Crayon Academy!">
|
||||
<div class="np-form-headline login-text">
|
||||
<span class="welcome-header"> Welcome to <span style="color: #FEC311">Crayon Academy</span></span>
|
||||
</div>
|
||||
<div class="np-form-subheadline login-text">
|
||||
<span class="welcome-subheader">Whether you're a new or returning learner, please complete the form to access the academy.
|
||||
<span class="login-emoji-mobile"> 👇</span>
|
||||
<span class="login-emoji-desktop">👉</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sign-in-form-content-wrapper login-form-wrapper">
|
||||
<form class="np-form np-box-content login-form" action="{{ form.url }}" method="get" novalidate>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label login-text login-input-label" for="learner_first_name">
|
||||
First name
|
||||
</label>
|
||||
<input
|
||||
autofocus="autofocus"
|
||||
class="np-input login-input"
|
||||
id="learner_first_name"
|
||||
name="first_name"
|
||||
placeholder="e.g., Jane"
|
||||
type="text"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label login-text login-input-label" for="learner_last_name">
|
||||
Last name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="np-input login-input"
|
||||
value="{{ form.last_name }}"
|
||||
id="learner_last_name"
|
||||
placeholder="e.g., Smith"
|
||||
name="last_name"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label login-text login-input-label" for="learner_email">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="np-input login-input"
|
||||
value="{{ form.email }}"
|
||||
id="learner_email"
|
||||
placeholder="e.g., jane.smith@acme.com"
|
||||
name="email"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
class="np-button np-button-big np-form-action login-button"
|
||||
name="commit"
|
||||
type="submit"
|
||||
value="{% t shared.enter %}"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.np-open-access{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sign-up-body{
|
||||
align-items: center;
|
||||
background: #0538BF;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
margin: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sign-up-body-content-container{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.sign-in-text-content-wrapper{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-logo{
|
||||
height: 100px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-text{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.welcome-header{
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.welcome-subheader{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.login-emoji-desktop{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-form-wrapper{
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.login-input-label{
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.login-input{
|
||||
background: #FEC311;
|
||||
border: 3px solid #FFFFFF;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.login-button{
|
||||
background: #FEC311;
|
||||
border: 2px solid #FFFFFF;
|
||||
color: #000000;
|
||||
font-size: 30px;
|
||||
margin-top: 30px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.login-button:hover{
|
||||
background: #0538BF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.np-box-content-container{
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.login-text-content-wrapper{
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.login-logo{
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.login-text{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.welcome-header{
|
||||
font-size: 62px;
|
||||
}
|
||||
|
||||
.welcome-subheader{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.login-emoji-mobile{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-emoji-desktop{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.login-form-wrapper{
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.login-form{
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px){
|
||||
.login-body-content-container{
|
||||
padding: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px){
|
||||
.welcome-header{
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
.welcome-subheader{
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
262
Custom_Templates/customer_templates/Crayon/catalog.html.liquid
Normal file
262
Custom_Templates/customer_templates/Crayon/catalog.html.liquid
Normal file
@ -0,0 +1,262 @@
|
||||
<!-- {% comment %}{% include "header" %}{% endcomment %}
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
{% comment %}{% include "sub_navigation" %}{% endcomment %}
|
||||
{% comment %} https://s3.amazonaws.com/static.northpass.com/Crayon/acceleratorBadge.png {% endcomment %}
|
||||
{% comment %} https://s3.amazonaws.com/static.northpass.com/Crayon/activatorBadge.png {% endcomment %}
|
||||
{% comment %} https://s3.amazonaws.com/static.northpass.com/Crayon/architectBadge.png {% endcomment %}
|
||||
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-dashboard-header">
|
||||
<div class="np-resource-title">Hi {{current_person.first_name}}! 👋</div>
|
||||
<div class="np-resource-subtitle">This is what’s relevant to you right now in Competitive Advantage Academy</div>
|
||||
</div>
|
||||
</div>
|
||||
{% comment %}<div class="np-grid-spacing col-xs-12 col-md-6">
|
||||
<div class="np-dashboard-achievements-panel col-xs-12 row">
|
||||
<div class="np-resource-title col-xs-5">Achievements</div>
|
||||
<div class="col-xs-7">
|
||||
<div class="np-dashboard-medal-card">
|
||||
<div class="col-xs-12 row" style="margin: 0">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.name == 'Activator Certification Course' %}
|
||||
{% if course.progress == 100 %}
|
||||
<img class="np-dashboard-medal-icon" src="{{course.properties.course_badge}}" alt="{{course.name}}-medal-icon"/>
|
||||
{% else %}
|
||||
<div class="np-dashboard-medal-circle"></div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.name == 'Architect Certification Course' %}
|
||||
{% if course.progress == 100 %}
|
||||
<img class="np-dashboard-medal-icon" src="{{course.properties.course_badge}}" alt="{{course.name}}-medal-icon"/>
|
||||
{% else %}
|
||||
<div class="np-dashboard-medal-circle"></div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.name == 'Accelerator Certification Course' %}
|
||||
{% if course.progress == 100 %}
|
||||
<img class="np-dashboard-medal-icon" src="{{course.properties.course_badge}}" alt="{{course.name}}-medal-icon"/>
|
||||
{% else %}
|
||||
<div class="np-dashboard-medal-circle"></div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="np-dashboard-medal-circle"></div>
|
||||
<div class="np-dashboard-medal-circle"></div>
|
||||
<div class="np-dashboard-medal-circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>{% endcomment %}
|
||||
</div>
|
||||
|
||||
<div class="row dashboard-section-courses">
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4">
|
||||
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.name == 'Activator Certification Course' %}
|
||||
<div class="np-md-flex-wrapper" style="text-align: center;">
|
||||
<div class="np-dashboard-resources-title">
|
||||
Beginner
|
||||
</div>
|
||||
</div>
|
||||
{% include 'cards_course' with course %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.name == 'Architect Certification Course' %}
|
||||
<div class="np-md-flex-wrapper" style="text-align: center;">
|
||||
<div class="np-dashboard-resources-title">
|
||||
Intermediate
|
||||
</div>
|
||||
</div>
|
||||
{% include 'cards_course' with course %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.name == 'Accelerator Certification Course' %}
|
||||
<div class="np-md-flex-wrapper" style="text-align: center;">
|
||||
<div class="np-dashboard-resources-title">
|
||||
Advanced
|
||||
</div>
|
||||
</div>
|
||||
{% include 'cards_course' with course %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% comment %}{% if courses.enrolled.any? %}
|
||||
{% assign course_limiter = 0 %}
|
||||
{% if categories.enrolled.any? %}
|
||||
{% assign all_categories = categories.enrolled | map: "name" %}
|
||||
{% for enrolled_category in all_categories %}
|
||||
{% for course in courses.enrolled%}
|
||||
{% if course_limiter < 1%}
|
||||
<div class="np-md-flex-wrapper" style="text-align: center;">
|
||||
<div class="np-dashboard-resources-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="np-dashboard-resources-category">
|
||||
{{ enrolled_category }}
|
||||
</div>
|
||||
{%
|
||||
include "filter_by_progress",
|
||||
label: "Filter by Progress:",
|
||||
default_option: "All Courses",
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
</div>
|
||||
{% include 'cards_course' with course %}
|
||||
|
||||
{% assign course_limiter = course_limiter | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% assign enrolled_category = "Not Categorized" %}
|
||||
{% for course in courses.enrolled%}
|
||||
{% if course_limiter < 1%}
|
||||
<div class="np-md-flex-wrapper" style="text-align: center;">
|
||||
<div>
|
||||
<div class="np-dashboard-resources-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="np-dashboard-resources-category">
|
||||
{{ enrolled_category }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include 'cards_course' with course %}
|
||||
|
||||
{% assign course_limiter = course_limiter | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-dashboard-resources-title" style="margin-bottom:19px;">
|
||||
Courses
|
||||
</div>
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
<div style="margin-bottom:3rem;">
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}{% endcomment %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
{% comment %}<script>
|
||||
// Creates the custom dropdown and dropdown functionality
|
||||
var x, i, j, l, ll, selElmnt, a, b, c;
|
||||
/* Look for any elements with the class “select-wrapper”: */
|
||||
x = document.getElementsByClassName("progress-filter");
|
||||
l = x.length;
|
||||
for (i = 0; i < l; i++) {
|
||||
selElmnt = x[i].getElementsByTagName("select")[0];
|
||||
ll = selElmnt.length;
|
||||
a = document.createElement("DIV");
|
||||
a.setAttribute("class", "select-selected");
|
||||
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
|
||||
x[i].appendChild(a);
|
||||
b = document.createElement("DIV");
|
||||
b.setAttribute("class", "select-items select-hide");
|
||||
for (j = 1; j < ll; j++) {
|
||||
c = document.createElement("DIV");
|
||||
c.innerHTML = selElmnt.options[j].innerHTML;
|
||||
c.addEventListener("click", function(e) {
|
||||
var y, i, k, s, h, sl, yl;
|
||||
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
|
||||
sl = s.length;
|
||||
h = this.parentNode.previousSibling;
|
||||
for (i = 0; i < sl; i++) {
|
||||
if (s.options[i].innerHTML == this.innerHTML) {
|
||||
s.selectedIndex = i;
|
||||
h.innerHTML = this.innerHTML;
|
||||
y = this.parentNode.getElementsByClassName("same-as-selected");
|
||||
yl = y.length;
|
||||
for (k = 0; k < yl; k++) {
|
||||
y[k].removeAttribute("class");
|
||||
}
|
||||
this.setAttribute("class", "same-as-selected");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
filterCourses(this);
|
||||
|
||||
h.click();
|
||||
});
|
||||
b.appendChild(c);
|
||||
}
|
||||
x[i].appendChild(b);
|
||||
a.addEventListener("click", function(e) {
|
||||
e.stopPropagation();
|
||||
closeAllSelect(this);
|
||||
this.nextSibling.classList.toggle("select-hide");
|
||||
this.classList.toggle("select-arrow-active");
|
||||
});
|
||||
}
|
||||
|
||||
function closeAllSelect(elmnt) {
|
||||
var x, y, i, xl, yl, arrNo = [];
|
||||
x = document.getElementsByClassName("select-items");
|
||||
y = document.getElementsByClassName("select-selected");
|
||||
xl = x.length;
|
||||
yl = y.length;
|
||||
for (i = 0; i < yl; i++) {
|
||||
if (elmnt == y[i]) {
|
||||
arrNo.push(i)
|
||||
} else {
|
||||
y[i].classList.remove("select-arrow-active");
|
||||
}
|
||||
}
|
||||
for (i = 0; i < xl; i++) {
|
||||
if (arrNo.indexOf(i)) {
|
||||
x[i].classList.add("select-hide");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* If the user clicks anywhere outside the select box,
|
||||
then close all select boxes: */
|
||||
document.addEventListener("click", closeAllSelect);
|
||||
$(".select-items div").each(function() {
|
||||
if($( this ).text() == $(".select-selected").text()) {
|
||||
$(this).addClass("same-as-selected");
|
||||
}
|
||||
});
|
||||
|
||||
function filterCourses(selectedItem) {
|
||||
|
||||
let filterGroup = $(selectedItem).closest(".progress-filter").data("topic");
|
||||
let selectedFilter = $(selectedItem).text().replace(" ", "-").toLowerCase();
|
||||
let carouselGroup = $('.courses-carousel[data-topic="' + filterGroup + '"]');
|
||||
|
||||
carouselGroup.slick('slickUnfilter');
|
||||
|
||||
if (selectedFilter != "all-courses") {
|
||||
carouselGroup.slick('slickFilter', `.${selectedFilter}`);
|
||||
}
|
||||
|
||||
}
|
||||
</script>{% endcomment %} -->
|
||||
|
||||
<script>
|
||||
window.location.replace('/app')
|
||||
</script>
|
||||
@ -0,0 +1,16 @@
|
||||
{% comment %} <script>
|
||||
if(window.location.pathname === '/app/courses/ab4f0c0b-e506-42df-9e81-e97da5fe7d5b'){
|
||||
window.location.replace('/app/catalog')
|
||||
}
|
||||
</script> {% endcomment %}
|
||||
{% include "header" %}
|
||||
<main class="np-main np-max-width np-page-container">
|
||||
<div class="np-hidden-mobile" id="course-desktop">
|
||||
{% include "course_desktop_view" %}
|
||||
</div>
|
||||
<div class="np-hidden-desktop" id="course-mobile">
|
||||
{% include "course_mobile_view" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
<script>
|
||||
window.location.replace('/app')
|
||||
</script>
|
||||
231
Custom_Templates/customer_templates/Crayon/homepage.html.liquid
Normal file
231
Custom_Templates/customer_templates/Crayon/homepage.html.liquid
Normal file
@ -0,0 +1,231 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
{% comment %}{% include "sub_navigation" %}{% endcomment %}
|
||||
{% comment %} https://s3.amazonaws.com/static.northpass.com/Crayon/acceleratorBadge.png {% endcomment %}
|
||||
{% comment %} https://s3.amazonaws.com/static.northpass.com/Crayon/activatorBadge.png {% endcomment %}
|
||||
{% comment %} https://s3.amazonaws.com/static.northpass.com/Crayon/architectBadge.png {% endcomment %}
|
||||
|
||||
{% assign architect_course_done = false %}
|
||||
{% assign activator_course_done = false %}
|
||||
{% assign accelerator_course_done = false %}
|
||||
|
||||
{% assign architect_course_in_progress = false %}
|
||||
{% assign activator_course_in_progress = false %}
|
||||
{% assign accelerator_course_in_progress = false %}
|
||||
|
||||
|
||||
{% assign architect_course_started = true %}
|
||||
{% assign activator_course_started = true %}
|
||||
{% assign accelerator_course_started = true %}
|
||||
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.name == 'Architect Certification Course'%}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign architect_course_done = true %}
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
{% assign architect_course_in_progress = true %}
|
||||
{% else %}
|
||||
{% assign architect_course_started = false %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if course.name == 'Activator Certification Course'%}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign activator_course_done = true %}
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
{% assign activator_course_in_progress = true %}
|
||||
{% else %}
|
||||
{% assign activator_course_started = false %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if course.name == 'Accelerator Certification Course'%}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign accelerator_course_done = true %}
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
{% assign accelerator_course_in_progress = true %}
|
||||
{% else %}
|
||||
{% assign accelerator_course_started = false %}
|
||||
{% endif %}
|
||||
{%endif%}
|
||||
{% endfor %}
|
||||
|
||||
<section class="dashboard-section">
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row np-flex-center heading">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-dashboard-header">
|
||||
<div class="np-resource-title"><span id="visitCount"></span>, {{current_person.first_name}}!
|
||||
|
||||
{% assign incomplete_course_count = 0 %}
|
||||
{% assign default_course = 'Architect Certification Course' %}
|
||||
|
||||
{% if architect_course_started == true and architect_course_done == false %}
|
||||
Ready to complete the Architect Certification Course?
|
||||
{% elsif activator_course_started == true and activator_course_done == false %}
|
||||
Ready to complete the Activator Certification Course?
|
||||
{% elsif accelerator_course_started == true and accelerator_course_done == false %}
|
||||
Ready to complete the Accelerator Certification Course?
|
||||
{% else %}
|
||||
{% if architect_course_done == false %}
|
||||
{% assign incomplete_course_count = incomplete_course_count | plus: 1 %}
|
||||
{% endif %}
|
||||
|
||||
{% if activator_course_done == false %}
|
||||
{% assign incomplete_course_count = incomplete_course_count | plus: 1 %}
|
||||
{% endif %}
|
||||
|
||||
{% if accelerator_course_done == false %}
|
||||
{% assign incomplete_course_count = incomplete_course_count | plus: 1 %}
|
||||
{% endif %}
|
||||
|
||||
{% if architect_course_done == true %}
|
||||
{% assign default_course = 'Activator Certification Course' %}
|
||||
{% endif %}
|
||||
|
||||
{% if incomplete_course_count > 1 and default_course != 'Architect Certification Course' %}
|
||||
Ready to complete the Accelerator Certification Course?
|
||||
{% elsif incomplete_course_count > 0 %}
|
||||
Ready to complete the {{ default_course }}?
|
||||
{% else %}
|
||||
{% if architect_course_done == true and activator_course_done == false and accelerator_course_done == false %}
|
||||
Ready to begin Accelerator Certification Course?
|
||||
{% elsif activator_course_done == true and accelerator_course_done == false and architect_course_done == false %}
|
||||
Ready to begin Architect Certification Course?
|
||||
{% elsif accelerator_course_done == true and activator_course_done == false and architect_course_done == false %}
|
||||
Ready to begin Architect Certification Course?
|
||||
{% else %}
|
||||
You've completed every available course. 🎉
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
</div>
|
||||
{% comment %}<div class="np-resource-subtitle">This is what’s relevant to you right now in Competitive Advantage Academy</div>{%endcomment%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row dashboard-section-courses">
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4">
|
||||
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.name == 'Activator Certification Course' %}
|
||||
<div class="np-md-flex-wrapper" style="text-align: center;">
|
||||
<div class="np-dashboard-resources-title course-progress">
|
||||
{% if course.progress == 0 %}
|
||||
⛔️ NOT STARTED
|
||||
{% elsif course.progress > 0 and course.progress < 100%}
|
||||
✍️ IN PROGRESS
|
||||
{% elsif course.progress == 100 %}
|
||||
🎉 COMPLETE
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% include 'cards_course' with course %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.name == 'Architect Certification Course' %}
|
||||
<div class="np-md-flex-wrapper" style="text-align: center;">
|
||||
<div class="np-dashboard-resources-title course-progress">
|
||||
{% if course.progress == 0 %}
|
||||
⛔️ NOT STARTED
|
||||
{% elsif course.progress > 0 and course.progress < 100%}
|
||||
✍️ IN PROGRESS
|
||||
{% elsif course.progress == 100 %}
|
||||
🎉 COMPLETE
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% include 'cards_course' with course %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.name == 'Accelerator Certification Course' %}
|
||||
<div class="np-md-flex-wrapper" style="text-align: center;">
|
||||
<div class="np-dashboard-resources-title course-progress">
|
||||
{% if course.progress == 0 %}
|
||||
⛔️ NOT STARTED
|
||||
{% elsif course.progress > 0 and course.progress < 100%}
|
||||
✍️ IN PROGRESS
|
||||
{% elsif course.progress == 100 %}
|
||||
🎉 COMPLETE
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% include 'cards_course' with course %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.dashboard-section, .np-dashboard {
|
||||
background: #89d9e1;
|
||||
}
|
||||
.course-progress {
|
||||
color: #fff;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.heading {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.np-resource-title {
|
||||
text-transform: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function incrementVisitCount() {
|
||||
var visitCount = getCookie('visitCount');
|
||||
if (visitCount) {
|
||||
visitCount = parseInt(visitCount) + 1;
|
||||
} else {
|
||||
visitCount = 1;
|
||||
}
|
||||
setCookie('visitCount', visitCount);
|
||||
|
||||
console.log(visitCount);
|
||||
|
||||
if (visitCount == 1) {
|
||||
document.getElementById('visitCount').innerHTML = "Welcome";
|
||||
}
|
||||
else document.getElementById('visitCount').innerHTML = "Welcome back";
|
||||
}
|
||||
|
||||
function getCookie(name) {
|
||||
var cookieName = name + "=";
|
||||
var decodedCookie = decodeURIComponent(document.cookie);
|
||||
var cookieArray = decodedCookie.split(';');
|
||||
for (var i = 0; i < cookieArray.length; i++) {
|
||||
var cookie = cookieArray[i];
|
||||
while (cookie.charAt(0) === ' ') {
|
||||
cookie = cookie.substring(1);
|
||||
}
|
||||
if (cookie.indexOf(cookieName) === 0) {
|
||||
return cookie.substring(cookieName.length, cookie.length);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function setCookie(name, value) {
|
||||
var expirationDate = new Date();
|
||||
expirationDate.setFullYear(expirationDate.getFullYear() + 1); // Ustawienie daty wygaśnięcia pliku cookie na za rok
|
||||
document.cookie = name + "=" + value + "; expires=" + expirationDate.toUTCString() + "; path=/";
|
||||
}
|
||||
|
||||
incrementVisitCount();
|
||||
</script>
|
||||
@ -0,0 +1,19 @@
|
||||
{% comment %}{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-learning-paths np-subpage-container np-max-width">
|
||||
<div class="np-learning-paths-main">
|
||||
<div class="np-resource-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .subtitle %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.available %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}{% endcomment %}
|
||||
|
||||
<script>
|
||||
window.location.replace('/app/courses/f1d39335-8ca2-4b6e-98c6-02b2144fb02a')
|
||||
// window.location.replace('/app/catalog')
|
||||
</script>
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
var year = new Date().getFullYear();
|
||||
var month = new Date().getMonth() + 1;
|
||||
var adress = window.location.hash
|
||||
var newAdress = 'https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&' + adress.slice(1).replaceAll('~space~' , '%20').replaceAll('~customyear~', year).replaceAll('~customonth~', month)
|
||||
console.log(newAdress)
|
||||
window.location.replace(newAdress)
|
||||
</script>
|
||||
@ -0,0 +1,231 @@
|
||||
|
||||
{% include "custom_header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="np-dashboard-header">
|
||||
<div class="np-resource-title">Hi {{current_person.first_name}}!</div>
|
||||
<div class="np-resource-subtitle">This is what's relevant to you right now
|
||||
in Crayon Onboarding Academy.</div>
|
||||
</div>
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-md-8">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.available %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-md-4 progress-section">
|
||||
<div class="np-dashboard-resources-title">Course Progress</div>
|
||||
{% include "widget_course_progress" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row dashboard-section-courses">
|
||||
<div class="col-xs-12">
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-md-flex-wrapper onboarding-wrapper">
|
||||
<div>
|
||||
</div>
|
||||
{%
|
||||
include "filter_by_progress",
|
||||
label: "Filter by Progress:",
|
||||
default_option: "All Courses",
|
||||
topic: "enrolled_category",
|
||||
%}
|
||||
</div>
|
||||
{%
|
||||
include "carousel_courses",
|
||||
items: courses.in_catalog,
|
||||
topic: "enrolled_category",
|
||||
%}
|
||||
{% else %}
|
||||
<div class="np-dashboard-resources-title" style="margin-bottom:19px;">
|
||||
Courses
|
||||
</div>
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
<div style="margin-bottom:3rem;">
|
||||
{% include "courses_zero_state", message: message %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row dashboard-section-events">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-dashboard-resources-title" style="margin-bottom: 5px;">
|
||||
Training Events
|
||||
</div>
|
||||
<div class="np-dashboard-resources-category" style="margin-bottom: 19px;">
|
||||
Discover online events to maximize your learning
|
||||
</div>
|
||||
{% if training_events.available.any? %}
|
||||
{%
|
||||
include "carousel_events",
|
||||
items: training_events.available,
|
||||
%}
|
||||
{% else %}
|
||||
<div style="margin-bottom:3rem;">
|
||||
{% include "training_events_zero_state" %}
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
@media screen and (max-width: 1024px) {
|
||||
.progress-section {
|
||||
padding-left: 0.5rem
|
||||
}
|
||||
}
|
||||
.np-dashboard {
|
||||
background: #fff;
|
||||
padding-top: 160px;
|
||||
}
|
||||
body {
|
||||
background: #fff;
|
||||
}
|
||||
.right-arrow {
|
||||
display: none !important;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-size: 2rem;
|
||||
margin-left: 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.left-arrow {
|
||||
display: none !important;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
font-size: 2rem;
|
||||
margin-left: -2rem;
|
||||
z-index: 11;
|
||||
cursor: pointer;
|
||||
}
|
||||
.np-resource-title {
|
||||
font-size: 40px;
|
||||
color: #000;
|
||||
}
|
||||
.np-resource-subtitle, .np-dashboard-resources-title, .np-dashboard-resources-category {
|
||||
color: #000;
|
||||
}
|
||||
.np-header {
|
||||
position: fixed;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.25);
|
||||
}
|
||||
.onboarding-wrapper {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// Creates the custom dropdown and dropdown functionality
|
||||
var x, i, j, l, ll, selElmnt, a, b, c;
|
||||
/* Look for any elements with the class “select-wrapper”: */
|
||||
x = document.getElementsByClassName("progress-filter");
|
||||
l = x.length;
|
||||
for (i = 0; i < l; i++) {
|
||||
selElmnt = x[i].getElementsByTagName("select")[0];
|
||||
ll = selElmnt.length;
|
||||
a = document.createElement("DIV");
|
||||
a.setAttribute("class", "select-selected");
|
||||
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
|
||||
x[i].appendChild(a);
|
||||
b = document.createElement("DIV");
|
||||
b.setAttribute("class", "select-items select-hide");
|
||||
for (j = 1; j < ll; j++) {
|
||||
c = document.createElement("DIV");
|
||||
c.innerHTML = selElmnt.options[j].innerHTML;
|
||||
c.addEventListener("click", function(e) {
|
||||
var y, i, k, s, h, sl, yl;
|
||||
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
|
||||
sl = s.length;
|
||||
h = this.parentNode.previousSibling;
|
||||
for (i = 0; i < sl; i++) {
|
||||
if (s.options[i].innerHTML == this.innerHTML) {
|
||||
s.selectedIndex = i;
|
||||
h.innerHTML = this.innerHTML;
|
||||
y = this.parentNode.getElementsByClassName("same-as-selected");
|
||||
yl = y.length;
|
||||
for (k = 0; k < yl; k++) {
|
||||
y[k].removeAttribute("class");
|
||||
}
|
||||
this.setAttribute("class", "same-as-selected");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
filterCourses(this);
|
||||
|
||||
h.click();
|
||||
});
|
||||
b.appendChild(c);
|
||||
}
|
||||
x[i].appendChild(b);
|
||||
a.addEventListener("click", function(e) {
|
||||
e.stopPropagation();
|
||||
closeAllSelect(this);
|
||||
this.nextSibling.classList.toggle("select-hide");
|
||||
this.classList.toggle("select-arrow-active");
|
||||
});
|
||||
}
|
||||
|
||||
function closeAllSelect(elmnt) {
|
||||
var x, y, i, xl, yl, arrNo = [];
|
||||
x = document.getElementsByClassName("select-items");
|
||||
y = document.getElementsByClassName("select-selected");
|
||||
xl = x.length;
|
||||
yl = y.length;
|
||||
for (i = 0; i < yl; i++) {
|
||||
if (elmnt == y[i]) {
|
||||
arrNo.push(i)
|
||||
} else {
|
||||
y[i].classList.remove("select-arrow-active");
|
||||
}
|
||||
}
|
||||
for (i = 0; i < xl; i++) {
|
||||
if (arrNo.indexOf(i)) {
|
||||
x[i].classList.add("select-hide");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* If the user clicks anywhere outside the select box,
|
||||
then close all select boxes: */
|
||||
document.addEventListener("click", closeAllSelect);
|
||||
$(".select-items div").each(function() {
|
||||
if($( this ).text() == $(".select-selected").text()) {
|
||||
$(this).addClass("same-as-selected");
|
||||
}
|
||||
});
|
||||
|
||||
function filterCourses(selectedItem) {
|
||||
|
||||
let filterGroup = $(selectedItem).closest(".progress-filter").data("topic");
|
||||
let selectedFilter = $(selectedItem).text().replace(" ", "-").toLowerCase();
|
||||
let carouselGroup = $('.courses-carousel[data-topic="' + filterGroup + '"]');
|
||||
|
||||
carouselGroup.slick('slickUnfilter');
|
||||
|
||||
if (selectedFilter != "all-courses") {
|
||||
carouselGroup.slick('slickFilter', `.${selectedFilter}`);
|
||||
}
|
||||
|
||||
}
|
||||
$(".np-sub-navigation-content-item-link:contains('Dashboard')").parent().addClass("np-sub-navigation-content-item-active")
|
||||
</script>
|
||||
514
Custom_Templates/customer_templates/Crayon/styles.css.liquid
Normal file
514
Custom_Templates/customer_templates/Crayon/styles.css.liquid
Normal file
@ -0,0 +1,514 @@
|
||||
@font-face {
|
||||
font-family: 'Jost', sans-serif !important;
|
||||
src: url('https://fonts.googleapis.com/css2?family=Jost:wght@300&display=swap');
|
||||
}
|
||||
body, html, div {
|
||||
font-family: 'Jost', sans-serif !important;
|
||||
}
|
||||
|
||||
.np-card-content{
|
||||
max-height: 140px;
|
||||
}
|
||||
|
||||
@media (max-width: 1199px){
|
||||
.np-card-content{
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.np-course-card-button{
|
||||
width: 100%;
|
||||
font-size: 1.3rem;
|
||||
padding: 25px;
|
||||
border: 2px solid #000;
|
||||
|
||||
}
|
||||
|
||||
.course-button-container {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.purple-btn {
|
||||
background: #bc49dd;
|
||||
}
|
||||
|
||||
.orange-btn {
|
||||
background: #ff6d09;
|
||||
}
|
||||
|
||||
.red-btn {
|
||||
background: #d94a66;
|
||||
}
|
||||
|
||||
.onboarding-course-title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.onboarding-course-subtitle {
|
||||
color:white;
|
||||
}
|
||||
|
||||
.onboarding-course-card {
|
||||
background: #0538BF;
|
||||
}
|
||||
|
||||
.onboarding-course-button {
|
||||
background-color: #89D9E1;
|
||||
color: #0538BF;
|
||||
}
|
||||
|
||||
.np-card-content-progress {
|
||||
color: white;
|
||||
}
|
||||
/* ------------------------------------------------------------------------------------------------------ */
|
||||
/* Login Page Styles */
|
||||
.np-open-access{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sign-up-body{
|
||||
align-items: center;
|
||||
background: #0538BF;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
margin: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sign-up-body-content-container{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.sign-in-text-content-wrapper{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-logo{
|
||||
height: 100px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-text{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.welcome-header{
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.welcome-subheader{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.login-emoji-desktop{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-form-wrapper{
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.login-input-label{
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.login-input{
|
||||
background: #FEC311;
|
||||
border: 3px solid #FFFFFF;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.login-button{
|
||||
background: #FEC311;
|
||||
border: 2px solid #FFFFFF;
|
||||
font-size: 30px;
|
||||
margin-top: 30px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.np-box-content-container{
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.login-text-content-wrapper{
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.login-logo{
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.login-text{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.welcome-header{
|
||||
font-size: 62px;
|
||||
}
|
||||
|
||||
.welcome-subheader{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.login-emoji-mobile{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-emoji-desktop{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.login-form-wrapper{
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.login-form{
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 1000px){
|
||||
.login-body-content-container{
|
||||
padding: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px){
|
||||
.welcome-header{
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
.welcome-subheader{
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item-link,
|
||||
.np-sub-navigation-content-item-inactive,
|
||||
.np-sub-navigation-content-item-active,
|
||||
.np-sub-navigation-content-item-icon {
|
||||
color: #2DC3D0;
|
||||
}
|
||||
|
||||
.np-sub-navigation {
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------------------------------------------ */
|
||||
/* Achievements Panel */
|
||||
/* .np-dashboard-achievements-panel{
|
||||
background: #ffffff;
|
||||
height: 8rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.np-dashboard-achievements-card{
|
||||
background: #F3F8FF;
|
||||
color: #1C6FE8;
|
||||
height: 6rem;
|
||||
width: 5.25rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.np-dashboard-achievements-card-text{
|
||||
font-size: 0.75rem;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
.np-dashboard-medal-card{
|
||||
background: #3f0c59;
|
||||
height: 6rem;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
} */
|
||||
|
||||
/* .np-dashboard-medal-icon{
|
||||
margin-right: -4rem;
|
||||
} */
|
||||
|
||||
.custom-course-description {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
@media (min-width: 395px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 410px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 425px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 440px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -7rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 465px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 495px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -10rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 510px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -11rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 525px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -12rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 540px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -13rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 555px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -14rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 570px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -15rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 595px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -16rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 610px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -17rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 625px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -18rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -19rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 655px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -20rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 670px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -21rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 695px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -22rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 710px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -23rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 725px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -24rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 740px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 755px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -26rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 830px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 860px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 925px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 975px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 990px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1005px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1030px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -7rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1055px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1125px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1150px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -10rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1185px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -11rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: 0rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1250px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1300px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1350px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1675px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2200px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2550px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 3050px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: 0rem;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
{% comment %}{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-training-events np-subpage-container np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-10">
|
||||
<div class="np-resource-title">
|
||||
{% t .title %}
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .subtitle %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-2">
|
||||
{% include "training_events_filter" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "training_events_index" %}
|
||||
</main>
|
||||
{% include "footer" %}{% endcomment%}
|
||||
|
||||
<script>
|
||||
window.location.replace('/app')
|
||||
</script>
|
||||
Reference in New Issue
Block a user