Doordash templates, notes for Mizuno, a few template changes. Anthology,included.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,68 @@
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content" course-vehicle="{{ course.properties.course_vehicle }}">
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name | split: ' v2' | first }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class='np-card-header-rate' style='display: flex; justify-content: space-between;'>
|
||||
<h3 class="np-card-content-title" {% if nz_status %}style='margin: 0.6rem -10px; align-self: center;'{% endif %}>
|
||||
{% if course.name contains "v2" %}
|
||||
{{ course.name | split: ' v2' | first }}
|
||||
{% elsif course.name contains "v3" %}
|
||||
{{ course.name | split: ' v3' | first }}
|
||||
{% else %}
|
||||
{{ course.name }}
|
||||
{% endif %}
|
||||
</h3>
|
||||
{% comment %} <div class='np-card-header-right'>
|
||||
<div class='np-card-header-right-rating' style='color: #bac4ca; font-size: 0.75rem !important; align-self: center; font-weight: 700;'>
|
||||
{{course.properties.np_course_rating}} ({{course.properties.np_course_rating_count}})
|
||||
</div>
|
||||
<i class='np-card-header-right-star far fa-star' style='padding-left: 10px; color: #ff2c00; align-self: center;'></i>
|
||||
</div> {% endcomment %}
|
||||
</div>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
{% if course.progress == 100 %}
|
||||
<div class="np-card-content-progress" {% if nz_status %}style="color: rgb(0, 165, 0); font-size: 1.5rem; margin-left: -10px;"{% endif %}>
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-content-progress np-button-color" {% if nz_status %}style="font-size: 1.5rem; margin-left: -10px"{% endif %}>
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}" {% if nz_status %}style="margin-right: -10px; {% if course.progress == 100 %} border: 2px solid #ff2c00; color: #ff2c00; background: white;{% endif %}"{% endif %}>
|
||||
{% if nz_status %}
|
||||
{% if course.progress == 100%}
|
||||
View
|
||||
{% else %}
|
||||
{% if course.progress > 0%}
|
||||
Continue
|
||||
{% else %}
|
||||
Start
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% t shared.view %}
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,91 @@
|
||||
<div class="np-card np-no-horizontal-padding" course-vehicle="{{ course.properties.course_vehicle }}">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="np-hidden-desktop np-card-header">
|
||||
<div class='np-card-header-left'>
|
||||
<i class="np-button-color np-learning-path-items-icon far fa-graduation-cap" style='padding-right: 10px;'></i>
|
||||
<div class="np-card-header-type" style='font-size: 0.75rem !important; align-self: center;'>Course</div>
|
||||
</div>
|
||||
{% comment %} <div class='np-card-header-right'>
|
||||
<div class='np-card-header-right-rating' style='color: #bac4ca; font-size: 0.75rem !important; align-self: center; font-weight: 700;'>
|
||||
{{course.properties.np_course_rating}}
|
||||
</div>
|
||||
<i class='np-card-header-right-star far fa-star' style='padding-left: 10px; color: #ff2c00'></i>
|
||||
</div> {% endcomment %}
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-card-header">
|
||||
<div class="np-card-header-type">Course</div>
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<div class='np-card-header-rate' style='display: flex; justify-content: space-between; '>
|
||||
<h3 class="np-card-content-title" style='margin: 0;'>
|
||||
{% if course.name contains "v2" %}
|
||||
{{ course.name | split: ' v2' | first }}
|
||||
{% elsif course.name contains "v3" %}
|
||||
{{ course.name | split: ' v3' | first }}
|
||||
{% else %}
|
||||
{{ course.name }}
|
||||
{% endif %}
|
||||
</h3>
|
||||
|
||||
{% comment %} <div class='np-card-header-right np-hidden-mobile'>
|
||||
<div class='np-card-header-right-rating' style='color: #bac4ca; font-size: 0.75rem !important; align-self: center; font-weight: 700;'>
|
||||
{{course.properties.np_course_rating}}
|
||||
</div>
|
||||
<i class='np-card-header-right-star far fa-star' style='padding-left: 10px; color: #ff2c00'></i>
|
||||
</div> {% endcomment %}
|
||||
</div>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-description">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ course.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-hidden-desktop np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
<a class="np-button" href="https://doordash.northpass.com/courses/{{course.id}}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
<i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-stack">
|
||||
<div class="np-card-stack-level-1"></div>
|
||||
<div class="np-card-stack-level-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-card-header-left {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.np-card-header-right {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,33 @@
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{% if course.name contains "v2" %}
|
||||
{{ course.name | split: ' v2' | first }}
|
||||
{% elsif course.name contains "v3" %}
|
||||
{{ course.name | split: ' v3' | first }}
|
||||
{% else %}
|
||||
{{ course.name }}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
Learn how in this {{ course.properties.course_time}} {{ current_school.course_vocabulary }}
|
||||
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
|
||||
</i>
|
||||
</div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-hidden-desktop"
|
||||
alt="{{ course.name | split: ' v2' | first }}"
|
||||
/>
|
||||
<style>
|
||||
|
||||
.np-top-title {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.np-text-title{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,52 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.progress == 0 %}
|
||||
{% comment %} <div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div> {% endcomment %}
|
||||
{% if course.id == "1683955c-1edf-44c3-a6fa-d2bbeb693525" or course.id == "6b82ee8b-1120-4cf8-9f49-56458b6ea4ee" or course.id == "0bf212ae-aeea-4b4c-a1e1-de2ac4e43143" %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if course.id == "1683955c-1edf-44c3-a6fa-d2bbeb693525" or course.id == "6b82ee8b-1120-4cf8-9f49-56458b6ea4ee" or course.id == "0bf212ae-aeea-4b4c-a1e1-de2ac4e43143" %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% comment %} <div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div> {% endcomment %}
|
||||
{% 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,60 @@
|
||||
{% comment %} <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> {% endcomment %}
|
||||
|
||||
{% 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"
|
||||
id="btnAnimateCountdown"
|
||||
{% 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 %}
|
||||
Get Started Now
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
#course-mobile > div > div.np-top-cta > a {
|
||||
min-height: 80px;
|
||||
font-size:1.5rem;
|
||||
}
|
||||
|
||||
.np-top-cta {
|
||||
background: #fff;
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,71 @@
|
||||
{% assign completed_courses_count = 0%}
|
||||
{% assign first_level_completed = false %}
|
||||
{% assign orientation_course = '91007f87-8d34-4f17-80fd-bd8cb44395e4' %}
|
||||
{% assign ANZ_group = 'eeabc17d-8364-42fc-b667-c83ca18797f8' %}
|
||||
{% assign ANZ = false %}
|
||||
{% assign first_level_courses = '0c3468c6-a6b1-47ca-ad01-49983bf11808,d770f3b2-029e-4def-a420-7841edb1234f,d4227707-e8d4-42dc-a80c-e7d60deb37f6' | split: ',' %}
|
||||
|
||||
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.id == ANZ_group %}
|
||||
{% assign ANZ = true %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% for cat in course.categories %}
|
||||
{% if cat.name == "Dasher101" %}
|
||||
{% if course.progress == 100%}
|
||||
{% assign completed_courses_count = completed_courses_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if ANZ and first_level_completed == false %}
|
||||
{% if first_level_courses contains course.id %}
|
||||
{% if course.completed? %}
|
||||
{% assign first_level_completed = true %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if courses.enrolled.any? %}
|
||||
<script>console.log('{{completed_courses_count}}')</script>
|
||||
{% if completed_courses_count > 7%}
|
||||
<div class="np-learning-paths-resources">
|
||||
{% for course in courses.enrolled %}
|
||||
{% assign course_categories = course.categories | map: 'name' %}
|
||||
{% if course_categories contains "Feedback" %}
|
||||
{% include 'cards_course_lp' with course %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% if ANZ %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% assign course_categories = course.categories | map: 'name' %}
|
||||
{% unless course_categories contains "Feedback" %}
|
||||
{% if course.id != orientation_course or first_level_completed %}
|
||||
{% include "cards_course" with course %}
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% assign course_categories = course.categories | map: 'name' %}
|
||||
{% unless course_categories contains "Feedback" %}
|
||||
{% include "cards_course" with course %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</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,115 @@
|
||||
{% if groups contains 'NZ Mandatory Training' %}
|
||||
{% assign nz_status = true%}
|
||||
{% else %}
|
||||
{% assign nz_status = false%}
|
||||
{% endif %}
|
||||
<footer class="np-footer">
|
||||
<div class="np-footer-top">
|
||||
{% comment %} {% if website_footer.show_navigation_links? %}
|
||||
<div class="np-footer-navigation">
|
||||
<ul class="np-footer-navigation-list">
|
||||
{% for website_navigation in navigations.footer_navigations %}
|
||||
<li class="np-footer-navigation-item">
|
||||
<a
|
||||
class="np-footer-navigation-link np-button-color"
|
||||
href="{{ website_navigation.path }}"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
{% if current_school.logo_url %}
|
||||
<h2 class="np-footer-logo">
|
||||
{% comment %} <a href="{% route home %}"> {% endcomment %}
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-footer-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
{% comment %} </a> {% endcomment %}
|
||||
</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">
|
||||
{% t .need_help %}
|
||||
</div>
|
||||
<div class="np-footer-support-item np-footer-support-email">
|
||||
Visit
|
||||
</div>
|
||||
<a
|
||||
class="np-footer-support-item np-footer-support-link np-button-color"
|
||||
href="https://help.doordash.com/dashers/s/dasher-support?language=en_US"
|
||||
target="_blank"
|
||||
>
|
||||
Dasher Support
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{% if nz_status %}
|
||||
<style>
|
||||
html,
|
||||
body{
|
||||
font-family: "TT Norms Pro-Regular", sans-serif !important;
|
||||
font-variant-ligatures: none;
|
||||
}
|
||||
|
||||
.courses_page_title{
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.courses_page_title,
|
||||
.np-card-content-progress,
|
||||
.group-selection-select{
|
||||
font-family: "TT Norms Pro", sans-serif !important;
|
||||
font-weight: 700 !important;
|
||||
font-variant-ligatures: none;
|
||||
}
|
||||
|
||||
.group-selection-select{
|
||||
padding: 10px 40px 15px 40px !important;
|
||||
}
|
||||
|
||||
.np-button,
|
||||
.np-button-background-color{
|
||||
border-radius: 30px;
|
||||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
@ -0,0 +1,468 @@
|
||||
<style>
|
||||
|
||||
.np-dashboard-resources-title.lp,
|
||||
.np-dashboard-resources-title.modules,
|
||||
.np-dashboard-resources-title.events,
|
||||
.np-zero-state-text,
|
||||
.np-button.np-button-wide,
|
||||
.np-footer-support-item.np-footer-support-help,
|
||||
.np-card-content-progress.np-button-color.notstarted,
|
||||
.np-zero-state-text.training-events,
|
||||
.np-button.lp,
|
||||
.sub-navigation-label:nth-child(1),
|
||||
.np-resource-title.modules,
|
||||
.np-resource-subtitle.modules,
|
||||
.np-resource-title.lp,
|
||||
.np-resource-subtitle.lp,
|
||||
.np-card-header-type,
|
||||
.np-resource-title.events,
|
||||
.np-resource-subtitle.events,
|
||||
.np-button.dropdown-button,
|
||||
.np-top-vocabulary.np-text-title.np-text-muted,
|
||||
.np-top-cta-progress-title.np-text-title,
|
||||
/*.np-top-button.np-button-font-color.np-button.np-button-big,*/
|
||||
.np-text-title.np-course-outline-title,
|
||||
.np-card-heading,
|
||||
.np-top-cta-progress-text.np-button-color,
|
||||
.np-card-heading.lp,
|
||||
.np-top-cta-progress-title.np-text-title.lp,
|
||||
.np-top-vocabulary.np-text-title,
|
||||
.Home.sub-navigation-label,
|
||||
.Modules.sub-navigation-label,
|
||||
.Events.sub-navigation-label,
|
||||
.Learning.Paths.sub-navigation-label,
|
||||
.Home.np-footer-navigation-link.np-button-color,
|
||||
.Learning.Paths.np-footer-navigation-link.np-button-color,
|
||||
.Events.np-footer-navigation-link.np-button-color,
|
||||
.course-completion,
|
||||
.np-header-avatar-tooltip-navigation-link,
|
||||
.np-header-avatar-tooltip-navigation-link.np-danger,
|
||||
.np-button.np-button-big.np-button-large-font.np-form-action,
|
||||
.np-resource-title.my-profile,
|
||||
.np-input-label.email,
|
||||
.np-input-label.first-name,
|
||||
.np-input-label.last-name,
|
||||
.np-input-label.display-name,
|
||||
.np-input-label.password,
|
||||
.np-input-label.password-confirmation,
|
||||
.avatar-description,
|
||||
.avatar-requirements,
|
||||
.radio__label.gravatar,
|
||||
.radio__label.custom,
|
||||
#desktop_upload_avatar
|
||||
{
|
||||
text-indent: -9999999px;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link::after {
|
||||
/* Profile Settings */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Paramètres de profil";
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link.np-danger::after {
|
||||
/* Sign Out */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Se déconnecter";
|
||||
}
|
||||
|
||||
/* ACCOUNT */
|
||||
|
||||
.radio__label.gravatar::after {
|
||||
/* Use Gravatar™ */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Utiliser Gravatar™";
|
||||
}
|
||||
|
||||
.radio__label.custom::after{
|
||||
/* Upload Custom Photo */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Télécharger une Photo Personnalisée";
|
||||
}
|
||||
|
||||
#desktop_upload_avatar::after {
|
||||
/* Upload Photo */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Envoyer la Photo";
|
||||
}
|
||||
|
||||
.avatar-description::after {
|
||||
/* Adding a photo adds a personal touch to your profile. Your profile picture is used as the icon for your account to represent you. It is also displayed in various other places next to your name. */
|
||||
text-indent: 0;
|
||||
line-height: auto;
|
||||
display: block;
|
||||
content: "L'ajout d'une photo ajoute une touche personnelle à votre profil. Votre photo de profil est utilisée comme icône de votre compte pour vous représenter. Il est également affiché à divers autres endroits à côté de votre nom.";
|
||||
}
|
||||
|
||||
.avatar-requirements::after {
|
||||
/* For the best results, your profile picture size should be at least 400x400 pixels, and a max size of 2MB. The file format should be PNG, JPG or GIF. */
|
||||
text-indent: 0;
|
||||
line-height: auto;
|
||||
display: block;
|
||||
content: "Pour de meilleurs résultats, la taille de votre photo de profil doit être d'au moins 400 x 400 pixels et une taille maximale de 2 Mo. Le format de fichier doit être PNG, JPG ou GIF.";
|
||||
}
|
||||
|
||||
.np-button.np-button-big.np-button-large-font.np-form-action::after {
|
||||
/* Save Profile */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Enregistrer le Profil";
|
||||
}
|
||||
|
||||
.np-resource-title.my-profile::after {
|
||||
/* My Profile */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Mon Profil";
|
||||
margin-bottom: 24px;
|
||||
margin-top: -24px;
|
||||
}
|
||||
|
||||
.np-input-label.email::after {
|
||||
/* Email */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "E-mail *";
|
||||
}
|
||||
|
||||
.np-input-label.first-name::after {
|
||||
/* First Name */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Nom *";
|
||||
}
|
||||
|
||||
.np-input-label.last-name::after {
|
||||
/* Last Name */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Nom de Famille *";
|
||||
}
|
||||
|
||||
.np-input-label.display-name::after {
|
||||
/* Display Name */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Afficher un Nom";
|
||||
}
|
||||
|
||||
.np-input-label.password::after {
|
||||
/* Password */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Mot de Passe *";
|
||||
}
|
||||
|
||||
.np-input-label.password-confirmation::after {
|
||||
/* Password Confirmation */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Confirmation Mot de Passe *";
|
||||
}
|
||||
|
||||
/* MAIN CONTENT */
|
||||
|
||||
.np-dashboard-resources-title.lp::after {
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Parcours d'apprentissage";
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title.modules::after {
|
||||
/* Modules */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Modules";
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title.events::after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Événements";
|
||||
}
|
||||
|
||||
/* SUB-NAVIGATION */
|
||||
|
||||
.Home.sub-navigation-label::after {
|
||||
/* Home */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Page d'accueil";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Events.sub-navigation-label::after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Événements";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Modules.sub-navigation-label::after {
|
||||
/* Modules */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Módulos";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Learning.Paths.sub-navigation-label::after {
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Parcours d'apprentissage";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
/* LEARNING PATHS */
|
||||
|
||||
.np-button.lp::after {
|
||||
/* View */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Vue";
|
||||
}
|
||||
|
||||
.np-zero-state-text::after {
|
||||
/* Bummer! You're not assigned any Learning Paths. */
|
||||
text-indent: 0;
|
||||
line-height: inherit;
|
||||
display: block;
|
||||
content: "Dommage! Aucun parcours d'apprentissage ne vous est attribué.";
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.np-resource-subtitle.lp::after {
|
||||
/* Explore curated sets of courses for a tailored learning experience */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Explorez des ensembles de cours organisés pour une expérience d'apprentissage sur mesure";
|
||||
}
|
||||
|
||||
.np-card-header-type::after,
|
||||
.np-resource-title.lp::after,
|
||||
.np-top-vocabulary.np-text-title::after
|
||||
{
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Parcours d'apprentissage";
|
||||
}
|
||||
|
||||
.np-top-cta-progress-text.np-button-color::after {
|
||||
/* Not started */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Pas commencé";
|
||||
}
|
||||
|
||||
.np-card-heading.lp::after {
|
||||
/* About This Learning Path */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "À propos de ce parcours d'apprentissage";
|
||||
}
|
||||
|
||||
/* COURSE CARDS */
|
||||
|
||||
.np-button.np-button-wide::after {
|
||||
/* View */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Vue";
|
||||
}
|
||||
|
||||
.np-card-content-progress.np-button-color.notstarted::after {
|
||||
/* Not started */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "No empezado";
|
||||
}
|
||||
|
||||
.np-top-cta-progress-title.np-text-title.lp::after {
|
||||
/* Learning Path Progress */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Progression du parcours d'apprentissage";
|
||||
}
|
||||
|
||||
.course-completion::after {
|
||||
/* Complete */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Compléter";
|
||||
margin-top: -13px;
|
||||
}
|
||||
|
||||
/* EVENTS */
|
||||
|
||||
.np-zero-state-text.training-events::after {
|
||||
/* You have no upcoming Events. Check back later for updates */
|
||||
text-indent: 0;
|
||||
line-height: inherit;
|
||||
display: block;
|
||||
content: "Vous n'avez aucun événement à venir. Vérifiez plus tard pour avoir les mises à jour.";
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.np-resource-title.events::after {
|
||||
/* Training Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Événements de formation";
|
||||
}
|
||||
|
||||
.np-resource-subtitle.events::after {
|
||||
/* Discover in-person and online events to maximize your learning */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Découvrez des événements en personne et en ligne pour maximiser votre apprentissage";
|
||||
}
|
||||
|
||||
.np-button.dropdown-button::after {
|
||||
/* Filter */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Filtre";
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
.np-footer-support-item.np-footer-support-help::after {
|
||||
/* Need help? */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
float: right;
|
||||
content: "Besoin d'aide?";
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.Home.np-footer-navigation-link.np-button-color::after {
|
||||
/* Home */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Page d'accueil";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Events.np-footer-navigation-link.np-button-color::after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Événements";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Learning.Paths.np-footer-navigation-link.np-button-color::after {
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Parcours d'apprentissage";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
/* MODULES */
|
||||
|
||||
.np-resource-title.modules::after {
|
||||
/* Modules */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Modules";
|
||||
}
|
||||
|
||||
.np-resource-subtitle.modules::after {
|
||||
/* Great Modules from the comfort of your home or office. */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Grands modules dans le confort de votre maison ou de votre bureau.";
|
||||
}
|
||||
|
||||
.np-top-vocabulary.np-text-title.np-text-muted::after {
|
||||
/* Module */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Module";
|
||||
}
|
||||
|
||||
.np-top-cta-progress-title.np-text-title::after {
|
||||
/* Course Progress */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Progression du cours";
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
/*
|
||||
.np-top-button.np-button-font-color.np-button.np-button-big::after {
|
||||
/* Continue
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Continuer";
|
||||
}*/
|
||||
|
||||
.np-text-title.np-course-outline-title::after {
|
||||
/* Module outline */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Aperçu du module";
|
||||
}
|
||||
|
||||
.np-card-heading::after {
|
||||
/* About the module */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "À propos du module";
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,128 @@
|
||||
{% if groups contains 'NZ Mandatory Training' %}
|
||||
{% assign nz_status = true%}
|
||||
{% else %}
|
||||
{% assign nz_status = false%}
|
||||
{% endif %}
|
||||
|
||||
<div class="group-selection">
|
||||
<div class="group-selection-title">
|
||||
What type of vehicle do you have?
|
||||
</div>
|
||||
<div class="select-wrapper" {% if nz_status %}style="border-radius: 30px;"{% endif %}>
|
||||
<select class="group-selection-select" autocomplete="off">
|
||||
{% unless current_person.properties.learner_vehicle %}
|
||||
<option class="group-selection-select-default" disabled selected>Select Your Vehicle</option>
|
||||
{% endunless %}
|
||||
<option class="group-selection-select-option" value="Car"
|
||||
{% if current_person.properties.learner_vehicle == 'Car' %}
|
||||
selected
|
||||
{% endif %}
|
||||
>
|
||||
Car
|
||||
</option>
|
||||
|
||||
<option class="group-selection-select-option" value="Bike"
|
||||
{% if current_person.properties.learner_vehicle == 'Bike' %}
|
||||
selected
|
||||
{% endif %}
|
||||
>
|
||||
Bike
|
||||
</option>
|
||||
|
||||
<option class="group-selection-select-option" value="Scooter/Motorbike"
|
||||
{% if current_person.properties.learner_vehicle == 'Scooter/Motorbike' %}
|
||||
selected
|
||||
{% endif %}
|
||||
>
|
||||
Scooter/Motorbike
|
||||
</option>
|
||||
</select>
|
||||
<i class="far fa-regular fa-angle-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.group-selection {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.group-selection-select {
|
||||
background: transparent;
|
||||
color: white;
|
||||
padding: 10px 30px 10px 15px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
margin-top: 5px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.group-selection-select-option {
|
||||
background-color: #f2f4f5;
|
||||
color: #1b3e4f;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
.select-wrapper {
|
||||
position: relative;
|
||||
width: min-content;
|
||||
background: #ff2c00;
|
||||
border-radius: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.select-wrapper .fa-angle-down {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 15px;
|
||||
pointer-events: none;
|
||||
color: white;
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.select-wrapper {
|
||||
margin: 15px auto;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
document.getElementsByClassName("group-selection-select")[0].addEventListener('change', changeVehicle);
|
||||
function changeVehicle() {
|
||||
var xhr = new XMLHttpRequest();
|
||||
var url = "https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/add_vehicle";
|
||||
xhr.open("POST", url, true);
|
||||
xhr.send(
|
||||
JSON.stringify({
|
||||
user_id: '{{ current_person.id }}',
|
||||
vehicle: $('.group-selection-select')[0].value
|
||||
})
|
||||
);
|
||||
$('[course-vehicle]').hide();
|
||||
if ($('.group-selection-select')[0].value == 'Car') {
|
||||
$('[course-vehicle]').each(function() {
|
||||
console.log($(this).attr('course-vehicle')[0])
|
||||
if ($(this).attr('course-vehicle')[0] == '1') {
|
||||
$(this).show();
|
||||
}
|
||||
})
|
||||
}
|
||||
else if ($('.group-selection-select')[0].value == 'Bike') {
|
||||
$('[course-vehicle]').each(function() {
|
||||
if ($(this).attr('course-vehicle')[1] == '1') {
|
||||
$(this).show();
|
||||
}
|
||||
})
|
||||
}
|
||||
else if ($('.group-selection-select')[0].value == 'Scooter/Motorbike') {
|
||||
$('[course-vehicle]').each(function() {
|
||||
if ($(this).attr('course-vehicle')[2] == '1') {
|
||||
$(this).show();
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,217 @@
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
<script src="https://kit.fontawesome.com/41a3aee3ad.js" crossorigin="anonymous"></script>
|
||||
|
||||
{% assign ANZ_group = 'eeabc17d-8364-42fc-b667-c83ca18797f8' %}
|
||||
{% assign groups = current_person.groups | map: 'name'%}
|
||||
|
||||
{% comment %} Single variable determining if user is part of NZ training group {% endcomment %}
|
||||
{% if groups contains 'NZ Mandatory Training' %}
|
||||
{% assign nz_status = true%}
|
||||
{% else %}
|
||||
{% assign nz_status = false%}
|
||||
{% endif %}
|
||||
|
||||
{% if current_school.id == '30e76dee-eb3f-46d1-9faf-852e8650287f' %}
|
||||
{% comment %} sandbox school variables {% endcomment %}
|
||||
{% assign ANZ_group = 'f7cf641a-3198-4897-81c9-993ca28f7f6c' %}
|
||||
{% endif %}
|
||||
{% assign ANZ = false %}
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.id == ANZ_group %}
|
||||
{% assign ANZ = true %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if current_school.properties.anz_address_form and current_person.signed_in? and current_person.properties.learner_vehicle == "None" and ANZ == true %}
|
||||
{% unless current_person.email contains "+preview" %}
|
||||
<script>
|
||||
if (!localStorage.getItem("form_filled")) {
|
||||
if (window.location.hash != "ommit-infos") {
|
||||
window.location.replace("/app/infos")
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
|
||||
<header class="np-header np-header-color" {% if nz_status == true%}style="height: 60px; padding: 0px 1%; position: inherit; border-bottom: 1px solid rgb(214, 214, 214);"{% endif %}>
|
||||
<div class="np-header-content">
|
||||
{% comment %} <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> {% endcomment %}
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
{% comment %} <a href="{% route home %}"> {% endcomment %}
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
{% if nz_status == true %}style="height: 20px;"{% endif %}
|
||||
/>
|
||||
{% comment %} </a> {% endcomment %}
|
||||
</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>
|
||||
|
||||
{% comment %} {% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input np-header-font-background-color"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
aria-label="{% t shared.sign_in %}"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% comment %} {% 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> {% endcomment %}
|
||||
{% 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 %}
|
||||
{% comment %} <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> {% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
@ -0,0 +1,16 @@
|
||||
<nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
|
||||
{% if link.label != "Home" %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
@ -0,0 +1,131 @@
|
||||
{% assign groups = current_person.groups | map: 'name'%}
|
||||
{% if groups contains 'NZ Mandatory Training' %}
|
||||
{% assign nz_status = true%}
|
||||
{% else %}
|
||||
{% assign nz_status = false%}
|
||||
{% endif %}
|
||||
|
||||
{% if course.properties.is_single_activity_course %}
|
||||
|
||||
<script>
|
||||
window.location.replace("/courses/{{course.id}}");
|
||||
</script>
|
||||
|
||||
{% else %}
|
||||
|
||||
{% include "header" %}
|
||||
<main class="np-main np-max-width np-page-container">
|
||||
<div class="np-hidden-mobile" id="course-desktop">
|
||||
{% include "course_desktop_view" %}
|
||||
</div>
|
||||
<div class="np-hidden-desktop" id="course-mobile">
|
||||
{% include "course_mobile_view" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
{% if nz_status %}
|
||||
<style>
|
||||
#course-mobile .np-top-button:after,
|
||||
#course-desktop .np-top-button:after{
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.np-page-container {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/* button countdown animation and styles associated with it */
|
||||
#course-mobile .np-top-button.animate,
|
||||
#course-desktop .np-top-button.animate {
|
||||
position:relative;
|
||||
background:#000000;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
#course-mobile .np-top-button:after,
|
||||
#course-desktop .np-top-button:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
z-index:-1;
|
||||
border-radius:4px;
|
||||
transition:border-radius 0.2s;
|
||||
}
|
||||
|
||||
#course-mobile .np-top-button.animate:after,
|
||||
#course-desktop .np-top-button.animate:after {
|
||||
background-color:#ff2c00;
|
||||
animation-name: bgColorLeftToRight;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: linear;
|
||||
z-index:-1;
|
||||
border-top-right-radius:0;
|
||||
border-bottom-right-radius:0;
|
||||
}
|
||||
|
||||
@keyframes bgColorLeftToRight {
|
||||
0% { width:0 }
|
||||
100% { width:100% }
|
||||
}
|
||||
/* end button animaation */
|
||||
|
||||
</style>
|
||||
{% if course.properties.course_language == 'fr' %}
|
||||
<script>
|
||||
$('div.np-top-vocabulary.np-text-title.np-text-muted').text('APPRENEZ COMMENT DANS CE COURS DE 3 MINUTES')
|
||||
$('div.np-text-title.np-course-outline-title').text('PLAN DE COURS')
|
||||
$('.np-card-heading').text('À propos du module')
|
||||
</script>
|
||||
{% if course.progress == 0 %}
|
||||
<script>
|
||||
$('.np-top-button.np-button-font-color.np-button.np-button-big').text('Commencer le cours')
|
||||
</script>
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
<script>
|
||||
$('.np-top-button.np-button-font-color.np-button.np-button-big').text('Continuer')
|
||||
</script>
|
||||
{% else %}
|
||||
<script>
|
||||
$('.np-top-button.np-button-font-color.np-button.np-button-big').text('Reprendre le cours')
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% if course.properties.course_language != 'fr' %}
|
||||
<script>
|
||||
var progress = {{ course.progress }}
|
||||
progress < 100 ? initCourseCountdown() : "";
|
||||
console.log("script")
|
||||
// Init 10 second countdown to auto start learner in course
|
||||
function initCourseCountdown() {
|
||||
console.log("init countdown")
|
||||
let btn
|
||||
|
||||
window.innerWidth < 768 ?
|
||||
btn = document.getElementById("course-mobile").querySelector('.np-top-button') :
|
||||
btn = document.getElementById("course-desktop").querySelector('.np-top-button')
|
||||
|
||||
btn.classList.add('animate')
|
||||
|
||||
btn.addEventListener("animationend", () => {
|
||||
console.log("ended")
|
||||
btn.classList.remove('animate')
|
||||
|
||||
// redirect learner to next activity
|
||||
{% if course.enrolled? %}
|
||||
window.location.href = `{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}`
|
||||
{% endif %}
|
||||
}, false);
|
||||
|
||||
}
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,91 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% comment %} {% include "sub_navigation" %} {% endcomment %}
|
||||
{% assign groups = current_person.groups | map: 'name'%}
|
||||
{% assign completed_nz_count = 0 %}
|
||||
{% assign nz_status = false%}
|
||||
|
||||
{% if groups contains 'NZ Mandatory Training' %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.properties.nz_aus_courses %}
|
||||
{% if course.completed? %}
|
||||
{% assign completed_nz_count = completed_nz_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<main class="np-main np-courses np-subpage-container np-max-width">
|
||||
<div class="np-resource-title" style="font-size: 2.5rem">
|
||||
{% comment %} {% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %} {% endcomment %}
|
||||
<div {% if groups contains 'NZ Mandatory Training' %}class="courses_page_title"{% endif %}>Resource Center</div>
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
{% comment %} {% t .headline, key: current_school.course_vocabulary %} {% endcomment %}
|
||||
Hey {{current_person.first_name}}, welcome to the Dasher Resource Center. You can review best practices used by experienced Dashers.
|
||||
{% if groups contains 'NZ Mandatory Training' %}
|
||||
{% include 'group_selection' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if groups contains 'NZ Mandatory Training' %}
|
||||
{% assign nz_status = true %}
|
||||
{% if completed_nz_count > 0%}
|
||||
<div class="np-resource-title">
|
||||
<div class="courses_page_title">
|
||||
Completed Courses
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.properties.nz_aus_courses %}
|
||||
{% if course.completed? %}
|
||||
{% include 'cards_course' with course, nz_status%}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<div class="np-resource-title">
|
||||
<div {% if groups contains 'NZ Mandatory Training' %}class="courses_page_title"{% endif %}>Enrolled Courses</div>
|
||||
</div>
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 col-lg-4 np-stretch-content" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
{% if groups contains 'NZ Mandatory Training' %}
|
||||
<script>
|
||||
$('div[course-vehicle]').hide()
|
||||
$(document).ready(function() {
|
||||
console.log('{{ current_person.properties.learner_vehicle }}')
|
||||
if ($('.group-selection-select')[0].value == 'Car') {
|
||||
$('[course-vehicle]').each(function() {
|
||||
console.log($(this).attr('course-vehicle')[0])
|
||||
if ($(this).attr('course-vehicle')[0] == '1') {
|
||||
$(this).show()
|
||||
console.log(123)
|
||||
}
|
||||
})
|
||||
}
|
||||
else if ($('.group-selection-select')[0].value == 'Bike') {
|
||||
$('[course-vehicle]').each(function() {
|
||||
if ($(this).attr('course-vehicle')[1] == '1') {
|
||||
$(this).show()
|
||||
console.log(321)
|
||||
}
|
||||
})
|
||||
}
|
||||
else if ($('.group-selection-select')[0].value == 'Scooter/Motorbike') {
|
||||
$('[course-vehicle]').each(function() {
|
||||
if ($(this).attr('course-vehicle')[2] == '1') {
|
||||
$(this).show()
|
||||
console.log(321)
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
@ -0,0 +1,59 @@
|
||||
<script>
|
||||
window.location = '/app/courses'
|
||||
</script>
|
||||
{% comment %}
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row np-flex-center">
|
||||
<div class='title' style='font-size: 18px; font-weight: 500; text-align: center;'>
|
||||
Hey {{current_person.first_name}}, welcome to the Dasher learning center. Educate yourself on the best practices used by the highest-rated Dashers.
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<div class="np-dashboard-resources-title">
|
||||
LEARNING CENTER
|
||||
</div>
|
||||
<div class="np-learning-paths-resources">
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% for cat in course.categories %}
|
||||
{% if cat.name == "Dasher101" %}
|
||||
{% include 'cards_course_lp' with course %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
{% for cat in course.categories %}
|
||||
{% if cat.name != "Dasher101" %}
|
||||
<div class="col-xs-12 col-sm-6 np-stretch-content">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif%}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
|
||||
{% if features.training_events? %}
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-4">
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t .upcoming_events %}
|
||||
</div>
|
||||
{% include "training_events_dashboard" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %} {% endcomment %}
|
||||
@ -0,0 +1,441 @@
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
<script src="https://kit.fontawesome.com/41a3aee3ad.js" crossorigin="anonymous"></script>
|
||||
|
||||
<script>
|
||||
var autocomplete = null
|
||||
function initAutocomplete() {
|
||||
const options = {
|
||||
componentRestrictions: { country: ["au", "nz"]},
|
||||
fields: ["address_components"],
|
||||
types: ["address"]
|
||||
}
|
||||
const address1 = $('#street_address')[0];
|
||||
autocomplete = new google.maps.places.Autocomplete(address1, options);
|
||||
autocomplete.addListener('place_changed', fillInAddress);
|
||||
}
|
||||
|
||||
function fillInAddress() {
|
||||
const address1 = $('#street_address')[0];
|
||||
const address2 = $('#street_address_2')[0];
|
||||
const suburb = $('#suburb')[0];
|
||||
const city = $('#city')[0];
|
||||
const postal = $('#postal')[0];
|
||||
|
||||
const place = autocomplete.getPlace();
|
||||
const address_components = place.address_components;
|
||||
var street_number = '';
|
||||
var street = '';
|
||||
var full_street_address = '';
|
||||
for (let i = 0; i < address_components.length; i++) {
|
||||
const component = address_components[i];
|
||||
switch (component.types[0]) {
|
||||
case 'street_number':
|
||||
street_number = component.long_name;
|
||||
break;
|
||||
case 'route':
|
||||
street = component.long_name;
|
||||
break;
|
||||
case 'street_address':
|
||||
full_street_address = component.long_name;
|
||||
break;
|
||||
case 'sublocality_level_1':
|
||||
suburb.value = component.long_name;
|
||||
break;
|
||||
case 'locality':
|
||||
city.value = component.long_name;
|
||||
break;
|
||||
case 'postal_code':
|
||||
postal.value = component.long_name;
|
||||
break;
|
||||
}
|
||||
}
|
||||
address1.value = full_street_address || street_number + ' ' + street;
|
||||
address2.focus();
|
||||
document.querySelectorAll('input[req]').forEach(checkInput)
|
||||
}
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
initAutocomplete();
|
||||
})
|
||||
</script>
|
||||
|
||||
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5tTAncWjVZPaPO30fNogteWYvlm2wnIk&libraries=places&callback=initAutocomplete"></script>
|
||||
|
||||
|
||||
|
||||
{% assign ANZ_group = 'eeabc17d-8364-42fc-b667-c83ca18797f8' %}
|
||||
{% if current_school.id == '30e76dee-eb3f-46d1-9faf-852e8650287f' %}
|
||||
{% comment %} sandbox school variables {% endcomment %}
|
||||
{% assign ANZ_group = 'f7cf641a-3198-4897-81c9-993ca28f7f6c' %}
|
||||
{% endif %}
|
||||
{% assign ANZ = false %}
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.id == ANZ_group %}
|
||||
{% assign ANZ = true %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if current_school.properties.anz_address_form == false or current_person.signed_in? == false or current_person.properties.learner_vehicle != 'None' or ANZ == false %}
|
||||
<script>
|
||||
window.location.replace("/app/courses")
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
<body>
|
||||
<div class="form-window col-12 col-sm-10 col-md-8">
|
||||
<div class="form-wrapper">
|
||||
<img class="logo" src="{{current_school.logo_url}}">
|
||||
<div class="title">
|
||||
Let's order your Dasher Kit
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
All activated Dashers will receive a kit including a DoorDash Hoodie, a delivery Hotbag, and PPE hygiene essentials. Enter your postal details so we can get the right kit sent to you </div>
|
||||
<form class="form">
|
||||
<div class="form-row">
|
||||
<label class="form-label" for="vehicle">
|
||||
Your Vehicle Type
|
||||
</label>
|
||||
<div class="form-selection-wrapper">
|
||||
<select class="form-selection pre-required" id="vehicle" name="vehicle" autocomplete="off" req-sel>
|
||||
<option class="form-selection-default" disabled selected value="None">
|
||||
Please Select
|
||||
</option>
|
||||
<option class="form-selection-option" value="Car">
|
||||
Car
|
||||
</option>
|
||||
<option class="form-selection-option" value="Bike">
|
||||
Bike
|
||||
</option>
|
||||
<option class="form-selection-option" value="Scooter/Motorbike">
|
||||
Scooter/Motorbike
|
||||
</option>
|
||||
</select>
|
||||
<i class="fal fa-angle-down form-selection-arrow"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label class="form-label" for="hoodie">
|
||||
Size For Your Dasher Hoodie
|
||||
</label>
|
||||
<div class="form-selection-wrapper">
|
||||
<select class="form-selection pre-required" id="hoodie" name="hoodie" autocomplete="off" req-sel>
|
||||
<option class="form-selection-default" disabled selected value="None">
|
||||
Please Select
|
||||
</option>
|
||||
<option class="form-selection-option" value="S">
|
||||
S
|
||||
</option>
|
||||
<option class="form-selection-option" value="M">
|
||||
M
|
||||
</option>
|
||||
<option class="form-selection-option" value="L">
|
||||
L
|
||||
</option>
|
||||
<option class="form-selection-option" value="XL">
|
||||
XL
|
||||
</option>
|
||||
</select>
|
||||
<i class="fal fa-angle-down form-selection-arrow"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label class="form-label">
|
||||
Address To Send Your Dasher Kit To
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<input class="form-input pre-required" type="text" id="street_address" name="street_address" req autocomplete="off">
|
||||
<label class="form-label-small" for="street_address">
|
||||
Street Address
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<input class="form-input" type="text" id="street_address_2" name="street_address_2" autocomplete="off">
|
||||
<label class="form-label-small" for="street_address_2">
|
||||
Street Address 2
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-one-line">
|
||||
<div class="form-row short-width margin">
|
||||
<input class="form-input pre-required" type="text" id="suburb" name="suburb" req autocomplete="off">
|
||||
<label class="form-label-small" for="suburb">
|
||||
Suburb
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-row short-width">
|
||||
<input class="form-input pre-required" type="text" id="city" name="city" req autocomplete="off">
|
||||
<label class="form-label-small" for="city">
|
||||
City
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<input class="form-input pre-required" type="text" id="postal" name="postal" req autocomplete="off">
|
||||
<label class="form-label-small" for="postal">
|
||||
Postal Code
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
<button class="form-button disabled-button" disabled>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<style>
|
||||
|
||||
@font-face {
|
||||
font-family: TTNormsPro;
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/TT+Norms+Pro+Regular.otf);
|
||||
}
|
||||
@font-face {
|
||||
font-family: TTNormsPro;
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/TT+Norms+Pro+Bold.otf);
|
||||
font-weight: bold;
|
||||
}
|
||||
body {
|
||||
background: #f7f7f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: TTNormsPro, sans-serif;
|
||||
color: black;
|
||||
}
|
||||
.form-window {
|
||||
background: white;
|
||||
box-shadow: rgba(87, 100, 126, 0.21) 0px 4px 4px 0px;
|
||||
border-radius: 3px;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
.form-wrapper {
|
||||
width: 90%;
|
||||
margin: 40px auto;
|
||||
}
|
||||
.logo {
|
||||
width: 200px;
|
||||
}
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.subtitle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.form-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
.form-selection-wrapper {
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.form-selection {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.form-selection {
|
||||
color: rgb(87, 100, 126);
|
||||
background: rgb(247, 247, 247);
|
||||
font-weight: bold;
|
||||
padding: 8px 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.form-selection-default {
|
||||
display: none;
|
||||
}
|
||||
.form-selection-option {
|
||||
color: black;
|
||||
font-family: TTNormsPro, sans-serif !important;
|
||||
}
|
||||
.form-selection-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-150%, -50%);
|
||||
color: rgb(87, 100, 126);
|
||||
font-weight: 600;
|
||||
}
|
||||
.form-input {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 8px 8px;
|
||||
font-weight: bold;
|
||||
background: rgb(247, 247, 247);
|
||||
}
|
||||
.form-input:hover, .form-input:focus {
|
||||
border: #57647e 2px solid;
|
||||
}
|
||||
.form-label-small {
|
||||
color: #57647E;
|
||||
font-size: 12px;
|
||||
margin-top: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.form-one-line {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.form-button {
|
||||
width: 100%;
|
||||
background-color: rgb(235, 22, 0);
|
||||
color: white;
|
||||
padding: 8px 0;
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 19px;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.required {
|
||||
background: rgba(255, 127, 127, 0.6);
|
||||
}
|
||||
.disabled-button {
|
||||
background: lightgray;
|
||||
pointer-events: none;
|
||||
}
|
||||
.short-width {
|
||||
width: 48%;
|
||||
}
|
||||
.margin {
|
||||
margin-right: 4%;
|
||||
}
|
||||
@media only screen and (max-width: 400px) {
|
||||
.form-one-line {
|
||||
flex-direction: column;
|
||||
}
|
||||
.short-width {
|
||||
width: 100%;
|
||||
}
|
||||
.margin {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function debounce(callback, wait) {
|
||||
let timeout;
|
||||
return (...args) => {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(function () { callback.apply(this, args); }, wait);
|
||||
};
|
||||
}
|
||||
function sendForm(){
|
||||
if (!checkBeforeSending()) { return false }
|
||||
|
||||
localStorage.setItem("form_filled", "true");
|
||||
|
||||
$('.form-button').unbind("click");
|
||||
var form_data = JSON.stringify({
|
||||
school_id: '{{current_school.id}}',
|
||||
user_id: '{{ current_person.id }}',
|
||||
user_email: '{{ current_person.email }}',
|
||||
user_name: '{{ current_person.name }}',
|
||||
vehicle: $('#vehicle').val(),
|
||||
hoodie: $('#hoodie').val(),
|
||||
street_address: $('#street_address').val(),
|
||||
street_address_2: $('#street_address_2').val(),
|
||||
suburb: $('#suburb').val(),
|
||||
city: $('#city').val(),
|
||||
postal: $('#postal').val()
|
||||
})
|
||||
var xhr = new XMLHttpRequest();
|
||||
var url = "https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/order_kit";
|
||||
xhr.addEventListener("load", e => {
|
||||
window.location.replace('/app/courses#ommit-infos');
|
||||
});
|
||||
xhr.open("POST", url, true);
|
||||
xhr.send(form_data);
|
||||
}
|
||||
|
||||
function checkBeforeSending() {
|
||||
$('[req]').each(function(){
|
||||
if ($(this).val().length == 0) {
|
||||
$(this).addClass('required');
|
||||
}
|
||||
|
||||
})
|
||||
$('[req-sel]').each(function(){
|
||||
if ($(this).val() == "None") {
|
||||
$(this).addClass('required');
|
||||
}
|
||||
})
|
||||
return checkIfReady()
|
||||
}
|
||||
|
||||
function checkIfReady() {
|
||||
if ($('[class*="required"]').length > 0) {
|
||||
$('#missing-info-alert').show();
|
||||
$('.form-button').prop('disabled', true);
|
||||
$('.form-button').addClass('disabled-button');
|
||||
$('.form-button').unbind("click")
|
||||
return false
|
||||
}
|
||||
else {
|
||||
$('#missing-info-alert').hide();
|
||||
$('.form-button').prop('disabled', false);
|
||||
$('.form-button').removeClass('disabled-button');
|
||||
$('.form-button').click(sendForm)
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
function checkInput(element) {
|
||||
if (element.value.length == 0) {
|
||||
element.classList.add('required');
|
||||
}
|
||||
else {
|
||||
element.classList.remove('required');
|
||||
element.classList.remove('pre-required');
|
||||
}
|
||||
checkIfReady();
|
||||
}
|
||||
|
||||
function checkSelect() {
|
||||
if (this.value == "None") {
|
||||
this.classList.add('required');
|
||||
}
|
||||
else {
|
||||
this.classList.remove('required');
|
||||
this.classList.remove('pre-required');
|
||||
}
|
||||
checkIfReady();
|
||||
}
|
||||
|
||||
function addSelectListener(element) {
|
||||
element.addEventListener('change', checkSelect);
|
||||
}
|
||||
|
||||
function addInputListener(element) {
|
||||
element.addEventListener('keyup', debounce( () => {
|
||||
checkInput(element);
|
||||
}, 500));
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
document.querySelectorAll('select[req-sel]').forEach(addSelectListener);
|
||||
document.querySelectorAll('input[req]').forEach(addInputListener);
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,64 @@
|
||||
/*
|
||||
Put your custom overlay styles in here
|
||||
You can use your northpass color palette in this file
|
||||
|
||||
{{ color_palette.button_font_color }}
|
||||
{{ color_palette.button_color }}
|
||||
{{ color_palette.button_hover_color }}
|
||||
{{ color_palette.header_font_color }}
|
||||
{{ color_palette.header_font_hover_color }}
|
||||
{{ color_palette.header_color }}
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: "Proxima Nova";
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/ProximaNova-Light.eot");
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/ProximaNova-Light.eot") format("embedded-opentype"), url("https://s3.amazonaws.com/static.northpass.com/fonts/ProximaNova-Light.woff") format("woff"),
|
||||
url("https://s3.amazonaws.com/static.northpass.com/fonts/ProximaNova-Light.ttf") format("truetype");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Proxima Nova";
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/ProximaNova-Reg.otf");
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/proximanova-regular-webfont.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Proxima Nova";
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/ProximaNova-Bold.eot");
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/ProximaNova-Bold.woff") format("woff"), url("https://s3.amazonaws.com/static.northpass.com/fonts/ProximaNova-Bold.ttf") format("truetype");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "TT Norms Pro";
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/TT+Norms+Pro+Bold.otf);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "TT Norms Pro-Regular";
|
||||
src: url("//db.onlinewebfonts.com/t/07bc241768c969f6b6a27a7bf0dfb490.eot");
|
||||
src: url("//db.onlinewebfonts.com/t/07bc241768c969f6b6a27a7bf0dfb490.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/07bc241768c969f6b6a27a7bf0dfb490.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/07bc241768c969f6b6a27a7bf0dfb490.woff") format("woff"), url("//db.onlinewebfonts.com/t/07bc241768c969f6b6a27a7bf0dfb490.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/07bc241768c969f6b6a27a7bf0dfb490.svg#TT Norms Regular") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: "Proxima Nova", "Roboto", sans-serif !important;
|
||||
}
|
||||
|
||||
.np-resource-subtitle,
|
||||
.np-card-content-title {
|
||||
color:#000;
|
||||
}
|
||||
|
||||
.np-form-action.np-button-big{
|
||||
border-radius: 30px;
|
||||
}
|
||||
Reference in New Issue
Block a user