pixel dark & stripe
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.
@ -0,0 +1,52 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-image-content-top">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<h3 class="np-card-content-title np-color-white">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle np-color-white">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-image-content-bottom">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
{% include "course_details" %}
|
||||
<div class="np-card-content-footer">
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big" href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
>
|
||||
{% 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 %}
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,52 @@
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path np-featured-course">
|
||||
<div class="np-featured-course-img-container">
|
||||
<div class="np-card-image-content-top">
|
||||
{% include "course_details" %}
|
||||
</div>
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-image-content-bottom">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</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">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle np-color-white">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-description">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button" href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
>
|
||||
{% 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 %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,65 @@
|
||||
<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-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
|
||||
<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">
|
||||
<a
|
||||
class="np-button"
|
||||
{% if learning_path.enrolled? %}
|
||||
{% if learning_path.current_item.course? %}
|
||||
href="{% route 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>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
<span class="np-learning-path-items-count">
|
||||
{{ learning_path.items.count }} {% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,45 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-image-content-top">
|
||||
|
||||
<h3 class="np-card-content-title np-color-white">
|
||||
Photography
|
||||
</h3>
|
||||
</div>
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-image-content-bottom">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
{% include "course_details" %}
|
||||
<div class="np-card-content-footer">
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big" href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
>
|
||||
{% 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 %}
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,44 @@
|
||||
<div class="np-card np-event-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>
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_event.sessions.first.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year np-opacity-50">
|
||||
{{ training_event.sessions.first.year }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-training-session-date-day">
|
||||
{% if training_event.sessions.first.day < 10 %}0{% endif %}{{ training_event.sessions.first.day }}
|
||||
</div>
|
||||
<div class="np-button-background-color np-card-training-session-date-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class="np-card-training-sessions">
|
||||
<span class="np-card-training-sessions-label">
|
||||
{% t .sessions, count: training_event.sessions.size %}
|
||||
</span>
|
||||
<a
|
||||
class="np-button"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,62 @@
|
||||
{% assign topic_classname = topic | split: " " %}
|
||||
|
||||
<div class="courses-carousel np-carousel" data-topic="{{ topic_classname | join: '-' | downcase }}">
|
||||
{% if items.any? %}
|
||||
{% assign sorted_items =items | sort: "name" %}
|
||||
{% for course in sorted_items %}
|
||||
|
||||
{% comment %} USED FOR PROGRESS FILTER {% endcomment %}
|
||||
{% assign course_status = "" %}
|
||||
|
||||
{% if course.started? == false %}
|
||||
{% assign course_status = "not-started" %}
|
||||
{% elsif course.completed? %}
|
||||
{% assign course_status = "completed" %}
|
||||
{% elsif course.started? %}
|
||||
{% assign course_status = "in-progress" %}
|
||||
{% endif %}
|
||||
|
||||
{% if topic == "Not Categorized" %}
|
||||
<div class="np-carousel-card {{course_status}}"> {% include "cards_course" with course %}</div>
|
||||
{% else %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == topic %}
|
||||
<div class="np-carousel-card {{course_status}}"> {% include "cards_course" with course %}</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".courses-carousel").not('.slick-initialized').slick({
|
||||
slidesToShow: 3,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,37 @@
|
||||
<div class="events-carousel np-carousel np-carousel-bg-blue" id="events-carousel">
|
||||
{% if items.any? %}
|
||||
{% for training_event in items %}
|
||||
<div class="np-carousel-card"> {% include "cards_training_event" with training_event %}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".events-carousel").slick({
|
||||
slidesToShow: 3,
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: false,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,57 @@
|
||||
{% assign used_instructor_names = "" %}
|
||||
|
||||
<div class="instructors-carousel np-carousel" id="instructors-carousel">
|
||||
{% for course in items %}
|
||||
{% for instructor in course.instructors %}
|
||||
{% unless used_instructor_names contains instructor.name %}
|
||||
|
||||
|
||||
<div class="np-carousel-card">
|
||||
<div class="instructor-slide">
|
||||
<div class="instructor-image">
|
||||
<img src="{{ instructor.avatar_url }}" />
|
||||
</div>
|
||||
<div class="instructor-info">
|
||||
<div class="instructor-name">{{ instructor.name }}</div>
|
||||
<a href="mailto:{{ instructor.bio }}" target="_blank" class="instructor-email">{{ instructor.bio }}</a>
|
||||
<div class="instructor-joined">Joined in {{ instructor.created_at | date: "%Y" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
|
||||
{% capture name %}{{instructor.name}}, {% endcapture %}
|
||||
{% assign used_instructor_names = used_instructor_names | append: name %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".instructors-carousel").slick({
|
||||
slidesToShow: 3.3,
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: false,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,4 @@
|
||||
{% comment %} <i class="far fa-lock-alt np-course-outline-content-activity-icon-locked"></i> {% endcomment %}
|
||||
<span class="np-course-outline-content-activity-link">
|
||||
{{ 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,12 @@
|
||||
<div class="col-xs-12 np-top-image-spacing np-course-banner">
|
||||
<div class="np-course-banner-overlay"></div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-course-banner-image"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
<div class="np-course-info np-course-banner-info">
|
||||
<div class="np-course-title">{{ course.name }}</div>
|
||||
{% include "course_details" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,32 @@
|
||||
<div class="np-card-container">
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
{% include "course_banner" %}
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
{% include "course_description" %}
|
||||
|
||||
{% comment %} {% if course.categories.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
|
||||
{% 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,34 @@
|
||||
{% 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">
|
||||
<div class="np-course-detail">
|
||||
<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 class="np-course-detail">
|
||||
{% if course.properties.course_length > 0 %}
|
||||
<strong>{{course.properties.course_length}}</strong>mins<span class="np-details-label">To Complete</span>
|
||||
{% else %}
|
||||
<div> </div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,44 @@
|
||||
{% assign activities_count = 0 %}
|
||||
{% for course_section in course.sections %}
|
||||
{% for course_activity in course_section.activities %}
|
||||
{% assign activities_count = activities_count | plus: 1 %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="np-course-details">
|
||||
<div class="np-course-detail">
|
||||
<strong>{{ activities_count }}</strong>
|
||||
<span class="np-details-label">
|
||||
{% if activities_count == 1 %}Activity{% else %}Activities{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="np-course-detail">
|
||||
{% if course.properties.course_length contains 'missing property' %}
|
||||
missing property: course.properties.course_length
|
||||
{% else %}
|
||||
{% if course.properties.course_length %}
|
||||
{% if course.properties.course_length > 0 %}
|
||||
<strong>{{course.properties.course_length}}</strong> mins<span class="np-details-label">Duration</span>
|
||||
{% else %}
|
||||
<div> </div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-course-detail">
|
||||
<div class='course-detail-rating'>
|
||||
<div class='course-detail-rating-stars' style='display: flex; flex-wrap: nowrap; font-size: 18px;'>
|
||||
{% for i in (1..5) %}
|
||||
{% if course.properties.np_course_rating >= i %}
|
||||
<i class="fas fa-star full-star" style='line-height: 28px;'></i>
|
||||
{% else %}
|
||||
<i class="fas fa-star empty-star" style='line-height: 28px;'></i>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<span class="np-details-label" style= 'display: flex;'>
|
||||
{{course.properties.np_course_rating}} <div style='font-weight: 500; padding-left: 5px;'>({{course.properties.np_course_rating_count}}) </div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,22 @@
|
||||
<h3 class="np-card-heading">
|
||||
Meet the Instructor
|
||||
</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">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_banner" %}
|
||||
<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 %}
|
||||
|
||||
{% comment %} {% if course.categories.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
|
||||
{% 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,38 @@
|
||||
<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-check 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-completed" %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<i class="icon-course-not-started 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 %}
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,45 @@
|
||||
<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,78 @@
|
||||
{% assign rating = course.properties.np_course_rating %}
|
||||
|
||||
{% if isButton %}
|
||||
<div class="np-ratings-container np-ratings-button" onclick='showPopup("ratingsModal")'>
|
||||
{% else %}
|
||||
<div class="np-ratings-container">
|
||||
{% endif %}
|
||||
<div class="rating-group-static">
|
||||
<div class="fas fa-star-half {% if rating >= 0.5 %}star-gold{% endif %}"></div>
|
||||
<div class="fas fa-star {% if rating >= 1.0 %}star-gold{% endif %}"></div>
|
||||
<div class="fas fa-star-half {% if rating >= 1.5 %}star-gold{% endif %}"></div>
|
||||
<div class="fas fa-star {% if rating >= 2.0 %}star-gold{% endif %}"></div>
|
||||
<div class="fas fa-star-half {% if rating >= 2.5 %}star-gold{% endif %}"></div>
|
||||
<div class="fas fa-star {% if rating >= 3.0 %}star-gold{% endif %}"></div>
|
||||
<div class="fas fa-star-half {% if rating >= 3.5 %}star-gold{% endif %}"></div>
|
||||
<div class="fas fa-star {% if rating >= 4.0 %}star-gold{% endif %}"></div>
|
||||
<div class="fas fa-star-half {% if rating >= 4.5 %}star-gold{% endif %}"></div>
|
||||
<div class="fas fa-star {% if rating == 5.0 %}star-gold{% endif %}"></div>
|
||||
</div>
|
||||
<div class="np-course-rating">{{ course.properties.np_course_rating }}</div>
|
||||
<div class="np-course-rating-count">({{course.properties.np_course_rating_count}})</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.np-ratings-container {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
font-size:0.75rem;
|
||||
color:#fff;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.np-ratings-button {
|
||||
background:transparent;
|
||||
outline:none;
|
||||
border: 2px solid transparent;
|
||||
transition:border-color 0.2s;
|
||||
border-radius:4px;
|
||||
cursor:pointer;
|
||||
padding: 1px 6px;
|
||||
}
|
||||
|
||||
.np-ratings-button:hover { border: 2px solid #E6E9EA; }
|
||||
|
||||
.np-course-rating-count {
|
||||
color:#bec2c6;
|
||||
margin-left:3px;
|
||||
}
|
||||
|
||||
.rating-group-static {
|
||||
margin-right:8px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.rating-group-static .fa-star,
|
||||
.rating-group-static .fa-star-half {
|
||||
color: #EBECED;
|
||||
font-size: 1.15rem;
|
||||
margin: 0 1px 3px;
|
||||
}
|
||||
|
||||
.rating-group-static .fa-star-half {
|
||||
position:relative;
|
||||
z-index:10;
|
||||
}
|
||||
|
||||
.rating-group-static .fa-star{
|
||||
margin-left: -22px;
|
||||
}
|
||||
|
||||
.rating-group-static .star-gold{ color: #F7BB17; }
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-ratings-button { margin-right:24px; }
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,28 @@
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-catalog-courses row row-with-thumbnails" id="filterProgress">
|
||||
{% for course in courses.in_catalog %}
|
||||
|
||||
{% comment %} USED FOR PROGRESS FILTER {% endcomment %}
|
||||
{% assign catalog_course_status = "" %}
|
||||
|
||||
{% if course.started? == false %}
|
||||
{% assign catalog_course_status = "not-started" %}
|
||||
{% elsif course.completed? %}
|
||||
{% assign catalog_course_status = "completed" %}
|
||||
{% elsif course.started? %}
|
||||
{% assign catalog_course_status = "in-progress" %}
|
||||
{% endif %}
|
||||
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content {{catalog_course_status }}">
|
||||
{% 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,28 @@
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="row row-with-thumbnails" id="filterProgress">
|
||||
{% for course in courses.enrolled %}
|
||||
|
||||
{% comment %} USED FOR PROGRESS FILTER {% endcomment %}
|
||||
{% assign course_status = "" %}
|
||||
|
||||
{% if course.started? == false %}
|
||||
{% assign course_status = "not-started" %}
|
||||
{% elsif course.completed? %}
|
||||
{% assign course_status = "completed" %}
|
||||
{% elsif course.started? %}
|
||||
{% assign course_status = "in-progress" %}
|
||||
{% endif %}
|
||||
|
||||
<div class="{{ class }} {{course_status}}">
|
||||
{% 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,112 @@
|
||||
{% assign topic_classname = topic | split: " " %}
|
||||
|
||||
<div class="np-progress-filter-wrapper">
|
||||
{% if label %}
|
||||
<div class="np-progress-filter-label">{{ label }}</div>
|
||||
{% endif %}
|
||||
<div class="progress-filter filter-select-wrapper select-wrapper np-button" data-topic="{{ topic_classname | join: '-' | downcase }}">
|
||||
<select >
|
||||
<option selected disabled hidden>{{ default_option}}</option>
|
||||
<option value="a">All Courses</option>
|
||||
<option value="n">Not Started</option>
|
||||
<option value="i">In Progress</option>
|
||||
<option value="c">Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-progress-filter-label {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
padding-right: 7px;
|
||||
text-transform: none;
|
||||
font-weight:500;
|
||||
font-size:0.812rem;
|
||||
}
|
||||
.np-progress-filter-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.filter-select-wrapper {
|
||||
position: relative;
|
||||
padding:0;
|
||||
border: 2px solid rgba(255, 255, 255, 0.25);
|
||||
color: #fff;
|
||||
height:auto;
|
||||
text-transform: none;
|
||||
background: transparent;
|
||||
border-radius:0;
|
||||
}
|
||||
.filter-select-wrapper:hover {
|
||||
background:transparent;
|
||||
color:#fff;
|
||||
}
|
||||
.select-items {
|
||||
position: absolute;
|
||||
background-color: #062531;
|
||||
top: 105%;
|
||||
left: -2px;
|
||||
z-index: 99;
|
||||
width: 102%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.25);
|
||||
border-top:none;
|
||||
}
|
||||
.select-items div {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border-top:none;
|
||||
cursor: pointer;
|
||||
width:100%;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.select-items div:hover { color: rgba(255, 255, 255, 1); }
|
||||
.select-selected {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 9px 66px 9px 20px;
|
||||
position: relative;
|
||||
color:#fff;
|
||||
}
|
||||
.select-selected::after {
|
||||
content:"\f078";
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
position: absolute;
|
||||
width:20px;
|
||||
height:100%;
|
||||
color:rgba(255, 255, 255, 0.5);
|
||||
right:10px;
|
||||
top:0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size:1rem;
|
||||
}
|
||||
.select-selected::before {
|
||||
content:"";
|
||||
position: absolute;
|
||||
width:20px;
|
||||
height:100%;
|
||||
border-left:2px solid rgba(255, 255, 255, 0.25);
|
||||
right:20px;
|
||||
top:0;
|
||||
}
|
||||
.select-selected.select-arrow-active::after { transform: rotate(180deg); }
|
||||
.same-as-selected,
|
||||
.filter-select-wrapper select,
|
||||
.select-hide {
|
||||
display: none;
|
||||
}
|
||||
.mo-filter-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.select-items div:hover,
|
||||
.same-as-selected {
|
||||
background-color: #062531;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,81 @@
|
||||
<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 %}
|
||||
{% if website_navigation.external? %}
|
||||
<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>
|
||||
{% endif %}
|
||||
{% 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>
|
||||
|
||||
{% 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 np-fc-white np-opacity-50">
|
||||
{% t .need_help %}
|
||||
</div>
|
||||
<div class="np-footer-support-item np-footer-support-email np-fc-white np-opacity-50">
|
||||
{% t .email %}
|
||||
</div>
|
||||
<a
|
||||
class="np-footer-support-item np-footer-support-link np-button-color"
|
||||
href="mailto:{{ website_footer.school_customer_service_email }}"
|
||||
>
|
||||
{% comment %} {{ website_footer.school_customer_service_email }} {% endcomment %}
|
||||
hey@pixel.io
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</footer>
|
||||
@ -0,0 +1,11 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<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,198 @@
|
||||
<header class="np-header np-header-color" >
|
||||
<div class="np-header-content">
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
></button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input np-header-font-background-color"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
<a class="np-header-avatar-tooltip-navigation-link" onclick="buildURL(window.location.pathname)" style="cursor:pointer">
|
||||
Default
|
||||
</a>
|
||||
{% 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"></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" %}
|
||||
|
||||
<script>
|
||||
if (window.location.pathname === "/app") {
|
||||
const headerTag = document.querySelector(".np-header");
|
||||
headerTag.classList.add("np-header-absolute");
|
||||
|
||||
const headerLogo = document.querySelector(".np-header-logo-image");
|
||||
headerLogo.src = "https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/northpass/pixel-acedemy-logo.png";
|
||||
}
|
||||
|
||||
function buildURL(path) {
|
||||
const url = "https://academy.getpixel.io" + path + "?first_name={{current_person.first_name}}&last_name={{current_person.last_name}}&email={{current_person.email}}"
|
||||
window.location.href = url
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,31 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title"></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,33 @@
|
||||
<div class="np-resource-header np-card-padding-large">
|
||||
<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,108 @@
|
||||
<div id="{{ modal_id }}" class="np-modal">
|
||||
<div class="np-modal-body np-modal-center">
|
||||
<span class="np-modal-close fal fa-times"></span>
|
||||
{% if modal_title != "" %}
|
||||
<p class="np-modal-title">{{ modal_title }}</p>
|
||||
{% endif %}
|
||||
<div class="np-modal-content">
|
||||
{% include "ratings_interactive" %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.modal-init {
|
||||
height: 100vh;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.np-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.np-modal-close {
|
||||
color: #59697B;
|
||||
opacity:0.5;
|
||||
font-size: 1.6rem;
|
||||
position:absolute;
|
||||
top:18px;
|
||||
right:24px;
|
||||
}
|
||||
|
||||
.np-modal-close:hover,
|
||||
.np-modal-close:focus {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.np-modal-body {
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 0px 20px #35404E;
|
||||
color:#59697B;
|
||||
padding: 40px 32px 48px;
|
||||
max-width:680px;
|
||||
border-radius: 8px;
|
||||
position:relative;
|
||||
margin: 0 32px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.np-modal-center { text-align:center; }
|
||||
|
||||
.np-modal-title {
|
||||
font-size:1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
.np-modal-subtitle {
|
||||
font-size:1.125rem;
|
||||
margin-bottom:1rem;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-modal-body {
|
||||
padding: 50px 50px 80px;
|
||||
width: 75%;
|
||||
margin:0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
const modalClose = document.querySelector(".np-modal-close");
|
||||
let modal = null;
|
||||
|
||||
function showPopup(popupId) {
|
||||
modal = document.getElementById(popupId);
|
||||
modal.style.display = "block";
|
||||
document.body.classList.add("modal-init");
|
||||
}
|
||||
|
||||
// Close modal when user clicks "x"
|
||||
modalClose.onclick = () => {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
|
||||
// When the user clicks anywhere outside of the modal, close it
|
||||
if (modal != null) {
|
||||
window.onclick = (event) => {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,80 @@
|
||||
<div class="np-progress-ring-wrapper">
|
||||
<svg
|
||||
class="progress-ring"
|
||||
width="{{ size }}"
|
||||
height="{{ size }}">
|
||||
<circle
|
||||
class="progress-ring__circle circle-{{name}}"
|
||||
stroke="{{ stroke_color }}"
|
||||
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="#fff" dy=".3em">{{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:#fff;
|
||||
text-transform: uppercase;
|
||||
opacity:0.35;
|
||||
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,99 @@
|
||||
<div class="np-homepage-featured np-faq np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Frequently Asked Questions
|
||||
</div>
|
||||
</div>
|
||||
<div class="row np-faqs">
|
||||
<div class="col-md-6">
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> Do I need photography experience before signing up for a course on Pixel Academy?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> Absolutely not! We have courses available for every level and welcome any photographers - from beginners to advanced to take courses on Pixel Academy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> Do I need advanced computer skills to use the Pixel app?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> No, the Pixel app was built with modern design principles to ensure a sleek and frictionless photo editing experience. The app is very intuitive and does not require any technical computer skills to use.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> What certificates are available for me when I complete a course on Pixel Academy?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> Pixel Academy has a number of certificates available to our photographers and is constantly creating new courses and certificate programs to elevate photography editing skills. Check out the Certification section in the Pixel app for more information.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> Can I take courses on an iPad, iPhone or other mobile devices/tablets, etc?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> Yes! Our Pixel Academy is Designed with a mobile-first approach to ensure that the use experience is seamless on any device.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> Do I need to buy any books or other reference material to augment the course work?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> Nope! Just come with your eagerness to learn! No additional books or reference material is needed to augment any of our courses.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> How will my instructors communicate with me while I’m taking a course? Can I contact them?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> Instructors will send email notifications for any updates they want to provide to the learners of their lessons. Should you need to contact them, you can do so through email. Emails will be provided within the instructor section of the Pixel Academy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let accordions = document.getElementsByClassName("accordion-btn");
|
||||
|
||||
for (let i = 0; i < accordions.length; i++) {
|
||||
accordions[i].addEventListener("click", function() {
|
||||
this.querySelector('.fal').classList.toggle("fa-plus");
|
||||
this.querySelector('.fal').classList.toggle("fa-minus");
|
||||
|
||||
let panel = this.nextElementSibling;
|
||||
panel.classList.toggle("panel-open");
|
||||
if (panel.style.maxHeight) {
|
||||
panel.style.maxHeight = null;
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + "px";
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,77 @@
|
||||
<div class="np-homepage-featured np-homepage-featured-items np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Featured Photography From Our Users
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="featured-photography-carousel np-carousel np-carousel-bg-blue" id="featured-photography-carousel">
|
||||
<div class="np-carousel-card">
|
||||
<div>
|
||||
<img src="https://s3.amazonaws.com/static.northpass.com/getpixel-dark-mode/pixel-featured-photography-1.jpg" alt="Featured Photography" />
|
||||
<div class="slide-label">Sam Rigsby</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div>
|
||||
<img src="https://s3.amazonaws.com/static.northpass.com/getpixel-dark-mode/pixel-featured-photography-2.jpg" alt="Featured Photography" />
|
||||
<div class="slide-label">Jenny Nguyen</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div>
|
||||
<img src="https://s3.amazonaws.com/static.northpass.com/getpixel-dark-mode/pixel-featured-photography-3.jpg" alt="Featured Photography" />
|
||||
<div class="slide-label">Miriam Jenkins</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div>
|
||||
<img src="https://s3.amazonaws.com/static.northpass.com/getpixel-dark-mode/pixel-featured-photography-4.jpg" alt="Featured Photography" />
|
||||
<div class="slide-label">Aron Sanchez</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div>
|
||||
<img src="https://s3.amazonaws.com/static.northpass.com/getpixel-dark-mode/pixel-featured-photography-5.jpg" alt="Featured Photography" />
|
||||
<div class="slide-label">Kelly Beeker</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$("#featured-photography-carousel").slick({
|
||||
slidesToShow: 3.8,
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1350,
|
||||
settings: {
|
||||
slidesToShow: 2.6,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,15 @@
|
||||
<div class="np-homepage-featured np-homepage-topics np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Popular Topics
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-topics-list row">
|
||||
<div class="col-xs-12 np-stretch-content">
|
||||
{% assign categories_by_name = current_school.filterable_categories | sort: "name" %}
|
||||
{% for category in categories_by_name %}
|
||||
<a class="np-top-button np-button np-button-secondary" href="#">{{ category.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,61 @@
|
||||
<div class="np-homepage-featured np-homepage-tips-tricks np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Tips & Tricks From Our Users
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tips-tricks-carousel np-carousel" id="tips-tricks-carousel">
|
||||
<div class="np-carousel-card">
|
||||
<div class="quote-block np-carousel-bg-blue">
|
||||
<i class="fas fa-quote-left"></i>
|
||||
<div class="quote">
|
||||
I strongly believe in and encourage you to experiment. There's no perfect formula for editing images. So as long as you keep a copy of the original file, you should feel free to try out different adjustments to find what works for that image. If you change your mind later on, you can always go back to the original version and start over. Have fun experimenting and see what can come of it!
|
||||
</div>
|
||||
</div>
|
||||
<div class="quote-author-info">
|
||||
Travis Tripod<br>
|
||||
<span>Pixel user since 2019</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div class="quote-block np-carousel-bg-blue">
|
||||
<i class="fas fa-quote-left"></i>
|
||||
<div class="quote ">
|
||||
Something I wish I knew more about at the start of my editing career was that higher resolution means more detail. Whenever you crop or resize an image, just know that you are also removing pixels from the image. This means you'll have fewer pixels to work with, which will give you less flexibility. If you want to print a photo, having extra pixels will help to make the photo look as sharp as possible because photo prints have a higher resolution than most computer screens. But if you're creating a desktop background, you'll want to ensure that the final size is at least as large as your screen resolution.
|
||||
</div>
|
||||
</div>
|
||||
<div class="quote-author-info">
|
||||
Fred Flash<br>
|
||||
<span>Pixel user since 2018</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div class="quote-block np-carousel-bg-blue">
|
||||
<i class="fas fa-quote-left"></i>
|
||||
<div class="quote ">
|
||||
My biggest tip when editing your photos is to keep your original images: If you're planning to make even the most basic changes to an image, you should also keep an original unedited version of the file. I recommend making a habit of doing this whenever you're working with image files. This way, you'll always be able to go back to the original version.
|
||||
</div>
|
||||
</div>
|
||||
<div class="quote-author-info">
|
||||
Nikki Nikon<br>
|
||||
<span>Pixel user since 2015</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$("#tips-tricks-carousel").slick({
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: true,
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -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 }}">
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
{{ link.label }}
|
||||
</a>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
@ -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">
|
||||
{% if training_session.day < 10 %}0{% endif %}{{ 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,134 @@
|
||||
{% comment %}
|
||||
For this widget to work you must import Slick CSS and JS
|
||||
{% endcomment %}
|
||||
|
||||
<div class="np-dashboard-resources">
|
||||
<div class="np-card">
|
||||
<div class="np-card-container np-dashboard-border">
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="np-card-content-achievements">
|
||||
<div class="achivements-carousel">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
<div>
|
||||
<div class="np-card-content-title col-12">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="col-12 ">
|
||||
<img class="np-achievement-icon" src="{{ course.properties.course_badge }}" />
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<a href="#" class="np-view-all-achievements">View All</a>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
$('.achivements-carousel').slick({
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
infinite: true,
|
||||
autoplay: false,
|
||||
autoplaySpeed: 5000,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
responsive: [{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
|
||||
dots: false
|
||||
}
|
||||
}]
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-card-content-achievements .np-card-content-title {
|
||||
font-size: 0.937rem;
|
||||
color:#fff;
|
||||
text-align:center;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.np-achievement-icon {
|
||||
color: #bec2c6;
|
||||
margin:14px auto 26px;
|
||||
width:130px;
|
||||
}
|
||||
|
||||
.np-card-content-achievements .slick-slider {
|
||||
width:100%;
|
||||
max-width: 375px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.np-view-all-achievements {
|
||||
color:#2BB24C;
|
||||
font-size:0.75rem;
|
||||
text-transform:uppercase;
|
||||
text-align:center;
|
||||
text-decoration:none;
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
|
||||
.np-card-content-achievements {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem 2rem .5rem;
|
||||
}
|
||||
|
||||
.achievements-total-points-display {
|
||||
color:#2BB24C;
|
||||
font-size:0.812rem;
|
||||
text-transform:uppercase;
|
||||
text-align:center;
|
||||
margin-bottom:1.5rem;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.achievements-total-points {
|
||||
font-size:10px;
|
||||
color:#fff;
|
||||
padding:3px 5px;
|
||||
display:inline-block;
|
||||
border-radius:2px;
|
||||
}
|
||||
|
||||
.slick-arrow {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
opacity: 0.5;
|
||||
font-size: 1.5rem;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 50%;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.slick-arrow.fa-chevron-left { left:0 }
|
||||
.slick-arrow.fa-chevron-right { right:0; }
|
||||
|
||||
@media (min-width:1024px) {
|
||||
.np-card-content-achievements .slick-slider {
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,68 @@
|
||||
<div class="np-dashboard-resources">
|
||||
<div class="np-card">
|
||||
<div class="np-card-container np-dashboard-border">
|
||||
{% if courses.enrolled.any? %}
|
||||
{% assign countComplete = 0 %}
|
||||
{% assign countInProgress = 0 %}
|
||||
{% assign countNotStarted = 0 %}
|
||||
{% assign countTotal = 0 | times: 1.0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% assign countTotal = countTotal | plus: 1 %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign countComplete = countComplete | plus: 1 %}
|
||||
{% endif %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign countInProgress = countInProgress | plus: 1 %}
|
||||
{% endif %}
|
||||
{% if course.progress == 0 %}
|
||||
{% assign countNotStarted = countNotStarted | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<ul class="progress-circle-list">
|
||||
<li>
|
||||
{%
|
||||
include "progress_circle",
|
||||
name:'Completed' ,
|
||||
count: countComplete ,
|
||||
total: countTotal,
|
||||
size: "120",
|
||||
stroke_color: "rgba(43, 178, 76, 1)",
|
||||
stroke_color_bg: "rgba(255, 255, 255, 0.15)"
|
||||
%}
|
||||
</li>
|
||||
<li>
|
||||
{%
|
||||
include "progress_circle",
|
||||
name:'In Progress' ,
|
||||
count: countInProgress ,
|
||||
total: countTotal,
|
||||
size: "120",
|
||||
stroke_color: "rgba(43, 178, 76, 1)",
|
||||
stroke_color_bg: "rgba(255, 255, 255, 0.15)"
|
||||
%}
|
||||
</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>
|
||||
|
||||
|
||||
<style>
|
||||
.progress-circle-list {
|
||||
padding: 0;
|
||||
list-style-type: none !important;
|
||||
justify-content: space-around;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
max-width: 400px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,165 @@
|
||||
{% 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>
|
||||
{% comment %} {% capture label %}{% t shared.filters.by_progress %}{% endcapture %} {% endcomment %}
|
||||
|
||||
<div class="catalog-filters">
|
||||
{% if courses.in_catalog.any? %}
|
||||
{%
|
||||
include "filter_dropdown",
|
||||
filters: courses.filters,
|
||||
key: "category_uuid",
|
||||
label: "By Topic"
|
||||
%}
|
||||
{%
|
||||
include "filter_by_progress",
|
||||
label: "",
|
||||
default_option: "Progress",
|
||||
topic: "",
|
||||
filter_type: "filter-cards"
|
||||
%}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "courses_catalog" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<script>
|
||||
// Creates the custom dropdown and dropdown functionality
|
||||
var x, i, j, l, ll, selElmnt, a, b, c;
|
||||
/* Look for any elements with the class “select-wrapper”: */
|
||||
x = document.getElementsByClassName("progress-filter");
|
||||
l = x.length;
|
||||
for (i = 0; i < l; i++) {
|
||||
selElmnt = x[i].getElementsByTagName("select")[0];
|
||||
ll = selElmnt.length;
|
||||
/* For each element, create a new DIV that will act as the selected item: */
|
||||
a = document.createElement("DIV");
|
||||
a.setAttribute("class", "select-selected");
|
||||
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
|
||||
x[i].appendChild(a);
|
||||
/* For each element, create a new DIV that will contain the option list: */
|
||||
b = document.createElement("DIV");
|
||||
b.setAttribute("class", "select-items select-hide");
|
||||
for (j = 1; j < ll; j++) {
|
||||
/* For each option in the original select element,
|
||||
create a new DIV that will act as an option item: */
|
||||
c = document.createElement("DIV");
|
||||
c.innerHTML = selElmnt.options[j].innerHTML;
|
||||
c.addEventListener("click", function(e) {
|
||||
/* When an item is clicked, update the original select box,
|
||||
and the selected item: */
|
||||
var y, i, k, s, h, sl, yl;
|
||||
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
|
||||
sl = s.length;
|
||||
h = this.parentNode.previousSibling;
|
||||
for (i = 0; i < sl; i++) {
|
||||
if (s.options[i].innerHTML == this.innerHTML) {
|
||||
s.selectedIndex = i;
|
||||
h.innerHTML = this.innerHTML;
|
||||
y = this.parentNode.getElementsByClassName("same-as-selected");
|
||||
yl = y.length;
|
||||
for (k = 0; k < yl; k++) {
|
||||
y[k].removeAttribute("class");
|
||||
}
|
||||
this.setAttribute("class", "same-as-selected");
|
||||
break;
|
||||
}
|
||||
}
|
||||
filterCourse();
|
||||
|
||||
h.click();
|
||||
});
|
||||
b.appendChild(c);
|
||||
}
|
||||
x[i].appendChild(b);
|
||||
a.addEventListener("click", function(e) {
|
||||
/* When the select box is clicked, close any other select boxes,
|
||||
and open/close the current select box: */
|
||||
e.stopPropagation();
|
||||
closeAllSelect(this);
|
||||
this.nextSibling.classList.toggle("select-hide");
|
||||
this.classList.toggle("select-arrow-active");
|
||||
});
|
||||
}
|
||||
|
||||
function closeAllSelect(elmnt) {
|
||||
/* A function that will close all select boxes in the document,
|
||||
except the current select box: */
|
||||
var x, y, i, xl, yl, arrNo = [];
|
||||
x = document.getElementsByClassName("select-items");
|
||||
y = document.getElementsByClassName("select-selected");
|
||||
xl = x.length;
|
||||
yl = y.length;
|
||||
for (i = 0; i < yl; i++) {
|
||||
if (elmnt == y[i]) {
|
||||
arrNo.push(i)
|
||||
} else {
|
||||
y[i].classList.remove("select-arrow-active");
|
||||
}
|
||||
}
|
||||
for (i = 0; i < xl; i++) {
|
||||
if (arrNo.indexOf(i)) {
|
||||
x[i].classList.add("select-hide");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* If the user clicks anywhere outside the select box, then close all select boxes: */
|
||||
document.addEventListener("click", closeAllSelect);
|
||||
$(".select-items div").each(function() {
|
||||
if($( this ).text() == $(".select-selected").text()) {
|
||||
$(this).addClass("same-as-selected");
|
||||
}
|
||||
});
|
||||
|
||||
function filterCourse() {
|
||||
|
||||
let filterOptions = document.getElementsByClassName('select-selected')[0];
|
||||
let courseCards = $('#filterProgress').children();
|
||||
|
||||
switch(filterOptions.innerText) {
|
||||
case "All Courses":
|
||||
courseCards.each(function (i) {
|
||||
$(this).show();
|
||||
|
||||
});
|
||||
break;
|
||||
case "Not Started":
|
||||
courseCards.each(function (i) {
|
||||
if (!$(this).hasClass("not-started")) {
|
||||
$(this).hide();
|
||||
} else {
|
||||
$(this).show();
|
||||
}
|
||||
});
|
||||
break;
|
||||
case "In Progress":
|
||||
courseCards.each(function (i) {
|
||||
if (!$(this).hasClass("in-progress")) {
|
||||
$(this).hide();
|
||||
} else {
|
||||
$(this).show();
|
||||
}
|
||||
});
|
||||
break;
|
||||
case "Completed":
|
||||
courseCards.each(function (i) {
|
||||
if (!$(this).hasClass("completed")) {
|
||||
$(this).hide();
|
||||
} else {
|
||||
$(this).show();
|
||||
}
|
||||
});
|
||||
break;
|
||||
default:
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,11 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-max-width np-page-container">
|
||||
<div class="np-hidden-mobile" id="course-desktop">
|
||||
{% include "course_desktop_view" %}
|
||||
</div>
|
||||
<div class="np-hidden-desktop" id="course-mobile">
|
||||
{% include "course_mobile_view" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,226 @@
|
||||
|
||||
{% 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="np-dashboard-header">
|
||||
<div class="np-resource-title">Hi {{current_person.first_name}}! 👋</div>
|
||||
<div class="np-resource-subtitle">This is what’s relevant to you right now in Pixel Academy.</div>
|
||||
</div>
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-md-8">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-md-4">
|
||||
<div class="np-dashboard-resources-title">Course Progress</div>
|
||||
{% include "widget_course_progress" %}
|
||||
|
||||
<div class="np-dashboard-resources-title">Recent Achievements</div>
|
||||
{% include "widget_achievements" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row dashboard-section-courses">
|
||||
<div class="col-xs-12">
|
||||
{% if courses.enrolled.any? %}
|
||||
{% if categories.enrolled.any? %}
|
||||
{% assign all_categories = categories.enrolled | map: "name" %}
|
||||
{% for enrolled_category in all_categories %}
|
||||
<div class="np-md-flex-wrapper">
|
||||
<div>
|
||||
<div class="np-dashboard-resources-title">
|
||||
Topic
|
||||
</div>
|
||||
<div class="np-dashboard-resources-category">
|
||||
{{ enrolled_category }}
|
||||
</div>
|
||||
</div>
|
||||
{%
|
||||
include "filter_by_progress",
|
||||
label: "Filter by Progress:",
|
||||
default_option: "All Courses",
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
</div>
|
||||
{%
|
||||
include "carousel_courses",
|
||||
items: courses.enrolled,
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% assign enrolled_category = "Not Categorized" %}
|
||||
<div class="np-md-flex-wrapper">
|
||||
<div>
|
||||
<div class="np-dashboard-resources-title">
|
||||
Topic
|
||||
</div>
|
||||
<div class="np-dashboard-resources-category">
|
||||
{{ enrolled_category }}
|
||||
</div>
|
||||
</div>
|
||||
{%
|
||||
include "filter_by_progress",
|
||||
label: "Filter by Progress:",
|
||||
default_option: "All Courses",
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
</div>
|
||||
{%
|
||||
include "carousel_courses",
|
||||
items: courses.enrolled,
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-dashboard-resources-title" style="margin-bottom:19px;">
|
||||
Courses
|
||||
</div>
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
<div style="margin-bottom:3rem;">
|
||||
{% include "courses_zero_state", message: message %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row dashboard-section-events">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t .upcoming_events %}
|
||||
</div>
|
||||
{% if training_events.enrolled.any? %}
|
||||
{%
|
||||
include "carousel_events",
|
||||
items: training_events.enrolled,
|
||||
%}
|
||||
{% else %}
|
||||
<div style="margin-bottom:3rem;">
|
||||
{% include "training_events_zero_state" %}
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row dashboard-section-instructors">
|
||||
<div class="col-xs-12">
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
Meet the Instructors
|
||||
</div>
|
||||
{%
|
||||
include "carousel_instructors",
|
||||
items: courses.enrolled,
|
||||
%}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
<script>
|
||||
// Creates the custom dropdown and dropdown functionality
|
||||
var x, i, j, l, ll, selElmnt, a, b, c;
|
||||
/* Look for any elements with the class “select-wrapper”: */
|
||||
x = document.getElementsByClassName("progress-filter");
|
||||
l = x.length;
|
||||
for (i = 0; i < l; i++) {
|
||||
selElmnt = x[i].getElementsByTagName("select")[0];
|
||||
ll = selElmnt.length;
|
||||
a = document.createElement("DIV");
|
||||
a.setAttribute("class", "select-selected");
|
||||
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
|
||||
x[i].appendChild(a);
|
||||
b = document.createElement("DIV");
|
||||
b.setAttribute("class", "select-items select-hide");
|
||||
for (j = 1; j < ll; j++) {
|
||||
c = document.createElement("DIV");
|
||||
c.innerHTML = selElmnt.options[j].innerHTML;
|
||||
c.addEventListener("click", function(e) {
|
||||
var y, i, k, s, h, sl, yl;
|
||||
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
|
||||
sl = s.length;
|
||||
h = this.parentNode.previousSibling;
|
||||
for (i = 0; i < sl; i++) {
|
||||
if (s.options[i].innerHTML == this.innerHTML) {
|
||||
s.selectedIndex = i;
|
||||
h.innerHTML = this.innerHTML;
|
||||
y = this.parentNode.getElementsByClassName("same-as-selected");
|
||||
yl = y.length;
|
||||
for (k = 0; k < yl; k++) {
|
||||
y[k].removeAttribute("class");
|
||||
}
|
||||
this.setAttribute("class", "same-as-selected");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
filterCourses(this);
|
||||
|
||||
h.click();
|
||||
});
|
||||
b.appendChild(c);
|
||||
}
|
||||
x[i].appendChild(b);
|
||||
a.addEventListener("click", function(e) {
|
||||
e.stopPropagation();
|
||||
closeAllSelect(this);
|
||||
this.nextSibling.classList.toggle("select-hide");
|
||||
this.classList.toggle("select-arrow-active");
|
||||
});
|
||||
}
|
||||
|
||||
function closeAllSelect(elmnt) {
|
||||
var x, y, i, xl, yl, arrNo = [];
|
||||
x = document.getElementsByClassName("select-items");
|
||||
y = document.getElementsByClassName("select-selected");
|
||||
xl = x.length;
|
||||
yl = y.length;
|
||||
for (i = 0; i < yl; i++) {
|
||||
if (elmnt == y[i]) {
|
||||
arrNo.push(i)
|
||||
} else {
|
||||
y[i].classList.remove("select-arrow-active");
|
||||
}
|
||||
}
|
||||
for (i = 0; i < xl; i++) {
|
||||
if (arrNo.indexOf(i)) {
|
||||
x[i].classList.add("select-hide");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* If the user clicks anywhere outside the select box,
|
||||
then close all select boxes: */
|
||||
document.addEventListener("click", closeAllSelect);
|
||||
$(".select-items div").each(function() {
|
||||
if($( this ).text() == $(".select-selected").text()) {
|
||||
$(this).addClass("same-as-selected");
|
||||
}
|
||||
});
|
||||
|
||||
function filterCourses(selectedItem) {
|
||||
|
||||
let filterGroup = $(selectedItem).closest(".progress-filter").data("topic");
|
||||
let selectedFilter = $(selectedItem).text().replace(" ", "-").toLowerCase();
|
||||
let carouselGroup = $('.courses-carousel[data-topic="' + filterGroup + '"]');
|
||||
|
||||
carouselGroup.slick('slickUnfilter');
|
||||
|
||||
if (selectedFilter != "all-courses") {
|
||||
carouselGroup.slick('slickFilter', `.${selectedFilter}`);
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,61 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
<main class="np-main np-homepage">
|
||||
<div class="np-homepage-hero">
|
||||
<img class="np-homepage-hero-image"
|
||||
src="{{ homepage.artwork_url }}"
|
||||
alt="{{ homepage.headline }}"
|
||||
/>
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-headline np-header-font-color">
|
||||
{{ homepage.headline }}
|
||||
</div>
|
||||
<div class="np-homepage-subheadline np-header-font-color">
|
||||
{{ homepage.subheadline }}
|
||||
</div>
|
||||
<a class="np-homepage-hero-cta np-button" href="{% route catalog %}">
|
||||
Explore Courses
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% include "sub_navigation" %}
|
||||
<div class="np-homepage-featured np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
{{ homepage.featured_courses_headline }}
|
||||
</div>
|
||||
<div class="np-homepage-subheadline">
|
||||
{{ homepage.featured_courses_subheadline }}
|
||||
</div>
|
||||
</div>
|
||||
{% if courses.featured.any? %}
|
||||
<div class="np-homepage-featured-courses row">
|
||||
{% for course in courses.featured %}
|
||||
<div class="col-xs-12 col-sm-8 col-md-12" style="margin:auto;">
|
||||
{% include "cards_featured_course" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
{% t .empty, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="{% t .empty, key: current_school.course_vocabulary %}"
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% include "section_popular_topics" %}
|
||||
|
||||
{% include "section_featured_photography" %}
|
||||
|
||||
{% include "section_tips_tricks" %}
|
||||
|
||||
{% include "section_faqs" %}
|
||||
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,10 @@
|
||||
{% include "header" %}
|
||||
<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>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,14 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-learning-paths np-subpage-container np-max-width">
|
||||
<div class="np-learning-paths-main">
|
||||
<div class="np-resource-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .subtitle %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.available %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,19 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-training-events np-subpage-container np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-10">
|
||||
<div class="np-resource-title">
|
||||
{% t .title %}
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .subtitle %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-2">
|
||||
{% include "training_events_filter" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "training_events_index" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
BIN
NP_Custom_Templates/customer_templates/Stripe/.DS_Store
vendored
Normal file
BIN
NP_Custom_Templates/customer_templates/Stripe/.DS_Store
vendored
Normal file
Binary file not shown.
@ -1,86 +0,0 @@
|
||||
{% comment %} Determine if events are enabled and the user is registered 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: "/app/partner-training" %}
|
||||
<main class="np-main np-dashboard np-subpage-container">
|
||||
|
||||
<div class="page__header-wrapper">
|
||||
<h1 class="np-resource-title">Partner Training 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 %}
|
||||
|
||||
{% if courses.enrolled and courses.enrolled.any? %}
|
||||
<div class="blocks-layout">
|
||||
{% for course in courses.enrolled %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == 'Partner Training' %}
|
||||
{% 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 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -23,9 +23,19 @@
|
||||
{% endif %}
|
||||
<div class="np-card-content-footer">
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.name == "Developer Coding Challenge Mission" %}
|
||||
<a class ="np-button np-button-wide" href="https://stripedemo.northpass.com/courses/e805c2c2-9be1-46b9-9a1f-7c26a99a8e22/activities/7886cee7-904f-435f-9c9d-f966b3536aae">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
{% elsif course.name == "MCQ Exam Sign up" %}
|
||||
<a class = "np-button np-button-wide" href=https://stripedemo.northpass.com/courses/fa2b4ce1-8e59-4ba8-b2ea-8f20d101daa2/activities/4ba10994-8512-4245-adeb-d30bf8d1c98f">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
{% else %}
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if course.enrolled? %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
{% 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 %}
|
||||
@ -41,9 +41,9 @@
|
||||
<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 %} Partner Training {% endcomment %}
|
||||
{% assign navigation_my_training = navigations.sub_navigation | where: "label", "partner-training" | first %}
|
||||
{% include "header_desktop_menu_item", label: "Partner Training", url: '/app/partner-training', external: false %}
|
||||
|
||||
{% comment %} All Courses {% endcomment %}
|
||||
{% include "header_desktop_menu_item", label: 'Courses', url: '/app/courses', external: false %}
|
||||
|
||||
@ -21,4 +21,12 @@
|
||||
.black-text{
|
||||
color: black
|
||||
}
|
||||
|
||||
.black-text:hover{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.white-text:hover{
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
@ -3,9 +3,9 @@
|
||||
{% include "sub_navigation_item", label: "All Courses", icon: "fa fa-book-open", url: '/app/courses' %}
|
||||
{% include "sub_navigation_item", label: "Partner Training", icon: "fa fa-tasks", url: "/app/partner-training" %}
|
||||
{% if current_person.properties.partner_training_cert == true %}
|
||||
{% include "sub_navigation_item", label: "Partner Certifications", icon: "fa fa-desktop", url: "/app/partner-certs" %}
|
||||
{% include "sub_navigation_item", label: "Partner Certifications", icon: "fa fa-desktop", url: "/app/partner-certs" %}
|
||||
{% else %}
|
||||
{% include "sub_navigation_item", label: "Partner Certifications", icon: "fa fa-exclamation-circle", url: "" %}
|
||||
{% include "sub_navigation_item", label: "Partner Certifications", icon: "fa-solid fas fa-exclamation", url: "" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</nav>
|
||||
@ -5,11 +5,17 @@
|
||||
np-sub-navigation-content-item-inactive
|
||||
{% endif %}
|
||||
">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ url }}">
|
||||
<a class="np-sub-navigation-content-item-link subnav-item" 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>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.subnav-item:hover{
|
||||
color: #ba37d6
|
||||
}
|
||||
</style>
|
||||
@ -1,47 +1,45 @@
|
||||
{% include "header", current_page_orgin: "false" %}
|
||||
<main class="np-main np-homepage">
|
||||
<div class="np-homepage-hero">
|
||||
<div class="np-homepage-hero" style="background: transparent">
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-headline is-animation np-header-font-color">
|
||||
<div class="np-homepage-headline np-header-font-color" style="color: #fff">
|
||||
{{ homepage.headline }}
|
||||
</div>
|
||||
<div class="np-homepage-subheadline np-header-font-color">
|
||||
Hi {{ current_person.name }}, how is the weather in {{ current_person.properties.location }}?
|
||||
Hi {{ current_person.display_name }}, how is the weather in {{ current_person.properties.location }}?
|
||||
Here is the training you are eligible for in your role as {{ current_person.properties.role }}.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="homepage-waves__wave-1-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 150">
|
||||
{% comment %} <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/partner-training">
|
||||
<div class="homepage-navigation__title">Partner Training</div>
|
||||
<img class="animation-pe homepage-navigation__animation" src="https://s3.amazonaws.com/static.northpass.com/Gusto/gusto3.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
{% comment %}
|
||||
This card needs to be greyed out until the property partner_training_certs == True. Something like
|
||||
{% endcomment %}
|
||||
{% if current_person.properties.partner_training_cert == true %}
|
||||
<div class="homepage-navigation__item-container">
|
||||
<a class="homepage-navigation__item" href="">
|
||||
<div class="homepage-navigation__title">Partner Certifications</div>
|
||||
<img class="animation-pe homepage-navigation__animation" src="https://s3.amazonaws.com/static.northpass.com/Gusto/gusto3.png" alt="" style="filter:grayscale(1)">
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="homepage-navigation__item-container">
|
||||
<a class="homepage-navigation__item" href="/app/partner-certs">
|
||||
<div class="homepage-navigation__title">Partner Certifications</div>
|
||||
<img class="animation-pe homepage-navigation__animation" src="https://s3.amazonaws.com/static.northpass.com/Gusto/gusto3.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</div >
|
||||
</svg>{% endcomment %}
|
||||
<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/partner-training">
|
||||
<div class="homepage-navigation__title">Partner Training</div>
|
||||
<img class="animation-pe homepage-navigation__animation" src="https://s3.amazonaws.com/static.northpass.com/stripe/stripe_pattern_purple.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
{% if current_person.properties.partner_training_cert == false %}
|
||||
<div class="homepage-navigation__item-container">
|
||||
<a class="homepage-navigation__item" href="">
|
||||
<div class="homepage-navigation__title">Partner Certifications</div>
|
||||
<img class="animation-pe homepage-navigation__animation" src="https://s3.amazonaws.com/static.northpass.com/stripe/stripe_pattern_green.png" alt="" style="filter:grayscale(1)">
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="homepage-navigation__item-container">
|
||||
<a class="homepage-navigation__item" href="/app/partner-certs">
|
||||
<div class="homepage-navigation__title">Partner Certifications</div>
|
||||
<img class="animation-pe homepage-navigation__animation" src="https://s3.amazonaws.com/static.northpass.com/stripe/stripe_pattern_green.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</div >
|
||||
</div>
|
||||
{% if courses.featured and courses.featured.any? %}
|
||||
<div class="np-homepage-featured page-section np-max-width">
|
||||
|
||||
@ -87,11 +85,39 @@
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% comment %}
|
||||
<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>
|
||||
</svg>{% endcomment %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
main {
|
||||
background: linear-gradient(145deg, #635bff, #b10bdf, #f52558, #48d4ff, #f9b45e);
|
||||
background-size: 400% 350%;
|
||||
animation: gradient 15s ease-in-out infinite;
|
||||
height: 75vh;
|
||||
margin-top: -100px;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 79%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 22%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 79%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
{% include "header", current_page_orgin: "courses" %}
|
||||
{% include "header", current_page_orgin: "partner-training" %}
|
||||
{% include "sub_navigation", current_page: "/app/partner-training" %}
|
||||
<main class="np-main np-courses np-subpage-container">
|
||||
<main class="np-main np-courses np-subpage-container" >
|
||||
<h1 class="np-resource-title">
|
||||
Partner Training Courses
|
||||
</h1>
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
{% include "header", current_page_orgin: "courses" %}
|
||||
{% include "sub_navigation", current_page: "/app/partnercerts" %}
|
||||
<main class="np-main np-courses np-subpage-container">
|
||||
<h1 class="np-resource-title">
|
||||
Partner Certification Courses
|
||||
</h1>
|
||||
<div class="np-resource-subtitle">
|
||||
{% capture subtitle_text %}
|
||||
{%comment%}{% t .headline, key: current_school.course_vocabulary %}{%endcomment%}
|
||||
Hey there, {{ current_person.name }}! Are you ready to move onto your Partner Challenge Missions? Let's go!
|
||||
{% endcapture %}
|
||||
{{ subtitle_text | replace: "Courses", "tutorials" }}
|
||||
</div>
|
||||
<br>
|
||||
{% include "courses_partnercerts_index", card_classes: "col-xs-12 col-sm-6 col-lg-4 np-stretch-content" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,15 @@
|
||||
{% include "header", current_page_orgin: "courses" %}
|
||||
{% include "sub_navigation", current_page: "/app/partnertraining" %}
|
||||
<main class="np-main np-courses np-subpage-container">
|
||||
<h1 class="np-resource-title">
|
||||
Partner Training Courses
|
||||
</h1>
|
||||
<div class="np-resource-subtitle">
|
||||
{%comment%}{% t .headline, key: current_school.course_vocabulary %}{%endcomment%}
|
||||
Hey there {{ current_person.name }}! Welcome to your partner training center! Complete at least one of the courses to complete your certification.
|
||||
{{ subtitle_text | replace: "Courses", "tutorials" }}
|
||||
</div>
|
||||
<br>
|
||||
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -1,8 +1,8 @@
|
||||
{% include "header", current_page_orgin: "courses" %}
|
||||
{% include "sub_navigation", current_page: "/app/sec3-courses" %}
|
||||
{% include "sub_navigation", current_page: "/app/sec1-courses" %}
|
||||
<main class="np-main np-courses np-subpage-container">
|
||||
<h1 class="np-resource-title">
|
||||
Section 3 Courses
|
||||
Section 1 Courses
|
||||
</h1>
|
||||
<div class="np-resource-subtitle">
|
||||
{% capture subtitle_text %}
|
||||
@ -12,6 +12,6 @@
|
||||
{{ 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" %}
|
||||
{% include "courses_sec1_index", card_classes: "col-xs-12 col-sm-6 col-lg-4 np-stretch-content" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -1399,14 +1399,9 @@ button,
|
||||
}
|
||||
.np-homepage-hero .np-homepage-headline {
|
||||
font-size: 1.75rem;
|
||||
color: #2574e1;
|
||||
color: #fff;
|
||||
-webkit-background-clip: text;
|
||||
-moz-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-moz-text-fill-color: transparent;
|
||||
background-image: linear-gradient(45deg, #2574e1, #795ae8, #ba37d6, #795ae8, #2574e1, #795ae8);
|
||||
background-size: 500%;
|
||||
animation-name: homepage-gradient;
|
||||
}
|
||||
.np-homepage-hero .np-homepage-subheadline {
|
||||
font-size: 1.25rem;
|
||||
|
||||
Reference in New Issue
Block a user