This commit is contained in:
Norm Rasmussen
2022-04-28 15:21:11 -04:00
parent b5fc365171
commit ce1d6201b0
52 changed files with 4136 additions and 0 deletions

View File

@ -0,0 +1,46 @@
<div class="np-card {{ card_classes }}">
<div class="np-card-container">
<div class="card__image" style="background-image: url({{ course.image_url }})">
{% if course.ribbon and course.ribbon.size > 0 %}
<div class="np-card-ribbon">
{{ course.ribbon }}
</div>
{% endif %}
</div>
<div class="np-card-content np-card-content-vertical np-card-padding">
<h3 class="np-card-content-title">
{{ course.name }}
</h3>
{% if course.instructor_names and course.instructor_names.size > 0 %}
<div class="np-card-content-subtitle">
{{ course.instructor_names }}
</div>
{% endif %}
{% if course.short_description and course.short_description.size > 0 %}
<div class="np-card-content-description">
{{ course.short_description | split: " --- " | last }}
</div>
{% endif %}
<div class="np-card-content-footer">
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
<a class="np-button np-button-wide" href="{{ course_path }}">
{% t shared.view %}
</a>
{% if course.enrolled? %}
{% if course.has_to_restart? %}
{% include "course_version_outdated_popup", path: course_path %}
{% endif %}
<div class="np-card-content-progress np-button-color">
{% if course.completed? %}
Complete
{% elsif course.started? == false %}
Enrolled
{% else %}
{{ course.progress }}% Complete
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,61 @@
<div class="np-card card--horizontal {{ card_classes }}">
<div class="np-card-container">
<div class="card__image" style="background-image: url({{ learning_path.image_url }})">
<div class="np-card-ribbon np-hidden-mobile">
<i class="fa fa-book-open" aria-hidden="true"></i>
{{ learning_path.items.count }} Tutorial{% if learning_path.items.count > 1%}s{% endif %}
</div>
</div>
<div class="np-card-text-wrapper">
<div class="np-card-content np-card-padding np-card-content-vertical">
<h3 class="np-card-content-title">
{{ learning_path.name }}
</h3>
{% if learning_path.has_instructors? %}
<div class="np-card-content-subtitle">
{{ learning_path.instructor_names }}
</div>
{% endif %}
<div class="np-card-ribbon np-hidden-desktop">
<i class="fa fa-book-open" aria-hidden="true"></i>
{{ learning_path.items.count }} Tutorial{% if learning_path.items.count > 1%}s{% endif %}
</div>
{% comment %} Currently hiding the description {% endcomment %}
{% comment %}
{% if learning_path.description and learning_path.description.size > 0 %}
<div class="np-hidden-mobile np-card-content-description">
{{ learning_path.description }}
</div>
{% endif %}
{% endcomment %}
<div class="np-card-content-footer">
<a class="np-button" href="{% route learning_path, id: learning_path.id %}">
<span class="np-hidden-desktop">View</span>
<span class="np-hidden-mobile">View Path</span>
</a>
{% if learning_path.enrolled? %}
<div class="np-card-content-progress
np-button-color">
{% if learning_path.completed? %}
Complete
{% elsif learning_path.started? == false %}
Enrolled
{% else %}
{{ learning_path.progress }}% Complete
{% endif %}
</div>
{% endif %}
</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>

View File

@ -0,0 +1,59 @@
<div class="np-card card--training-event {{ card_classes }}">
<div class="np-card-container">
<div class="np-card-content np-card-padding np-card-content-vertical">
<h3 class="np-card-content-title">
{{ training_event.title }}
</h3>
<div class="np-card-content-subtitle">
{% case training_event.event_type %}
{% when "online" %}
Online Event
{% when "in_person" %}
In-Person Event
{% endcase %}
</div>
{% if training_event.description and training_event.description.size > 0 %}
<div class="np-card-content-description">
{{ training_event.description | strip }}
</div>
{% endif %}
<div class="np-card-training-session-date">
{% comment %} Fallback to the first session {% endcomment %}
{% assign session_to_display = training_event.sessions | first %}
{% comment %} Check for an enrolled session and preferrably display that {% endcomment %}
{% assign enrolled_sessions = training_event.sessions | where: "registered?", true %}
{% if enrolled_sessions and enrolled_sessions.size > 0 %}
{% assign session_to_display = enrolled_sessions | first %}
{% endif %}
{% include "training_session_date", training_session: session_to_display %}
{% if training_event.sessions and training_event.sessions.size > 1 %}
<div class="session-date__other-info-container">
<div class="session-date__other-info-wrapper">
<i class="np-card-training-sessions-icon far fa-calendar-star" aria-hidden="true"></i>
<span class="np-card-training-sessions-label">
{{ training_event.sessions.size | minus: 1 }}
{% if training_event.sessions.size == 2 %}
Other Session
{% else %}
Other Sessions
{% endif %}
</span>
</div>
</div>
{% endif %}
</div>
<div class="np-card-content-footer">
<a
class="np-button np-button-wide"
href="{% route training_session, id: session_to_display.id %}"
>
{% t shared.view %} Event
</a>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,4 @@
<span class="np-course-outline-content-activity-title">
{{ activity.title }}
</span>

View File

@ -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="{{ activity_classes }}"
>
{{ activity.title }}
</a>

View File

@ -0,0 +1,27 @@
{% 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">
Restart Course
</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 %}
Enroll in Course
{% elsif course.started? == false %}
Start Course
{% elsif course.completed? %}
View Course
{% else %}
Continue Course
{% endif %}
</a>
{% endif %}

View File

@ -0,0 +1,6 @@
<h3 class="np-card-heading">
About This Tutorial
</h3>
<div class="np-card-text">
{{ course.full_description }}
</div>

View File

@ -0,0 +1,26 @@
<h3 class="np-card-heading">
{% t .header %}
</h3>
{% for event in course.events %}
<div class="np-course-events-content-item">
<div class="np-course-events-content-date">
<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">
{{ event.sessions.first.time_period | replace: "AM", "am" | replace: "PM", "pm" | replace: "-", "" }} {{ event.sessions.first.time_zone }}
</div>
</div>
</div>
{% endfor %}

View File

@ -0,0 +1,6 @@
<div class="np-top-title">
{{ course.name }}
</div>
<div>
{% include "course_cta_button" %}
</div>

View File

@ -0,0 +1,26 @@
<h3 class="np-card-heading">
Instructors
</h3>
<div class="instructors-list__container">
{% 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>
{% if instructor.title and instructor.title.size > 0 %}
<div class="np-content-instructors-content-info">
{{ instructor.title }}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>

View File

@ -0,0 +1,57 @@
<div class="np-course-outline np-card-content-divider">
<h3 class="np-card-heading">
Outline
</h3>
<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">
<i
class="fas np-course-outline-content-activity-icon
{% if activity.completed? %}
fa-check-circle np-progress-color
{% else %}
fa-circle
{% endif %}"
{% if activity.completed? %}
aria-label="Chapter Complete"
{% else %}
aria-hidden="true"
{% endif %}
>
</i>
{% comment %} If the activity is locked show a locked icon and then a text title {% endcomment %}
{% if activity.locked? %}
<i
class="far fa-lock-alt np-course-outline-content-activity-icon-locked"
aria-label="Chapter Locked"
></i>
{% include "course_activity_locked" %}
{% comment %} If the user is not enrolled in the course show a text title {% endcomment %}
{% elsif course.enrolled? == false %}
{% include "course_activity_locked" %}
{% comment %} Otherwise include a link {% endcomment %}
{% else %}
{% include "course_activity_unlocked", activity_classes: "np-course-outline-content-activity-link-completed" %}
{% endif %}
<div class="np-course-outline-content-activity-list-bar
{% if activity.completed? %} np-progress-background-color {% endif %}"></div>
</li>
{% endfor %}
</ol>
</li>
{% endfor %}
</ol>
</div>
</div>

View File

@ -0,0 +1,23 @@
<div class="np-top-cta">
<div class="np-hidden-mobile">
{% include "course_cta_button" %}
</div>
<div class="np-top-cta-progress-content">
<div class="np-top-cta-progress-title np-text-title">
Progress
</div>
<div class="np-progress-bar-container">
<div
style="width: {{ course.progress }}%"
class="np-progress-background-color np-card-progress-bar">
</div>
</div>
<div class="np-top-cta-progress-text">
{{ course.progress }}% Complete
</div>
</div>
</div>
<div class="np-hidden-desktop">
{% include "course_cta_button" %}
</div>

View File

@ -0,0 +1,49 @@
<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
aria-label="New Version Available"
tabindex="0"
></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" aria-hidden="true"></i>
<h3 class="np-popup-header-title">
{% t .title %}
</h3>
</header>
<div class="np-popup-body">
<h4>
{% capture header_text %}
{% t .body.header %}
{% endcapture %}
{{ header_text | replace: "course", "tutorial" }}
</h4>
<p>
{% capture body_text %}
{% t .body.content %}
{% endcapture %}
{{ body_text | replace: "course", "tutorial" }}
</p>
<a
class="np-popup-body-button"
href="{{ path }}"
>
{% capture button_text %}
{% t .body.button %}
{% endcapture %}
{{ button_text | replace: "Course", "Tutorial" }}
</a>
</div>
<div class="np-popup-tail"></div>
</div>
</div>
</div>

View File

@ -0,0 +1,15 @@
{% if courses.enrolled and courses.enrolled.any? %}
<div class="blocks-layout">
{% for course in courses.enrolled %}
{% include "cards_course", course: course, card_classes: card_classes %}
{% endfor %}
</div>
{% else %}
{% capture message %}
{% t shared.zero_state.courses.index,
key: current_school.course_vocabulary
%}
{% endcapture %}
{% assign message = message | replace: "Courses", "tutorials" %}
{% include "courses_zero_state", message: message, filters_applied: false %}
{% endif %}

View File

@ -0,0 +1,20 @@
{% if courses.enrolled and courses.enrolled.any? %}
<div class="blocks-layout">
{% for course in courses.enrolled %}
{% for category in course.categories %}
{% if category.name == 'Section 1' %}
{% include "cards_course", course: course, card_classes: card_classes %}
{% endif %}
{% endfor %}
{% endfor %}
</div>
{% else %}
{% capture message %}
{% t shared.zero_state.courses.index,
key: current_school.course_vocabulary
%}
{% endcapture %}
{% assign message = message | replace: "Courses", "tutorials" %}
{% include "courses_zero_state", message: message, filters_applied: false %}
{% endif %}

View File

@ -0,0 +1,20 @@
{% if courses.enrolled and courses.enrolled.any? %}
<div class="blocks-layout">
{% for course in courses.enrolled %}
{% for category in course.categories %}
{% if category.name == 'Section 2' %}
{% include "cards_course", course: course, card_classes: card_classes %}
{% endif %}
{% endfor %}
{% endfor %}
</div>
{% else %}
{% capture message %}
{% t shared.zero_state.courses.index,
key: current_school.course_vocabulary
%}
{% endcapture %}
{% assign message = message | replace: "Courses", "tutorials" %}
{% include "courses_zero_state", message: message, filters_applied: false %}
{% endif %}

View File

@ -0,0 +1,20 @@
{% if courses.enrolled and courses.enrolled.any? %}
<div class="blocks-layout">
{% for course in courses.enrolled %}
{% for category in course.categories %}
{% if category.name == 'Section 3' %}
{% include "cards_course", course: course, card_classes: card_classes %}
{% endif %}
{% endfor %}
{% endfor %}
</div>
{% else %}
{% capture message %}
{% t shared.zero_state.courses.index,
key: current_school.course_vocabulary
%}
{% endcapture %}
{% assign message = message | replace: "Courses", "tutorials" %}
{% include "courses_zero_state", message: message, filters_applied: false %}
{% endif %}

View File

@ -0,0 +1,9 @@
<div class="np-dashboard-resources-container">
<div class="np-zero-state-text">
<p>{{ message }}</p>
{% if filters_applied %}
<button class="np-button np-button-wide js-clear-filter-button js-filter-type__all">Clear All Filters</button>
{% endif %}
</div>
<img class="np-zero-state-courses" alt="{{ message }}" />
</div>

View File

@ -0,0 +1,81 @@
{% comment %}
<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 }}"
aria-label="{{ social_media_linke.name }}"
></i>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</nav>
{% if website_footer.show_customer_service_email? and
website_footer.school_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"
href="mailto:{{ website_footer.school_customer_service_email }}"
>
{{ website_footer.school_customer_service_email }}
</a>
</div>
{% endif %}
</div>
</footer>
{% endcomment %}

View File

@ -0,0 +1,8 @@
{% styles default %}
{% styles colors %}
{% styles custom %}
{% comment %} Install Lato {% endcomment %}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet">

View File

@ -0,0 +1,204 @@
<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 %} Dashboard {% endcomment %}
{% assign navigation_my_training = navigations.sub_navigation | where: "label", "Dashboard" | first %}
{% include "header_desktop_menu_item", label: "Dashboard", url: navigation_my_training.url, external: false %}
{% comment %} All Courses {% endcomment %}
{% include "header_desktop_menu_item", label: 'Courses', url: '/app/courses', external: false %}
{% comment %} Learning Paths {% endcomment %}
{% assign navigation_guides = navigations.sub_navigation | where: "label", "Learning Paths" | first %}
{% include "header_desktop_menu_item", label: "Learning Paths", url: navigation_guides.url, external: false %}
{% comment %} Events {% endcomment %}
{% assign navigation_events = navigations.sub_navigation | where: "label", "Events" | first %}
{% include "header_desktop_menu_item", label: navigation_events.label, url: navigation_events.url, external: false %}
{% for website_navigation in navigations.header_navigations_external %}
{% include "header_desktop_menu_item", label: website_navigation.name, url: website_navigation.path, external: true %}
{% endfor %}
</ul>
</div>
{% if current_person.signed_in? %}
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
<form action="{% route search %}" method="get" data-test="desktop-search">
<input
aria-label="{% t .search %}"
class="np-header-search-input np-header-font-background-color"
type="text"
name="q"
placeholder="{% t .search %}"
/>
<i class="np-header-search-icon far fa-search" aria-label="Search"></i>
</form>
</div>
<div class="np-hidden-mobile np-header-avatar">
<button
class="np-header-avatar-button"
data-test="open-desktop-menu"
data-toggle-class-on-target="np-hidden"
data-toggle-target=".np-header-avatar-tooltip"
data-toggle-outside
>
<img
alt="{{ current_person.name }}"
class="np-header-avatar-image"
src="{{ current_person.avatar_url }}"
>
</button>
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
<span class="np-header-avatar-tooltip-arrow-up"></span>
<div class="np-header-avatar-tooltip-learner">
<div class="np-header-avatar-tooltip-learner-name">
{{ current_person.name }}
</div>
<div class="np-header-avatar-tooltip-learner-email">
{{ current_person.email }}
</div>
</div>
<nav class="np-header-avatar-tooltip-navigation">
{% unless current_school.sso_active? %}
<a
class="np-header-avatar-tooltip-navigation-link"
href="{% route account %}"
>
{% t .profile_settings %}
</a>
{% endunless %}
<a
class="np-header-avatar-tooltip-navigation-link np-danger"
href="{% route logout %}"
>
{% t .sign_out %}
</a>
</nav>
</div>
</div>
{% else %}
<a
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
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" aria-label="search"></i>
</form>
{% comment %} Home {% endcomment %}
{% assign mobile_navigation_home = navigations.header_navigations | where: "name", "Home" | first %}
{% include "header_mobile_menu_item", label: mobile_navigation_home.name, url: mobile_navigation_home.path, external: false %}
{% comment %} Dashboard {% endcomment %}
{% assign mobile_navigation_my_training = navigations.header_navigations | where: "name", "Dashboard" | first %}
{% include "header_mobile_menu_item", label: "Dashboard", url: mobile_navigation_my_training.path, external: false %}
{% comment %} All Courses {% endcomment %}
{% include "header_mobile_menu_item", label: "Tutorials", url: "/app/courses", external: false %}
{% comment %} Learning Paths {% endcomment %}
{% assign mobile_navigation_guides = navigations.header_navigations | where: "name", "Learning Paths" | first %}
{% include "header_mobile_menu_item", label: "Learning Paths", url: mobile_navigation_guides.path, external: false %}
{% comment %} Events {% endcomment %}
{% assign mobile_navigation_events = navigations.header_navigations | where: "name", "Events" | first %}
{% include "header_mobile_menu_item", label: mobile_navigation_events.name, url: mobile_navigation_events.path, external: false %}
{% comment %} External Links {% endcomment %}
{% assign mobile_navigation_external = navigations.header_navigations | where: "external?", true %}
{% for website_navigation in mobile_navigation_external %}
{% include "header_mobile_menu_item", label: website_navigation.name, url: website_navigation.path, external: true %}
{% 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" %}

View File

@ -0,0 +1,24 @@
<li class="np-header-desktop-nav-item">
<a
href="{{ url }}"
class="np-header-desktop-nav-link np-header-font-color
{% if url contains current_page_orgin %}
is-active white-text
{% else %}
black-text
{% endif %}
"
{% if external %}target="_blank"{% endif %}
>
{{ label }}
</a>
</li>
<style>
.white-text{
color: white
}
.black-text{
color: black
}
</style>

View File

@ -0,0 +1,8 @@
<a
href="{{ url }}"
class="np-header-mobile-menu-content-button"
{% if external %} target="_blank" {% endif %}
style="color: white"
>
{{ label }}
</a>

View File

@ -0,0 +1,63 @@
{% comment %} Determine if the item should be a link or not {% endcomment %}
{% if learning_path.enrolled? and course.unlocked? %}
{% assign element_type = "a" %}
{% else %}
{% assign element_type = "div" %}
{% endif %}
<div>
<{{ element_type }}
class="np-learning-path-outline-item np-card card--horizontal"
{% if element_type == "a" %}
href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
{% endif %}
>
<div class="np-card-container">
<div class="card__image" style="background-image: url({{ item.image }})">
{% if course.optional? %}
<div class="np-card-ribbon">
Optional
</div>
{% endif %}
</div>
<div class="np-card-content np-learning-path-outline-content np-card-padding">
<div class="card__step-counter"></div>
<h3 class="np-card-content-title">
{{ course.name }}
</h3>
{% if course.instructors and course.instructors.size > 0 %}
<div class="np-card-content-subtitle">
{{ course.instructors }}
</div>
{% endif %}
<div class="np-card-content-footer">
<div class="np-card-content-progress">
{% if course.completed? %}
Complete
{% elsif course.progress > 0 %}
{{ course.progress }}% Complete
{% endif %}
</div>
</div>
</div>
{% comment %} Use a different icon based on the state of the learning path and course {% endcomment %}
{% if course.completed? %}
<div class="outline-card__icon-container outline-card__icon-complete">
<i class="fas fa-check np-learning-path-outline-icon" aria-label="Tutorial Completed"></i>
</div>
{% elsif element_type == "div" %}
<div class="outline-card__icon-container outline-card__icon-locked">
<i class="fas fa-lock np-learning-path-outline-icon" aria-label="Tutorial Locked"></i>
</div>
{% else %}
<div class="outline-card__icon-container outline-card__icon-link">
<i class="fas fa-chevron-right np-learning-path-outline-icon" aria-label="Start Tutorial"></i>
</div>
{% endif %}
</div>
</{{ element_type }}>
</div>

View File

@ -0,0 +1,22 @@
<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 %}
Enroll in Learning Path
{% elsif learning_path.started? == false %}
Start Learning Path
{% elsif learning_path.completed? %}
View Learning Path
{% else %}
Continue Learning Path
{% endif %}
</a>

View File

@ -0,0 +1,6 @@
<h3 class="np-card-heading">
About This Guide
</h3>
<div class="np-card-text">
{{ learning_path.description }}
</div>

View File

@ -0,0 +1,27 @@
<h3 class="np-card-heading">
Instructors
</h3>
<div class="np-content-instructors-content row">
{% for instructor in learning_path.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>
{% assign instructor_title_size = instructor.title | size %}
{% if instructor.title and instructor.title.size > 0 %}
<div class="np-content-instructors-content-info">
{{ instructor.title }}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>

View File

@ -0,0 +1,9 @@
<div class="np-learning-path-outline blocks-layout">
{% 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>

View File

@ -0,0 +1,23 @@
<div class="np-top-cta">
<div class="np-hidden-mobile">
{% include "learning_path_cta_button" %}
</div>
<div class="np-top-cta-progress-content">
<div class="np-top-cta-progress-title np-text-title">
Progress
</div>
<div class="np-progress-bar-container">
<div
style="width: {{ learning_path.progress }}%"
class="np-progress-background-color np-card-progress-bar">
</div>
</div>
<div class="np-top-cta-progress-text">
{{ learning_path.progress }}% Complete
</div>
</div>
</div>
<div class="np-hidden-desktop">
{% include "learning_path_cta_button" %}
</div>

View File

@ -0,0 +1,57 @@
{% if learning_path.enrolled? and training_session.unlocked? %}
<div class="np-learning-path-outline-bar np-hidden-mobile"style='display: none;'></div>
<div class="np-card">
<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" aria-hidden="true"></i>
{% if training_session.optional? %}
<div class="np-optional-ribbon">
{% t shared.optional %}
</div>
{% endif %}
</div>
</a>
</div>
{% else %}
<div class="np-card">
<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>
</div>
{% endif %}

View File

@ -0,0 +1,17 @@
{% if items and items.any? %}
<div class="blocks-layout">
{% for learning_path in items %}
{% include "cards_learning_path" with learning_path %}
{% endfor %}
</div>
{% else %}
<div class="np-learning-paths-resources-container">
<div class="np-zero-state-text">
{% capture empty_state_text %}
{% t .empty %}
{% endcapture %}
{{ empty_state_text | replace: "Learning Paths", "guides" }}
</div>
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
</div>
{% endif %}

View File

@ -0,0 +1,9 @@
<nav class="np-sub-navigation">
<div class="np-sub-navigation-content">
{% include "sub_navigation_item", label: "All Courses", icon: "fa fa-book-open", url: '/app/courses' %}
{% include "sub_navigation_item", label: "Section 1 Courses", icon: "fa fa-tasks", url: "/app/sec1-courses" %}
{% include "sub_navigation_item", label: "Section 2 Courses", icon: "fa fa-hospital-user", url: "/app/sec2-courses" %}
{% include "sub_navigation_item", label: "Section 3 Courses", icon: "fa fa-desktop", url: "/app/sec3-courses" %}
</div>
</nav>

View File

@ -0,0 +1,15 @@
<div class="np-sub-navigation-content-item
{% if url contains current_page %}
np-sub-navigation-content-item-active
{% else %}
np-sub-navigation-content-item-inactive
{% endif %}
">
<a class="np-sub-navigation-content-item-link" href="{{ url }}">
<i class="{{ icon }} np-button-color np-sub-navigation-content-item-icon" aria-hidden="true"></i>
<div class="oa-sub-navigation-content-item-label">
{{ label }}
</div>
</a>
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
</div>

View File

@ -0,0 +1,5 @@
<div class="blocks-layout">
{% for training_event in training_events.enrolled %}
{% include "cards_training_event", training_event: training_event, card_classes: card_classes %}
{% endfor %}
</div>

View File

@ -0,0 +1,11 @@
<div>
{% if training_events.available and training_events.available.any? %}
<div class="blocks-layout">
{% for training_event in training_events.available %}
{% include "cards_training_event", training_event: training_event, card_classes: "col-x-sm-6 col-sm-6 col-md-4" %}
{% endfor %}
</div>
{% else %}
{% include "training_events_zero_state" %}
{% endif %}
</div>

View File

@ -0,0 +1,43 @@
<div class="dropdown dropdown-calendar">
<button
class="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" aria-hidden="true"></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.ical_calendar_url }}"
target="_blank"
>
{% t .ical_calendar %}
</a>
</li>
</ul>
</div>

View File

@ -0,0 +1,31 @@
<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-button np-button-big np-button-secondary">
{% t .unregister %}
</button>
{% else %}
<button type="submit" class="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>

View File

@ -0,0 +1,12 @@
<div class="np-card-training-session-date-bar"></div>
<div class="np-card-training-session-date-day">
{{ training_session.day }}
</div>
<div class="card__month-year-container">
<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>

View File

@ -0,0 +1,73 @@
{% include "header", current_page_orgin: "training_events" %}
<main class="np-main np-page-container np-training-session">
<div class="blocks-layout">
<div class="col-md-8">
<div class="np-card">
<div class="np-card-container details-card__card-container">
<div class="np-resource-header details-card__header np-card-padding-dynamic">
<div class="np-top-title">
{{ training_event.title }}
</div>
<div class="np-top-vocabulary">
{% case training_event.event_type %}
{% when "online" %}
<i class="fa fa-laptop np-training-session-icon" aria-hidden="true"></i>
Online Event
{% when "in_person" %}
<i class="fa fa-users-class np-training-session-icon" aria-hidden="true"></i>
In-Person Event
{% endcase %}
</div>
</div>
<div class="np-divider"></div>
<div class="np-card-padding-dynamic details-card__card-content">
{% if training_event.description and training_event.description.size > 0 %}
{% include "training_session_description" %}
{% endif %}
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="blocks-layout">
<div class="np-card col-sm-6 col-md-12">
<div class="np-card-container">
<div class="np-card-content np-card-content-vertical np-card-padding">
{% include "training_session_details" %}
{% include "training_session_cta" %}
</div>
</div>
</div>
<div class="col-sm-6 col-md-12">
<div class="np-training-session-sessions-title">
{% t shared.more_sessions %}
</div>
{% if training_event.sessions and 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>
</div>
</div>
</main>
{% include "footer" %}

View File

@ -0,0 +1,60 @@
<div class="np-card-training-session-date">
{% include "training_session_date", training_session: training_session %}
{% if training_session.approved? %}
<div class="session-date__other-info-container np-training-session-cta-note np-alert-success">
<div class="session-date__other-info-wrapper">
<i class="far fa-check np-training-session-icon" aria-hidden="true"></i>
<span>You're registered!</span>
</div>
</div>
{% elsif training_session.pending? %}
<div class="session-date__other-info np-training-session-cta-note np-alert-error">
<div class="session-date__other-info-wrapper">
<span>Pending waiting approval</span>
</div>
</div>
{% elsif training_session.denied? %}
<div class="session-date__other-info np-training-session-cta-note np-alert-error">
<div class="session-date__other-info-wrapper">
<span>Denied contact your academy admin</span>
</div>
</div>
{% elsif training_session.too_late? %}
<div class="session-date__other-info np-training-session-cta-note np-alert-error">
<div class="session-date__other-info-wrapper">
<span>Too late meeting started</span>
</div>
</div>
{% elsif training_session.no_seats? %}
<div class="session-date__other-info np-training-session-cta-note np-alert-error">
<div class="session-date__other-info-wrapper">
<span>No seats available</span>
</div>
</div>
{% endif %}
</div>
<div class="training-session__details">
<div class="np-training-session-time">
<i class="fa fa-clock np-training-session-icon" aria-label="Event Time"></i>
{{ training_session.time_period | replace: "AM", "am" | replace: "PM", "pm" | replace: "-", "" }} {{ training_session.time_zone }}
</div>
<div class="np-training-session-location">
{% if training_session.location %}
<i class="fa fa-map-marker-alt np-training-session-icon" aria-label="Event Location"></i>
{{ training_session.location }}
{% elsif training_session.session_url %}
<i class="fa fa-globe np-training-session-icon" aria-label="Event URL"></i>
<a href="https://{{ training_session.session_url }}" class="np-button-color" target="_blank" >
{{ training_session.session_url }}
</a>
{% endif %}
</div>
{% if training_session.instructor and training_session.instructor.size > 0 %}
<div>
<i class="fa fa-chalkboard-teacher np-training-session-icon" aria-label="Instructor"></i>
{{ training_session.instructor }}
</div>
{% endif %}
</div>

View File

@ -0,0 +1,47 @@
{% include "header", current_page_orgin: "catalog" %}
<main class="np-main np-page-container page--course-overview">
{% comment %} Get the full size background image by removing the modifier from the URL {% endcomment %}
{% assign course_image_full_size = course.image_url | replace: '/resize=width:820,height:500,fit:crop/', '/' %}
<div class="page-background-image" style="background-image: url({{ course_image_full_size }})"></div>
<div class="np-card">
<div class="np-card-container">
<div class="np-resource-header details-card__header np-card-padding-dynamic">
{% include "course_header" %}
</div>
<div class="np-divider"></div>
<div class="details-card__card-content np-card-padding-dynamic">
{% if course.full_description and course.full_description.size > 0 %}
{% include "course_description" %}
{% endif %}
<div class="cta__container">
{% if course.enrolled? and course.started? %}
{% include "course_progress_and_cta" %}
{% else %}
{% include "course_cta_button" %}
{% endif %}
</div>
{% if course.instructors and course.instructors.any? %}
<div class="np-card-content-divider">
{% include "course_instructors" %}
</div>
{% endif %}
{% include "course_outline" %}
{% if course.events and course.events.any? %}
<div class="np-card-content-divider">
{% include "course_events" %}
</div>
{% endif %}
{% include "course_cta_button" %}
</div>
</div>
</div>
</main>
{% include "footer" %}

View File

@ -0,0 +1,17 @@
{% include "header", current_page_orgin: "courses" %}
{% include "sub_navigation", current_page: "/app/courses" %}
<main class="np-main np-courses np-subpage-container">
<h1 class="np-resource-title">
All Courses
</h1>
<div class="np-resource-subtitle">
{% capture subtitle_text %}
{%comment%}{% t .headline, key: current_school.course_vocabulary %}{%endcomment%}
These are all courses you are enrolled in
{% endcapture %}
{{ subtitle_text | replace: "Courses", "tutorials" }}
</div>
<br>
{% include "courses_index", card_classes: "col-xs-12 col-sm-6 col-lg-4 np-stretch-content" %}
</main>
{% include "footer" %}

View File

@ -0,0 +1,139 @@
{% comment %} Initialize Variables {% endcomment %}
{% assign show_learning_paths_section = false %}
{% assign show_events_section = false %}
{% assign learning_path_section_classes = "" %}
{% assign event_section_classes = "" %}
{% assign learning_path_card_classes = "col-md-6" %}
{% assign event_card_classes = "col-x-sm-6 col-sm-6 col-md-4 col-lg-3" %}
{% comment %} Determine if learning paths are enabled and the user is enrolled in at least one learning path {% endcomment %}
{% if features.learning_paths? and learning_paths.enrolled and learning_paths.enrolled.any? %}
{% assign show_learning_paths_section = true %}
{% endif %}
{% comment %} Determine if events are enabled and the user is registsered for at least one event {% endcomment %}
{% if features.training_events? and training_events.enrolled and training_events.enrolled.any? %}
{% assign show_events_section = true %}
{% endif %}
{% comment %} Determine whether special classes need to be added to non course sections and the cards within {% endcomment %}
{% if show_learning_paths_section %}
{% assign learning_path_section_classes = "col-md-8 col-lg-6" %}
{% assign learning_path_card_classes = "" %}
{% endif %}
{%if show_events_section%}
{% assign event_section_classes = "col-md-4 col-lg-6" %}
{% assign event_card_classes = "col-x-sm-6 col-sm-6 col-md-12 col-lg-6" %}
{%endif%}
{% include "header", current_page_orgin: "dashboard" %}
<main class="np-main np-dashboard np-subpage-container">
<div class="page__header-wrapper">
<h1 class="np-resource-title">My Dashboard</h1>
</div>
<div class="page__primary-content">
<div class="blocks-layout">
{% comment %} Show the first featured course as a banner {% endcomment %}
{% if courses.featured and courses.featured.any? %}
<div>
{% include "banner_course", course: courses.featured.first, button_text: "Get Started" %}
</div>
{% endif %}
{% comment %} Show this section if either the event section or learning path section has content {% endcomment %}
{% if show_learning_paths_section or show_events_section %}
<div class="blocks-layout">
{% if show_learning_paths_section %}
<div class="{{ learning_path_section_classes }}">
<h2 class="np-dashboard-resources-title">
Learning Paths
</h2>
{% include "learning_paths_index", items: learning_paths.enrolled, card_classes: learning_path_card_classes %}
</div>
{% endif %}
{% if show_events_section %}
<div class="{{ event_section_classes }}">
<h2 class="np-dashboard-resources-title">
Upcoming Events
</h2>
{% include "training_events_dashboard", card_classes: event_card_classes %}
</div>
{% endif %}
</div>
{% endif %}
<div>
<h2 class="np-dashboard-resources-title">
My Courses
</h2>
{% if courses.enrolled and courses.enrolled.any? %}
{% comment %} Sort enrolled courses by progress {% endcomment %}
{% assign enrolled_courses_sorted = courses.enrolled | sort_natural: "short_description" | reverse | sort_natural: "progress" | reverse %}
{% comment %} Divide courses by progress/completion state {% endcomment %}
{% assign courses_completed = enrolled_courses_sorted | where: "completed?", true %}
{% assign courses_in_progress = enrolled_courses_sorted | where: "completed?", false | where: "started?", true %}
{% assign courses_enrolled = enrolled_courses_sorted | where: "started?", false %}
{% comment %} In Progress & Enrolled courses {% endcomment %}
{% if courses_in_progress.size > 0 or courses_enrolled.size > 0 %}
<h3 class="dashboard-layout__subtitle">
Courses In Progress
</h3>
<div class="blocks-layout">
{% comment %} In Progress courses {% endcomment %}
{% if courses_in_progress.size > 0 %}
{% for course in courses_in_progress %}
{% include "cards_course", course: course, card_classes: "col-x-sm-6 col-sm-6 col-md-4 col-lg-3" %}
{% endfor %}
{% endif %}
{% comment %} Enrolled courses {% endcomment %}
{% if courses_enrolled.size > 0 %}
{% for course in courses_enrolled %}
{% include "cards_course", course: course, card_classes: "col-x-sm-6 col-sm-6 col-md-4 col-lg-3" %}
{% endfor %}
{% endif %}
</div>
{% endif %}
{% comment %} Completed courses {% endcomment %}
{% if courses_completed.size > 0 %}
<h3 class="dashboard-layout__subtitle">
Completed Courses
</h3>
<div class="blocks-layout">
{% for course in courses_completed %}
{% include "cards_course", course: course, card_classes: "col-x-sm-6 col-sm-6 col-md-4 col-lg-3" %}
{% endfor %}
</div>
{% endif %}
{% else %}
{% capture message %}
{% t shared.zero_state.courses.index,
key: current_school.course_vocabulary
%}
{% endcapture %}
{% assign message = message | replace: "Courses", "tutorials" %}
{% include "courses_zero_state", message: message, filters_applied: false %}
{% endif %}
</div>
</div>
</div>
</main>
{% include "footer" %}
}}

View File

@ -0,0 +1,114 @@
{% include "header", current_page_orgin: "false" %}
<main class="np-main np-homepage">
<div class="np-homepage-hero">
<div class="np-homepage-hero-content">
<div class="np-homepage-headline is-animation np-header-font-color">
{{ homepage.headline }}
</div>
<div class="np-homepage-subheadline np-header-font-color">
{{ homepage.subheadline }}
</div>
</div>
</div>
<svg class="homepage-waves__wave-1-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 150">
<path class="homepage-waves__wave-1 is-animation" d="M5984.23,101c-58.92-1.53-60.5-94.9-141.4-95.37-82.28-.48-87.5,94.18-169.31,92.18-60.28-1.48-80.93-94.31-149.31-92.66-67.51,1.64-83.1,87.24-155.81,86.28-49.22-.65-72-77.4-122.79-82.61-72.21-7.41-72.5,80.57-156.29,79.42-66.63-.92-68.81-87.51-123.81-85C4900.7,6.11,4893.8,95,4827.92,93.55c-51.81-1.16-71.73-83.71-114.42-86.1-72.39-4.06-85.27,88.17-160,89.29C4482.8,97.81,4484.4-.95,4432.57,0,4371.39,1.14,4356.11,93,4294,96.74c-60.14,3.67-78-94.36-142.33-94.61C4083,1.87,4077.21,104.19,4000,104.19c-50.91,0-68.57-98.87-121.86-98.87-59.83,0-80.93,104.18-157.22,102.05-60.56-1.68-68-101-142.92-101-60.32,0-69.95,101.3-156,100.61-46.95-.38-60-97-124.6-99.78C3224.62,4.08,3232.62,101,3148,107.37c-64,4.83-79.69-96.59-138.61-99.24-57.56-2.58-83.72,90.74-153.49,89.68-54.53-.83-79.4-95.2-142.33-94.61-63.24.59-85.42,94.22-156.28,93.54C2492.62,96.13,2493,11,2427,8.26c-77.22-3.19-61.83,95.8-153.5,94.86-52.48-.53-83-97.84-131.16-101C2077.9-2.09,2054,102.8,1984.23,101c-58.92-1.53-60.5-94.9-141.4-95.37-82.28-.48-87.5,94.18-169.31,92.18-60.28-1.48-80.93-94.31-149.31-92.66-67.51,1.64-83.1,87.24-155.81,86.28-49.22-.65-72-77.4-122.79-82.61-72.21-7.41-72.5,80.57-156.29,79.42-66.63-.92-68.81-87.51-123.81-85C900.7,6.11,893.8,95,827.92,93.55,776.11,92.39,756.19,9.84,713.5,7.45c-72.39-4.06-85.27,88.17-160,89.29C482.8,97.81,484.4-.95,432.57,0,371.39,1.14,356.11,93,294,96.74c-60.14,3.67-78-94.36-142.33-94.61C83,1.87,77.21,104.19,0,104.19V150H6000V99.52A65.85,65.85,0,0,1,5984.23,101Z"/>
</svg>
<div class="page-section homepage-navigation__section np-max-width">
<nav class="homepage-navigation__wrapper blocks-layout">
<div class="homepage-navigation__item-container">
<a class="homepage-navigation__item" href="/app/sec1-courses">
<div class="homepage-navigation__title">Dubber Section 1 Courses</div>
<svg class="animation-setup homepage-navigation__animation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 820 500">
<rect class="wave-background" width="820" height="500"/>
<path class="is-animation wave-1" d="M3005.11,89.36c-91.36,7.35-133.69,85.06-225.89,86.32-101.51,1.39-153.61-91.62-254.76-86.48-24.44,1.24-45.15,8.11-64.46,17.13-29.47,21.85-74.25,49.85-131.73,53.91-83.85,5.92-140.92-55.87-224.89-61.15-116.51-7.33-190.87,94.72-307.14,86.19C1691.79,177.61,1640.49,84.06,1536,91.41c-33.39,2.34-67,26.39-109.76,48.67-50.72,26.42-110.47,42.39-148.72,40.42-53.54-2.76-115-42-168-75-50.43-31.4-84.89-25.3-112-19-86,20-105.79,67-185.74,83.31C704.32,191.67,672.38,79.12,545.11,89.36c-91.36,7.35-133.69,85.06-225.89,86.32C217.71,177.07,165.61,84.06,64.46,89.2,40,90.44,19.31,97.31,0,106.33V500H3280V168c-2.68.65-5.42,1.26-8.24,1.84C3164.32,191.67,3132.38,79.12,3005.11,89.36Z"/>
<path class="is-animation wave-2" d="M3730.45,260.25c-120-5.81-196.63,75.09-316.42,68.33-53.8-3-93.91-23.1-134-41.67s-80.25-35.66-134.08-32.75c-96.57,5.22-129.79,84.72-226.2,77.16C2730.5,316.5,2702.5,230.5,2538.56,236.2,2428.32,240,2371.29,307.54,2261.12,310c-107,2.42-172.1-62-279-65.17-124.66-3.66-203.64,77-328,71.45-105.28-4.68-169.89-70.26-274.7-63.77C1285.29,258.37,1241.68,320,1146.7,321c-104.58,1.1-158.25-72.64-262.46-68.56-80.54,3.15-121.85,52-202.11,56.32-86.38,4.7-145.18-44.29-231.68-48.48-120-5.81-196.63,75.09-316.42,68.33-53.8-3-93.91-23.1-134-41.67V500H4100V265.23c-44.72,15.71-81.79,40.45-137.87,43.5C3875.75,313.43,3817,264.44,3730.45,260.25Z"/>
<path class="is-animation wave-3" d="M4633.5,350c-119.63,5.43-160.6,74.85-280.25,80.25-64.21,2.9-121.55-14.69-165.35-32.69-27.81-11.42-55.45-23.91-87.9-33.13a356,356,0,0,0-61.7-11.88c-32.77-3.36-64.14,1.32-69.65,1.91-120.15,13-162.15,65-270.15,82-76.36,12-225-12-320-57-34.64-16.41-83-38-197.61-37.71-200.91.52-277.94,78.63-432,72.88-130.44-4.87-210.48-73.08-340.33-66.33C2292,354.4,2238,418.47,2120.29,419.51c-129.56,1.15-196.06-75.55-325.17-71.31-99.78,3.28-151,54.05-250.4,58.58-107,4.88-179.86-46.07-287-50.42-148.71-6.05-243.61,78.1-392,71.06C732.36,421.1,666.89,344,533.5,350c-119.63,5.43-160.6,74.85-280.25,80.25C189,433.18,131.7,415.59,87.9,397.59,60.09,386.17,32.45,373.68,0,364.46V500H4920V422.28C4815.52,403.64,4750.74,344.7,4633.5,350Z"/>
</svg>
</a>
</div>
<div class="homepage-navigation__item-container">
<a class="homepage-navigation__item" href="/app/sec2-courses">
<div class="homepage-navigation__title">Dubber Section 2 Courses</div>
<svg class="animation-pe homepage-navigation__animation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 820 500">
<rect class="burst-background is-animation" width="820" height="500"/>
<path class="burst-1 is-animation" d="M142-104C85.85-65.62,67.47-9.55,33,101-10.4,240.18-50.28,368.09,12,459c15.51,22.63,17.6,24.23,147,103,115,70,154.38,115.56,185,124,181.93,50.16,382.11-168,406-194,32.73-35.66,64.51-71.06,82-128,28.72-93.49-30.18-178.36-60-255C732.64,7.81,710-120.27,595-160c-20.51-7.09-111,12-227,28C277.77-119.55,170.68-123.61,142-104Z"/>
<path class="burst-2 is-animation" d="M254-57C170.71-4.13,141,84.32,118,153c-24.1,71.85-51.15,152.5-16,231,40.46,90.37,139,123.43,233,155,77.17,25.9,131.4,44.11,198,26,100.52-27.33,148.69-128.1,189-202,36-66,6.86-109.72-9-203C700.93,89,694.89,53.47,678,25,609.88-89.84,392.69-145,254-57Z"/>
<path class="burst-3 is-animation" d="M374-39c-88,20-92.17,91.22-123,139-40,62-111.14,103.54-119,151-14.85,89.67,84.27,177.54,175,221,96.63,46.28,243.56,69.1,312-10,38.53-44.54,37.08-102.32,38-206,1.23-138.5,7.89-184.61-29-216C585.82,4.11,555,30,484,12,442.69,1.53,395.16-43.81,374-39Z"/>
<path class="burst-4 is-animation" d="M436,59c47.53,8,54.71,50.13,103,137,28.57,51.38,61.75,82.65,57,111-10.77,64.28-94.72,102.5-153,112-60.82,9.91-166.45.39-203-74-37.35-76,25.33-163.08,44-189C297.8,136.84,362.78,46.6,436,59Z"/>
<path class="burst-5 is-animation" d="M423,162c-34.24,6-81.95,14.41-98,54-15.41,38,8.16,80.74,32,103,22.88,21.37,65.56,42.15,94,26,6.06-3.44,14-10,34-94,14.93-62.67,14-73.81,7-82C477.73,152.38,446.7,157.83,423,162Z"/>
</svg>
</a>
</div>
<div class="homepage-navigation__item-container">
<a class="homepage-navigation__item" href="/app/sec3-courses">
<div class="homepage-navigation__title">Dubber Section 3 Courses</div>
<svg class="animation-network homepage-navigation__animation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 820 500">
<path class="wave-1 is-animation" d="M-52.35,800C-161.53,621.17-160.42,557.72-137.8,533.42c35.22-37.85,132.9,8.24,154.93-28.86,24.16-40.69-79.74-119.17-54.75-168.09,22-43.05,115.21-7.26,153.8-59.61,36.85-50-19.82-121.16,13.91-153.06,38-36,126.12,39.39,182.13.6,47.6-33,13.23-107.65,60.62-141.26,51.27-36.36,111.63,36.7,188.73,11.13,89.92-29.82,76-151.82,168.61-201.21C768.38-227.32,834-240.25,950-190.19"/>
<path class="wave-2 is-animation" d="M-52.35,800C-161.53,621.17-160.42,557.72-137.8,533.42c35.22-37.85,132.9,8.24,154.93-28.86,24.16-40.69-79.74-119.17-54.75-168.09,22-43.05,115.21-7.26,153.8-59.61,36.85-50-19.82-121.16,13.91-153.06,38-36,126.12,39.39,182.13.6,47.6-33,13.23-107.65,60.62-141.26,51.27-36.36,111.63,36.7,188.73,11.13,89.92-29.82,76-151.82,168.61-201.21C768.38-227.32,834-240.25,950-190.19"/>
<path class="wave-3 is-animation" d="M-52.35,800C-161.53,621.17-160.42,557.72-137.8,533.42c35.22-37.85,132.9,8.24,154.93-28.86,24.16-40.69-79.74-119.17-54.75-168.09,22-43.05,115.21-7.26,153.8-59.61,36.85-50-19.82-121.16,13.91-153.06,38-36,126.12,39.39,182.13.6,47.6-33,13.23-107.65,60.62-141.26,51.27-36.36,111.63,36.7,188.73,11.13,89.92-29.82,76-151.82,168.61-201.21C768.38-227.32,834-240.25,950-190.19"/>
<path class="wave-4 is-animation" d="M-52.35,800C-161.53,621.17-160.42,557.72-137.8,533.42c35.22-37.85,132.9,8.24,154.93-28.86,24.16-40.69-79.74-119.17-54.75-168.09,22-43.05,115.21-7.26,153.8-59.61,36.85-50-19.82-121.16,13.91-153.06,38-36,126.12,39.39,182.13.6,47.6-33,13.23-107.65,60.62-141.26,51.27-36.36,111.63,36.7,188.73,11.13,89.92-29.82,76-151.82,168.61-201.21C768.38-227.32,834-240.25,950-190.19"/>
<path class="wave-5 is-animation" d="M-52.35,800C-161.53,621.17-160.42,557.72-137.8,533.42c35.22-37.85,132.9,8.24,154.93-28.86,24.16-40.69-79.74-119.17-54.75-168.09,22-43.05,115.21-7.26,153.8-59.61,36.85-50-19.82-121.16,13.91-153.06,38-36,126.12,39.39,182.13.6,47.6-33,13.23-107.65,60.62-141.26,51.27-36.36,111.63,36.7,188.73,11.13,89.92-29.82,76-151.82,168.61-201.21C768.38-227.32,834-240.25,950-190.19"/>
<path class="wave-6 is-animation" d="M-52.35,800C-161.53,621.17-160.42,557.72-137.8,533.42c35.22-37.85,132.9,8.24,154.93-28.86,24.16-40.69-79.74-119.17-54.75-168.09,22-43.05,115.21-7.26,153.8-59.61,36.85-50-19.82-121.16,13.91-153.06,38-36,126.12,39.39,182.13.6,47.6-33,13.23-107.65,60.62-141.26,51.27-36.36,111.63,36.7,188.73,11.13,89.92-29.82,76-151.82,168.61-201.21C768.38-227.32,834-240.25,950-190.19"/>
</svg>
</a>
</div>
<div class="homepage-navigation__button-container">
<a class="homepage-navigation__button is-animation" href="{% route dashboard %}">
Go To <br>My Dashboard
</a>
</div>
</nav>
</div >
{% if courses.featured and courses.featured.any? %}
<div class="np-homepage-featured page-section np-max-width">
{% comment %} Show featured section text if either headline or subheadline are defined {% endcomment %}
{% if homepage.featured_courses_headline and homepage.featured_courses_headline.size > 0 %}
{% assign has_featured_headline = true %}
{% else %}
{% assign has_featured_headline = false %}
{% endif %}
{% if homepage.featured_courses_subheadline and homepage.featured_courses_subheadline.size > 0 %}
{% assign has_featured_subheadline = true %}
{% else %}
{% assign has_featured_subheadline = false %}
{% endif %}
{% if has_featured_headline or has_featured_subheadline %}
<div class="np-homepage-featured-text">
{% if homepage.featured_courses_headline and homepage.featured_courses_headline.size > 0 %}
<div class="np-homepage-headline">
{{ homepage.featured_courses_headline }}
</div>
{% endif %}
{% if homepage.featured_courses_subheadline and homepage.featured_courses_subheadline.size > 0 %}
<div class="np-homepage-subheadline">
{{ homepage.featured_courses_subheadline }}
</div>
{% endif %}
</div>
{% endif %}
<div class="blocks-layout">
{% comment %} Add different classes dependant on the number of featured courses. {% endcomment %}
{% assign card_classes = "card--horizontal np-stretch-content" %}
{% case courses.featured.size %}
{% when 3 %}
{% assign card_classes = card_classes | append: " col-lg-4" %}
{% when 2 %}
{% assign card_classes = card_classes | append: " col-md-6" %}
{% endcase %}
{% for course in courses.featured %}
{% include "cards_course", course: course, card_classes: card_classes %}
{% endfor %}
</div>
</div>
{% endif %}
<svg class="homepage-waves__wave-2-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 150">
<path class="homepage-waves__wave-2 is-animation" d="M7818.66,2.13C7737.85-2.09,7707.9,102.8,7620.41,101c-73.85-1.53-75.84-94.9-177.26-95.37C7340,5.15,7333.46,99.81,7230.91,97.81c-75.58-1.48-101.46-94.31-187.18-92.66-84.64,1.64-104.18,87.24-195.33,86.28-61.7-.65-90.28-77.4-153.94-82.61-90.53-7.41-90.89,80.57-195.92,79.42-83.53-.92-86.27-87.51-155.22-85-81.25,2.91-89.9,91.83-172.48,90.35-65-1.16-89.93-83.71-143.44-86.1a115.28,115.28,0,0,0-27.4,1.9v.13c-67.84,13.2-89.79,86.4-173.18,87.4-88.63,1.06-86.63-97.7-151.61-96.74-76.69,1.13-95.84,93-173.76,96.74-75.39,3.67-97.77-94.36-178.43-94.61-86.08-.27-93.29,102.05-190.09,102.05-63.82,0-86-98.86-152.77-98.86-75,0-95,105.17-190.66,103-75.92-1.69-68-100-160-97-57.86,1.89-77.69,84.57-164,85-78.21.39-82-86-152-88-86.37-2.45-79.66,93.56-174.12,96.75-80.42,2.71-68.16-99-183.61-96.86C3879,9.81,3839.6,101,3762.7,101c-72.94,0-78.26-96.73-169.23-94.61-75.58,1.77-115.21,103-179.46,99.92C3355.25,103.49,3345.2,6,3266.65,7.22c-91.31,1.4-81.21,93.78-187.34,100.15-80.24,4.83-99.9-96.59-173.76-99.24-72.17-2.58-105,90.74-192.42,89.68C2644.77,97,2613.59,2.61,2534.7,3.2c-79.28.59-107.08,94.22-195.92,93.54-81-.61-80.6-85.76-163.26-88.48-96.8-3.19-77.51,95.8-192.42,94.86-65.79-.53-104.08-97.84-164.44-101C1737.85-2.09,1707.9,102.8,1620.41,101c-73.85-1.53-75.84-94.9-177.26-95.37C1340,5.15,1333.46,99.81,1230.91,97.81c-75.58-1.48-101.46-94.31-187.18-92.66C959.09,6.79,939.55,92.39,848.4,91.43,786.7,90.78,758.12,14,694.46,8.82c-90.53-7.41-90.89,80.57-195.92,79.42C415,87.32,412.27.73,343.32,3.2,262.07,6.11,253.42,95,170.84,93.55c-65-1.16-89.93-83.71-143.44-86.1A115.28,115.28,0,0,0,0,9.35V150H8000V102.47c-5.3.46-10.91.7-16.9.65C7917.31,102.59,7879,5.28,7818.66,2.13Z"/>
</svg>
<svg class="homepage-waves__wave-3-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 150">
<path class="homepage-waves__wave-3 is-animation" d="M7682.34,88.24c-107.48-.92-111-87.51-199.73-85C7378.07,6.11,7366.94,95,7260.68,93.55,7177.1,92.39,7145,9.84,7076.12,7.45,6959.34,3.39,6938.56,95.62,6818,96.74,6704,97.81,6706.56-.95,6623,0,6524.28,1.14,6499.63,93,6399.37,96.74c-97,3.67-125.8-94.36-229.58-94.61-83.25-.2-109.17,57.55-169.79,86.25-20,9.49-43.86,15.81-74.8,15.81-82.12,0-110.6-98.87-196.57-98.87-96.5,0-130.55,104.18-253.6,102.05C5377.34,105.69,5354.78,8.61,5231,9c-76,.24-124,96-227.95,98.37-103.33,2.36-128.55-96.59-223.59-99.24-92.85-2.58-135,90.74-247.59,89.68-88-.83-128.08-95.2-229.58-94.61-102,.59-137.79,94.22-252.09,93.54C3945.93,96.13,3946.48,11,3840.12,8.26c-124.54-3.19-99.73,95.8-247.59,94.86-84.65-.53-133.91-97.84-211.57-101C3277-2.09,3238.43,102.8,3125.86,101c-95-1.53-97.58-94.9-228.08-95.37-132.71-.48-141.14,94.18-273.1,92.18-97.24-1.48-130.55-94.31-240.85-92.66-108.9,1.64-134,87.24-251.33,86.28-79.39-.65-116.16-77.4-198.07-82.61C1818,1.41,1817.49,89.39,1682.34,88.24c-107.48-.92-111-87.51-199.73-85C1378.07,6.11,1366.94,95,1260.68,93.55,1177.1,92.39,1145,9.84,1076.12,7.45,959.34,3.39,938.56,95.62,818,96.74,704,97.81,706.56-.95,623,0,524.28,1.14,499.63,93,399.37,96.74c-97,3.67-125.8-94.36-229.58-94.61C86.54,1.93,60.62,59.68,0,88.38V150H8000V29.78c-19.27-10.91-40.27-19.35-65.57-21C7818,1.41,7817.49,89.39,7682.34,88.24Z"/>
</svg>
</main>
{% include "footer" %}

View File

@ -0,0 +1,58 @@
{% include "header", current_page_orgin: "learning_paths" %}
<main class="np-main np-page-container page--learning-path-overview">
{% comment %} Get the full size background image by removing the modifier from the URL {% endcomment %}
{% assign learning_path_image_full_size = learning_path.image_url | replace: '/resize=width:820,height:500,fit:crop/', '/' %}
<div class="page-background-image" style="background-image: url({{ learning_path_image_full_size }})"></div>
<div class="blocks-layout">
<div class="col-md-6">
<div class="np-card">
<div class="details-card__card-container np-card-container">
<div class="np-resource-header details-card__header np-card-padding-dynamic">
<div class="np-top-title">
{{ learning_path.name }}
</div>
<div class="np-hidden-desktop">
{% include "learning_path_cta_button" %}
</div>
</div>
<div class="np-divider"></div>
<div class="details-card__card-content np-card-padding-dynamic">
{% if learning_path.description and learning_path.description.size > 0 %}
{% include "learning_path_description" %}
{% endif %}
<div class="cta__container np-hidden-mobile">
{% include "learning_path_cta_button" %}
</div>
{% if learning_path.instructors and learning_path.instructors.any? %}
<div class="np-card-content-divider">
{% include "learning_path_instructors" %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="cta__container cta--outline">
{% if learning_path.enrolled? and learning_path.started? %}
{% include "learning_path_progress_and_cta" %}
{% else %}
{% include "learning_path_cta_button" %}
{% endif %}
</div>
{% include "learning_path_outline" %}
</div>
</div>
</main>
{% include "footer" %}

View File

@ -0,0 +1,23 @@
{% include "header", current_page_orgin: "learning_paths" %}
<main class="np-main np-learning-paths np-subpage-container">
<div class="page__header-wrapper">
<h1 class="np-resource-title">
Browse Learning Paths
</h1>
{% comment %} Capture subtitle text so it can be modified {% endcomment %}
{% capture subtitle_text %}
{% t .subtitle %}
{% endcapture %}
{% if subtitle_text and subtitle_text.size > 0 %}
<div class="np-resource-subtitle">
{{ subtitle_text | replace: "courses", "tutorials" }}
</div>
{% endif %}
</div>
{% include "learning_paths_index", items: learning_paths.available, card_classes: "col-md-6" %}
</main>
{% include "footer" %}

View File

@ -0,0 +1,17 @@
{% include "header", current_page_orgin: "courses" %}
{% include "sub_navigation", current_page: "/app/sec1-courses" %}
<main class="np-main np-courses np-subpage-container">
<h1 class="np-resource-title">
Section 1 Courses
</h1>
<div class="np-resource-subtitle">
{% capture subtitle_text %}
{%comment%}{% t .headline, key: current_school.course_vocabulary %}{%endcomment%}
These are all courses filed under Section 1
{% endcapture %}
{{ subtitle_text | replace: "Courses", "tutorials" }}
</div>
<br>
{% include "courses_sec1_index", card_classes: "col-xs-12 col-sm-6 col-lg-4 np-stretch-content" %}
</main>
{% include "footer" %}

View File

@ -0,0 +1,17 @@
{% include "header", current_page_orgin: "courses" %}
{% include "sub_navigation", current_page: "/app/sec2-courses" %}
<main class="np-main np-courses np-subpage-container">
<h1 class="np-resource-title">
Section 2 Courses
</h1>
<div class="np-resource-subtitle">
{% capture subtitle_text %}
{%comment%}{% t .headline, key: current_school.course_vocabulary %}{%endcomment%}
These are all courses filed under Section 2
{% endcapture %}
{{ subtitle_text | replace: "Courses", "tutorials" }}
</div>
<br>
{% include "courses_sec2_index", card_classes: "col-xs-12 col-sm-6 col-lg-4 np-stretch-content" %}
</main>
{% include "footer" %}

View File

@ -0,0 +1,17 @@
{% include "header", current_page_orgin: "courses" %}
{% include "sub_navigation", current_page: "/app/sec3-courses" %}
<main class="np-main np-courses np-subpage-container">
<h1 class="np-resource-title">
Section 3 Courses
</h1>
<div class="np-resource-subtitle">
{% capture subtitle_text %}
{%comment%}{% t .headline, key: current_school.course_vocabulary %}{%endcomment%}
These are all courses filed under Section 1
{% endcapture %}
{{ subtitle_text | replace: "Courses", "tutorials" }}
</div>
<br>
{% include "courses_sec3_index", card_classes: "col-xs-12 col-sm-6 col-lg-4 np-stretch-content" %}
</main>
{% include "footer" %}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,13 @@
{% include "header", current_page_orgin: "training_events" %}
<main class="np-main np-training-events np-subpage-container">
<div class="page__header-wrapper">
<h1 class="np-resource-title">
{% t .title %}
</h1>
<div class="np-resource-subtitle">
{% t .subtitle %}
</div>
</div>
{% include "training_events_index" %}
</main>
{% include "footer" %}

View File

@ -0,0 +1 @@
{% include "training_session_desktop_view" %}