SPS' V3 templates. Updated Harri's templates too to update the workato endpoints.
This commit is contained in:
Norm Rasmussen
BIN
Custom_Templates/customer_templates/.DS_Store
vendored
BIN
Custom_Templates/customer_templates/.DS_Store
vendored
Binary file not shown.
@ -1,51 +0,0 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
{% comment %} {% unless current_person.email contains "preview" %}
|
||||
|
||||
{% assign group_count = 0 %}
|
||||
{% assign is_in_all_group = false %}
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
{% assign groups = current_person.groups %}
|
||||
{% for item in groups %}
|
||||
{% assign group_count = group_count | plus: 1 %}
|
||||
{% if group_count <= 1 and item.id contains 'd8b83557-aad1-4a4e-85ee-ddbde5d1e507' %}
|
||||
{% assign is_in_all_group = true %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log("{{group_count}}")
|
||||
setTimeout(function() {
|
||||
if (window.location.pathname !== '/app/second-login') {
|
||||
window.location.replace('/app/second-login');
|
||||
}
|
||||
}, 1000);
|
||||
} </script>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
{% for item in current_person.groups %}
|
||||
{% endfor %}
|
||||
{% if current_person.groups.any? %}
|
||||
{% else %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
setTimeout(function() {
|
||||
if (window.location.pathname !== '/app/second-login') {
|
||||
window.location.replace('/app/second-login');
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% endunless %} {% endcomment %}
|
||||
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.5.1.min.js"
|
||||
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
|
||||
crossorigin="anonymous"></script>
|
||||
@ -1,29 +0,0 @@
|
||||
{% if current_person.properties.company == "McDonalds" %}
|
||||
<style>
|
||||
.np-header-color {
|
||||
background: #DE352A;
|
||||
}
|
||||
*[class^="np-button"]:not(i),
|
||||
.np-sub-navigation-content-item-bar {
|
||||
background-color: #DE352A;
|
||||
}
|
||||
.np-button-color {
|
||||
color: #DE352A;
|
||||
}
|
||||
.np-button:hover {
|
||||
background-color: #F9BB30;
|
||||
}
|
||||
.np-button, .np-button-background-color {
|
||||
background-color: #DE352A;
|
||||
}
|
||||
.dropbtn
|
||||
{
|
||||
background-color: #F9BB30;
|
||||
color: #DE352A;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.getElementsByClassName("np-footer-logo-image")[0].src = "https://s3.amazonaws.com/static.northpass.com/Harri/lockup-mcdonalds.png"
|
||||
document.getElementsByClassName("np-header-logo-image")[0].src = "https://s3.amazonaws.com/static.northpass.com/Harri/lockup-mcdonalds.png"
|
||||
</script>
|
||||
{% endif %}
|
||||
@ -1,13 +0,0 @@
|
||||
<nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
<p class="{{ link.label }} sub-navigation-label" style="margin-top:0px;"> {{ link.label }} </p>
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
@ -1,23 +0,0 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
<div class="np-catalog-header-wrapper">
|
||||
<div class="np-catalog-header">
|
||||
<div class="np-resource-title">{{ catalog.headline }}</div>
|
||||
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
|
||||
</div>
|
||||
{% capture label %}{% t shared.filters.by_category %}{% endcapture %}
|
||||
|
||||
{% if courses.in_catalog.any? %}
|
||||
{%
|
||||
include "filter_dropdown",
|
||||
filters: courses.filters,
|
||||
key: "category_uuid",
|
||||
label: label
|
||||
%}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% include "courses_catalog" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -1,31 +0,0 @@
|
||||
{% include "header" %}
|
||||
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="np-dashboard-resources-title lp">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
{% endif %}
|
||||
<div class="np-dashboard-resources-title modules">
|
||||
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
|
||||
</div>
|
||||
{% if features.training_events? %}
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-4">
|
||||
<div class="np-dashboard-resources-title events">
|
||||
{% t .upcoming_events %}
|
||||
</div>
|
||||
{% include "training_events_dashboard" %}
|
||||
<div class="points-container">
|
||||
Total Points: <br> <span class="total-points">{{current_person.properties.points}}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -1,52 +0,0 @@
|
||||
{% 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 %}">
|
||||
{% t .discover %}
|
||||
</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-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_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>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -1,5 +0,0 @@
|
||||
{% body %}
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
{% include "mcdonalds_theme" %}
|
||||
{% endif %}
|
||||
@ -1,341 +0,0 @@
|
||||
{% assign group_count = 0 %}
|
||||
{% assign groups = current_person.groups %}
|
||||
|
||||
{% for item in groups %}
|
||||
{% assign group_count = group_count | plus: 1 %}
|
||||
{% if group_count >= 2 and item.id contains 'd8b83557-aad1-4a4e-85ee-ddbde5d1e507'%}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
setTimeout(function() {
|
||||
if (window.location.pathname == '/app/second-login') {
|
||||
window.location.replace('/app');
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% include "header" %}
|
||||
<main class="np-main np-box-container">
|
||||
<div class="np-box">
|
||||
<div class="np-box-content-container">
|
||||
<form id="register-form" class="np-form np-box-content" novalidate>
|
||||
<div class="np-form-title text-center"> Welcome! </div>
|
||||
<div class="np-form-subtitle"> Please choose the option that best matches your current role to enroll in the
|
||||
appropriate learning path. </div>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_role">
|
||||
</label>
|
||||
<select
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="learner[role]"
|
||||
id="learner_role"
|
||||
required
|
||||
|
||||
>
|
||||
<option class="default-option" disabled selected id="default-option">Your role</option>
|
||||
<option value="General Manager">General Manager</option>
|
||||
<option value="Kitchen Manager">Kitchen Manager</option>
|
||||
<option value="People Manager">People Manager</option>
|
||||
<option value="Guest Services Manager">Guest Services Manager</option>
|
||||
<option value="Swing/Shift Manager">Swing/Shift Manager</option>
|
||||
<option value="Manager Trainees">Manager Trainees</option>
|
||||
<option value="Supervisor">Supervisor</option>
|
||||
<option value="Supervisor/Role Assigment">Supervisor w/Role Assignment</option>
|
||||
<option value="Org Admin">Org Admin/Back Office Admin</option>
|
||||
<option value="Owner Operator">Owner/Operator</option>
|
||||
<option value="Crew Trainer">Crew Trainer</option>
|
||||
<option value="Corporate/Field Staff">McDonalds Corporate/Field Staff</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div class="np-form-subtitle">Please provide your store number</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="store_number">
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="store[number]"
|
||||
id="store_number"
|
||||
placeholder="Store Number(NSN)"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
<button id="send_button" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
Update Information
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
@media (min-width: 1440px) {
|
||||
#password-too-short-alert {
|
||||
position: absolute;
|
||||
right: 25.5%;
|
||||
bottom: 23%;
|
||||
color: salmon;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#passwords-dont-match-alert {
|
||||
position: absolute;
|
||||
right: 23%;
|
||||
bottom: 14.5%;
|
||||
color: salmon;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
#password-too-short-alert {
|
||||
position: absolute;
|
||||
right: 24%;
|
||||
bottom: 23%;
|
||||
color: salmon;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#passwords-dont-match-alert {
|
||||
position: absolute;
|
||||
right: 21.5%;
|
||||
bottom: 14.5%;
|
||||
color: salmon;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 426px) and (max-width: 768px) {
|
||||
.np-box-content-container {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 376px) and (max-width: 425px) {
|
||||
.np-input {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 326px) and (max-width: 375px) {
|
||||
.np-input {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 325px) {
|
||||
.np-input {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.np-main {
|
||||
margin: 25px 0;
|
||||
}
|
||||
.np-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: unset !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
.np-box-container {
|
||||
height: unset !important;
|
||||
background: none;
|
||||
}
|
||||
.hero-image-left-desktop {
|
||||
width: 60%;
|
||||
}
|
||||
.hero-image-left-mobile {
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
.np-box-content-container {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.np-form-subtitle {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.np-input {
|
||||
background-color: #FFF6F0;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.np-input::placeholder {
|
||||
color: #6F7277;
|
||||
font-size: 16px;
|
||||
}
|
||||
#default-option {
|
||||
color: #6F7277;
|
||||
font-size: 16px;
|
||||
}
|
||||
.selection-option {
|
||||
font-family: Inter;
|
||||
}
|
||||
.body {
|
||||
height: 100%;
|
||||
}
|
||||
#learner_role {
|
||||
color: #1B1C1D;
|
||||
text-align: left;
|
||||
}
|
||||
@media only screen and (min-width: 1190px) {
|
||||
.hero-image-left-desktop {
|
||||
min-width: 60%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.np-box-content-container {
|
||||
padding: 2rem 2rem 2.25rem;
|
||||
}
|
||||
.hero-image-left-desktop {
|
||||
display: none;
|
||||
}
|
||||
.hero-image-left-mobile {
|
||||
display: block;
|
||||
}
|
||||
.np-box {
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
}
|
||||
.np-main {
|
||||
margin: 0;
|
||||
}
|
||||
.np-box-content-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
#send_button {
|
||||
pointer-events: none;
|
||||
background: #6F7277;
|
||||
}
|
||||
|
||||
.loader {
|
||||
border: 16px solid #f3f3f3;
|
||||
border-radius: 50%;
|
||||
border-top: 16px solid #00bf8f;
|
||||
border-bottom: 16px solid #00bf8f;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
animation: spin 2s linear infinite;
|
||||
|
||||
|
||||
position: absolute;
|
||||
top:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<style>
|
||||
.np-box-container {
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function checkIfInputsExist (){
|
||||
window.setTimeout(function(){
|
||||
if ($("#store_number")[0].value.length > 0 && $("#learner_role")[0].value != "Your Role") {
|
||||
$("#send_button").css("background-color","#de352a");
|
||||
$("#send_button").css("pointer-events","auto");
|
||||
}
|
||||
else {
|
||||
$("#send_button").css("background-color","#6F7277");
|
||||
$("#send_button").css("pointer-events","none");
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
document.addEventListener('keydown', checkIfInputsExist);
|
||||
document.getElementById("learner_role").addEventListener('change', checkIfInputsExist);
|
||||
|
||||
document.getElementById("send_button").addEventListener("click", function() {
|
||||
var selectedRole = document.getElementById("learner_role").value;
|
||||
var groupUuid ="";
|
||||
|
||||
switch (selectedRole) {
|
||||
case "General Manager":
|
||||
groupUuid = "0f977347-6e60-4de1-bad3-f6b413ab7eef";
|
||||
break;
|
||||
case "Kitchen Manager":
|
||||
groupUuid = "df0b4cea-fac6-4991-8902-b2202b9c71c5";
|
||||
break;
|
||||
case "People Manager":
|
||||
groupUuid = "ed4ae611-ed12-41c1-b1ff-03d339813f70";
|
||||
break;
|
||||
case "Guest Services Manager":
|
||||
groupUuid = "df0b4cea-fac6-4991-8902-b2202b9c71c5";
|
||||
break;
|
||||
case "Swing/Shift Manager":
|
||||
groupUuid = "9b5674c8-e5f1-47ad-a380-cc9fb1a73c02";
|
||||
break;
|
||||
case "Manager Trainees":
|
||||
groupUuid = "1bed05ca-c5e6-4874-8e14-e2815ccdba7f";
|
||||
break;
|
||||
case "Supervisor":
|
||||
groupUuid = "1e63de54-0676-427a-a3f8-da2625f47ce5";
|
||||
break;
|
||||
case "Supervisor/Role Assigment":
|
||||
groupUuid = "1e63de54-0676-427a-a3f8-da2625f47ce5";
|
||||
break;
|
||||
case "Org Admin":
|
||||
groupUuid = "007d0b66-092d-4fda-a706-6b34cf1dddf4";
|
||||
break;
|
||||
case "Owner Operator":
|
||||
groupUuid = "bbd256f2-48e2-407d-85b6-d016010c9649";
|
||||
break;
|
||||
case "Crew Trainer":
|
||||
groupUuid = "afc4049d-7363-4301-a729-527cfbe5ef61";
|
||||
break;
|
||||
case "Corporate/Field Staff":
|
||||
groupUuid = "bbd256f2-48e2-407d-85b6-d016010c9649";
|
||||
break;
|
||||
};
|
||||
|
||||
console.log("Selected Role: " + selectedRole);
|
||||
console.log("Group UUID: " + groupUuid);
|
||||
|
||||
SendInfos(selectedRole, groupUuid);
|
||||
});
|
||||
|
||||
function SendInfos(role, groupUuid) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
url = "https://webhooks.workato.com/webhooks/rest/aa37cb7d-653d-43fe-a7b0-e4f9c2d6bd1e/harrimc-collect-learner-information"
|
||||
xhr.addEventListener("load", e => {
|
||||
window.sessionStorage.propertiesAdded = 'true';
|
||||
window.location.replace('/app');
|
||||
});
|
||||
xhr.open("POST", url, true);
|
||||
xhr.send(JSON.stringify({
|
||||
user_id: '{{ current_person.id }}',
|
||||
mc_d_role: role,
|
||||
store_number_nsn: $("#store_number")[0].value,
|
||||
group_uuid: groupUuid
|
||||
}));
|
||||
};
|
||||
|
||||
</script>
|
||||
@ -1,59 +0,0 @@
|
||||
/*
|
||||
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 }}
|
||||
*/
|
||||
|
||||
.red-bar{
|
||||
background: red;
|
||||
}
|
||||
|
||||
.red-text,
|
||||
.red-status{
|
||||
color: red;
|
||||
}
|
||||
|
||||
.yellow-bar{
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.yellow-text,
|
||||
.yellow-status{
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.green-bar{
|
||||
background: green;
|
||||
}
|
||||
|
||||
.green-text,
|
||||
.green-status{
|
||||
color: green;
|
||||
}
|
||||
|
||||
.course-duration-lp {
|
||||
color: #de352a;
|
||||
font-size: .75rem;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.points-container {
|
||||
border: 2px solid #bac4ca;
|
||||
border-radius: 4px;
|
||||
padding: 60px 32px;
|
||||
text-align: center;
|
||||
}
|
||||
.total-points {
|
||||
font-size: 2rem;
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
{% 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 events">
|
||||
{% t .title %}
|
||||
</div>
|
||||
<div class="np-resource-subtitle events">
|
||||
{% 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" %}
|
||||
@ -0,0 +1,23 @@
|
||||
{% capture settings_path %}{% route account %}{% endcapture %}
|
||||
{% capture transcript_path %}{% route transcript %}{% endcapture %}
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
{% unless current_school.sso_active? %}
|
||||
<nav class="np-tabs np-account-tabs">
|
||||
<div class="np-tabs-content">
|
||||
<div class="np-tab{% if page.path == settings_path %} np-tab-active{% endif %}">
|
||||
<a class="np-tab-link" href="{{ settings_path}}">
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
<div class="np-tab-indicator np-button-background-color"></div>
|
||||
</div>
|
||||
<div class="np-tab{% if page.path == transcript_path %} np-tab-active{% endif %}">
|
||||
<a class="np-tab-link" href="{{ transcript_path }}">
|
||||
{% t .transcript %}
|
||||
</a>
|
||||
<div class="np-tab-indicator np-button-background-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,42 @@
|
||||
|
||||
<div id="banner" class="banner np-hidden-mobile">
|
||||
<span class="banner-message">Please note that the academy will undergo an update <strong>Thursday, August 1st from 2:00 PM to 4:00PM Eastern Time</strong>. You will still be able to access the academy during this time.</span>
|
||||
<button class="close-btn" onclick="closeBanner()">X</button>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.banner {
|
||||
background-color: #f2d7d9;
|
||||
color: #333;
|
||||
padding: 30px 20px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.banner-message {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #ff0000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function closeBanner() {
|
||||
document.getElementById('banner').style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
@ -18,27 +18,15 @@
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="course-details">
|
||||
{% if course.started? %}
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{{ course.progress }}% Complete
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-content-progress np-button-color notstarted">
|
||||
Not started
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if course.started? %}
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% if course.properties.course_time > 0 %}
|
||||
{{course.properties.course_time}} Min
|
||||
{% endif %}
|
||||
{{ course.progress }}% <span class="course-completion">Complete</span>
|
||||
</div>
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% unless course.properties.course_points == 0 or course.properties.course_points =='missing property: course_points'%}
|
||||
Points: {{course.properties.course_points}}
|
||||
{% endunless %}
|
||||
{% else %}
|
||||
<div class="np-card-content-progress np-button-color notstarted">
|
||||
Not started
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
@ -0,0 +1,43 @@
|
||||
<div class="np-card np-card-horizontal">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-card-image-wrapper">
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-short-description">
|
||||
{{ course.short_description}}
|
||||
</div>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
{% comment %} <div class="np-card-content-progress np-button-color">
|
||||
{{ course.progress }}
|
||||
</div> {% endcomment %}
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
{% if course.properties.course_time != "none" %}
|
||||
<div class="course-time">{{course.properties.course_time}} min</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,47 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a class="np-card card-vertical np-card-new-styles" href="{{course_path}}">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-short-description">
|
||||
{{ course.short_description }}
|
||||
</div>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
{% if course.started? %}
|
||||
<div class="np-card-content-progress">
|
||||
<span style="margin-bottom:-30px">{{ course.progress }}%</span> <span class="course-completion">Complete</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-content-progress notstarted">
|
||||
Not started
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
{% if course.properties.course_time != "none" %}
|
||||
<div class="course-time">{{course.properties.course_time}} min</div>
|
||||
{% endif %}
|
||||
{% comment %} <a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a> {% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@ -0,0 +1,27 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a class="np-card card-vertical np-card-new-styles video-card" href="{{course_path}}">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="img-wrapper">
|
||||
<img class="np-card-image" alt="{{ course.name }}" src="{{ course.image_url }}">
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-short-description">
|
||||
{{ course.short_description }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
{% if course.properties.course_length != "none" %}
|
||||
<div class="course-length">{{course.properties.course_length}}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@ -29,10 +29,6 @@
|
||||
{% else %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% endif %}
|
||||
{% comment %}
|
||||
{% for group in current_person.groups %}
|
||||
{{group.id}}
|
||||
{% endfor %} {% endcomment %}
|
||||
|
||||
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
@ -70,11 +66,11 @@
|
||||
</div>
|
||||
|
||||
{% if lp_progress > 0 %}
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
<p style="margin-bottom:-25px">{{ lp_progress }}%</p> <p class="course-completion" style="margin-left:25px"><span>Complete</span></p>
|
||||
<div class="np-card-content-progress np-button-color np-hidden-mobile">
|
||||
{{ lp_progress }}% <span class="course-completion">Complete</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
<div class="np-card-content-progress np-button-color notstarted np-hidden-mobile">
|
||||
Not started
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -88,19 +84,16 @@
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-hidden-desktop np-card-content-progress
|
||||
np-button-color">
|
||||
np-button-color notstarted">
|
||||
{% t shared.progress, count: lp_progress %}
|
||||
</div>
|
||||
<a class="np-button lp" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
<div class="points np-learning-path-items-count">
|
||||
{% comment %} Points: 2500 {% endcomment %}
|
||||
</div>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
<i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i>
|
||||
<span class="np-learning-path-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
{{ learning_path.items.count }} <div class="learning-path-items-definition" style="display: inline-flex;">{% t .items %}</div>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@ -0,0 +1,112 @@
|
||||
{%comment%}{% if learning_path.progress == 0%}
|
||||
{% assign wrapperClassBar = "np-button-background-color np-card-progress-bar red-bar"%}
|
||||
{% assign wrapperClassText = "np-card-content-progress np-button-color red-text"%}
|
||||
{% assign wrapperClassStatus = "np-card-content-progress np-button-color red-text"%}
|
||||
{% else if learning_path.progress > 0 and learning_path.progress < 100%}
|
||||
{% assign wrapperClassBar = "np-button-background-color np-card-progress-bar yellow-bar"%}
|
||||
{% assign wrapperClassText = "np-card-content-progress np-button-color yellow-text"%}
|
||||
{% assign wrapperClassStatus = "np-card-content-progress np-button-color yellow-text"%}
|
||||
{% else %}
|
||||
{% assign wrapperClassBar = "np-button-background-color np-card-progress-bar green-bar"%}
|
||||
{% assign wrapperClassText = "np-card-content-progress np-button-color green-text"%}
|
||||
{% assign wrapperClassStatus = "np-card-content-progress np-button-color green-text"%}
|
||||
{% endif %}{%endcomment%}
|
||||
|
||||
{% comment %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% if learning_path.enrolled? %}
|
||||
{% assign lp_courses_count = 0 | times: 1 %}
|
||||
{% assign sum_of_progress = 0.0 | times: 1 %}
|
||||
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% assign lp_courses_count = lp_courses_count | plus: 1 %}
|
||||
{% assign sum_of_progress = sum_of_progress | plus: item.progress %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if lp_courses_count == 0 %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% else %}
|
||||
{% assign lp_progress = sum_of_progress | divided_by: lp_courses_count | round %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% endif %} {% endcomment %}
|
||||
|
||||
<div class="np-card np-no-horizontal-padding learning-path-new-styles">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="np-hidden-desktop np-card-header">
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<div class="np-hidden-desktop np-card-header-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-card-header">
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-description">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
|
||||
{% comment %} {% if lp_progress > 0 %}
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
<p style="margin-bottom:-25px">{{ lp_progress }}%</p>
|
||||
<p class="course-completion" style="margin-left:25px"><span>Complete</span></p>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
Not started
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
|
||||
{% comment %} <div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{lp_progress}}%;"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div> {% endcomment %}
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
{% comment %} <div class="np-hidden-desktop np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: lp_progress %}
|
||||
</div> {% endcomment %}
|
||||
<a class="np-button lp" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
{% comment %} <i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i> {% endcomment %}
|
||||
<span class="np-learning-path-items-count">
|
||||
{{ learning_path.items.count }} Items
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-stack">
|
||||
<div class="np-card-stack-level-1"></div>
|
||||
<div class="np-card-stack-level-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,33 @@
|
||||
<a class="np-card card-vertical np-card-new-styles" href="{% route learning_path, id: learning_path.id %}">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
src="{{ learning_path.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
{% if learning_path.started? %}
|
||||
<div class="np-card-content-progress">
|
||||
<span style="margin-bottom:-30px">{{ learning_path.progress }}%</span> <span class="course-completion">Complete</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-content-progress notstarted">
|
||||
Not started
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="course-length"> {{ learning_path.items.count }} Courses</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>
|
||||
</a>
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content-training-event">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ training_event.title }}
|
||||
{{ training_event.title | remove: "[FEATURED]" }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{% t shared.event_types, key: training_event.event_type %}
|
||||
@ -0,0 +1,41 @@
|
||||
{% assign session_id = training_event.sessions.first.id %}
|
||||
{% assign session_month = training_event.sessions.first.abbreviated_month %}
|
||||
{% assign session_day = training_event.sessions.first.day %}
|
||||
{% for session in training_event.sessions %}
|
||||
{% if session.registered? %}
|
||||
{% assign session_id = session.id %}
|
||||
{% assign session_month = session.abbreviated_month %}
|
||||
{% assign session_day = session.day %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="np-card card-training-event-horizontal">
|
||||
<div class="np-card-container">
|
||||
<div class="upcoming-date">
|
||||
{% comment %} <i class="fal fa-calendar"></i> {% endcomment %}
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ session_month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-day">
|
||||
{{ session_day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ training_event.title | remove: "[FEATURED]" }}
|
||||
</h3>
|
||||
<div class="np-card-content-time">
|
||||
{{ training_event.sessions.first.starts }} {{ training_event.sessions.first.time_zone }}
|
||||
</div>
|
||||
<div class="flex-content card-footer">
|
||||
<a
|
||||
class="np-button np-button-wide"
|
||||
href="{% route training_session, id: session_id %}"
|
||||
>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
{{ training_event.sessions.size }} Session{% if training_event.sessions.size > 1 %}s{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,182 @@
|
||||
{% assign role_filters = "GENERAL MANAGER, INVENTORY/GUEST SERVICES MANAGER, SCHEDULING MANAGER, SHIFT MANAGER, MANAGER TRAINEE, SUPERVISOR, ORG ADMIN/BACK OFFICE ADMIN, OWNER OPERATOR, CREW TRAINER" %}
|
||||
{% assign topic_filters = "WORKFORCE MANAGEMENT, MANAGING THE SCHEDULE, AUTO-GENERATED SCHEDULES, SCHEDULING BASICS, FAIR WORKWEEK SCHEDULING, PUBLISHING SCHEDULES, TIMECLOCKS & TIMEKEEPING, TEAM REQUESTS, LOCATING EMPLOYEES, EMPLOYEE RECORDS, PERFORMANCE REVIEWS, PROJECTING, PAYROLL & REPORTING" %}
|
||||
|
||||
<div class="catalog-filters">
|
||||
<div class="filter-wrapper">
|
||||
<i class="fa fa-chevron-left close-tray np-hidden-desktop"></i>
|
||||
<div id="clearAll">Clear All</div>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<div class="filter-group-name">Role</div>
|
||||
{% for category in categories.in_catalog %}
|
||||
{% assign category_name_upcase = category.name | upcase %}
|
||||
{% if role_filters contains category_name_upcase %}
|
||||
<label class="checkbox-container">{{category.name}}
|
||||
<input type="checkbox" name="{{category_name_upcase}}">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<div class="filter-group-name">Topic</div>
|
||||
{% for category in categories.in_catalog %}
|
||||
{% assign category_name_upcase = category.name | upcase %}
|
||||
{% if topic_filters contains category_name_upcase %}
|
||||
<label class="checkbox-container">{{category.name}}
|
||||
<input type="checkbox" name="{{category_name_upcase}}">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
|
||||
<div class="filter-group">
|
||||
<div class="filter-group-name">Content Type</div>
|
||||
<label class="checkbox-container">Learning Gems
|
||||
<input type="checkbox" name="LEARNING GEMS">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label class="checkbox-container">New Content
|
||||
<input type="checkbox" name="NEW">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label class="checkbox-container">Updated Content
|
||||
<input type="checkbox" name="UPDATED">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label class="checkbox-container">Completed Content
|
||||
<input type="checkbox" name="COMPLETED">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label class="checkbox-container">Learning Paths
|
||||
<input type="checkbox" name="LEARNING-PATH">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.catalog-filters {
|
||||
box-shadow: 0 10px 25px 0 rgb(14 27 46 / 18%);
|
||||
padding: 24px;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 300;
|
||||
background: #fff;
|
||||
border-top-left-radius: 30px;
|
||||
border-top-right-radius: 30px;
|
||||
transform: translateX(-1000px);
|
||||
transition: all 0.3s;
|
||||
height: 60vh;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.catalog-filters.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.close-tray {
|
||||
color:#0088dd;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.filter-wrapper {
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
#clearAll {
|
||||
color:#0088DD;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-group .filter-group-name {
|
||||
margin: 22px 0 16px;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.checkbox-container input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.checkbox-container .checkmark {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
border: 3px solid #00E79A;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-container input:checked ~ .checkmark {
|
||||
background-color: #00E79A;
|
||||
}
|
||||
|
||||
.checkbox-container .checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox-container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.checkbox-container .checkmark:after {
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.catalog-filters {
|
||||
margin-right:32px;
|
||||
padding: 20px;
|
||||
position: static;
|
||||
width: auto;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
transform: translateX(0);
|
||||
height: auto;
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.filter-wrapper {
|
||||
justify-content:flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,46 @@
|
||||
<div class="contact-us-block">
|
||||
<div class="contact-us-block-content">
|
||||
<div class="contact-us-block-title">Need More Help?</div>
|
||||
<div class="contact-us-block-subtitle">Contact ATOS at:
|
||||
1-800-515-3636</div>
|
||||
{% comment %}<a class="np-button contact-us-block-cta" href="tel:18005153636" target="_blank">Contact Us</a> {% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.contact-us-block {
|
||||
background-color:#f8fbff;
|
||||
padding:64px 24px;
|
||||
}
|
||||
|
||||
.contact-us-block-content {
|
||||
box-shadow: 0 10px 25px 0 rgb(14 27 46 / 18%);
|
||||
padding:32px 16px;
|
||||
max-width: 700px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.contact-us-block-title {
|
||||
font-weight:900;
|
||||
font-size: 18px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.contact-us-block-cta {
|
||||
margin-top:24px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.contact-us-block {
|
||||
padding:80px 24px;
|
||||
|
||||
}
|
||||
|
||||
.contact-us-block-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,41 +1,16 @@
|
||||
{% assign outline_class = "" %}
|
||||
{% if course.name == "Getting Started with Workforce Management" or course.name == "Getting Started with Talent Acquisition" %}
|
||||
{% assign outline_class = "np-hidden" %}
|
||||
{% endif %}
|
||||
|
||||
<script src="https://kit.fontawesome.com/41a3aee3ad.js" crossorigin="anonymous"></script>
|
||||
<div class="np-course-outline">
|
||||
<div class="np-course-outline {{outline_class}}">
|
||||
<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 %}
|
||||
{% comment %}<li class="np-course-outline-content-section-list">
|
||||
<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<ol class="np-course-outline-content-activity">
|
||||
{% for activity in section.activities %}
|
||||
|
||||
<li class="np-course-outline-content-activity-list" >
|
||||
{% if activity.completed? %}
|
||||
<i class="fas fa-circle np-course-outline-content-activity-icon np-button-color" style="color: green; font-weight: 900"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}
|
||||
{% endif %}
|
||||
<div class="np-course-outline-content-activity-list-bar" style="background: green"></div>
|
||||
<div class="np-button-background-color np-course-outline-content-activity-list-bar" style="color: green"></div>
|
||||
{% else %}
|
||||
<i class="far fa-circle np-course-outline-content-activity-icon" style="color: red; font-weight: 900"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
|
||||
{% endif %}
|
||||
<div class="np-course-outline-content-activity-list-bar" style="background: red"></div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>{% endcomment %}
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
@ -0,0 +1,55 @@
|
||||
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% if courses.in_catalog.any? %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% assign course_categories = "" %}
|
||||
{% for cat in course.categories %}
|
||||
{% assign course_categories = course_categories | append: " " | append: cat.name %}
|
||||
{% endfor %}
|
||||
{% assign progress = "NOT-STARTED" %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign progress = "IN-PROGRESS" %}
|
||||
{% elsif course.progress == 100 %}
|
||||
{% assign progress = "COMPLETED" %}
|
||||
{% endif %}
|
||||
|
||||
{% assign ribbon = "" %}
|
||||
{% assign course_ribbon = course.ribbon | upcase %}
|
||||
|
||||
{% if course_ribbon contains "UPDATED" %}
|
||||
{% assign ribbon = "UPDATED" %}
|
||||
{% elsif course_ribbon contains "NEW" %}
|
||||
{% assign ribbon = "NEW" %}
|
||||
{% endif %}
|
||||
|
||||
<div
|
||||
class="col-xs-12 col-md-6 col-lg-4 np-stretch-content catalog-item"
|
||||
data-filters="{{course_categories | upcase | strip}} {{progress}} {{ribbon}}"
|
||||
>
|
||||
{% include "cards_course_new_styles" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% assign lp_categories = "" %}
|
||||
{% for cat in learning_path.categories %}
|
||||
{% assign lp_categories = lp_categories | append: " " | append: cat.name %}
|
||||
{% endfor %}
|
||||
{% assign lp_progress = "NOT-STARTED" %}
|
||||
{% if learning_path.progress > 0 and learning_path.progress < 100 %}
|
||||
{% assign lp_progress = "IN-PROGRESS" %}
|
||||
{% elsif learning_path.progress == 100 %}
|
||||
{% assign lp_progress = "COMPLETED" %}
|
||||
{% endif %}
|
||||
<div
|
||||
class="col-xs-12 col-md-6 col-lg-4 np-stretch-content catalog-item"
|
||||
data-filters="LEARNING-PATH {{lp_categories | upcase | strip}}"
|
||||
>
|
||||
{% include "cards_learning_path_vertical" with learning_path %}
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
@ -0,0 +1,111 @@
|
||||
<div class="courses-wrapper filterable-section active" data-type='courses'>
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="row courses-in-progress show">
|
||||
<div class="col-xs-12">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-7 small-heading" id="courses-in-progress-header">In Progress</div>
|
||||
<div class="col-xs-5 col-lg-3 col-lg-offset-2 np-hidden-mobile small-heading progress-heading" id="courses-in-progress-header-2">My Progress</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12">
|
||||
{% assign num_of_in_progress_courses = 0 %}
|
||||
{% for course in enrolled_courses %}
|
||||
{% if course.progress < 100 %}
|
||||
<div class="row dashboard-courses-row" data-status="in-progress" style="display:none">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#02AB73",
|
||||
stroke_color_bg: "rgba(255, 255, 255)"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign num_of_in_progress_courses = num_of_in_progress_courses | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if num_of_in_progress_courses > 6 %}
|
||||
<div id="showMoreInProgressCourses" class="show-more-button">View All Courses</div>
|
||||
{% endif %}
|
||||
|
||||
{% if num_of_in_progress_courses == 0 %}
|
||||
<div class="col-xs-12 dashboard-zero-state">
|
||||
{% capture message %}
|
||||
You don't have any courses currently in progress
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% comment %} COMPLETED COURSES {% endcomment %}
|
||||
<div class="row courses-completed">
|
||||
<div class="col-xs-12">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-7 small-heading" id="courses-in-progress-header">Completed</div>
|
||||
<div class="col-xs-5 col-lg-3 col-lg-offset-2 np-hidden-mobile small-heading" id="courses-in-progress-header-2">Completion status</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12">
|
||||
{% assign num_of_completed_courses = 0 %}
|
||||
{% for course in enrolled_courses %}
|
||||
{% if course.progress == 100 %}
|
||||
<div class="row dashboard-courses-row" style="display:none">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#02AB73",
|
||||
stroke_color_bg: "rgba(255, 255, 255)"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign num_of_completed_courses = num_of_completed_courses | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if num_of_completed_courses > 6 %}
|
||||
<div class="show-more-button" id="showMoreCompletedCourses">View All Completed Courses</div>
|
||||
{% endif %}
|
||||
|
||||
{% if num_of_completed_courses == 0 %}
|
||||
<div class="col-xs-12 dashboard-zero-state">
|
||||
{% capture message %}
|
||||
You haven't completed any courses yet
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,178 @@
|
||||
{% if features.learning_paths? %}
|
||||
<div class="learning-paths-wrapper filterable-section" data-type="learning-paths">
|
||||
<div class="row lps-in-progress show">
|
||||
<div class="col-xs-12">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-7 small-heading" id="courses-in-progress-header">In Progress</div>
|
||||
<div class="col-xs-5 col-lg-3 col-lg-offset-2 np-hidden-mobile small-heading" id="courses-in-progress-header-2">My Progress</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12">
|
||||
{% assign num_of_in_progress_lps = 0 %}
|
||||
{% for learning_path in items %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% if learning_path.enrolled? %}
|
||||
{% assign lp_courses_count = 0 | times: 1 %}
|
||||
{% assign sum_of_progress = 0.0 | times: 1 %}
|
||||
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% assign lp_courses_count = lp_courses_count | plus: 1 %}
|
||||
{% assign sum_of_progress = sum_of_progress | plus: item.progress %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if lp_courses_count == 0 %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% else %}
|
||||
{% assign lp_progress = sum_of_progress | divided_by: lp_courses_count | round %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% endif %}
|
||||
|
||||
{% if lp_progress < 100 %}
|
||||
<div class="row dashboard-learning-paths-row active" data-status="in-progress" style="display:none">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_learning_path_new_styles" with learning_path %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: learning_path.id,
|
||||
count: lp_progress,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#02AB73",
|
||||
stroke_color_bg: "rgba(255, 255, 255)"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign num_of_in_progress_lps = num_of_in_progress_lps | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if num_of_in_progress_lps > 6 %}
|
||||
<div id="showMoreInProgressLps" class="show-more-button">View All Learning Paths</div>
|
||||
{% endif %}
|
||||
|
||||
{% if num_of_in_progress_lps == 0 %}
|
||||
<div class="col-xs-12 dashboard-zero-state">
|
||||
{% capture message %}
|
||||
You don't have any learning paths currently in progress.
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row lps-completed">
|
||||
<div class="col-xs-12">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-7 small-heading" id="lps-completed-header">Completed</div>
|
||||
<div class="col-xs-5 col-lg-3 col-lg-offset-2 np-hidden-mobile small-heading" id="lps-completed-header-2">Completion Status</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12">
|
||||
{% assign num_of_completed_lps = 0 %}
|
||||
{% for learning_path in items %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% if learning_path.enrolled? %}
|
||||
{% assign lp_courses_count = 0 | times: 1 %}
|
||||
{% assign sum_of_progress = 0.0 | times: 1 %}
|
||||
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% assign lp_courses_count = lp_courses_count | plus: 1 %}
|
||||
{% assign sum_of_progress = sum_of_progress | plus: item.progress %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if lp_courses_count == 0 %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% else %}
|
||||
{% assign lp_progress = sum_of_progress | divided_by: lp_courses_count | round %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% endif %}
|
||||
|
||||
{% if lp_progress == 100 %}
|
||||
<div class="row dashboard-learning-paths-row" data-status="completed" style="display:none">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_learning_path_new_styles" with learning_path %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: learning_path.id,
|
||||
count: lp_progress,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#02AB73",
|
||||
stroke_color_bg: "rgba(255, 255, 255)"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign num_of_completed_lps = num_of_completed_lps | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if num_of_completed_lps > 6 %}
|
||||
<div id="showMoreCompletedLps" class="show-more-button">View All Completed Learning Paths</div>
|
||||
{% endif %}
|
||||
|
||||
{% if num_of_completed_lps == 0 %}
|
||||
<div class="col-xs-12 dashboard-zero-state">
|
||||
{% capture message %}
|
||||
You haven't completed any learning paths
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% comment %} <script>
|
||||
console.log("working")
|
||||
console.log($(".lps-in-progress .dashboard-learning-paths-row").length)
|
||||
window.onload = function () {
|
||||
console.log($(".lps-in-progress .dashboard-learning-paths-row").length)
|
||||
progress_lps_size_li = $(".lps-in-progress .dashboard-learning-paths-row").length;
|
||||
completed_lps_size_li = $(".lps-completed .dashboard-learning-paths-row").length;
|
||||
j=3;
|
||||
|
||||
console.log(progress_lps_size_li)
|
||||
|
||||
$(`.lps-in-progress .dashboard-learning-paths-row:lt(${j})`).css('display', 'flex');
|
||||
$('#showMoreInProgressLps').click(function () {
|
||||
j = progress_lps_size_li
|
||||
$(`.lps-in-progress .dashboard-learning-paths-row:lt(${j}))`).css('display', 'flex');
|
||||
if(x == progress_lps_size_li){
|
||||
$('#showMoreInProgressLps').hide();
|
||||
}
|
||||
});
|
||||
|
||||
$(`.lps-completed .dashboard-learning-paths-row:lt(${j})`).css('display', 'flex');
|
||||
$('#showMoreCompletedLps').click(function () {
|
||||
j = progress_lps_size_li
|
||||
$(`.lps-completed .dashboard-learning-paths-row:lt(${j}))`).css('display', 'flex');
|
||||
if(j == progress_lps_size_li){
|
||||
$('#showMoreCompletedLps').hide();
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
</script> {% endcomment %}
|
||||
@ -4,6 +4,7 @@
|
||||
<div class="np-footer-navigation">
|
||||
<ul class="np-footer-navigation-list">
|
||||
{% for website_navigation in navigations.footer_navigations %}
|
||||
{% if website_navigation.name !="Events" and website_navigation.name !="Learning Paths" %}
|
||||
<li class="np-footer-navigation-item">
|
||||
<a
|
||||
class="{{ website_navigation.name }} np-footer-navigation-link np-button-color"
|
||||
@ -13,6 +14,7 @@
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
@ -64,23 +66,18 @@
|
||||
{% t .need_help %}
|
||||
</div>
|
||||
<div class="np-footer-support-item np-footer-support-email">
|
||||
{% comment %} {% t .email %} {% endcomment %}
|
||||
Contact ATOS at:
|
||||
Call ATOS
|
||||
</div>
|
||||
{% comment %} <a
|
||||
<a
|
||||
class="np-footer-support-item np-footer-support-link np-button-color"
|
||||
href="mailto:{{ website_footer.school_customer_service_email }}"
|
||||
>
|
||||
{{ website_footer.school_customer_service_email }}
|
||||
{% endcomment %}
|
||||
<a
|
||||
class="np-footer-support-item np-footer-support-link np-button-color"
|
||||
href="tel:18005153636" >
|
||||
1-800-515-3636
|
||||
href="tel:18005153636"
|
||||
>
|
||||
+1 800 515 3636
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_person.signed_in? %}
|
||||
{% if current_person.signed_in? %}
|
||||
{% if current_person.properties.language == "es" %}
|
||||
{% include "spanish_lang" %}
|
||||
{% elsif current_person.properties.language == "fr" %}
|
||||
@ -49,7 +49,10 @@
|
||||
.avatar-requirements,
|
||||
.radio__label.gravatar,
|
||||
.radio__label.custom,
|
||||
#desktop_upload_avatar
|
||||
#desktop_upload_avatar,
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(1) .np-header-desktop-nav-link,
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(2) .np-header-desktop-nav-link,
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(3) .np-header-desktop-nav-link
|
||||
{
|
||||
text-indent: -9999999px;
|
||||
}
|
||||
@ -72,6 +75,33 @@
|
||||
content: "Se déconnecter";
|
||||
}
|
||||
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(1) .np-header-desktop-nav-link:after {
|
||||
/* My Dashboard */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
margin-bottom:18px;
|
||||
display: block;
|
||||
content: "My Dashboard";
|
||||
}
|
||||
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(2) .np-header-desktop-nav-link:after {
|
||||
/* Course Catalog */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
margin-bottom:18px;
|
||||
display: block;
|
||||
content: "Course Catalog";
|
||||
}
|
||||
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(3) .np-header-desktop-nav-link:after {
|
||||
/* Training Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
margin-bottom:18px;
|
||||
display: block;
|
||||
content: "Training Events";
|
||||
}
|
||||
|
||||
/* ACCOUNT */
|
||||
|
||||
.radio__label.gravatar::after {
|
||||
@ -0,0 +1,16 @@
|
||||
{% 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=Open+Sans:wght@400;500;700;800&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css" integrity="sha512-eMxdaSf5XW3ZW1wZCrWItO2jZ7A9FhuZfjVdztr7ZsKNOmt6TUMTQgfpNoVRyfPE5S9BC0A4suXzsGSrAOWcoQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.js" integrity="sha512-j+F4W//4Pu39at5I8HC8q2l1BNz4OF3ju39HyWeqKQagW6ww3ZF9gFcu8rzUbyTDY7gEo/vqqzGte0UPpo65QQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone-with-data.min.js"></script>
|
||||
@ -1,27 +1,11 @@
|
||||
<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>
|
||||
|
||||
<script>
|
||||
document.querySelector("body").classList.add("new-styles")
|
||||
</script>
|
||||
|
||||
<header class="np-header np-header-color new-header-styles">
|
||||
<div class="np-header-content np-max-width">
|
||||
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
@ -40,17 +24,24 @@
|
||||
|
||||
<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">
|
||||
|
||||
<li class= "np-header-desktop-nav-item videos-link">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
href="/app/dashboard"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
My Dashboard
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<li class= "np-header-desktop-nav-item videos-link">
|
||||
<a
|
||||
href="/app/catalog"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
>
|
||||
Course Catalog
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -58,34 +49,45 @@
|
||||
{% assign current_language = "English" %}
|
||||
{% if current_person.properties.language == "en" %}
|
||||
{% assign current_language = "English" %}
|
||||
{% elsif current_person.properties.language == "ru" %}
|
||||
{% assign current_language = "Pусский" %}
|
||||
{% elsif current_person.properties.language == "ar" %}
|
||||
{% assign current_language = "عربي" %}
|
||||
{% elsif current_person.properties.language == "fr" %}
|
||||
{% assign current_language = "Français" %}
|
||||
{% assign current_language = "EN" %}
|
||||
{% elsif current_person.properties.language == "es" %}
|
||||
{% assign current_language = "Español" %}
|
||||
{% assign current_language = "ES" %}
|
||||
{% endif %}
|
||||
|
||||
<div class="dropdown">
|
||||
<button onclick="myFunction()" class="dropbtn">{{current_language | upcase}}<i class="fas fa-arrow-alt-down" style="padding-left:5px"></i></button>
|
||||
<button onclick="myFunction()" class="dropbtn">{{current_language | upcase}}
|
||||
</button>
|
||||
<div id="myDropdown" class="dropdown-content">
|
||||
<a onclick="setLang('es')">Español</a>
|
||||
<hr class="divider">
|
||||
<a onclick="setLang('en')">English</a>
|
||||
<!--<hr class="divider">
|
||||
<a onclick="setLang('fr')">Français</a>
|
||||
<hr class="divider">
|
||||
<a onclick="setLang('ru')">Pусский</a>
|
||||
<hr class="divider">
|
||||
<a onclick="setLang('ar')">عربي</a>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
<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"
|
||||
>
|
||||
<i class="far fa-bars"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
{% comment %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
@ -95,9 +97,10 @@
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
<i class="np-header-search-icon fa fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
{% endcomment %}
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
@ -106,11 +109,8 @@
|
||||
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 }}"
|
||||
>
|
||||
|
||||
<i class="fal fa-user-circle"></i>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
@ -151,47 +151,24 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-hidden-desktop new-header-styles">
|
||||
<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 %}"
|
||||
<a
|
||||
href="/app/dashboard"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
<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>
|
||||
My Dashboard
|
||||
</a>
|
||||
<a
|
||||
href="/app/catalog"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
Catalog
|
||||
</a>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
class="np-header-mobile-menu-content-button profile-settings-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
@ -218,7 +195,6 @@
|
||||
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
|
||||
<script>
|
||||
function setLang(lang) {
|
||||
var data = {
|
||||
@ -226,20 +202,20 @@ function setLang(lang) {
|
||||
language : lang
|
||||
};
|
||||
$.ajax({
|
||||
type : 'POST',
|
||||
url : 'https://hooks.zapier.com/hooks/catch/9725311/bt60dir/', //zapier link
|
||||
data: JSON.stringify(data),
|
||||
success:function (data) {
|
||||
console.log(data);
|
||||
setTimeout(location.reload.bind(location), 1500);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.log(error)
|
||||
}
|
||||
});
|
||||
type : 'POST',
|
||||
url : 'https://webhooks.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/language-change',
|
||||
data: JSON.stringify(data),
|
||||
success:function (data) {
|
||||
console.log(data);
|
||||
setTimeout(location.reload.bind(location), 700);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.log(error)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* When the user clicks on the button,
|
||||
/* When the user clicks on the button,
|
||||
toggle between hiding and showing the dropdown content */
|
||||
function myFunction() {
|
||||
document.getElementById("myDropdown").classList.toggle("show");
|
||||
@ -258,26 +234,53 @@ window.onclick = function(event) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (window.location.pathname == "/app/videos") {
|
||||
document.querySelector(".videos-link .np-header-desktop-nav-link").classList.add("np-sub-navigation-content-item-active")
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endif %}
|
||||
<style>
|
||||
|
||||
.new-header-styles.np-header {
|
||||
box-shadow: 0px 4px 4px rgb(0 0 0 / 25%), 0px 4px 4px rgb(0 0 0 / 25%);
|
||||
position:relative;
|
||||
position:fixed;
|
||||
top:0;
|
||||
z-index: 2817948196;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-nav {
|
||||
position:relative;
|
||||
margin-right:12px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-nav .np-header-mobile-menu-nav-button {
|
||||
color:#ffd700;
|
||||
}
|
||||
|
||||
.np-header-logo {
|
||||
justify-content: flex-end;
|
||||
margin-right:16px;
|
||||
}
|
||||
|
||||
.hr.divider {
|
||||
border-top: 4px solid black;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.dropbtn {
|
||||
background-color: white;
|
||||
color: #0088dd;
|
||||
background-color: #ffd700;
|
||||
color: black;
|
||||
padding: 13px;
|
||||
font-size: 16px;
|
||||
min-width: 160px;
|
||||
line-height:16px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
border-radius: 5px;
|
||||
border-radius: 7px;
|
||||
max-height: 44px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
@ -306,11 +309,122 @@ window.onclick = function(event) {
|
||||
}
|
||||
|
||||
.dropdown a:hover {
|
||||
color: #0088dd;
|
||||
color: #ffd700;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.show {display: block;}
|
||||
|
||||
.new-header-styles .np-header-mobile-menu-content {
|
||||
background:#fff;
|
||||
z-index:49;
|
||||
}
|
||||
|
||||
.new-header-styles .np-header-mobile-menu-content-nav {
|
||||
padding: 12px 0 0;
|
||||
}
|
||||
|
||||
.new-header-styles .np-header-mobile-menu-content-button {
|
||||
border-bottom: 1px solid #000;
|
||||
box-shadow: none;
|
||||
justify-content: flex-start;
|
||||
padding: 16px;
|
||||
border-radius: 0;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #000F23;
|
||||
}
|
||||
|
||||
.new-header-styles .np-header-mobile-menu-content-button.profile-settings-link {
|
||||
border-bottom: 0;
|
||||
margin-top: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.new-header-styles .np-header-mobile-menu-content-button.np-danger {
|
||||
margin: 0 0 32px;
|
||||
border: none;
|
||||
color: #48e3a0;
|
||||
font-weight: 500;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-header {
|
||||
height:auto;
|
||||
}
|
||||
|
||||
.new-styles .fa-user-circle {
|
||||
font-size:45px;
|
||||
color: #ffd700;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.new-styles .fa-user-circle {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
.np-header-logo {
|
||||
justify-content: unset;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.np-header-logo-image {
|
||||
height: 60px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
@media (max-width:1200px) {
|
||||
.np-header-logo-image {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
.np-header-desktop-nav-list {
|
||||
padding-inline-start: 10px;
|
||||
}
|
||||
.np-header-desktop-nav-item {
|
||||
padding: 16px 8px;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link {
|
||||
transition:all 0.2s;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link:hover,
|
||||
.np-header-desktop-nav-link.np-sub-navigation-content-item-active {
|
||||
text-decoration:underline;
|
||||
color:#ffd700;
|
||||
}
|
||||
|
||||
.new-header-styles .np-header-search-input,
|
||||
.new-header-styles .np-header-search-input:focus {
|
||||
border-radius:0;
|
||||
opacity:1;
|
||||
background:#fff;
|
||||
padding: 0 40px 0 16px;
|
||||
font-size:18px;
|
||||
}
|
||||
|
||||
.new-header-styles .np-header-search-input:focus {
|
||||
border: 1px solid #ffd700;
|
||||
}
|
||||
|
||||
.np-header-search-icon {
|
||||
color:#2ee3a0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
.np-header-desktop-nav-item {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,109 @@
|
||||
<div class="homepage-featured-section">
|
||||
<div class="row sp-between">
|
||||
<div class="col-xs-12 col-sm-5-half">
|
||||
<div class="small-heading featured-courses-heading homepage-subtitles">{{ homepage.featured_courses_headline }}</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-5-half">
|
||||
<div class="small-heading featured-courses-heading homepage-subtitles np-hidden-mobile">My Achievements</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sp-between">
|
||||
<div class="featured-courses-block col-xs-12 col-sm-5-half">
|
||||
{% assign featured_courses_count = 0 %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | upcase %}
|
||||
{% if cat_name == "GOLD STAR" %}
|
||||
<div class="featured-course-col">
|
||||
{% include "cards_course_new_styles" with course %}
|
||||
</div>
|
||||
{% assign featured_courses_count = featured_courses_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
{% if featured_courses_count == 0 %}
|
||||
We're sorry! There are no featured courses at this time.
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="featured-courses-block col-xs-12 col-sm-5-half np-hidden-mobile">
|
||||
{% include "homepage_featured_my_points" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.homepage-featured-section {
|
||||
margin-top: 55px;
|
||||
}
|
||||
.my-points-heading {
|
||||
margin-top:40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pop-heading {
|
||||
margin-bottom:32px;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.view-all-events-heading {
|
||||
color:#0088dd;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
|
||||
.featured-courses-block {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
@media (min-width:768px) {
|
||||
.my-points-heading {
|
||||
margin-top:0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:992px) {
|
||||
.my-points-heading {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.view-all-events-heading {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.sp-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 48em) {
|
||||
.col-sm-5-half {
|
||||
flex-basis: 45%;
|
||||
max-width: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.small-text {
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
right: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.np-card-content-footer .np-card {
|
||||
min-width: auto !important;
|
||||
}
|
||||
.np-card-content-footer {
|
||||
align-items: center;
|
||||
}
|
||||
.np-card-content-footer .np-course-version-outdated-popup {
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,98 @@
|
||||
<div class="my-points-and-gems-container">
|
||||
<div class="my-points-block">
|
||||
<div class="points-container">
|
||||
|
||||
{% assign current_points = current_person.properties.points %}
|
||||
{% if current_points >= 500 and current_points < 1000 %}
|
||||
<img class="gem-image" src="https://s3.amazonaws.com/schoolkeep-production/wysiwyg/91327518-e518-422e-9454-3aa2b1fe061a/20240820152515_McNP_Point-Systems_2.png"></img>
|
||||
{% elsif current_points >= 1000 and current_points < 1500 %}
|
||||
<img class="gem-image" src="https://s3.amazonaws.com/schoolkeep-production/wysiwyg/91327518-e518-422e-9454-3aa2b1fe061a/20240820152521_McNP_Point-Systems_3.png"></img>
|
||||
{% elsif current_points >= 1500 and current_points < 2000 %}
|
||||
<img class="gem-image" src="https://s3.amazonaws.com/schoolkeep-production/wysiwyg/91327518-e518-422e-9454-3aa2b1fe061a/20240820152533_McNP_Point-Systems_4.png"></img>
|
||||
{% elsif current_points >= 2000 %}
|
||||
<img class="gem-image" src="https://s3.amazonaws.com/schoolkeep-production/wysiwyg/91327518-e518-422e-9454-3aa2b1fe061a/20240820152540_McNP_Point-Systems_5.png"></img>
|
||||
{% endif %}
|
||||
<h2>{{ current_person.properties.points }}</h2>
|
||||
</div>
|
||||
<div class="small-text">
|
||||
<p>points</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-gems-block">
|
||||
{% assign topaz_count = 0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.name contains "Harri Learning Gem" %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign topaz_count = topaz_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="gem-grid-container">
|
||||
<div class="gem-container">
|
||||
{% for i in (1..topaz_count) %}
|
||||
<img class="gem-image" src="https://s3.amazonaws.com/schoolkeep-production/wysiwyg/91327518-e518-422e-9454-3aa2b1fe061a/20240820152507_McNP_Point-Systems_1.png"></img>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if topaz_count == 0 and current_points < 500 %}
|
||||
<h5>
|
||||
<a href="/app/dashboard">Get started>></a>
|
||||
</h5>
|
||||
{% endif %}
|
||||
|
||||
<div class="small-text">
|
||||
<p>gems</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.my-points-and-gems-container {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.my-points-block,
|
||||
.my-gems-block {
|
||||
background-color: #F8FBFF;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 36pt;
|
||||
}
|
||||
|
||||
.points-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.gem-grid-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gem-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.gem-image {
|
||||
max-width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,253 @@
|
||||
{% assign num_of_getting_started_courses = 0 %}
|
||||
<div class="homepage-getting-started-section">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-7">
|
||||
<div class="getting-started-heading homepage-subtitles">Learning Gems 💎</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="getting-started-heading progress-heading homepage-subtitles hidden-tab">My progress</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress < 100 %}
|
||||
{% if course.name contains "Harri Learning Gem: Org Admin" %}
|
||||
<div class="row getting-started-course-row">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress ,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress < 100 %}
|
||||
{% if course.name contains "Harri Learning Gem: CoreHR" %}
|
||||
<div class="row getting-started-course-row">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress ,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress < 100 %}
|
||||
{% if course.name contains "Harri Learning Gem: Forecasting" %}
|
||||
<div class="row getting-started-course-row">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress ,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress < 100 %}
|
||||
{% if course.name contains "Harri Learning Gem: Scheduling" %}
|
||||
<div class="row getting-started-course-row">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress ,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress < 100 %}
|
||||
{% if course.name contains "Harri Learning Gem: Timeclocks" %}
|
||||
<div class="row getting-started-course-row">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress ,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress < 100 %}
|
||||
{% if course.name contains "Harri Learning Gem: Payroll" %}
|
||||
<div class="row getting-started-course-row">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress ,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress < 100 %}
|
||||
{% if course.name contains "Harri Learning Gem: Harri Mobile" %}
|
||||
<div class="row getting-started-course-row">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress ,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | upcase %}
|
||||
{% if cat_name == "LEARNING GEMS" %}
|
||||
{% assign num_of_getting_started_courses = num_of_getting_started_courses | plus: 1 %}
|
||||
<div class="row getting-started-course-row">
|
||||
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress ,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.getting-started-heading {
|
||||
font-size: 18px;
|
||||
margin-bottom: 24px;
|
||||
font-weight:500;
|
||||
margin-top:32px;
|
||||
}
|
||||
|
||||
.getting-started-course-row {
|
||||
margin-bottom:35px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.getting-started-heading {
|
||||
font-size: 24px;
|
||||
margin-bottom: 32px;
|
||||
margin-top:64px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.progress-heading, .course-progress-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{% comment %}
|
||||
<script>
|
||||
console.log("num of learning gems {{num_of_getting_started_courses}}")
|
||||
if (Number("{{num_of_getting_started_courses}}") == 0) {
|
||||
document.querySelector(".homepage-getting-started-section").style.display = "none"
|
||||
}
|
||||
</script>
|
||||
{% endcomment %}
|
||||
@ -0,0 +1,191 @@
|
||||
<div class="homepage-getting-started-section">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 lp-title">
|
||||
<div class="getting-started-heading homepage-subtitles">My Learning Paths</div>
|
||||
<div class="language-toggle-container">
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="languageToggle" onclick="toggleLanguage()">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<span id="toggleLabel">English</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row lp-prog-paths" id="englishPaths">
|
||||
{% assign english_count = 0 %}
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
{% unless learning_path.name contains "Spanish" %}
|
||||
{% if learning_path.progress < 100 and english_count < 3 %}
|
||||
{% capture learning_path_url %}{% route learning_path, id: learning_path.id %}{% endcapture %}
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<a href="{{ learning_path_url }}" class="learning-gem-block">
|
||||
<div class="learning-gem-content">
|
||||
<h3>{{ learning_path.name }}</h3>
|
||||
<div class="lp-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: learning_path.id,
|
||||
count: learning_path.progress,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% assign english_count = english_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="row lp-prog-paths" id="spanishPaths" style="display: none;">
|
||||
{% assign spanish_count = 0 %}
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
{% if learning_path.name contains "Spanish" %}
|
||||
{% if learning_path.progress < 100 and spanish_count < 3 %}
|
||||
{% capture learning_path_url %}{% route learning_path, id: learning_path.id %}{% endcapture %}
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<a href="{{ learning_path_url }}" class="learning-gem-block">
|
||||
<div class="learning-gem-content">
|
||||
<h3>{{ learning_path.name }}</h3>
|
||||
<div class="lp-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: learning_path.id,
|
||||
count: learning_path.progress,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% assign spanish_count = spanish_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleLanguage() {
|
||||
var englishPaths = document.getElementById('englishPaths');
|
||||
var spanishPaths = document.getElementById('spanishPaths');
|
||||
var toggleLabel = document.getElementById('toggleLabel');
|
||||
var languageToggle = document.getElementById('languageToggle');
|
||||
|
||||
if (languageToggle.checked) {
|
||||
englishPaths.style.display = 'none';
|
||||
spanishPaths.style.display = 'flex';
|
||||
toggleLabel.textContent = 'Español';
|
||||
} else {
|
||||
englishPaths.style.display = 'flex';
|
||||
spanishPaths.style.display = 'none';
|
||||
toggleLabel.textContent = 'English';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.lp-progress-wrapper {
|
||||
background: #F8FBFF;
|
||||
padding:16px;
|
||||
height:100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color:#de352a;
|
||||
}
|
||||
|
||||
.lp-prog-paths {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.language-toggle-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#toggleLabel {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #de352a;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: #ececec;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.learning-gem-content h3, .learning-gem-content a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.lp-title {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.learning-gem-block,
|
||||
.learning-gem-block:link,
|
||||
.learning-gem-block:visited,
|
||||
.learning-gem-block:hover,
|
||||
.learning-gem-block:active {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.learning-gem-block h3,
|
||||
.learning-gem-block:link h3,
|
||||
.learning-gem-block:visited h3,
|
||||
.learning-gem-block:hover h3,
|
||||
.learning-gem-block:active h3 {
|
||||
text-decoration: none !important;
|
||||
color: black !important;
|
||||
}
|
||||
</style>
|
||||
@ -24,12 +24,6 @@
|
||||
" style="margin-top: 10px;">
|
||||
{{ course.progress }}% Complete
|
||||
</div>
|
||||
{% assign time = courses.enrolled | where: "id", course.id %}
|
||||
{% if time.first.properties.course_time != blank %}
|
||||
<div class="course-duration-lp">
|
||||
{{time.first.properties.course_time}} Min
|
||||
</div>
|
||||
{%endif%}
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% comment %} {% if course.optional? %}
|
||||
@ -1,4 +1,4 @@
|
||||
{% assign swapped_groups = 'd1cc8cb4-fc5b-48b3-8e85-2f4faaf982dd, 0ecc1170-5761-4b5b-9047-5992232ceff4, 172784c9-7c26-4ffd-891f-4dbe8fda324f, 13765f3c-f1ee-4196-b846-1f07f63b3b64, c2caaef8-bebf-46b7-857b-79934a667495, 33842d33-6e9d-4dd6-a07c-49f2ce62b752, 011e1a52-beeb-4369-b030-a9ee3a0efe21, 216f8729-c6c6-4708-ad2c-fc732ef2d505, c1862cc1-a933-42bd-81cc-ebab4ec8d3d2' %}
|
||||
{% assign swapped_groups = '1fafc89f-fbbe-4fc9-b112-00645fb5708b, fa5b681e-cad9-4987-8801-a915b7c35855, 4a11c2c7-653e-4feb-865c-f8d300868324, 607235c7-cf3d-4997-977d-a1d4f0b4dcd6,f66bf675-5074-45bd-9ea7-62c928ec545e, 345c7c5f-f904-4ea1-ae7f-e8398b2a69f6, d1fa758c-eb92-45ed-8d01-d7f6fbf4a4ec, a4339f11-c69a-4880-8dee-204b1fd97359, 45a6eaa4-f3d5-4cd8-b054-eba2bb135b6a'%}
|
||||
{% assign is_in_group = false %}
|
||||
|
||||
{% for group in current_person.groups %}
|
||||
@ -0,0 +1 @@
|
||||
<SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </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-bg"
|
||||
stroke="{{ stroke_color_bg }}"
|
||||
stroke-width="15"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"/>
|
||||
<circle
|
||||
class="progress-ring__circle circle-{{name}}"
|
||||
stroke="{{ stroke_color }}"
|
||||
stroke-width="15"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"/>
|
||||
<text x="50%" y="50%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="#35404E" dy=".3em">{{count}}%</text>
|
||||
</svg>
|
||||
</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(count, total) {
|
||||
var percent = parseInt(count) / parseInt(total)
|
||||
// console.log(percent)
|
||||
const offset = circumference - percent * circumference;
|
||||
//console.log(offset)
|
||||
circle.style.strokeDashoffset = offset;
|
||||
}
|
||||
|
||||
setProgress('{{count}}', '{{total}}')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-progress-ring-wrapper {
|
||||
flex: 0;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
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 {
|
||||
text-transform: uppercase;
|
||||
font-size:0.875rem;
|
||||
margin-top:1rem;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.progress-ring text { font-size:2rem; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.progress-circle-container {
|
||||
background: #F8FBFF;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -6,7 +6,7 @@
|
||||
.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-card-content-progress.notstarted,
|
||||
.np-zero-state-text.training-events,
|
||||
.np-button.lp,
|
||||
.sub-navigation-label:nth-child(1),
|
||||
@ -49,11 +49,58 @@
|
||||
.avatar-requirements,
|
||||
.radio__label.gravatar,
|
||||
.radio__label.custom,
|
||||
#desktop_upload_avatar
|
||||
#desktop_upload_avatar,
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(1) .np-header-desktop-nav-link,
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(2) .np-header-desktop-nav-link,
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(3) .np-header-desktop-nav-link,
|
||||
.np-header-mobile-menu-content-button,
|
||||
.homepage-hero-section .np-homepage-headline,
|
||||
.homepage-hero-section .np-homepage-subheadline,
|
||||
.homepage-hero-section .np-homepage-hero-cta,
|
||||
.homepage-getting-started-section .getting-started-heading,
|
||||
.homepage-getting-started-section .progress-heading,
|
||||
.homepage-featured-section .featured-courses-heading,
|
||||
.homepage-featured-section .featured-events-heading,
|
||||
.homepage-featured-section .view-all-events-heading,
|
||||
.contact-us-block .contact-us-block-title,
|
||||
.contact-us-block .contact-us-block-subtitle,
|
||||
.contact-us-block .contact-us-block-cta,
|
||||
.training-events-header,
|
||||
.training-events-subheader,
|
||||
.training-events-headers .request-button,
|
||||
.dashboard-title,
|
||||
.type-filter[data-filter='courses'],
|
||||
.type-filter[data-filter='learning-paths'],
|
||||
.learning-path-items-definition,
|
||||
.np-card-training-sessions-label,
|
||||
.stats-container[data-item='in-progress'] .stats-label,
|
||||
.stats-container[data-item='completed'] .stats-label,
|
||||
.stats-container.events .stats-label,
|
||||
#courses-in-progress-header,
|
||||
#courses-in-progress-header-2,
|
||||
#my-registered-events-heading,
|
||||
.events-container #upcoming-trainings span,
|
||||
.events-container #new-user-journey span,
|
||||
.events-container #training-webinar-catalog span,
|
||||
.events-container #development-training span,
|
||||
.overlay-content .all-filter,
|
||||
.overlay-content .filter-category:nth-of-type(1),
|
||||
.overlay-content .filter-category:nth-of-type(2),
|
||||
.overlay-content .apply-button,
|
||||
#clearAll,
|
||||
.np-catalog-title
|
||||
{
|
||||
text-indent: -9999999px;
|
||||
}
|
||||
|
||||
.course-completion,
|
||||
.events-container #upcoming-trainings span,
|
||||
.events-container #new-user-journey span,
|
||||
.events-container #training-webinar-catalog span,
|
||||
.events-container #development-training span {
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link::after {
|
||||
@ -72,6 +119,73 @@
|
||||
content: "Desconectar";
|
||||
}
|
||||
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(1) .np-header-desktop-nav-link:after {
|
||||
/* My Dashboard */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
margin-bottom:18px;
|
||||
display: block;
|
||||
content: "Mi Tablero";
|
||||
}
|
||||
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(2) .np-header-desktop-nav-link:after {
|
||||
/* Course Catalog */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
margin-bottom:18px;
|
||||
display: block;
|
||||
content: "Catálogo de Cursos";
|
||||
}
|
||||
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(3) .np-header-desktop-nav-link:after {
|
||||
/* Training Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
margin-bottom:18px;
|
||||
display: block;
|
||||
content: "Eventos de formación";
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button:nth-child(1):after {
|
||||
/* My Dashboard - mobile */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Mi Tablero";
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button:nth-child(2):after {
|
||||
/* Course Catalog - mobile */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Catálogo de Cursos";
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button:nth-child(3):after {
|
||||
/* Training Events - mobile */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Eventos de formación";
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button:nth-child(4):after {
|
||||
/* Profile Settings - mobile */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Configuración de Perfil";
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button:nth-child(5):after {
|
||||
/* Sign out - mobile */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Desconectar";
|
||||
}
|
||||
|
||||
/* ACCOUNT */
|
||||
|
||||
.radio__label.gravatar::after {
|
||||
@ -308,7 +422,7 @@
|
||||
content: "Ver";
|
||||
}
|
||||
|
||||
.np-card-content-progress.np-button-color.notstarted::after {
|
||||
.np-card-content-progress.notstarted::after {
|
||||
/* Not started */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
@ -330,7 +444,6 @@
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Completo";
|
||||
margin-top: -13px;
|
||||
}
|
||||
|
||||
/* EVENTS */
|
||||
@ -368,6 +481,70 @@
|
||||
content: "Filtrar";
|
||||
}
|
||||
|
||||
.events-container #upcoming-trainings span:after {
|
||||
/* View All */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Ver todo";
|
||||
}
|
||||
|
||||
.events-container #new-user-journey span:after {
|
||||
/* New User Journey */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Viaje del nuevo usuario";
|
||||
}
|
||||
|
||||
.events-container #training-webinar-catalog span:after {
|
||||
/* Training Webinar Catalog */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Catálogo de seminarios web de capacitación";
|
||||
}
|
||||
|
||||
.events-container #development-training span:after {
|
||||
/* Development Training */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Capacitación para el desarrollo";
|
||||
}
|
||||
|
||||
.overlay-content .all-filter:after {
|
||||
/* Clear All */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Limpiar Todo";
|
||||
}
|
||||
|
||||
.overlay-content .filter-category:nth-of-type(1):after {
|
||||
/* Region */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Región";
|
||||
}
|
||||
|
||||
.overlay-content .filter-category:nth-of-type(2):after {
|
||||
/* Product */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Producto";
|
||||
}
|
||||
|
||||
.overlay-content .apply-button:after {
|
||||
/* Apply */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Aplicar";
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
.np-footer-support-item.np-footer-support-help::after {
|
||||
@ -465,4 +642,232 @@
|
||||
display: block;
|
||||
content: "Sobre el modulo";
|
||||
}
|
||||
</style>
|
||||
|
||||
/* HOMEPAGE CONTENT */
|
||||
|
||||
.homepage-hero-section .np-homepage-headline:after {
|
||||
/* Welcome to Harri Academy! */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "¡Bienvenidos a la Academia Harri!";
|
||||
}
|
||||
|
||||
.homepage-hero-section .np-homepage-subheadline:after {
|
||||
/* Grow your skillset and take your Harri knowledge to the next level right here. To get started, browse our course catalog below or take a quick survey to view courses tailored to you. */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Haga crecer su conjunto de habilidades y lleve su conocimiento de Harri al siguiente nivel aquí mismo. Para comenzar, explore nuestro catálogo de cursos a continuación o complete una encuesta rápida para ver los cursos adaptados a usted.";
|
||||
}
|
||||
|
||||
.homepage-hero-section .np-homepage-hero-cta:after {
|
||||
/* Take Survey */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Tomar encuesta";
|
||||
}
|
||||
|
||||
.homepage-getting-started-section .getting-started-heading:after {
|
||||
/* My Assigned Learning */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Mi aprendizaje";
|
||||
}
|
||||
|
||||
.homepage-getting-started-section .progress-heading:after {
|
||||
/* My Progress */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Mi progreso";
|
||||
}
|
||||
|
||||
.homepage-featured-section .featured-courses-heading:after {
|
||||
/* Featured Content */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Contenido destacado";
|
||||
}
|
||||
|
||||
.homepage-featured-section .featured-events-heading:after {
|
||||
/* Featured Training Events */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Eventos de capacitación destacados";
|
||||
}
|
||||
|
||||
.homepage-featured-section .view-all-events-heading:after {
|
||||
/* View all Events */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Ver todos los eventos";
|
||||
}
|
||||
|
||||
.contact-us-block .contact-us-block-title:after {
|
||||
/* Need More Help? */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "¿Necesitas más ayuda?";
|
||||
}
|
||||
|
||||
.contact-us-block .contact-us-block-subtitle:after {
|
||||
/* Get in touch with our support team */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Póngase en contacto con nuestro equipo de soporte";
|
||||
}
|
||||
|
||||
.contact-us-block .contact-us-block-cta:after {
|
||||
/* Contact Us */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Contacta con nosotros";
|
||||
}
|
||||
|
||||
/* EVENTS PAGE CONTENT */
|
||||
|
||||
.training-events-header:after {
|
||||
/* Sign Up For Live Private Training! */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "¡Regístrese para la capacitación privada en vivo!";
|
||||
}
|
||||
|
||||
.training-events-subheader:after {
|
||||
/* Grow your Harri skill set with one of our Education Consultants during a private training customized just for you! */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "¡Haz crecer tu conjunto de habilidades de Harri con uno de nuestros consultores de educación durante una capacitación privada personalizada solo para ti!";
|
||||
}
|
||||
|
||||
.training-events-headers .request-button:after {
|
||||
/* Request Here */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Solicite aquí";
|
||||
}
|
||||
|
||||
/* DASHBOARD CONTENT */
|
||||
.dashboard-title:after {
|
||||
/* Overview */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Descripción general";
|
||||
}
|
||||
|
||||
.type-filter[data-filter="courses"]:after {
|
||||
/* Filter - Courses */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Cursos";
|
||||
}
|
||||
|
||||
.type-filter[data-filter="learning-paths"]:after {
|
||||
/* Filter - Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Mis rutas";
|
||||
}
|
||||
|
||||
.stats-container[data-item='in-progress'] .stats-label:after {
|
||||
/* In Progress */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "En curso";
|
||||
}
|
||||
|
||||
.stats-container[data-item='completed'] .stats-label:after {
|
||||
/* Completed */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Completo";
|
||||
}
|
||||
|
||||
.stats-container.events .stats-label:after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Eventos";
|
||||
}
|
||||
|
||||
#courses-in-progress-header:after {
|
||||
/* In Progress */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "En curso";
|
||||
}
|
||||
|
||||
#courses-in-progress-header-2:after {
|
||||
/* My Progress */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Mi progreso";
|
||||
}
|
||||
|
||||
#my-registered-events-heading:after {
|
||||
/* My Registered Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Mis eventos registrados";
|
||||
}
|
||||
|
||||
|
||||
/* CARDS CONTENT */
|
||||
.learning-path-items-definition:after {
|
||||
/* Learning path Cards - Items */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Elementos";
|
||||
}
|
||||
|
||||
.np-card-training-sessions-label:after {
|
||||
/* Events Cards - Session */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
margin-top: -20px;
|
||||
content: "Sesión";
|
||||
}
|
||||
|
||||
/* CATALOG */
|
||||
|
||||
#clearAll:after {
|
||||
/* Clear all */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Limpiar todo";
|
||||
}
|
||||
|
||||
.np-catalog-title:After {
|
||||
/* Browse The Harri Academy Course Catalog */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Explorar el catálogo de cursos de la Academia Harri";
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
<nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% unless link.label == "Dashboard" or link.label == "Catalog" or link.label == "Events" %}
|
||||
<div class="np-sub-navigation-content-item {{ link.label }} {{ 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>
|
||||
<p class="{{ link.label }} sub-navigation-label" style="margin-top:0px;"> {{ link.label }} </p>
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
@ -0,0 +1,55 @@
|
||||
<div class="np-filter training-event-filter">
|
||||
<div class="dropdown training-event-dropdown">
|
||||
<button
|
||||
class="np-button dropdown-button training-event-dropdown-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
onclick="openNav()"
|
||||
>
|
||||
{% t shared.filters.filter %}
|
||||
</button>
|
||||
|
||||
<div id="myNav" class="overlay">
|
||||
<!-- Button to close the overlay navigation -->
|
||||
|
||||
|
||||
<!-- Overlay content -->
|
||||
<div class="overlay-content">
|
||||
<div class="overlay-items-container">
|
||||
<div class="overlay-items-headers">
|
||||
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
|
||||
<i style="color: #0088DD;" class="far fa-angle-left"></i>
|
||||
</a>
|
||||
<p class="filter-title">Filter</p>
|
||||
<div class="all-filter" id="all">Clear All</div>
|
||||
</div>
|
||||
<div class="filter-container">
|
||||
<p class="filter-category">Region</p>
|
||||
<div class="circle-container region-circle" id="us">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">US</p>
|
||||
</div>
|
||||
<div class="circle-container region-circle" id="uk">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">UK</p>
|
||||
</div>
|
||||
<div class="circle-container region-circle" id="global">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">Global</p>
|
||||
</div>
|
||||
<p class="filter-category">Product</p>
|
||||
<div class="circle-container product-circle" id="talent-acquisition">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">Talent Acquisition</p>
|
||||
</div>
|
||||
<div class="circle-container product-circle" id="workforce-management">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">Workforce Management</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="" class="apply-button-container">
|
||||
<div class="apply-button np-button" id="apply-button">Apply</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,9 @@
|
||||
{% comment %} <div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text training-events">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-training-events"
|
||||
alt="{% t .empty %}"
|
||||
/>
|
||||
</div> {% endcomment %}
|
||||
@ -0,0 +1,58 @@
|
||||
<div class="np-filter training-event-filter">
|
||||
<div class="dropdown training-event-dropdown">
|
||||
<button
|
||||
class="np-button dropdown-button training-event-dropdown-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
onclick="openNav()"
|
||||
>
|
||||
{% t shared.filters.filter %}
|
||||
</button>
|
||||
|
||||
<div id="myNav" class="overlay">
|
||||
<!-- Button to close the overlay navigation -->
|
||||
|
||||
|
||||
<!-- Overlay content -->
|
||||
<div class="overlay-content">
|
||||
<div class="overlay-items-container">
|
||||
<div class="overlay-items-headers">
|
||||
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
|
||||
<i style="color: #0088DD;" class="far fa-angle-down"></i>
|
||||
</a>
|
||||
<p class="filter-title">Filter</p>
|
||||
<div class="all-filter" id="all">Clear All</div>
|
||||
</div>
|
||||
<div class="filter-container">
|
||||
|
||||
<p class="filter-category">Region</p>
|
||||
<div class="circle-container region-circle" id="us">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">US</p>
|
||||
</div>
|
||||
<div class="circle-container region-circle" id="uk">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">UK</p>
|
||||
</div>
|
||||
{% comment %}
|
||||
<div class="circle-container region-circle" id="global">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">Global</p>
|
||||
</div>
|
||||
{% endcomment %}
|
||||
<p class="filter-category">Product</p>
|
||||
<div class="circle-container product-circle" id="talent-acquisition">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">Talent Acquisition</p>
|
||||
</div>
|
||||
<div class="circle-container product-circle" id="workforce-management">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">Workforce Management</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="" class="apply-button-container">
|
||||
<div class="apply-button np-button" id="apply-button">Apply</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,58 @@
|
||||
|
||||
<div class="dropdown dropdown-calendar">
|
||||
<button
|
||||
class="np-top-button np-button-font-color np-button np-button-big dropdown-calendar-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
>
|
||||
{% t .add_to_calendar %}
|
||||
<i class="fas fa-chevron-down dropdown-calendar-button-chevron"></i>
|
||||
</button>
|
||||
|
||||
<ul class="dropdown-calendar-menu">
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.google_calendar_url }}"
|
||||
target="_blank"
|
||||
id="googleCal"
|
||||
>
|
||||
{% t .google_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.outlook_calendar_url }}"
|
||||
target="_blank"
|
||||
id="outlookCal"
|
||||
>
|
||||
{% t .outlook_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.outlook_office_calendar_url }}"
|
||||
target="_blank"
|
||||
id="officeCal"
|
||||
>
|
||||
{% t .office_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.ical_calendar_url }}"
|
||||
target="_blank"
|
||||
id="icalCal"
|
||||
>
|
||||
{% t .ical_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user