talkspace templates added
This commit is contained in:
Norm Rasmussen
BIN
NP_Custom_Templates/customer_templates/.DS_Store
vendored
BIN
NP_Custom_Templates/customer_templates/.DS_Store
vendored
Binary file not shown.
BIN
NP_Custom_Templates/customer_templates/SPS_Commerce/.DS_Store
vendored
Normal file
BIN
NP_Custom_Templates/customer_templates/SPS_Commerce/.DS_Store
vendored
Normal file
Binary file not shown.
@ -0,0 +1,57 @@
|
||||
{% assign categories = '' | split: '' %}
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | split: '!@#$%^&*()' %}
|
||||
{% assign categories = categories | concat: cat_name %}
|
||||
{% endfor %}
|
||||
{% assign compressed_image_url = course.image_url | replace: "resize=width:820,height:500", "resize=width:500,height:305" %}
|
||||
<div class="np-card np-grid-spacing col-xs-12 col-sm-6 col-md-4" filter-type='co' category-name='{{categories | join: '+'}}'>
|
||||
<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="{{ compressed_image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<p class='categories'>
|
||||
{% for category in course.categories %}
|
||||
{{category.name}}
|
||||
{% endfor %}
|
||||
</p>
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<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" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.categories {
|
||||
margin: 0;
|
||||
}
|
||||
.np-card {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-grid-spacing {
|
||||
padding-left: 3%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
src="{{ learning_path.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
{% capture learning_path_path %}{% route learning_path, id: learning_path.id %}{% endcapture %}
|
||||
<a class="np-button np-button-wide" href="{{ learning_path_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,44 @@
|
||||
{% assign categories = '' | split: '' %}
|
||||
{% for cat in learning_path.categories %}
|
||||
{% assign cat_name = cat.name | split: '!@#$%^&*()' %}
|
||||
{% assign categories = categories | concat: cat_name %}
|
||||
{% endfor %}
|
||||
{% assign compressed_image_url = learning_path.image_url | replace: "resize=width:820,height:500", "resize=width:500,height:305" %}
|
||||
<div class="np-card np-grid-spacing col-xs-12 col-sm-6 col-md-4" filter-type='lp' category-name='{{categories | join: '+'}}'>
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
src="{{ compressed_image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<p class='categories'>
|
||||
{% for category in learning_path.categories %}
|
||||
{{category.name}}
|
||||
{% endfor %}
|
||||
</p>
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
{% capture learning_path_path %}{% route learning_path, id: learning_path.id %}{% endcapture %}
|
||||
<a class="np-button np-button-wide" href="{{ learning_path_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.categories {
|
||||
margin: 0;
|
||||
}
|
||||
.np-card {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,121 @@
|
||||
<div class='np-card'>
|
||||
<div class='event-header'>
|
||||
<div class='event-header-left'>
|
||||
<i class="far fa-thin fa-users"></i>
|
||||
</div>
|
||||
<div class='event-header-right'>
|
||||
<div class='event-header-right-type'>
|
||||
ZoomWebinar
|
||||
</div>
|
||||
<div class='event-header-right-title'>
|
||||
{{ training_event.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='event-sessions'>
|
||||
{% assign session_number = 0%}
|
||||
{% for session in training_event.sessions limit: 2 %}
|
||||
{% assign session_number = session_number | plus: 1 %}
|
||||
<div class='event-session'>
|
||||
<div class='event-session-number'>
|
||||
Session {{session_number}}
|
||||
</div>
|
||||
<a class='event-session-date' href="{% route training_session, id: session.id %}">
|
||||
{{ session.month }} {{ session.day }} at {{ session.starts }} {{ session.time_zone }}
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if training_event.sessions.size > 2 %}
|
||||
{% assign third_session = training_event.sessions | slice: 2 | map: 'id' %}
|
||||
<a class='event-additional-sessions' href="{% route training_session, id: third_session %}">
|
||||
{{ training_event.sessions.size | minus: 2 }} additional sessions
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<a class='event-button' href="{% route training_session, id: training_event.sessions.first.id %}">Select</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.row .np-card {
|
||||
border: 1px solid #ccc;
|
||||
padding: 35px;
|
||||
}
|
||||
.event-header {
|
||||
display: flex;
|
||||
padding-bottom: 25px;
|
||||
height: 115px;
|
||||
}
|
||||
.event-header-left {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.fa-users {
|
||||
font-size: 44px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.event-header-right-type {
|
||||
color: #3b3f3d;
|
||||
font-size: 18px;
|
||||
}
|
||||
.event-header-right-title {
|
||||
color: #3b3f3d;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.event-sessions {
|
||||
height: 160px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.event-session {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.event-session-number {
|
||||
color: #606060;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
.event-session-date {
|
||||
color: #9b4b87;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
}
|
||||
.event-session-date:hover {
|
||||
color: #4b2346;
|
||||
}
|
||||
.event-additional-sessions {
|
||||
color: #9b4b87;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.event-additional-sessions:hover {
|
||||
color: #4b2346;
|
||||
}
|
||||
.event-button {
|
||||
background: #9b4b87;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 10px 20px;
|
||||
line-height: 39px;
|
||||
min-height: 30px;
|
||||
text-align: center;
|
||||
margin-bottom: -10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.event-button:hover {
|
||||
background: #4b2346
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.row .np-card {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 450px) {
|
||||
.row .np-card {
|
||||
width: 90%;
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<div class="np-card-container">
|
||||
<div class="np-resource-header np-course-header np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
</div>
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
{% include "course_description" %}
|
||||
{% if course.categories.any? %}
|
||||
{% include "course_categories" %}
|
||||
{% endif %}
|
||||
{% if course.instructors.any? %}
|
||||
{% include "course_instructors" %}
|
||||
{% endif %}
|
||||
{% if course.events.any? %}
|
||||
{% include "course_events" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-6">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,69 @@
|
||||
<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-text-subtitle' style='padding-bottom: 15px;'>
|
||||
(Click on section title to expand and view learning activities)
|
||||
</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">
|
||||
<i class="fa-solid fa-caret-right section-arrow"></i>
|
||||
<i class="fa-solid fa-caret-down section-arrow np-hidden"></i>
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<ol class="np-course-outline-content-activity np-hidden">
|
||||
{% for activity in section.activities %}
|
||||
|
||||
<li class="np-course-outline-content-activity-list">
|
||||
{% if activity.completed? %}
|
||||
<i class="fas fa-circle np-course-outline-content-activity-icon np-button-color"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}
|
||||
{% endif %}
|
||||
<div class="np-button-background-color np-course-outline-content-activity-list-bar"></div>
|
||||
{% else %}
|
||||
<i class="far fa-circle np-course-outline-content-activity-icon"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
|
||||
{% endif %}
|
||||
<div class="np-course-outline-content-activity-list-bar"></div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-course-outline-content-section-name {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
.np-course-outline-content > *, .np-course-outline-content-activity-list > *, .np-course-outline-title {
|
||||
color: #9b4b87;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.np-course-outline-content-activity-icon {
|
||||
color: #d4d4d4;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.onload = function() {
|
||||
$('.np-course-outline-content-section-name').click(function() {
|
||||
$(this).children('.section-arrow').toggleClass('np-hidden');
|
||||
$(this).siblings('.np-course-outline-content-activity').toggleClass('np-hidden');
|
||||
});
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,70 @@
|
||||
<footer class="np-footer">
|
||||
<div class="np-footer-top">
|
||||
{% if website_footer.show_navigation_links? %}
|
||||
<div class="np-footer-navigation">
|
||||
<ul class="np-footer-navigation-list">
|
||||
{% for website_navigation in navigations.footer_navigations %}
|
||||
<li class="np-footer-navigation-item">
|
||||
<a
|
||||
class="np-footer-navigation-link np-button-color"
|
||||
href="{{ website_navigation.path }}"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if current_school.logo_url %}
|
||||
<h2 class="np-footer-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-footer-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h2>
|
||||
{% else %}
|
||||
<div class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.np-footer-navigation-list {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.np-footer {
|
||||
padding: 0.5rem 4% 0;
|
||||
border-top: 1px solid #ededed !important;
|
||||
}
|
||||
.np-footer-navigation-link {
|
||||
padding: 0 1.25rem 1.25rem;
|
||||
}
|
||||
.np-footer-navigation-link:hover {
|
||||
color: #4b2346;
|
||||
}
|
||||
.np-powered-by {
|
||||
padding-bottom: 0.75rem;
|
||||
background: white;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-footer-navigation {
|
||||
margin: 0 -1.25rem;
|
||||
}
|
||||
.np-footer-logo {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.np-footer-navigation-link {
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,8 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<link rel="stylesheet" media="all" href="https://s3.amazonaws.com/spscops/trainingcenter/styles/site-styles.css">
|
||||
<link href='https://s3.amazonaws.com/spscops/trainingcenter/styles/SourceSansPro-font-styles.css' rel='stylesheet' type='text/css'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,900,600' rel='stylesheet' type='text/css'>
|
||||
<script src="https://kit.fontawesome.com/9d157d7558.js" crossorigin="anonymous"></script>
|
||||
@ -0,0 +1,429 @@
|
||||
<header class="np-header np-header-color" style='height: 50px;'>
|
||||
<div class="np-header-content">
|
||||
<div class='header-desktop-left'>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img src="https://schoolkeep-production.s3.amazonaws.com/wysiwyg/c4231bd9-2caa-4eca-bdaa-92cd69c0a35f/20180105100241_logo_1.png" alt="{{ current_school.name }}" style='display: flex;' class='logo-image'>
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class='header-desktop-right np-hidden-mobile-new'>
|
||||
<div class="np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
style='font-weight: 700;'
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% if current_person.signed_in? %}
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search" style="background: white; border-radius: 4px;" class='header-search-form' id='header-search-form'>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Search by keyword"
|
||||
/>
|
||||
<button class="far fa-search header-search-button" type="submit" form='header-search-form'></button>
|
||||
</form>
|
||||
<div class="np-hidden-mobile-new 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
|
||||
style='color: white; font-weight: 700;'
|
||||
>
|
||||
{{ current_person.name }}
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
aria-label="{% t shared.sign_in %}"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class='np-header-right-mobile np-hidden-desktop-new'>
|
||||
<i class="mobile-search-button far fa-search" id='mobile-search-button'></i>
|
||||
<i class="mobile-menu-button fas fa-bars" id='mobile-menu-button'></i>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class='bottom-header-search np-hidden np-hidden-desktop-new' id='menu-mobile-search-menu'>
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search" style="background: white; border-radius: 4px;" class='menu-mobile-search-form' id='menu-mobile-search-form'>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="menu-mobile-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Search by keyword"
|
||||
/>
|
||||
<button class="far fa-search menu-mobile-search-button" type="submit" form='menu-mobile-search-form'></button>
|
||||
</form>
|
||||
<i class="menu-mobile-close fas fa-times"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-desktop-new np-hidden" id='mobile-menu-menu'>
|
||||
<i class="mobile-menu-close fas fa-times" id='mobile-menu-close'></i>
|
||||
<ul class="mobile-menu-list">
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class='mobile-menu-list-li'>
|
||||
<a href="{{ website_navigation.path }}" class='mobile-menu-list-element'>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<li class='mobile-menu-list-li'><a href="/app/account" class='mobile-menu-list-element'>My Profile</a></li>
|
||||
<li style='border-bottom: 1px solid #1a1a1a;'></li>
|
||||
<li class='mobile-menu-list-li'><a href="{% route logout %}" data-method="delete" rel="nofollow" class='mobile-menu-list-element'>Log Out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{% include "messages" %}
|
||||
<div class="main_site">
|
||||
|
||||
<style>
|
||||
.np-header-content {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header-desktop-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.np-header-search {
|
||||
align-self: center;
|
||||
}
|
||||
.np-header-right-mobile {
|
||||
display: flex;
|
||||
}
|
||||
.np-header-search-icon:before {
|
||||
font-weight: 700;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.mobile-menu-button {
|
||||
font-size: 1.5rem;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mobile-search-button {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mobile-search-button:before {
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
align-self: center;
|
||||
}
|
||||
.bottom-header-search {
|
||||
background: #00aae5;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-search-form {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
width: 20%;
|
||||
margin: auto;
|
||||
}
|
||||
.header-search-input {
|
||||
padding-left: 15px;
|
||||
border: none;
|
||||
width: 100%;
|
||||
background: none;
|
||||
}
|
||||
.header-search-input:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
.header-search-icon {
|
||||
right: .75rem;
|
||||
top: 0.6rem;
|
||||
|
||||
}
|
||||
.header-search-icon:before {
|
||||
color: darkgray;
|
||||
}
|
||||
.header-search-button {
|
||||
width: 60px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: gray;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-mobile-search-form {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
}
|
||||
.menu-mobile-search-input {
|
||||
padding-left: 15px;
|
||||
border: none;
|
||||
width: 100%;
|
||||
background: none;
|
||||
}
|
||||
.menu-mobile-search-input:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
.menu-mobile-search-icon {
|
||||
right: .75rem;
|
||||
top: 0.6rem;
|
||||
}
|
||||
.menu-mobile-search-icon:before {
|
||||
color: darkgray;
|
||||
}
|
||||
.menu-mobile-search-button {
|
||||
width: 60px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: gray;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu-mobile-close {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
padding: 15px;
|
||||
font-size: 20px;
|
||||
padding: auto;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#mobile-menu-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -256px;
|
||||
width: 256px;
|
||||
background: #3b3f3d;
|
||||
z-index: 10000;
|
||||
height: 100%;
|
||||
pointer-events: all;
|
||||
}
|
||||
.mobile-menu-close {
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
top: 13px;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
}
|
||||
.mobile-menu-list {
|
||||
list-style-type: none;
|
||||
margin-top: 40px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.mobile-menu-list-element {
|
||||
color: #ccc;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
.mobile-menu-list-li:hover * {
|
||||
color: #ffffff;
|
||||
text-shadow: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mobile-menu-list-li:hover {
|
||||
background: #9b4b87;
|
||||
}
|
||||
.mobile-menu-list-li {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
.np-header-desktop-nav-list {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
@media screen and (min-width: 1056px) {
|
||||
.np-hidden-desktop-new {
|
||||
display: none !important;
|
||||
}
|
||||
.np-header-search-input {
|
||||
background:#fff;
|
||||
border:2px solid #bac4ca;
|
||||
border-radius:4px;
|
||||
color:#486776;
|
||||
font-size:15px;
|
||||
opacity:1;
|
||||
outline:none;
|
||||
padding:0 1.5rem 0 1rem;
|
||||
width:90%;
|
||||
height: 2.5rem;
|
||||
}
|
||||
.np-header-search-input::placeholder {
|
||||
color: black;
|
||||
}
|
||||
.np-header-search-input:focus {
|
||||
width: 90%;
|
||||
padding:0 1.5rem 0 1rem;
|
||||
}
|
||||
}
|
||||
@media (min-width:1643px) and (max-width:1738px) {
|
||||
.header-search-form {
|
||||
width: 14%;
|
||||
}
|
||||
}
|
||||
@media (min-width:1472px) and (max-width:1610px) {
|
||||
.header-search-form {
|
||||
width: 14%;
|
||||
}
|
||||
}
|
||||
@media (min-width:0px) and (max-width:1311px) {
|
||||
.header-search-form {
|
||||
width: 14%;
|
||||
}
|
||||
.header-search-input::placeholder {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
@media (min-width:1472px) and (max-width:1643px) {
|
||||
.np-header-desktop-nav-item {
|
||||
padding: 1rem 0.5rem;
|
||||
}
|
||||
.np-header-avatar-button {
|
||||
margin: 0 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
@media (min-width:1472px) and (max-width:1550px) {
|
||||
.np-header-desktop-nav-link {
|
||||
font-size: 14px;
|
||||
}
|
||||
.np-header-avatar-button {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@media (min-width:1056px) and (max-width:1472px) {
|
||||
.np-header-content {
|
||||
flex-direction: column;
|
||||
align-items: unset;
|
||||
}
|
||||
.np-header {
|
||||
height: 100px !important;
|
||||
}
|
||||
.np-header-logo {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.header-desktop-left {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.header-desktop-right {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.np-header-desktop-nav-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width:1056px) and (max-width:1220px) {
|
||||
.np-header-desktop-nav-item {
|
||||
padding: 1rem 0.5rem;
|
||||
}
|
||||
.np-header-avatar-button {
|
||||
margin: 0 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
@media (min-width:1056px) and (max-width:1118px) {
|
||||
.np-header-desktop-nav-link {
|
||||
font-size: 14px;
|
||||
}
|
||||
.np-header-avatar-button {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1055px) {
|
||||
.np-hidden-mobile-new {
|
||||
display: none !important;
|
||||
}
|
||||
.np-header-content {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 445px) {
|
||||
.logo-image {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
.menu-mobile-search-form {
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var a = $("#mobile-menu-menu").children()
|
||||
var a = a.add($("#mobile-menu-menu"))
|
||||
$("#mobile-search-button").click(function() {
|
||||
$("#menu-mobile-search-menu").toggleClass('np-hidden');
|
||||
});
|
||||
$(".menu-mobile-close").click(function() {
|
||||
$("#menu-mobile-search-menu").toggleClass('np-hidden');
|
||||
});
|
||||
$("#mobile-menu-button").click(function() {
|
||||
$("#mobile-menu-menu").toggleClass('np-hidden');
|
||||
window.onscroll = function () { window.scrollTo(0, 0); };
|
||||
$('body').css({position: 'relative', left: '-256px'});
|
||||
$("#mobile-menu-menu")
|
||||
$('body:not(a)').css({pointerEvents: 'none', filter: 'grayscale(40%)'});
|
||||
})
|
||||
$('#mobile-menu-close').click(function(){
|
||||
$('body').css({position: '', left: '', filter: ''});
|
||||
$('body:not(a)').css({pointerEvents: ''});
|
||||
window.onscroll = function() {}
|
||||
$("#mobile-menu-menu").toggleClass('np-hidden');
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,55 @@
|
||||
{% if learning_path.enrolled? and course.unlocked? %}
|
||||
<a
|
||||
class="np-learning-path-outline-item np-card-container"
|
||||
href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
|
||||
>
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
{% if course.instructors %}
|
||||
<div class="np-learning-path-outline-caption">
|
||||
{{ course.instructors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-learning-path-outline-progress
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
</div>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,52 @@
|
||||
{% if learning_path.enrolled? and training_session.unlocked? %}
|
||||
<a
|
||||
class="np-learning-path-outline-item np-card-container"
|
||||
href="{% route training_session, id: training_session.id %}"
|
||||
>
|
||||
<div class="np-card-content np-card-padding">
|
||||
<div class="np-events-content-date np-button-background-color">
|
||||
<div class="np-events-content-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-events-content-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
|
||||
<div class="np-learning-path-outline-caption">{{ training_session.instructors }}</div>
|
||||
<div class="np-events-content-time np-learning-path-outline-time np-button-color">
|
||||
{{ training_session.time }} {{ training_session.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% if training_session.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-outline-item np-card-container np-learning-path-outline-inactive-item">
|
||||
<div class="np-card-content np-card-padding">
|
||||
<div class="np-events-content-date np-button-background-color">
|
||||
<div class="np-events-content-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-events-content-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
|
||||
<div class="np-learning-path-outline-caption">{{ training_session.caption }}</div>
|
||||
</div>
|
||||
{% if training_session.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,16 @@
|
||||
{% if learning_paths.available.any? %}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for learning_path in learning_paths.available %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,41 @@
|
||||
<div class="np-dashboard-resources">
|
||||
{% if training_events.available.any? %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for training_event in training_events.available %}
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 event-card">
|
||||
{% include "cards_training_event" with training_event %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<style>
|
||||
.event-card {
|
||||
padding: 1rem 3rem;
|
||||
}
|
||||
@media screen and (max-width: 1450px) {
|
||||
.event-card {
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.event-card {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
.event-card {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 350px) {
|
||||
.event-card {
|
||||
padding: 0.5rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,34 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="np-catalog-header-wrapper">
|
||||
<div class="np-catalog-header">
|
||||
<div class="np-resource-title">{{ catalog.headline }}</div>
|
||||
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
|
||||
</div>
|
||||
{% capture label %}{% t shared.filters.by_category %}{% endcapture %}
|
||||
|
||||
{% if courses.in_catalog.any? %}
|
||||
{%
|
||||
include "filter_dropdown",
|
||||
filters: courses.filters,
|
||||
key: "category_uuid",
|
||||
label: label
|
||||
%}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% include "courses_catalog" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-dashboard {
|
||||
background: white;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-grid-spacing {
|
||||
padding-left: 3%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,60 @@
|
||||
{% include "header_minimal" %}
|
||||
<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>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-image: url(https://s3.amazonaws.com/static.northpass.com/SPS/sps-background.gif);
|
||||
}
|
||||
.np-card-padding-large {
|
||||
box-shadow: none;
|
||||
}
|
||||
.np-card-container,
|
||||
.np-card-container-training-session {
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
}
|
||||
.np-learning-path-outline-icon {
|
||||
align-self: center;
|
||||
font-size: 40px;
|
||||
color: #9b4b87;
|
||||
}
|
||||
.np-box-header {
|
||||
height: 80px;
|
||||
}
|
||||
.np-powered-by {
|
||||
background: none;
|
||||
}
|
||||
.np-card-container, .np-card-container-training-session {
|
||||
background: none;
|
||||
}
|
||||
.np-top-cta {
|
||||
background: rgba(229, 233, 235, 0.5);
|
||||
}
|
||||
.np-card-text {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.np-course-outline {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
@media screen and (max-width: 835px) {
|
||||
.col-sm-6 {
|
||||
max-width: 45%;
|
||||
}
|
||||
.np-card-padding, .np-card-padding-dynamic {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 765px) {
|
||||
.np-box-header {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,291 @@
|
||||
{% 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='my-webinars'>
|
||||
<div class='section-title'>
|
||||
My Webinars
|
||||
</div>
|
||||
{% if training_events.enrolled and training_events.enrolled.size > 0 %}
|
||||
{% for training_event in training_events.enrolled %}
|
||||
{% for session in training_event.sessions %}
|
||||
{% if session.registered? %}
|
||||
<div class='dashboard-event'>
|
||||
On {{ session.month }} {{ session.day }} at {{ session.starts }} {{ session.time_zone }} is your {{ session.title }} event that is being held online
|
||||
<a href='{{ session.session_url }}' class='dashboard-event-link'>Join</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class='section-none-text'>
|
||||
You haven't registered for any webinars yet.
|
||||
</div>
|
||||
<button class='section-none-button'>
|
||||
<a class="section-none-link" href="/app/training_events">
|
||||
Discover Webinars
|
||||
</a>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class='my-paths'>
|
||||
<div class='section-title'>
|
||||
My Paths
|
||||
</div>
|
||||
<div class='section-subtitle'>
|
||||
Learning Paths in which you're currently enrolled
|
||||
</div>
|
||||
{% if learning_paths.enrolled and learning_paths.enrolled.size > 0 %}
|
||||
<div class='section-content'>
|
||||
<div class='filter-section'>
|
||||
<div class='filter-title'>Filter by:</div>
|
||||
{% assign lp_categories = '' | split: '' %}
|
||||
{% for lp in learning_paths.enrolled %}
|
||||
{% for cat in lp.categories %}
|
||||
{% assign cat_name = cat.name | split: '!@#$%^&*()' %}
|
||||
{% assign lp_categories = lp_categories | concat: cat_name %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% assign lp_categories = lp_categories | uniq %}
|
||||
<div class='filter-element filter-element-selected' filter-type='lp' category-name='none'>
|
||||
All
|
||||
</div>
|
||||
{% for cat in lp_categories %}
|
||||
<div class='filter-element' filter-type='lp' category-name='{{cat}}'>
|
||||
{{cat}}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class='tiles-section'>
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
{% include 'cards_learning_path_new' with learning_path %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class='section-none-text'>
|
||||
You haven't enrolled into any learning_paths yet.
|
||||
</div>
|
||||
<button class='section-none-button'>
|
||||
<a class="section-none-link" href="/app/learning_paths">
|
||||
Discover Paths
|
||||
</a>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class='my-courses'>
|
||||
<div class='section-title'>
|
||||
My Courses
|
||||
</div>
|
||||
<div class='section-subtitle'>
|
||||
Courses in which you're currently enrolled
|
||||
</div>
|
||||
{% if courses.enrolled and courses.enrolled.size > 0 %}
|
||||
<div class='section-content'>
|
||||
<div class='filter-section'>
|
||||
<div class='filter-title'>Filter by:</div>
|
||||
{% assign lp_categories = '' | split: '' %}
|
||||
{% for lp in courses.enrolled %}
|
||||
{% for cat in lp.categories %}
|
||||
{% assign cat_name = cat.name | split: '!@#$%^&*()' %}
|
||||
{% assign lp_categories = lp_categories | concat: cat_name %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% assign lp_categories = lp_categories | uniq %}
|
||||
<div class='filter-element filter-element-selected' filter-type='co' category-name='none'>
|
||||
All
|
||||
</div>
|
||||
{% for cat in lp_categories %}
|
||||
<div class='filter-element' filter-type='co' category-name='{{cat}}'>
|
||||
{{cat}}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class='tiles-section'>
|
||||
{% for course in courses.enrolled %}
|
||||
{% include 'cards_course_new' with course %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class='section-none-text'>
|
||||
You haven't enrolled into any courses yet.
|
||||
</div>
|
||||
<button class='section-none-button'>
|
||||
<a class="section-none-link" href="/app/catalog">
|
||||
Discover Courses
|
||||
</a>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-dashboard {
|
||||
background: white;
|
||||
}
|
||||
.row {
|
||||
flex-direction: column;
|
||||
margin-right: -1rem;
|
||||
margin-left: -1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
.tiles-section {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.section-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-top: 1px solid #ededed !important;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.section-title {
|
||||
margin-top: 30px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 30px;
|
||||
margin-bottom: 15px;
|
||||
color: #444;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
margin-bottom: 45px;
|
||||
color: #444;
|
||||
}
|
||||
.section-none-text {
|
||||
margin-bottom: 15px;
|
||||
color: #606060;
|
||||
font-size: 16px;
|
||||
}
|
||||
.section-none-button {
|
||||
background: #9b4b87;
|
||||
color: white;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
min-height: 30px;
|
||||
line-height: 39px;
|
||||
margin: 10px 0
|
||||
}
|
||||
.section-none-button:hover {
|
||||
background: #4b2346 !important;
|
||||
}
|
||||
.section-none-link {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
.section-none-link:hover {
|
||||
color: white;
|
||||
}
|
||||
.dashboard-event {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.dashboard-event-link {
|
||||
color: #9b4b87;
|
||||
margin-left: 15px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.dashboard-event-link:hover {
|
||||
color: #4b2346;
|
||||
}
|
||||
.filter-section {
|
||||
width: 25%;
|
||||
}
|
||||
.filter-element {
|
||||
color: #9b4b87;
|
||||
font-size: 18px;
|
||||
margin-top: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.filter-element:hover {
|
||||
color: #4b2346;
|
||||
}
|
||||
.filter-element-selected {
|
||||
font-weight: 700;
|
||||
}
|
||||
.filter-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@media (min-width:1200px) and (max-width:1640px) {
|
||||
.row .np-card {
|
||||
padding: 0 1rem 2rem;
|
||||
}
|
||||
}
|
||||
@media (min-width:768px) and (max-width:1200px) {
|
||||
.row .np-card {
|
||||
padding: 0 0.7rem 1.4rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1400px) {
|
||||
.filter-section {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.section-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
.filter-section {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.np-subpage-container {
|
||||
padding:20px 4% 40px;
|
||||
}
|
||||
.my-webinars {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid #ededed !important;
|
||||
}
|
||||
.my-paths {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid #ededed !important;
|
||||
}
|
||||
.my-courses {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid #ededed !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$('[filter-type]').each(function(x){
|
||||
$(this).attr('category-name', $(this).attr('category-name').replaceAll(' ', '').replaceAll('+', ' '))
|
||||
})
|
||||
$('.filter-element[filter-type="co"]').click(function(){
|
||||
$('.filter-element[filter-type="co"]').removeClass('filter-element-selected');
|
||||
$(this).toggleClass('filter-element-selected');
|
||||
if($(this).attr('category-name')=='none') {
|
||||
$('.np-card[filter-type="co"]').show()
|
||||
}
|
||||
else {
|
||||
$('.np-card[filter-type="co"]').hide();
|
||||
$('.np-card[category-name~='+$(this).attr('category-name')+'][filter-type="co"]').show()
|
||||
}
|
||||
})
|
||||
$('.filter-element[filter-type="lp"]').click(function(){
|
||||
$('.filter-element[filter-type="lp"]').removeClass('filter-element-selected');
|
||||
$(this).toggleClass('filter-element-selected');
|
||||
if($(this).attr('category-name')=='none') {
|
||||
$('.np-card[filter-type="lp"]').show()
|
||||
}
|
||||
else {
|
||||
$('.np-card[filter-type="lp"]').hide();
|
||||
$('.np-card[category-name~='+$(this).attr('category-name')+'][filter-type="lp"]').show()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,3 @@
|
||||
<script>
|
||||
window.location.replace("/app/dashboard")
|
||||
</script>
|
||||
@ -0,0 +1,50 @@
|
||||
{% include "header_minimal" %}
|
||||
<main class="np-main np-max-width np-page-container">
|
||||
<div class="np-hidden-mobile" id="learning-path-desktop">
|
||||
{% include "learning_path_desktop_view" %}
|
||||
</div>
|
||||
<div class="np-hidden-desktop" id="learning-path-mobile">
|
||||
{% include "learning_path_mobile_view" %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-image: url(https://s3.amazonaws.com/static.northpass.com/SPS/sps-background.gif);
|
||||
}
|
||||
.np-card-padding-large {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
box-shadow: none;
|
||||
}
|
||||
.np-card-container,
|
||||
.np-card-container-training-session {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
}
|
||||
.np-learning-path-outline-icon {
|
||||
align-self: center;
|
||||
font-size: 40px;
|
||||
color: #9b4b87;
|
||||
}
|
||||
.np-box-header {
|
||||
height: 80px;
|
||||
}
|
||||
.np-powered-by {
|
||||
background: none;
|
||||
}
|
||||
@media screen and (max-width: 835px) {
|
||||
.col-sm-6 {
|
||||
max-width: 45%;
|
||||
}
|
||||
.np-card-padding, .np-card-padding-dynamic {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 765px) {
|
||||
.np-box-header {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="np-catalog-header-wrapper">
|
||||
<div class="np-catalog-header">
|
||||
<div class="np-resource-title">{% t shared.learning_paths %}</div>
|
||||
<div class="np-resource-subtitle">{% t .subtitle %}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "learning_paths_index" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-dashboard {
|
||||
background: white;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-grid-spacing {
|
||||
padding-left: 3%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,21 @@
|
||||
/*
|
||||
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 }}
|
||||
*/
|
||||
|
||||
.np-subpage-container {
|
||||
padding:80px 4% 184px;
|
||||
}
|
||||
.np-max-width {
|
||||
justify-content:space-between;
|
||||
margin:auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
{% 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" style='font-size: 2rem;'>
|
||||
{% 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" %}
|
||||
|
||||
<style>
|
||||
.np-training-events {
|
||||
background: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
BIN
NP_Custom_Templates/customer_templates/Talkspace National Practice/.DS_Store
vendored
Normal file
BIN
NP_Custom_Templates/customer_templates/Talkspace National Practice/.DS_Store
vendored
Normal file
Binary file not shown.
@ -0,0 +1,66 @@
|
||||
<div class="np-hidden-mobile">
|
||||
<p>{% t .description %}</p>
|
||||
<p>{% t .requirements %}</p>
|
||||
</div>
|
||||
|
||||
<img
|
||||
alt=""
|
||||
class="np-account-avatar-image"
|
||||
src="{{ form.gravatar_url }}?s=200"
|
||||
id="{{version}}_gravatar_img"
|
||||
{% unless form.use_gravatar? %}style="display: none"{% endunless %}
|
||||
/>
|
||||
<img
|
||||
alt=""
|
||||
class="np-account-avatar-image"
|
||||
src="{{ form.secure_custom_avatar_url }}"
|
||||
id="{{version}}_custom_avatar_img"
|
||||
{% if form.use_gravatar? %}style="display: none"{% endif %}
|
||||
/>
|
||||
|
||||
<div class="np-account-avatar-choice">
|
||||
<div class="np-form-field">
|
||||
<label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_true">
|
||||
<span class="radio__input">
|
||||
<input
|
||||
id="{{version}}_learner_use_gravatar_true"
|
||||
name="learner[use_gravatar]"
|
||||
type="radio"
|
||||
value="true"
|
||||
{% if form.use_gravatar? %}checked{% endif %}
|
||||
/>
|
||||
<span class="np-button-color radio__control"></span>
|
||||
</span>
|
||||
<span class="radio__label">
|
||||
{% t .use_gravatar %}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field">
|
||||
<label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_false">
|
||||
<span class="radio__input">
|
||||
<input
|
||||
id="{{version}}_learner_use_gravatar_false"
|
||||
name="learner[use_gravatar]"
|
||||
type="radio"
|
||||
value="false"
|
||||
{% unless form.use_gravatar? %}checked{% endunless %}
|
||||
/>
|
||||
<span class="np-button-color radio__control"></span>
|
||||
</span>
|
||||
<span class="radio__label">
|
||||
{% t .upload_custom_photo %}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
id="{{version}}_upload_avatar"
|
||||
type="button"
|
||||
class="np-button np-button-secondary" {% if form.use_gravatar? %}style="visibility: hidden"{% endif %}
|
||||
>
|
||||
{% t .upload %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,19 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="desktop_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card">
|
||||
<div class="np-card-container np-card-padding">
|
||||
<div class="row">
|
||||
<div class="col-sm-7 np-account-form">
|
||||
{% render "account_form", form: form, version: "desktop" %}
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-sm-5 np-account-avatar">
|
||||
{% include "account_avatar", version: "desktop" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@ -0,0 +1,117 @@
|
||||
<div class="np-resource-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'email' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_email">{% t shared.email %} *</label>
|
||||
<input
|
||||
{% if form.options.invite? %} disabled {% endif %}
|
||||
autofocus="autofocus"
|
||||
class="np-input"
|
||||
id="{{version}}_learner_email"
|
||||
name="learner[email]"
|
||||
type="email"
|
||||
value="{{ form.email }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'first_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_first_name">
|
||||
{% t shared.first_name %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_first_name"
|
||||
name="learner[first_name]"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'last_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_last_name">
|
||||
{% t shared.last_name %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_last_name"
|
||||
name="learner[last_name]"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'display_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_display_name">
|
||||
{% t .display_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_display_name"
|
||||
name="learner[display_name]"
|
||||
value="{{ form.display_name }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{% unless form.options.invite? %}
|
||||
<div class="np-form-field {% if form.errors contains 'current_password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_current_password">
|
||||
{% t .current_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_current_password"
|
||||
name="learner[current_password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password">
|
||||
{% t .new_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password"
|
||||
name="learner[password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field {% if form.errors contains 'password_confirmation' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password_confirmation">
|
||||
{% t .confirm_new_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password_confirmation"
|
||||
name="learner[password_confirmation]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
{% endunless %}
|
||||
|
||||
{% if form.options.invite? %}
|
||||
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password">
|
||||
{% t shared.password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password"
|
||||
name="learner[password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field terms-of-service {% if form.errors contains 'terms_of_service_accepted' %}np-account-form-field-error{% endif %}">
|
||||
<input
|
||||
id="{{version}}_learner_terms_of_service"
|
||||
name="learner[terms_of_service_accepted]"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div class="label">
|
||||
{% t .terms_of_service %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
id="{{version}}_invite_token"
|
||||
name="learner[token]"
|
||||
value="{{ form.invite_token }}"
|
||||
type="hidden"
|
||||
/>
|
||||
{% endif %}
|
||||
@ -0,0 +1,17 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="mobile_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card np-account-form">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% render "account_form", form: form, version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card np-account-avatar">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% include "account_avatar", version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</form>
|
||||
@ -0,0 +1,41 @@
|
||||
<div class="np-continue-card">
|
||||
<div class="np-card-container np-continuing-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-continuing-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-continuing-card-content np-card-content-vertical">
|
||||
<h3 class="np-continuing-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
|
||||
{% 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 continue-course-button" href="{{ course_path }}">
|
||||
Resume Course
|
||||
</a>
|
||||
<br></br>
|
||||
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="background: #175C62; width: {{ course.progress }}%"
|
||||
class="np-card-progress-bar">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-top-cta-progress-text" style="color: #175C62; float: right;">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-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" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,28 @@
|
||||
<div class="np-category-card">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image np-category-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-category-card-content np-card-content-vertical np-flex-column">
|
||||
<h3 class="np-category-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-category-card-content-footer">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
<br>
|
||||
{% 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 category-course-button" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,61 @@
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
<div>
|
||||
<div class="np-learning-path np-featured-course">
|
||||
<div class="np-featured-course-img-container">
|
||||
{% comment %}
|
||||
<div class="np-card-image-content-top">
|
||||
{% include "course_details" %}
|
||||
</div>
|
||||
{% endcomment %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
style="border-top-left-radius: 16px; border-bottom-left-radius: 16px;"
|
||||
>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="np-card-text-wrapper">
|
||||
<div>
|
||||
<div class="np-dashboard-resources-title" style="margin-top: 2%; margin-left: 2%;">
|
||||
{%comment%}{{ homepage.featured_courses_headline }}{%endcomment%}
|
||||
Featured Course
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical" style="margin-top: -1%; padding: 0 3%;">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<h3 class="np-card-description">
|
||||
{{ course.full_description }}
|
||||
</h3>
|
||||
{%comment%}<div class="np-card-image-content-bottom" >
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>{%endcomment%}
|
||||
|
||||
<div class="np-card-content-footer" style="margin-top: 12%; position: absolute; border-radius: 16px;">
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button" href="{% route course_enrollment, code: course.enrollment_code %}" style="background: #175C62; border-radius: 12px;"
|
||||
>
|
||||
{%comment%}{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
{% t shared.start, key: current_school.course_vocabulary %}
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}{%endcomment%}
|
||||
Learn More
|
||||
</a>
|
||||
|
||||
{%comment%}{% include "course_details" %}{%endcomment%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,70 @@
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="np-hidden-desktop np-card-header">
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<div class="np-hidden-desktop np-card-header-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-card-header">
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-description">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-hidden-desktop np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
<a class="np-button" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
<i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i>
|
||||
<span class="np-learning-path-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-stack">
|
||||
<div class="np-card-stack-level-1"></div>
|
||||
<div class="np-card-stack-level-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,45 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content-training-event">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ training_event.title }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{% t shared.event_types, key: training_event.event_type %}
|
||||
</div>
|
||||
<div class="np-card-training-session">
|
||||
<span class="np-card-content-label">
|
||||
{% t .next_session %}
|
||||
</span>
|
||||
<div class="np-card-training-session-date">
|
||||
<div class="np-button-background-color np-card-training-session-date-bar"></div>
|
||||
<div class="np-card-training-session-date-day">
|
||||
{{ training_event.sessions.first.day }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_event.sessions.first.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year">
|
||||
{{ training_event.sessions.first.year }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class="np-card-training-sessions">
|
||||
<i class="np-card-training-sessions-icon far fa-calendar-star"></i>
|
||||
<span class="np-card-training-sessions-label">
|
||||
{% t .sessions, count: training_event.sessions.size %}
|
||||
</span>
|
||||
<a
|
||||
class="np-button np-button-wide"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,19 @@
|
||||
<div class='category-courses category-carousel courses-carousel np-carousel' >
|
||||
<div class="np-dashboard-resources-title" style="padding-top: 15px;">
|
||||
Compliance Training
|
||||
</div>
|
||||
<div class="row courses-carousel np-carousel" style="min-width: 150%;">
|
||||
{% if items.any? %}
|
||||
{% assign sorted_items = items | sort: "name" %}
|
||||
{% for course in sorted_items %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == "Compliance" %}
|
||||
<div class="np-carousel-category-card compliance-cards" style="padding-left: -10px;">
|
||||
{% include "cards_course_by_topic" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{%endfor%}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,19 @@
|
||||
<div class='continuing-courses np-carousel' >
|
||||
<div class="np-dashboard-resources-title" style="padding-top: 15px; padding-left: 15px;">
|
||||
CONTINUE WHERE YOU LEFT OFF
|
||||
</div>
|
||||
<div class="row continuing-carousel">
|
||||
{% if items.any? %}
|
||||
{% assign sorted_items = items | sort: "progress" | reverse %}
|
||||
{% for course in sorted_items %}
|
||||
{% if course.started? %}
|
||||
{% if course.completed? == false %}
|
||||
<div class="np-carousel-continuing-card in-progress" style="padding-left: 10px;">
|
||||
{% include "cards_continuing_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,19 @@
|
||||
<div class='category-courses category-carousel courses-carousel np-carousel' >
|
||||
<div class="np-dashboard-resources-title" style="padding-top: 15px;">
|
||||
DEPARTMENT-SPECIFIC TRAINING
|
||||
</div>
|
||||
<div id='#category-courses-carousel' class="row courses-carousel np-carousel" style="min-width: 150%;">
|
||||
{% if items.any? %}
|
||||
{% assign sorted_items = items | sort: "name" %}
|
||||
{% for course in sorted_items %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == "Department-Specific" %}
|
||||
<div class="np-carousel-category-card department-specific-cards" style="padding-left: -10px;">
|
||||
{% include "cards_course_by_topic" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{%endfor%}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,19 @@
|
||||
<div class='category-courses category-carousel courses-carousel np-carousel' >
|
||||
<div class="np-dashboard-resources-title" style="padding-top: 15px;">
|
||||
GOVERNANCE Training
|
||||
</div>
|
||||
<div id='#category-courses-carousel' class="row courses-carousel np-carousel" style="min-width: 150%;">
|
||||
{% if items.any? %}
|
||||
{% assign sorted_items = items | sort: "name" %}
|
||||
{% for course in sorted_items %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == "Governance" %}
|
||||
<div class="np-carousel-category-card governance-cards" style="padding-left: -10px;">
|
||||
{% include "cards_course_by_topic" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{%endfor%}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,19 @@
|
||||
<div class='category-courses category-carousel courses-carousel np-carousel' >
|
||||
<div class="np-dashboard-resources-title" style="padding-top: 15px;">
|
||||
WELLNESS WORKSHOPS
|
||||
</div>
|
||||
<div id='#category-courses-carousel' class="row courses-carousel np-carousel" style="min-width: 150%;">
|
||||
{% if items.any? %}
|
||||
{% assign sorted_items = items | sort: "name" %}
|
||||
{% for course in sorted_items %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == "Wellness Workshops" %}
|
||||
<div class="np-carousel-category-card wellness-workshop-cards" style="padding-left: -10px;">
|
||||
{% include "cards_course_by_topic" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{%endfor%}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,4 @@
|
||||
<i class="far fa-lock-alt np-course-outline-content-activity-icon-locked"></i>
|
||||
<span class="np-course-outline-content-activity-title">
|
||||
{{ activity.title }}
|
||||
</span>
|
||||
@ -0,0 +1,9 @@
|
||||
<a
|
||||
href="{% route activity_viewer,
|
||||
id: activity.id,
|
||||
course_id: params.course_id,
|
||||
learning_path_id: params.learning_path_id
|
||||
%}" class="{{ class }}"
|
||||
>
|
||||
{{ activity.title }}
|
||||
</a>
|
||||
@ -0,0 +1,25 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<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.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>
|
||||
<a class="np-button np-button-wide" href="{% route course, id: course.id %}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex">
|
||||
{% for category in course.categories %}
|
||||
<div class="np-content-categories-content-item">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header, key: current_school.course_vocabulary %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container">
|
||||
<div class="np-resource-header np-course-header np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
{% include "course_description" %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-6">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,27 @@
|
||||
{% assign activities_count = 0 %}
|
||||
{% assign quizzes_count = 0 %}
|
||||
|
||||
{% for course_section in course.sections %}
|
||||
{% for course_activity in course_section.activities %}
|
||||
{% assign activities_count = activities_count | plus: 1 %}
|
||||
|
||||
{% if course_activity.type == "quiz" %}
|
||||
{% assign quizzes_count = quizzes_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="np-course-details" style="text-align: center">
|
||||
<div class="np-course-detail" style="margin-right: 10%">
|
||||
<strong>{{ activities_count }}</strong>
|
||||
<span class="np-details-label">
|
||||
{% if activities_count == 1 %}Activity{% else %}Activities{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="np-course-detail">
|
||||
<strong>{{ quizzes_count }}</strong>
|
||||
<span class="np-details-label">
|
||||
{% if quizzes_count == 1 %}Quiz{% else %}Quizzes{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,28 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex-column">
|
||||
{% for event in course.events %}
|
||||
<div class="np-course-events-content-item">
|
||||
<div class="np-course-events-content-date np-button-background-color">
|
||||
<div class="np-course-events-content-month">
|
||||
{{ event.sessions.first.abbreviated_month }}
|
||||
</div>
|
||||
<div class="np-course-events-content-day">
|
||||
{{ event.sessions.first.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-course-events-content-details">
|
||||
<div class="np-course-events-content-name">
|
||||
{{ event.title }}
|
||||
</div>
|
||||
<div class="np-course-events-content-type np-text-light">
|
||||
{% t shared.event_types, key: event.event_type %}
|
||||
</div>
|
||||
<div class="np-course-events-content-time np-button-color">
|
||||
{{ event.sessions.first.time_period }} {{ event.sessions.first.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -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">
|
||||
<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,22 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex">
|
||||
{% for instructor in course.instructors %}
|
||||
<div class="np-content-instructors-content-item">
|
||||
<img
|
||||
src="{{ instructor.avatar_url }}"
|
||||
class="np-content-instructors-content-image"
|
||||
alt="{{ instructor.name }}"
|
||||
/>
|
||||
<div class="np-content-instructors-content-description">
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ instructor.name }}
|
||||
</div>
|
||||
<div class="np-content-instructors-content-info np-text-light">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.progress == 0 %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,40 @@
|
||||
<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">
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<ol class="np-course-outline-content-activity">
|
||||
{% for activity in section.activities %}
|
||||
|
||||
<li class="np-course-outline-content-activity-list">
|
||||
{% if activity.completed? %}
|
||||
<i class="fas fa-circle np-course-outline-content-activity-icon np-button-color"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}
|
||||
{% endif %}
|
||||
<div class="np-button-background-color np-course-outline-content-activity-list-bar"></div>
|
||||
{% else %}
|
||||
<i class="far fa-circle np-course-outline-content-activity-icon"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
|
||||
{% endif %}
|
||||
<div class="np-course-outline-content-activity-list-bar"></div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,46 @@
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ course.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.learner_can_retake? %}
|
||||
<form action="{% route course_retake, id: course.id %}" method="POST">
|
||||
{% form_authenticity_token %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% t .retake, key: current_school.course_vocabulary %}
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
{% t shared.course.start, key: current_school.course_vocabulary %}
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
{% if courses.include_courses_to_restart? %}
|
||||
<div role="alert" class="np-alert np-alert-global np-alert-info">
|
||||
<div class="np-alert-container uk-container uk-container-center">
|
||||
{% t .content %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,33 @@
|
||||
<div class="np-course-version-outdated-popup np-popup">
|
||||
<div class="np-popup-positioner">
|
||||
<i
|
||||
class="np-course-version-outdated-popup-trigger fas fa-exclamation-circle"
|
||||
data-toggle-class-on-target="np-popup-tooltip--visible"
|
||||
data-toggle-target-parent=".np-popup-tooltip"
|
||||
data-toggle-outside
|
||||
></i>
|
||||
<div
|
||||
class="np-popup-tooltip"
|
||||
role="tooltip"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<header class="np-popup-header">
|
||||
<i class="np-popup-header-icon fas fa-exclamation-circle"></i>
|
||||
<h3 class="np-popup-header-title">
|
||||
{% t .title %}
|
||||
</h3>
|
||||
</header>
|
||||
<div class="np-popup-body">
|
||||
<h4>{% t .body.header %}</h4>
|
||||
<p>{% t .body.content %}</p>
|
||||
<a
|
||||
class="np-popup-body-button"
|
||||
href="{{ path }}"
|
||||
>
|
||||
{% t .body.button %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-popup-tail"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,16 @@
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.in_catalog %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,16 @@
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
<div class="{{ class }}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,6 @@
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{{ message }}
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="{{ message }}" />
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
<input
|
||||
id={{value}}
|
||||
name={{ name }}
|
||||
value={{ value }}
|
||||
type="checkbox"
|
||||
{% if selected %} checked="checked" {% endif %}
|
||||
/>
|
||||
<label for={{value}}>
|
||||
{{label}}
|
||||
</label>
|
||||
@ -0,0 +1,33 @@
|
||||
<div class="np-filter">
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="np-button dropdown-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
>
|
||||
{% t shared.filters.filter %}
|
||||
</button>
|
||||
|
||||
<div class="dropdown-menu" data-test="modal">
|
||||
<form method="get">
|
||||
{%
|
||||
include "filter_select",
|
||||
filters: filters,
|
||||
key: key,
|
||||
label: label
|
||||
%}
|
||||
|
||||
<button
|
||||
class="np-button dropdown-button-apply"
|
||||
data-toggle-trigger-off
|
||||
type="submit"
|
||||
>
|
||||
{% t shared.filters.apply %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,22 @@
|
||||
{% if params.q %}
|
||||
<input type="hidden" name="q" value="{{ params.q }}">
|
||||
{% endif %}
|
||||
|
||||
<label class="dropdown-label" for="filter[category_uuid][in][]">
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<select
|
||||
class="np-filter-select"
|
||||
multiple
|
||||
name="filter[{{ key }}][in][]"
|
||||
>
|
||||
{% for filter in filters %}
|
||||
<option
|
||||
value="{{ filter.value }}"
|
||||
{% if filter.selected? %} selected="selected" {% endif %}
|
||||
>
|
||||
{{ filter.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
@ -0,0 +1,82 @@
|
||||
<footer class="np-footer">
|
||||
<div class="np-footer-top">
|
||||
{% if website_footer.show_navigation_links? %}
|
||||
<div class="np-footer-navigation">
|
||||
<ul class="np-footer-navigation-list">
|
||||
{% for website_navigation in navigations.footer_navigations %}
|
||||
<li class="np-footer-navigation-item">
|
||||
<a
|
||||
class="np-footer-navigation-link np-button-color"
|
||||
href="{{ website_navigation.path }}"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if current_school.logo_url %}
|
||||
<h2 class="np-footer-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-footer-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h2>
|
||||
{% else %}
|
||||
<div class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="np-footer-bottom">
|
||||
<nav class="np-footer-social-links">
|
||||
{% if website_footer.show_social_media_links? %}
|
||||
<ul class="np-footer-social-links-list">
|
||||
{% for social_media_link in website_footer.social_media_links %}
|
||||
<li class="np-footer-social-links-item">
|
||||
<a
|
||||
class="np-footer-social-links-link np-button-color"
|
||||
href="{{ social_media_link.link }}"
|
||||
target="_blank" title="{{ social_media_link.name }}"
|
||||
>
|
||||
<i class="np-footer-social-links-icon
|
||||
np-button-color
|
||||
fab fa-{{ social_media_link.name }}"
|
||||
></i>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
{% comment %}{% if website_footer.show_customer_service_email? and
|
||||
website_footer.school_customer_service_email
|
||||
%} {% endif %}{% endcomment %}
|
||||
|
||||
{% if website_footer.show_customer_service_email? %}
|
||||
<div class="np-footer-support">
|
||||
<div class="np-footer-support-item np-footer-support-help">
|
||||
{% t .need_help %}
|
||||
</div>
|
||||
<div class="np-footer-support-item np-footer-support-email">
|
||||
{% t .email %}
|
||||
</div>
|
||||
<a
|
||||
class="np-footer-support-item np-footer-support-link np-button-color"
|
||||
{%comment%}href="mailto:{{ website_footer.school_customer_service_email }}"{%endcomment%}
|
||||
href="mailto:training@talkspace.com"
|
||||
>
|
||||
{%comment%}{{ website_footer.school_customer_service_email }}{%endcomment%}
|
||||
training@talkspace.com
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</footer>
|
||||
@ -0,0 +1,8 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></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" />
|
||||
|
||||
<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>
|
||||
@ -0,0 +1,196 @@
|
||||
<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">
|
||||
{%comment%}{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}{%endcomment%}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="/app/dashboard"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="/app/completed-courses"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
>
|
||||
Completed Courses
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
{%comment%}<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>{%endcomment%}
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
aria-label="{% t shared.sign_in %}"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
@ -0,0 +1,17 @@
|
||||
<header class="np-box-header np-header-color">
|
||||
<a class="np-box-header-link" href="{% route home %}">
|
||||
{% if current_school.logo_url %}
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
src="{{ current_school.logo_url }}"
|
||||
class="np-box-header-logo"
|
||||
/>
|
||||
{% else %}
|
||||
<span class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</header>
|
||||
|
||||
{% include "messages" %}
|
||||
@ -0,0 +1,56 @@
|
||||
{% if learning_path.enrolled? and course.unlocked? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="np-learning-path-outline-item np-card-container"
|
||||
href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
|
||||
>
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
{% if course.instructors %}
|
||||
<div class="np-learning-path-outline-caption">
|
||||
{{ course.instructors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-learning-path-outline-progress
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
</div>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .about %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
@ -0,0 +1,34 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.learning_path.title %}
|
||||
<i class="far fa-road np-button-color np-learning-path-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-icon-back"></i>
|
||||
</a>
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
<div class="np-card-padding-dynamic">
|
||||
{% include "learning_path_description" %}
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 np-grid-spacing">
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,26 @@
|
||||
{% if learning_path.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
<h3 class="np-card-heading">
|
||||
{% t shared.instructors %}
|
||||
</h3>
|
||||
<div class="np-content-instructors-content row">
|
||||
{% for instructor in learning_path.instructors %}
|
||||
<div class="np-content-instructors-content-item col-xs-12 col-lg">
|
||||
<img
|
||||
src="{{ instructor.avatar_url }}"
|
||||
class="np-content-instructors-content-image"
|
||||
alt="{{ instructor.name }}"
|
||||
>
|
||||
<div class="np-content-instructors-content-description">
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ instructor.name }}
|
||||
</div>
|
||||
<div class="np-content-instructors-content-info np-text-light">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,37 @@
|
||||
<div class="np-resource-header np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.learning_path.title %}
|
||||
<i class="far fa-road np-button-color np-learning-path-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if learning_path.in_progress? %}
|
||||
{% include "learning_path_outline" %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_description" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_description" %}
|
||||
</div>
|
||||
<div class="np-card-spacing">
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if learning_path.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,9 @@
|
||||
<div class="np-learning-path-outline">
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% include "learning_path_course", course: item %}
|
||||
{% elsif item.training_event? %}
|
||||
{% include "learning_path_training_session", training_session: item %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,41 @@
|
||||
{% if learning_path.enrolled? %}
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .progress %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if learning_path.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
{% if learning_path.enrolled? %}
|
||||
{% if learning_path.current_item.course? %}
|
||||
href="{% route learning_path_course, id: learning_path.current_item.id, learning_path_id: learning_path.id %}"
|
||||
{% elsif learning_path.current_item.training_event? %}
|
||||
href="{% route training_session, id: learning_path.current_item.id %}"
|
||||
{% endif %}
|
||||
{% else %}
|
||||
href="{% route learning_path_enrollment, code: learning_path.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if learning_path.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif learning_path.started? == false %}
|
||||
{% t shared.learning_path.start %}
|
||||
{% elsif learning_path.completed? %}
|
||||
{% t shared.learning_path.view %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
@ -0,0 +1,53 @@
|
||||
{% if learning_path.enrolled? and training_session.unlocked? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="np-learning-path-outline-item np-card-container"
|
||||
href="{% route training_session, id: training_session.id %}"
|
||||
>
|
||||
<div class="np-card-content np-card-padding">
|
||||
<div class="np-events-content-date np-button-background-color">
|
||||
<div class="np-events-content-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-events-content-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
|
||||
<div class="np-learning-path-outline-caption">{{ training_session.instructors }}</div>
|
||||
<div class="np-events-content-time np-learning-path-outline-time np-button-color">
|
||||
{{ training_session.time }} {{ training_session.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% if training_session.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-outline-item np-card-container np-learning-path-outline-inactive-item">
|
||||
<div class="np-card-content np-card-padding">
|
||||
<div class="np-events-content-date np-button-background-color">
|
||||
<div class="np-events-content-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-events-content-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
|
||||
<div class="np-learning-path-outline-caption">{{ training_session.caption }}</div>
|
||||
</div>
|
||||
{% if training_session.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -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">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,19 @@
|
||||
{% if messages.alert.size > 0 %}
|
||||
<div class="np-alert np-alert-error">
|
||||
<div class="np-alert-wrapper">
|
||||
{% for message in messages.alert %}
|
||||
<div>{{ message }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if messages.notice.size > 0 %}
|
||||
<div class="np-alert np-alert-success">
|
||||
<div class="np-alert-wrapper">
|
||||
{% for message in messages.notice %}
|
||||
<div>{{ message }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,79 @@
|
||||
<div class="np-progress-ring-wrapper">
|
||||
<svg
|
||||
class="progress-ring"
|
||||
width="{{ size }}"
|
||||
height="{{ size }}">
|
||||
<circle
|
||||
class="progress-ring__circle circle-{{name}}"
|
||||
stroke="#175C62"
|
||||
stroke-width="10"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"/>
|
||||
<circle
|
||||
class="progress-ring__circle circle-bg"
|
||||
stroke="{{ stroke_color_bg }}"
|
||||
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="#175C62" dy=".3em" class="prog-ring-text">{{count}}</text>
|
||||
</svg>
|
||||
<h3 class="np-card-content-title np-progress-circle-label">
|
||||
{{name}}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var circle = document.getElementsByClassName("circle-{{name}}")[0];
|
||||
var radius = circle.r.baseVal.value;
|
||||
var circumference = radius * 2 * Math.PI;
|
||||
|
||||
circle.style.strokeDasharray = `${circumference} ${circumference}`;
|
||||
circle.style.strokeDashoffset = `${circumference}`;
|
||||
|
||||
function setProgress(percent) {
|
||||
const offset = circumference - percent * circumference;
|
||||
circle.style.strokeDashoffset = offset;
|
||||
}
|
||||
setProgress('{{ count | divided_by: total }}')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-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; }
|
||||
.progress-ring text { font-size:2rem; }
|
||||
.progress-ring__circle {
|
||||
transition: stroke-dashoffset 0.35s;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.np-progress-circle-label {
|
||||
color:#263159;
|
||||
text-transform: uppercase;
|
||||
font-size:0.875rem;
|
||||
margin-top:1rem;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-progress-ring-wrapper { padding: 1.5rem 0.4rem 1rem 0.4rem;}
|
||||
}
|
||||
|
||||
@media (min-width:1170px) {
|
||||
.progress-ring text { font-size:2.5rem; }
|
||||
.np-progress-ring-wrapper { padding: 1.5rem 1rem 1rem 1rem;}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,19 @@
|
||||
<div class="np-card np-search-result">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content">
|
||||
<img
|
||||
class="np-search-result-image"
|
||||
alt="{{ result.name }}"
|
||||
src="{{ result.image_url }}"
|
||||
/>
|
||||
<div class="np-search-result-content">
|
||||
<div>
|
||||
<a class="np-search-result-title" href="{{ result.path }}">
|
||||
{{ result.name }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-search-result-snippet">{{ result.sanitized_description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
<div class="np-card np-search-zero-state">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content np-card-content-vertical np-search-zero-state-card">
|
||||
<h3 class="np-search-zero-state-title">
|
||||
{% t .nothing_found %}
|
||||
</h3>
|
||||
<div class="np-search-zero-state-subtitle">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<div class="np-search-zero-state-image"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
<nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
@ -0,0 +1,9 @@
|
||||
<div class="np-dashboard-resources">
|
||||
{% if training_events.enrolled.any? %}
|
||||
{% for training_event in training_events.enrolled %}
|
||||
{% include "cards_training_event" with training_event %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,53 @@
|
||||
<div class="np-filter">
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="np-button dropdown-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
>
|
||||
{% t shared.filters.filter %}
|
||||
</button>
|
||||
|
||||
<div class="dropdown-menu" data-test="modal">
|
||||
<form method="get">
|
||||
<span class="dropdown-label">
|
||||
{% t shared.filters.by_event_type %}
|
||||
</span>
|
||||
<ul class="dropdown-checkboxes">
|
||||
{% for event_type in training_events.filters.event_types %}
|
||||
{% capture label %}
|
||||
{% t shared.event_types, key: event_type.value %}
|
||||
{% endcapture %}
|
||||
<li>
|
||||
{% include "filter_checkbox",
|
||||
label: label,
|
||||
name: event_type.name,
|
||||
value: event_type.value
|
||||
selected: event_type.selected?
|
||||
%}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{% capture label %}{% t shared.filters.by_course %}{% endcapture %}
|
||||
{%
|
||||
include "filter_select",
|
||||
filters: training_events.filters.courses,
|
||||
key: "courses_uuid",
|
||||
label: label
|
||||
%}
|
||||
|
||||
<button
|
||||
class="np-button dropdown-button-apply"
|
||||
data-toggle-trigger-off
|
||||
type="submit"
|
||||
>
|
||||
{% t shared.filters.apply %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
<div class="np-dashboard-resources">
|
||||
{% if training_events.available.any? %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for training_event in training_events.available %}
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_training_event" with training_event %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,9 @@
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-training-events"
|
||||
alt="{% t .empty %}"
|
||||
/>
|
||||
</div>
|
||||
@ -0,0 +1,52 @@
|
||||
<div class="dropdown dropdown-calendar">
|
||||
<button
|
||||
class="np-top-button np-button-font-color np-button np-button-big dropdown-calendar-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
>
|
||||
{% t .add_to_calendar %}
|
||||
<i class="fas fa-chevron-down dropdown-calendar-button-chevron"></i>
|
||||
</button>
|
||||
|
||||
<ul class="dropdown-calendar-menu">
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.google_calendar_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
{% t .google_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.outlook_calendar_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
{% t .outlook_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.outlook_office_calendar_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
{% t .office_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.ical_calendar_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
{% t .ical_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -0,0 +1,53 @@
|
||||
{% if training_session.approved? %}
|
||||
<div class="np-training-session-cta-note">
|
||||
<i class="far fa-check np-training-session-icon"></i>
|
||||
{% t .registered %}
|
||||
</div>
|
||||
{% elsif training_session.pending? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .pending %}
|
||||
</div>
|
||||
{% elsif training_session.denied? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .denied %}
|
||||
</div>
|
||||
{% elsif training_session.too_late? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .too_late %}
|
||||
</div>
|
||||
{% elsif training_session.no_seats? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .no_seats %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-training-session-cta">
|
||||
<div class="np-training-session-cta-buttons">
|
||||
<form
|
||||
action="{% route training_session_registration, id: training_session.id %}"
|
||||
method="post"
|
||||
>
|
||||
{% form_authenticity_token %}
|
||||
|
||||
{% if training_session.internal? and training_session.approved? %}
|
||||
{% if features.training_events_google_calendar? %}
|
||||
{% include "training_session_calendars" %}
|
||||
<button type="submit" class="np-top-button np-button np-button-big np-button-secondary">
|
||||
{% t .unregister %}
|
||||
</button>
|
||||
{% else %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% t .unregister %}
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<input type="hidden" name="_method" value="delete" />
|
||||
{% endif %}
|
||||
|
||||
{% if training_session.not_registered? %}
|
||||
<button type="submit" class="np-top-button np-button np-button-big">
|
||||
{% t .register %}
|
||||
</button>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,14 @@
|
||||
<div class="np-card-training-session-date">
|
||||
<div class="np-button-background-color np-card-training-session-date-bar"></div>
|
||||
<div class="np-card-training-session-date-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year">
|
||||
{{ training_session.year }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ training_event.description }}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
{% include "training_session_header" %}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-7">
|
||||
<div class="np-card-container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-5">
|
||||
{% include "training_session_details" %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-7">
|
||||
{% include "training_session_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-padding-large">
|
||||
<div class="np-card-content-divider">
|
||||
{% include "training_session_description" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-5 np-grid-spacing">
|
||||
<div class="np-training-session-sessions-title">
|
||||
{% t shared.more_sessions %}
|
||||
</div>
|
||||
{% if training_event.sessions.size > 1 %}
|
||||
{% include "training_session_more_sessions" %}
|
||||
{% else %}
|
||||
<div class="np-training-session-zero-state">
|
||||
<img
|
||||
alt="{% t .empty %}"
|
||||
class="np-zero-state-training-sessions"
|
||||
/>
|
||||
<div class="np-training-session-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,24 @@
|
||||
<div class="np-card-spacing-large">
|
||||
{% include "training_session_date" %}
|
||||
|
||||
<div class="np-training-session-time">
|
||||
<i class="fal fa-clock np-button-color np-training-session-icon"></i>
|
||||
{{ training_session.time_period }} {{ training_session.time_zone }}
|
||||
</div>
|
||||
|
||||
{% if training_session.location %}
|
||||
<div class="np-training-session-location">
|
||||
<i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
|
||||
{{ training_session.location }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if training_session.session_url %}
|
||||
<div class="np-training-session-location">
|
||||
<i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
|
||||
<a href="{{ training_session.session_url }}" class="np-button-color" target="_blank" >
|
||||
{{ training_session.session_url }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.event_types, key: training_event.event_type %}
|
||||
<i class="fal fa-users-class np-button-color np-training-session-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<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>
|
||||
{{ training_event.title }}
|
||||
</div>
|
||||
@ -0,0 +1,22 @@
|
||||
<div class="np-card-container-training-session">
|
||||
<div class="np-card-spacing-large">
|
||||
{% include "training_session_header" %}
|
||||
</div>
|
||||
{% include "training_session_details" %}
|
||||
<div class="np-card-padding-large">
|
||||
{% include "training_session_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "training_session_description" %}
|
||||
</div>
|
||||
|
||||
{% if training_event.sessions.size > 1 %}
|
||||
<div class="np-card-spacing">
|
||||
<div class="np-training-session-sessions-title">
|
||||
{% t shared.more_sessions %}
|
||||
</div>
|
||||
{% include "training_session_more_sessions" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,3 @@
|
||||
{% for session in training_event.sessions %}
|
||||
{% include "training_session_tile", current_session: training_session %}
|
||||
{% endfor %}
|
||||
@ -0,0 +1,17 @@
|
||||
{% if current_session.id != session.id %}
|
||||
<a
|
||||
class="np-training-session-tile"
|
||||
href="{% route training_session, id: session.id %}"
|
||||
>
|
||||
<i class="far fa-calendar-star np-training-session-tile-icon"></i>
|
||||
<div>
|
||||
<div class="np-training-session-tile-date">
|
||||
{{ session.month }} {{ session.day }}, {{ session.year }}
|
||||
</div>
|
||||
<div class="np-training-session-tile-time">
|
||||
{{ session.time_period }} {{ session.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-training-session-tile-chevron"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
@ -0,0 +1,56 @@
|
||||
<div class="np-dashboard-resources">
|
||||
<div id="progress-card" class="np-card">
|
||||
<div class="np-dashboard-border" style="margin-top: -4%;">
|
||||
{% 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 %}
|
||||
<div class="np-dashboard-resources-title" style="position: absolute; margin-top: 0.75%; padding-left: 1%">Course Progress</div>
|
||||
<ul class="progress-circle-list">
|
||||
<li>
|
||||
{%
|
||||
include "progress_circle",
|
||||
name:'Completed' ,
|
||||
count: countComplete ,
|
||||
total: countTotal,
|
||||
size: "120",
|
||||
stroke_color: "rgba(23, 92, 98, 0.05)",
|
||||
stroke_color_bg: "rgba(225, 231, 235, 0.2)"
|
||||
%}
|
||||
</li>
|
||||
<li>
|
||||
{%
|
||||
include "progress_circle",
|
||||
name:'In Progress' ,
|
||||
count: countInProgress ,
|
||||
total: countTotal,
|
||||
size: "120",
|
||||
stroke_color: "rgba(23, 92, 98, 0.05)",
|
||||
stroke_color_bg: "rgba(225, 231, 235, 0.2)"
|
||||
%}
|
||||
</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>
|
||||
</div>
|
||||
@ -0,0 +1,14 @@
|
||||
{% include "header" %}
|
||||
|
||||
<main class="np-main np-subpage-container np-account">
|
||||
<div class="np-hidden-desktop">
|
||||
{% include "account_mobile_view", form: form %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-flex np-flex-center">
|
||||
{% include "account_desktop_view", form: form %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% include "footer" %}
|
||||
|
||||
@ -0,0 +1,59 @@
|
||||
<main class="np-box-container np-open-access">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-headline">
|
||||
{% t shared.welcome_to_school, school_name: current_school.name %}
|
||||
</div>
|
||||
<div class="np-form-subheadline">
|
||||
{% t .headline, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_first_name">
|
||||
{% t shared.first_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="text"
|
||||
name="first_name"
|
||||
id="learner_first_name"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_last_name">
|
||||
{% t shared.last_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="last_name"
|
||||
id="learner_last_name"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_email">
|
||||
{% t shared.email_address %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="email"
|
||||
id="learner_email"
|
||||
value="{{ form.email }}"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="submit"
|
||||
name="commit"
|
||||
value="{% t shared.enter %}"
|
||||
class="np-button np-button-big np-form-action"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -0,0 +1,59 @@
|
||||
<main class="np-box-container np-open-access">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-headline">
|
||||
{% t shared.welcome_to_school, school_name: current_school.name %}
|
||||
</div>
|
||||
<div class="np-form-subheadline">
|
||||
{% t .headline, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_employee_id">
|
||||
{% t shared.employee_id %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="text"
|
||||
name="employee_id"
|
||||
id="learner_employee_id"
|
||||
value="{{ form.employee_id }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_first_name">
|
||||
{% t shared.first_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="first_name"
|
||||
id="learner_first_name"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_last_name">
|
||||
{% t shared.last_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="last_name"
|
||||
id="learner_last_name"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="submit"
|
||||
name="commit"
|
||||
value="{% t shared.enter %}"
|
||||
class="np-button np-button-big np-form-action"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -0,0 +1,40 @@
|
||||
<main class="np-box-container np-open-access">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||
<div class="np-form-headline"> {% t shared.welcome_to_school, school_name: current_school.name %} </div>
|
||||
<div class="np-form-subheadline"> {% t .headline, key: current_school.course_vocabulary %} </div>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_last_name">
|
||||
{% t shared.last_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="text"
|
||||
name="last_name"
|
||||
id="learner_last_name"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_phone_number">
|
||||
{% t shared.phone_number %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="phone_number"
|
||||
id="learner_phone_number"
|
||||
value="{{ form.phone_number }}"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" class="np-button np-button-big np-form-action">
|
||||
{% t shared.enter %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -0,0 +1,74 @@
|
||||
<main class="np-box-container np-open-access">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||
<div class="np-form-headline"> {% t shared.welcome_to_school, school_name: current_school.name %} </div>
|
||||
<div class="np-form-subheadline"> {% t .headline, key: current_school.course_vocabulary %} </div>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_email">
|
||||
{% t shared.email_address %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="email"
|
||||
name="email"
|
||||
id="learner_email"
|
||||
value="{{ form.email }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_first_name">
|
||||
{% t shared.first_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="first_name"
|
||||
id="learner_first_name"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_last_name">
|
||||
{% t shared.last_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="last_name"
|
||||
id="learner_last_name"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_phone_number">
|
||||
{% t shared.phone_number_optional %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="phone_number"
|
||||
id="learner_phone_number"
|
||||
value="{{ form.phone_number }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field np-open-access-terms">
|
||||
<input type="hidden" name="terms" value="0" />
|
||||
<input id="terms" type="checkbox" name="terms" value="1" />
|
||||
<label for="terms" class="np-open-access-terms-checkbox">
|
||||
{{ current_school.custom_terms }}
|
||||
</label>
|
||||
</div>
|
||||
<input
|
||||
type="submit"
|
||||
name="commit"
|
||||
value="{% t shared.enter %}"
|
||||
class="np-button np-button-big np-form-action"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -0,0 +1,23 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
<div class="np-catalog-header-wrapper">
|
||||
<div class="np-catalog-header">
|
||||
<div class="np-resource-title">{{ catalog.headline }}</div>
|
||||
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
|
||||
</div>
|
||||
{% capture label %}{% t shared.filters.by_category %}{% endcapture %}
|
||||
|
||||
{% if courses.in_catalog.any? %}
|
||||
{%
|
||||
include "filter_dropdown",
|
||||
filters: courses.filters,
|
||||
key: "category_uuid",
|
||||
label: label
|
||||
%}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% include "courses_catalog" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user