A few notes and template changes.

This commit is contained in:
Norm Rasmussen
2023-07-07 15:51:41 -04:00
parent 58dd40bf99
commit c6b0c5682f
27 changed files with 692 additions and 221 deletions

Binary file not shown.

View File

@ -28,30 +28,38 @@
<div class="np-card-content-footer">
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
{% if course_ribbon == "hochladen" %}
{% if course_ribbon == "hochladen" or course_ribbon == "upload" %}
<a class="np-button np-button-wide" href="{{ course_path }}">
Hochladen
<span data-lang="DE">Hochladen</span>
<span data-lang="EN">Upload</span>
</a>
{% else %}
<a class="np-button np-button-wide" href="{{ course_path }}">
{% t shared.view %}
<span data-lang="DE">{% t shared.view %}</span>
{% if course.progress > 0 and course.progress < 100 %}
<span data-lang="EN">Continue</span>
{% else %}
<span data-lang="EN">View</span>
{% endif %}
</a>
{% endif %}
{% if course.enrolled? %}
{% unless course_ribbon == "demnächst" or course.name == "Neue Lerninhalte" %}
{% unless course_ribbon == "demnächst" or course.name == "Neue Lerninhalte" or course_ribbon == "coming soon" or course_ribbon == "New learning content" %}
{% if course.has_to_restart? %}
{% include "course_version_outdated_popup", path: course_path %}
{% endif %}
<div class="np-card-content-progress np-button-color">
{% if course.completed? %}
Abgeschlossen
<span data-lang="DE">Abgeschlossen</span>
<span data-lang="EN">Completed</span>
{% elsif course.started? == false %}
0% abgeschlossen
<span data-lang="DE">0% abgeschlossen</span>
<span data-lang="EN">0% completed</span>
{% else %}
{% comment %} {{ course.progress }}% Abgeschlossen {% endcomment %}
{% t shared.progress, count: course.progress %}
<span data-lang="DE">{% t shared.progress, count: course.progress %}</span>
<span data-lang="EN">{{course.progress}}% completed</span>
{% endif %}
</div>
{% endunless %}

View File

@ -1,4 +1,12 @@
<div class="np-card np-no-horizontal-padding">
{% assign learning_path_lang = "DE" %}
{% for cat in learning_path.categories %}
{% if cat.name == "English" %}
{% assign learning_path_lang = "EN" %}
{% endif %}
{% endfor %}
<div class="np-card np-no-horizontal-padding card-learning-path" data-lang="{{learning_path_lang}}">
<div class="np-card-container">
<div class="np-learning-path">
<div class="image-wrapper">
@ -9,7 +17,8 @@
/>
<div class="np-card-ribbon np-hidden-mobile">
<i class="fa fa-book-open" aria-hidden="true"></i>
{{ learning_path.items.count }} Inhalte
<span data-lang="DE">{{ learning_path.items.count }} Inhalte</span>
<span data-lang="EN">{{ learning_path.items.count }} Items</span>
</div>
</div>
@ -30,7 +39,8 @@
<div class="np-card-ribbon np-hidden-desktop">
<i class="fa fa-book-open" aria-hidden="true"></i>
{{ learning_path.items.count }} Inhalte
<span data-lang="DE">{{ learning_path.items.count }} Inhalte</span>
<span data-lang="EN">{{ learning_path.items.count }} Items</span>
</div>
<div class="np-card-content-footer">
@ -41,19 +51,30 @@
href="{% route learning_path_enrollment, code: learning_path.enrollment_code %}"
{% endif %}
>
<span class="np-hidden-desktop">Weiter</span>
<span class="np-hidden-mobile">Weiter</span>
<span data-lang="DE">Weiter</span>
<span data-lang="EN">View</span>
</a>
{% if learning_path.enrolled? %}
<div class="np-card-content-progress
np-button-color">
{% if learning_path.completed? %}
Abgeschlossen
{% elsif learning_path.started? == false %}
0% abgeschlossen
{% else %}
{% t shared.progress, count: learning_path.progress %}
{% endif %}
<span data-lang="DE">
{% if learning_path.completed? %}
Abgeschlossen
{% elsif learning_path.started? == false %}
0% abgeschlossen
{% else %}
{% t shared.progress, count: learning_path.progress %}
{% endif %}
</span>
<span data-lang="EN">
{% if learning_path.completed? %}
Completed
{% elsif learning_path.started? == false %}
0% completed
{% else %}
{{learning_path.progress}}% cmopleted
{% endif %}
</span>
</div>
{% endif %}
</div>

View File

@ -7,9 +7,11 @@
<div class="np-card-content-subtitle">
{% case training_event.event_type %}
{% when "online" %}
Online Event
<span data-lang="DE">{% t shared.event_types, key: training_event.event_type %}</span>
<span data-lang="EN">Online Event</span>
{% when "in_person" %}
In-Person Event
<span data-lang="DE">{% t shared.event_types, key: training_event.event_type %}</span>
<span data-lang="EN">In-Person Event</span>
{% endcase %}
</div>
{% if training_event.description and training_event.description.size > 0 %}

View File

@ -2,13 +2,14 @@
<form action="{% route course_retake, id: course.id %}" method="POST">
{% form_authenticity_token %}
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
Training wiederholen
<span data-lang="DE">Training wiederholen</span>
<span data-lang="EN">Retake Course</span>
</button>
</form>
{% else %}
<a
class="np-top-button np-button-font-color np-button np-button-big {% if course.ribbon == 'Demnächst' %}disabled{% endif %}"
{% unless course.ribbon == 'Demnächst' %}
class="np-top-button np-button-font-color np-button np-button-big {% if course.ribbon == 'Demnächst' or course.ribbon == 'Coming soon' %}disabled{% endif %}"
{% unless course.ribbon == 'Demnächst' or course.ribbon == 'Coming soon' %}
{% if course.enrolled? %}
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
{% else %}
@ -17,18 +18,33 @@
{% endunless %}
>
{% assign course_ribbon = course.ribbon | downcase %}
{% if course_ribbon == "hochladen" %}
Hochladen
{% if course_ribbon == "hochladen" or course_ribbon == "upload" %}
<span data-lang="DE">Hochladen</span>
<span data-lang="EN">Upload</span>
{% else %}
{% if course.enrolled? == false %}
{% t shared.enroll %}
{% elsif course.started? == false %}
{% t shared.course.start, key: current_school.course_vocabulary %}
{% elsif course.completed? %}
{% t shared.course.view, key: current_school.course_vocabulary %}
{% else %}
{% t shared.continue %}
{% endif %}
<span data-lang="DE">
{% if course.enrolled? == false %}
{% t shared.enroll %}
{% elsif course.started? == false %}
{% t shared.course.start, key: current_school.course_vocabulary %}
{% elsif course.completed? %}
{% t shared.course.view, key: current_school.course_vocabulary %}
{% else %}
{% t shared.continue %}
{% endif %}
</span>
<span data-lang="EN">
{% if course.enrolled? == false %}
Enroll
{% elsif course.started? == false %}
Start
{% elsif course.completed? %}
Review
{% else %}
Continue
{% endif %}
</span>
{% endif %}
</a>
{% endif %}

View File

@ -1,5 +1,6 @@
<h3 class="np-card-heading">
Über diesen Kurs
<span data-lang="DE">Über diesen Kurs</span>
<span data-lang="EN">About this Course</span>
</h3>
<div class="np-card-text">
{{ course.full_description }}

View File

@ -1,6 +1,7 @@
<div class="np-course-outline np-card-content-divider">
<h3 class="np-card-heading">
Inhalt
<span data-lang="DE">Inhalt</span>
<span data-lang="EN">Content</span>
</h3>
<div class="np-course-outline-content">
<ol class="np-course-outline-content-section">
@ -19,44 +20,6 @@
<span class="section-status-icon"><i class="fas fa-check-circle"></i></span>
{% endif %}
</div>
{% comment %} <ol class="np-course-outline-content-activity">
{% for activity in section.activities %}
<li class="np-course-outline-content-activity-list">
<i
class="fas np-course-outline-content-activity-icon
{% if activity.completed? %}
fa-check-circle np-progress-color
{% else %}
fa-circle
{% endif %}"
{% if activity.completed? %}
aria-label="Chapter Complete"
{% else %}
aria-hidden="true"
{% endif %}
>
</i>
{% if activity.locked? %}
<i
class="far fa-lock-alt np-course-outline-content-activity-icon-locked"
aria-label="Chapter Locked"
></i>
{% include "course_activity_locked" %}
{% elsif course.enrolled? == false %}
{% include "course_activity_locked" %}
{% else %}
{% include "course_activity_unlocked", activity_classes: "np-course-outline-content-activity-link-completed" %}
{% endif %}
<div class="np-course-outline-content-activity-list-bar
{% if activity.completed? %} np-progress-background-color {% endif %}"></div>
</li>
{% endfor %}
</ol> {% endcomment %}
</li>
{% endfor %}
</ol>

View File

@ -4,7 +4,8 @@
</div>
<div class="np-top-cta-progress-content">
<div class="np-top-cta-progress-title np-text-title">
Lernfortschritt
<span data-lang="DE">Lernfortschritt</span>
<span data-lang="EN">Progress</span>
</div>
<div class="np-progress-bar-container">
<div
@ -14,7 +15,8 @@
</div>
<div class="np-top-cta-progress-text">
{% t shared.progress, count: course.progress %}
<span data-lang="DE">{% t shared.progress, count: course.progress %}</span>
<span data-lang="EN">{{course.progress}}% complete</span>
</div>
</div>
</div>

View File

@ -1,10 +1,6 @@
{% if courses.in_catalog.any? %}
<div class="category-header">
{%
include "filter_by_progress",
label: "Nach Fortschritt filtern:",
default_option: "Alle Kurse"
%}
{% include "filter_by_progress" %}
</div>
<div class="np-catalog-courses row row-with-thumbnails">
{% for course in courses.in_catalog %}
@ -16,14 +12,18 @@
{% endfor %}
{% unless is_on_the_job_video %}
{% assign progress_status = "jetzt-starten" %}
{% assign progress_status_en = "jetzt-starten" %}
{% assign progress_status_de = "not-started" %}
{% if course.progress > 0 and course.progress < 100 %}
{% assign progress_status = "angefangen" %}
{% assign progress_status_de = "angefangen" %}
{% assign progress_status_en = "in-progress" %}
{% elsif course.progress == 100 %}
{% assign progress_status = "abgeschlossen" %}
{% assign progress_status_de = "abgeschlossen" %}
{% assign progress_status_en = "completed" %}
{% endif %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content course-column {{progress_status}}">
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content course-column {{progress_status_de}} {{progress_status_en}}" data-lang="{{course.properties.course_language}}">
{% include "cards_course" with course %}
</div>
{% endunless %}
@ -169,11 +169,15 @@
function filterCourses(selectedItem) {
let selectedFilter = $(selectedItem).text().replace(" ", "-").toLowerCase();
console.log(selectedFilter)
$(".np-catalog-courses").find('.course-column').removeClass('np-hidden')
if (selectedFilter != "alle-kurse") {
$(".np-catalog-courses").find(`.course-column:not(.${selectedFilter})`).addClass('np-hidden')
if (selectedFilter == "0%-abgeschlossen" || selectedFilter == "0%-completed") {
selectedFilter = "not-started"
}
$(".np-catalog-courses").find('.course-column').removeClass('np-hidden')
if (selectedFilter != "alle-kurse" && selectedFilter != "all-courses") {
$(".np-catalog-courses").find(`.course-column:not(.${selectedFilter})`).addClass('np-hidden')
}
}
</script>

View File

@ -1,19 +1,43 @@
<div class="np-progress-filter-wrapper">
{% if label %}
<div class="np-progress-filter-label">{{ label }}</div>
{% endif %}
<div class="progress-filter filter-select-wrapper select-wrapper np-button" style="border-radius: 8px;">
<select >
<option selected disabled hidden>{{ default_option}}</option>
<div class="np-progress-filter-label">
<span data-lang="DE">Nach Fortschritt filtern:</span>
<span data-lang="EN">Filter by progress:</span>
</div>
<div class="progress-filter filter-select-wrapper select-wrapper np-button" style="border-radius: 8px;" data-lang="DE">
<select>
<option selected disabled hidden>Alle Kurse</option>
<option value="all">Alle Kurse</option>
<option value="not-started">0% abgeschlossen</option>
<option value="in-progress">Angefangen</option>
<option value="completed">Abgeschlossen</option>
</select>
</div>
<div class="progress-filter filter-select-wrapper select-wrapper np-button" style="border-radius: 8px;" data-lang="EN">
<select>
<option selected disabled hidden>All Courses</option>
<option value="all">All Courses</option>
<option value="not-started">0% completed</option>
<option value="in-progress">In progress</option>
<option value="completed">Completed</option>
</select>
</div>
</div>
<style>
body[data-lang='EN'] .progress-filter[data-lang='DE'],
body[data-lang='DE'] .progress-filter[data-lang='EN'] {
display: none !important;
}
body[data-lang='EN'] .progress-filter[data-lang='EN'],
body[data-lang='DE'] .progress-filter[data-lang='DE'] {
display: block !important;
}
.progress-filter[data-lang='DE'] {display:block;}
.progress-filter[data-lang='EN'] {display:none;}
.np-progress-filter-label {
color: rgba(0, 0, 0, 0.5);
padding-right: 7px;

View File

@ -4,7 +4,7 @@
{% if group.name == "All Users" or group.id == "6331d115-ea74-418a-99b2-af5c81208fe1" %}
{% assign is_in_authenticated_group = true %}
{% endif %}
{% endfor %}
{% endfor %}
{% if current_person.email contains "+preview" %}
{% assign is_in_authenticated_group = true %}
@ -21,6 +21,7 @@
<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
@ -39,6 +40,15 @@
</button>
{% endif %}
</div>
<div class="language-dropdown-wrapper np-hidden-desktop">
<div class="header-language-selection">
{{current_person.properties.user_language}}
</div>
<ul class="languages-dropdown">
<li data-lang="DE" onclick="changeLanguage(this.getAttribute('data-lang'))">Deutsch</li>
<li data-lang="EN" onclick="changeLanguage(this.getAttribute('data-lang'))">English</li>
</ul>
</div>
{% if current_school.logo_url %}
<h1 class="np-header-logo">
<a href="/app/catalog">
@ -58,22 +68,29 @@
<div class="np-hidden-mobile np-header-desktop-nav">
<ul class="np-header-desktop-nav-list">
<li class="np-header-desktop-nav-item">
<a href="/app/catalog" class="np-header-desktop-nav-link trainings-link">Trainings</a>
<a href="/app/catalog" class="np-header-desktop-nav-link trainings-link">
<span data-lang="DE">Trainings</span>
<span data-lang="EN">Trainings</span>
</a>
</li>
<li class="np-header-desktop-nav-item">
<a href="/app/learning_paths" class="np-header-desktop-nav-link learning-paths-link">Lernwege</a>
<a href="/app/learning_paths" class="np-header-desktop-nav-link learning-paths-link">
<span data-lang="DE">Lernwege</span>
<span data-lang="EN">Learning Paths</span>
</a>
</li>
<li class="np-header-desktop-nav-item">
<a href="/app/zertifikate" class="np-header-desktop-nav-link certs-link">Auszeichnungen</a>
<a href="/app/zertifikate" class="np-header-desktop-nav-link certs-link">
<span data-lang="DE">Auszeichnungen</span>
<span data-lang="EN">Awards</span>
</a>
</li>
<li class="np-header-desktop-nav-item">
<a href="/app/on-the-job" class="np-header-desktop-nav-link videos-link">On-The-Job Videos</a>
<a href="/app/on-the-job" class="np-header-desktop-nav-link videos-link">
<span data-lang="DE">On-The-Job Videos</span>
<span data-lang="EN">On-The-Job Videos</span>
</a>
</li>
{% comment %}
<li class="np-header-desktop-nav-item">
<a href="/app/training_events" class="np-header-desktop-nav-link events-link">
Veranstaltungen</a>
</li> {% endcomment %}
{% for website_navigation in navigations.header_navigations_external %}
<li class= "np-header-desktop-nav-item">
<a
@ -87,7 +104,15 @@
{% endfor %}
</ul>
</div>
<div class="language-dropdown-wrapper np-hidden-mobile">
<div class="header-language-selection">
{{current_person.properties.user_language}}
</div>
<ul class="languages-dropdown">
<li data-lang="DE" onclick="changeLanguage(this.getAttribute('data-lang'))">Deutsch</li>
<li data-lang="EN" onclick="changeLanguage(this.getAttribute('data-lang'))">English</li>
</ul>
</div>
{% if current_person.signed_in? %}
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
<form action="{% route search %}" method="get" data-test="desktop-search">
@ -138,7 +163,8 @@
class="np-header-avatar-tooltip-navigation-link np-danger"
href="{% route logout %}"
>
{% t .sign_out %}
<span data-lang="DE">{% t .sign_out %}</span>
<span data-lang="DE">Logout</span>
</a>
</nav>
</div>
@ -158,12 +184,15 @@
<div class="np-header-mobile-menu-content np-hidden">
<div class="np-header-mobile-menu-content-nav">
<a href="/app/catalog" class="np-header-mobile-menu-content-button">Trainings</a>
<a href="/app/learning_paths" class="np-header-mobile-menu-content-button">Lernwege</a>
<a href="/app/zertifikate" class="np-header-mobile-menu-content-button">Auszeichnungen</a>
<a href="/app/learning_paths" class="np-header-mobile-menu-content-button">
<span data-lang="DE">Lernwege</span>
<span data-lang="EN">Learning Paths</span>
</a>
<a href="/app/zertifikate" class="np-header-mobile-menu-content-button">
<span data-lang="DE">Auszeichnungen</span>
<span data-lang="EN">Awards</span>
</a>
<a href="/app/on-the-job" class="np-header-mobile-menu-content-button">On-The-Job Videos</a>
{% comment %}
<a href="/app/training_events" class="np-header-mobile-menu-content-button">Veranstaltungen</a>
{% endcomment %}
<form
class="np-header-search"
data-test="mobile-search"
@ -228,6 +257,10 @@ body.mobile-menu-open .np-header {
color: #fff;
}
.np-header-mobile-menu-nav {
position:relative;
}
.np-header-mobile-menu-content {
background-color: #3e1191;
top:66px;
@ -337,6 +370,73 @@ body.mobile-menu-open .np-header {
color: #E52242;
}
/* LANGUAGE DROPDOWN */
.language-dropdown-wrapper {
position:relative;
}
.header-language-selection {
display: flex;
gap: 8px;
padding:20px;
font-size:20px;
cursor:pointer;
color:#fff;
align-items:center;
position:relative;
margin-right:8px;
}
.header-language-selection:after {
content: "\f078";
font-family: "Font Awesome 5 Pro";
position: absolute;
font-size: 14px;
top: 50%;
right: 4px;
color: #fff;
transition: transform 0.2s;
transform: translateY(-50%) rotate(0deg);
}
.header-language-selection.active:after {
transform: translateY(-50%) rotate(180deg);
}
.languages-dropdown {
position:absolute;
top: 66px;
left:50%;
transform: translateX(-50%);
background-color: #3e1191;
color:#fff;
margin:0;
height:0;
opacity:0;
min-width:170px;
list-style:none;
transition: opacity 0.2s;
z-index: 1;
}
.languages-dropdown:not(.show) {
visibility: hidden;
}
.languages-dropdown.show {
height:auto;
opacity:1;
padding:12px;
}
.languages-dropdown li {
cursor: pointer;
width:100%;
padding: 3px;
font-size:16px;
border-radius:3px;
text-align:center;
border: 1px solid #fff;
margin-bottom:10px;
}
/* END LANGUAGE DROPDOWN */
@media (min-width:768px) {
.np-header-search-input {
opacity: unset;
@ -348,6 +448,10 @@ body.mobile-menu-open .np-header {
right: unset;
left: 0.75rem;
}
.header-language-selection {
margin-right:20px;
}
}
</style>
@ -404,4 +508,95 @@ function detectScroll() {
}
}
</script>
// Languages dropdown hover effect
$(".header-language-selection").click((e) => {
if ($(e.target).hasClass("active")) {
$(".languages-dropdown").removeClass('show');
$(e.target).removeClass('active');
} else {
$(".languages-dropdown").addClass('show');
$(e.target).addClass('active');
}
})
function changeLanguage(lang) {
const userPropertyLang = '{{current_person.properties.user_language}}'
const localStorageLang = localStorage.getItem('lang', lang)
console.log(`Selected language: ${lang} | language set in property: ${userPropertyLang} | language in local storage: ${localStorageLang}`)
// hide dropdown
$(".languages-dropdown").removeClass('show');
$(".header-language-selection").removeClass("active")
// if no local storage,
if (localStorageLang == null) {
localStorage.setItem('lang', lang);
}
if (userPropertyLang != lang) {
$(".header-language-selection").text(lang);
$("body").attr("data-lang", lang)
// make workato call here
setLanguageWorkflow(lang)
} else {
$(".header-language-selection").text(lang);
$("body").attr("data-lang", lang)
}
}
$(document).ready(function() {
console.log('Property {{current_person.properties.user_language}}')
console.log(localStorage.getItem('lang'))
const userPropertyLang = '{{current_person.properties.user_language}}'
const localStorageLang = localStorage.getItem('lang')
if (localStorageLang == null) {
console.log("no local storage, use property to set lang")
$("body").attr("data-lang", userPropertyLang)
$(".header-language-selection").text(userPropertyLang );
} else {
if (localStorageLang == userPropertyLang) {
console.log("delete local storage and use property lang")
$("body").attr("data-lang", userPropertyLang)
$(".header-language-selection").text(userPropertyLang );
localStorage.removeItem('lang');
} else {
console.log("use local storage lang")
$("body").attr("data-lang", localStorageLang)
$(".header-language-selection").text(localStorageLang );
}
}
})
function setLanguageWorkflow(lang) {
console.log("calling workato workflow")
var data = {
learner_uuid : '{{current_person.id}}',
language : lang
};
const schoolID = '{{current_school.id}}'
let workatoEndpoint = ""
if (schoolID == "d4f9d06b-bbe9-4e0a-85ee-eadc10f17914") {
workatoEndpoint = 'https://webhooks.workato.com/webhooks/rest/ccd1cbb2-59bc-4590-852a-a0d217d198b1/user-changes-language'
} else if (schoolID == "6e96bbdd-7818-4920-b79c-e46132939929") {
workatoEndpoint = 'https://webhooks.workato.com/webhooks/rest/0cb722cd-39ae-4754-9c37-380e6672cdbf/user-changes-language'
}
$.ajax({
type : 'POST',
url : workatoEndpoint,
data: JSON.stringify(data),
success:function (data) {
console.log(data);
},
error: function(xhr, status, error) {
console.log(error)
}
});
}
</script>

View File

@ -23,7 +23,8 @@
<img src="{{lp_image_not_cropped}}">
{% unless course.optional? %}
<div class="np-card-ribbon">
Erforderlich
<span data-lang="DE">Erforderlich</span>
<span data-lang="EN">Required</span>
</div>
{% else %}
<div class="np-card-ribbon">
@ -50,30 +51,52 @@
<div class="outline-card__icon-container outline-card__icon-link np-hidden-desktop">
{% if course.optional? %}
{% if course.name == "Servicetraining" or course.name == "Kassentraining" %}
{% if course.progress == 0 %}
<span data-lang="DE">
{% if course.progress == 0 %}
Start
{% elsif course.progress > 0 and course.progress < 100 %}
Fortsetzen
{% else %}
Anzeigen
{% endif %}
</span>
<span data-lang="EN">
{% if course.progress == 0 %}
Start
{% elsif course.progress > 0 and course.progress < 100 %}
Continue
{% else %}
Review
{% endif %}
</span>
{% else %}
<span data-lang="DE">Heft öffnen</span>
<span data-lang="EN">Open booklet</span>
{% endif %}
{% else %}
<span data-lang="DE">
{% if course.progress == 0 %}
Start
{% elsif course.progress > 0 and course.progress < 100 %}
Fortsetzen
{% else %}
Anzeigen
{% endif %}
{% else %}
Heft öffnen
{% endif %}
{% else %}
{% if course.progress == 0 %}
Start
{% elsif course.progress > 0 and course.progress < 100 %}
Fortsetzen
{% else %}
Anzeigen
{% endif %}
</span>
<span data-lang="EN">
{% if course.progress == 0 %}
Start
{% elsif course.progress > 0 and course.progress < 100 %}
Continue
{% else %}
Review
{% endif %}
</span>
{% endif %}
</div>
{% endif %}
</div>
{% if course.instructors and course.instructors.size > 0 %}
<div class="np-card-content-subtitle">
{{ course.instructors }}
@ -81,11 +104,20 @@
{% endif %}
<div class="np-card-content-footer">
<div class="np-card-content-progress">
{% if course.completed? %}
Vollständig
{% else %}
{{ course.progress }}% Vollständig
{% endif %}
<span data-lang="DE">
{% if course.completed? %}
Vollständig
{% else %}
{{ course.progress }}% Vollständig
{% endif %}
</span>
<span data-lang="EN">
{% if course.completed? %}
Complete
{% else %}
{{ course.progress }}% complete
{% endif %}
</span>
</div>
<div class="np-hidden-desktop">
{% if course.completed? %}
@ -100,25 +132,47 @@
<div class="outline-card__icon-container outline-card__icon-link np-hidden-desktop">
{% if course.optional? %}
{% if course.name == "Servicetraining" or course.name == "Kassentraining" %}
{% if course.progress == 0 %}
Start
{% elsif course.progress > 0 and course.progress < 100 %}
Fortsetzen
<span data-lang="DE">
{% if course.progress == 0 %}
Start
{% elsif course.progress > 0 and course.progress < 100 %}
Fortsetzen
{% else %}
Anzeigen
{% endif %}
</span>
<span data-lang="EN">
{% if course.progress == 0 %}
Start
{% elsif course.progress > 0 and course.progress < 100 %}
Continue
{% else %}
Review
{% endif %}
</span>
{% else %}
Anzeigen
<span data-lang="DE">Heft öffnen</span>
<span data-lang="EN">Open booklet</span>
{% endif %}
{% else %}
Heft öffnen
{% endif %}
{% else %}
{% if course.progress == 0 %}
Start
{% elsif course.progress > 0 and course.progress < 100 %}
Fortsetzen
{% else %}
Anzeigen
{% endif %}
<span data-lang="DE">
{% if course.progress == 0 %}
Start
{% elsif course.progress > 0 and course.progress < 100 %}
Fortsetzen
{% else %}
Anzeigen
{% endif %}
</span>
<span data-lang="EN">
{% if course.progress == 0 %}
Start
{% elsif course.progress > 0 and course.progress < 100 %}
Continue
{% else %}
Review
{% endif %}
</span>
{% endif %}
</div>
{% endif %}
@ -139,29 +193,51 @@
<div class="outline-card__icon-container outline-card__icon-link np-hidden-mobile">
{% if course.optional? %}
{% if course.name == "Servicetraining" or course.name == "Kassentraining" %}
{% if course.progress == 0 %}
<span data-lang="DE">
{% if course.progress == 0 %}
Start
{% elsif course.progress > 0 and course.progress < 100 %}
Fortsetzen
{% else %}
Anzeigen
{% endif %}
</span>
<span data-lang="EN">
{% if course.progress == 0 %}
Start
{% elsif course.progress > 0 and course.progress < 100 %}
Continue
{% else %}
Review
{% endif %}
</span>
{% else %}
Heft öffnen
<span data-lang="DE">Heft öffnen</span>
<span data-lang="EN">Open booklet</span>
{% endif %}
{% else %}
{% if course.progress == 0 %}
Start
{% elsif course.progress > 0 and course.progress < 100 %}
Fortsetzen
{% else %}
Anzeigen
{% endif %}
<span data-lang="DE">
{% if course.progress == 0 %}
Start
{% elsif course.progress > 0 and course.progress < 100 %}
Fortsetzen
{% else %}
Anzeigen
{% endif %}
</span>
<span data-lang="EN">
{% if course.progress == 0 %}
Start
{% elsif course.progress > 0 and course.progress < 100 %}
Continue
{% else %}
Review
{% endif %}
</span>
{% endif %}
</div>
{% endif %}
</div>
</div>
</{{ element_type }}>
</div>

View File

@ -1,7 +1,8 @@
<div class="np-top-cta">
<div class="np-top-cta-progress-content">
<div class="np-top-cta-progress-title np-text-title">
Lernfortschritt
<span data-lang="DE">Lernfortschritt</span>
<span data-lang="EN">Study progress</span>
</div>
<div class="np-progress-bar-container">
<div
@ -11,11 +12,21 @@
</div>
<div class="np-top-cta-progress-text">
{% if learning_path.progress > 0 %}
{% t shared.progress, count: learning_path.progress %}
{% else %}
nicht angefangen
{% endif %}
<span data-lang="DE">
{% if learning_path.progress > 0 %}
{% t shared.progress, count: learning_path.progress %}
{% else %}
nicht angefangen
{% endif %}
</span>
<span data-lang="EN">
{% if learning_path.progress > 0 %}
{{learning_path.progress}}% complete
{% else %}
not started
{% endif %}
</span>
</div>
</div>
</div>

View File

@ -67,7 +67,8 @@
</div>
</div>
<div class="register-button">
Registrieren
<span data-lang="DE">Registrieren</span>
<span data-lang="EN">Register</span>
</div>
</div>
@ -95,8 +96,7 @@
<div class="np-learning-path-outline-content">
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
<div class="np-learning-path-outline-caption">{{ training_session.caption }}</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -6,8 +6,9 @@
data-toggle-outside
data-toggle-target-next
type="button"
>
{% t .add_to_calendar %}
>
<span data-lang="DE">{% t .add_to_calendar %}</span>
<span data-lang="EN">Add to calendar</span>
<i class="fas fa-chevron-down dropdown-calendar-button-chevron" aria-hidden="true"></i>
</button>
@ -26,8 +27,9 @@
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
href="{{ training_session.outlook_calendar_url }}"
target="_blank"
>
{% t .outlook_calendar %}
>
<span data-lang="DE">{% t .outlook_calendar %}</span>
<span data-lang="EN">Calendar for Outlook.com</span>
</a>
</li>
<li class="dropdown-calendar-item">

View File

@ -10,11 +10,13 @@
{% if features.training_events_google_calendar? %}
{% include "training_session_calendars" %}
<button type="submit" class="np-button np-button-big np-button-secondary">
{% t .unregister %}
<span data-lang="DE">{% t .unregister %}</span>
<span data-lang="EN">Unregister</span>
</button>
{% else %}
<button type="submit" class="np-button-font-color np-button np-button-big">
{% t .unregister %}
<button type="submit" class="np-button-font-color np-button np-button-big">
<span data-lang="DE">{% t .unregister %}</span>
<span data-lang="EN">Unregister</span>
</button>
{% endif %}
@ -23,7 +25,8 @@
{% if training_session.not_registered? %}
<button type="submit" class="np-top-button np-button np-button-big">
{% t .register %}
<span data-lang="DE">{% t .register %}</span>
<span data-lang="EN">Register</span>
</button>
{% endif %}
</form>

View File

@ -14,10 +14,12 @@
{% case training_event.event_type %}
{% when "online" %}
<i class="fa fa-laptop np-training-session-icon" aria-hidden="true"></i>
Online Event
<span data-lang="DE">{% t shared.event_types, key: training_event.event_type %}</span>
<span data-lang="EN">Online Event</span>
{% when "in_person" %}
<i class="fa fa-users-class np-training-session-icon" aria-hidden="true"></i>
In-Person Event
<span data-lang="DE">{% t shared.event_types, key: training_event.event_type %}</span>
<span data-lang="EN">In-Person Event</span>
{% endcase %}
</div>
@ -48,7 +50,8 @@
<div class="col-sm-6 col-md-12">
<div class="np-training-session-sessions-title">
{% t shared.more_sessions %}
<span data-lang="DE">{% t shared.more_sessions %}</span>
<span data-lang="EN">More sessions</span>
</div>
{% if training_event.sessions and training_event.sessions.size > 1 %}
{% include "training_session_more_sessions" %}
@ -59,7 +62,8 @@
class="np-zero-state-training-sessions"
/>
<div class="np-training-session-zero-state-text">
{% t .empty %}
<span data-lang="DE">{% t .empty %}</span>
<span data-lang="EN">There are currently no other sessions for this event.</span>
</div>
</div>
{% endif %}

View File

@ -0,0 +1,39 @@
{% if current_session.id != session.id %}
{% assign training_session_time = session.time_period | split: " - " %}
{% assign start_time = training_session_time | slice: 0 | join: "" %}
{% if start_time contains "PM" %}
{% assign start_time = start_time | remove: " PM" %}
{% assign split_start_time = start_time | split: ":" %}
{% assign start_time_hour = split_start_time | slice: 0 | join: "" | abs | plus: 12 %}
{% assign start_time_mins = split_start_time | slice: 1 | join: "" %}
{% elsif start_time contains "AM" %}
{% assign start_time = start_time | remove: " AM" %}
{% endif %}
{% assign end_time = training_session_time | slice: 1 | join: "" %}
{% if end_time contains "PM" %}
{% assign end_time = end_time | remove: " PM" %}
{% assign split_end_time = end_time | split: ":" %}
{% assign end_time_hour = split_end_time | slice: 0 | join: "" | abs | plus: 12 %}
{% assign end_time_mins = split_end_time | slice: 1 | join: "" %}
{% elsif end_time contains "AM" %}
{% assign end_time = end_time | remove: " AM" %}
{% endif %}
<a
class="np-training-session-tile"
href="{% route training_session, id: session.id %}"
>
<i class="far fa-calendar-star np-training-session-tile-icon"></i>
<div>
<div class="np-training-session-tile-date">
{{ session.month }} {{ session.day }}, {{ session.year }}
</div>
<div class="np-training-session-tile-time">
{{start_time_hour}}:{{start_time_mins}} - {{end_time_hour}}:{{end_time_mins}} Uhr
</div>
</div>
<i class="fas fa-chevron-right np-training-session-tile-chevron"></i>
</a>
{% endif %}

View File

@ -1,8 +1,12 @@
{% include "header" %}
<main class="np-main np-courses np-subpage-container">
<h1 class="np-resource-title">
Deine Trainings für mehr Jobauswahl
<span data-lang="DE">Deine Trainings für mehr Jobauswahl</span>
<span data-lang="EN">Your training for more job choices</span>
</h1>
<div class="np-resource-subtitle">
<span data-lang="EN">Switch your app to German to find all training and materials (some jobs require a certain level of German).</span>
</div>
{% comment %} <br>
{% capture label %}{% t shared.filters.by_category %}{% endcapture %}
{% if courses.in_catalog.any? %}

View File

@ -5,7 +5,7 @@
Zenjob Testing" or group.id == "940a5d24-32af-45f1-8ed4-8a6b4689d9c9" %}
{% assign isAuthenticatedUser = true %}
{% endif %}
{% endfor %}
{% endfor %}
{% if current_person.email contains "+preview" %}
{% assign isAuthenticatedUser = true %}
@ -17,7 +17,7 @@
<div class="np-homepage-hero-content">
<div class="np-homepage-headline" style="color: #fff">
{{ homepage.headline }}
</div>
</div>
<div class="np-homepage-subheadline">
Entschuldigung! Es scheint, dass deine E-Mail-Adresse {{current_person.email}} nicht den richtigen Zugang erhalten hat. Es kann nach der Registrierung bis zu 24h dauern, bis du freigeschalten wirst. Sollte das Problem danach weiterhin bestehen, wende dich an talents@zenjob.com, um den Zugang zu den vollständigen Lerninhalten anzufragen.
</div>
@ -34,21 +34,31 @@
<div class="np-homepage-content">
<div class="np-homepage-hero-content">
<div class="np-homepage-headline" style="color: #fff">
{{ homepage.headline }}
</div>
<span data-lang="DE">{{ homepage.headline }}</span>
<span data-lang="EN">Welcome to our Zenjob Online Campus!</span>
</div>
<div class="np-homepage-subheadline">
<span>Hallo {{ current_person.first_name }}, hier bereiten wir dich auf alles vor, was du für deine erste Schicht als
<span data-lang="DE">Hallo {{ current_person.first_name }}, hier bereiten wir dich auf alles vor, was du für deine erste Schicht als
<div class="dropdown homepage-content-dropdown">
<button class="dropbtn">Job auswählen</button>
<div class="dropdown-content">
<a href="#kassierer-in" data-category="087ea56d-888b-4e0f-af1f-68627318c841">Kassierer*in</a>
<a href="#kellner-in" data-category="9be55234-19c5-4df4-bd1d-03e93f0faf83">Kellner*in</a>
<a href="#warenverräumer-in" data-category="6580e10e-eacf-402d-a330-51d202721cce">Warenverräumer*in</a>
{% comment %} <a href="#" data-category="a63019c7-0a46-40bd-bc1b-935c887a4380">Logistikhelfer*in</a> {% endcomment %}
<a href="#kassierer-in" data-category-name="Kassierer/in">Kassierer*in</a>
<a href="#kellner-in" data-category-name="Kellner/in">Kellner*in</a>
<a href="#warenverräumer-in" data-category-name="Warenverräumer/in">Warenverräumer*in</a>
</div>
</div>
wissen musst.
</span>
<span data-lang="EN">Hello {{ current_person.first_name }}, here we prepare you for everything you need to know for your first shift as a
<div class="dropdown homepage-content-dropdown">
<button class="dropbtn">select job</button>
<div class="dropdown-content">
<a href="#kassierer-in" data-category-name="Kassierer/in">Cashier</a>
<a href="#kellner-in" data-category-name="Kellner/in">Waitress</a>
<a href="#warenverräumer-in" data-category-name="Warenverräumer/in">Goods mover</a>
</div>
</div>
</span>
</div>
</div>
@ -56,10 +66,10 @@
{% for course in catalog_courses %}
{% if course.properties.homepage_course %}
{% for cat in course.categories %}
{% if cat.id == "087ea56d-888b-4e0f-af1f-68627318c841" or cat.id == "9be55234-19c5-4df4-bd1d-03e93f0faf83" or cat.id == "6580e10e-eacf-402d-a330-51d202721cce" or cat.id == "a63019c7-0a46-40bd-bc1b-935c887a4380" %}
<div class="col-xs-12 col-sm-6 col-md-3 homepage-card-column" style="display:none;" data-category="{{cat.id}}">
{% if cat.id == "087ea56d-888b-4e0f-af1f-68627318c841" or cat.id == "9be55234-19c5-4df4-bd1d-03e93f0faf83" or cat.id == "6580e10e-eacf-402d-a330-51d202721cce" or cat.id == "a63019c7-0a46-40bd-bc1b-935c887a4380" or cat.name == "Warenverräumer/in" or cat.name == "Kellner/in" or cat.name == "Kassierer/in" %}
<div class="col-xs-12 col-sm-6 col-md-3 homepage-card-column" style="display:none;" data-category="{{cat.id}}" data-category-name="{{cat.name}}" data-lang="{{course.properties.course_language}}">
<a href="{% route course, id: course.id %}" class="homepage-card">
<div class="homepage-card-content">
<div class="homepage-card-content">
<div class="homepage-card-img">
<img src="https://s3.amazonaws.com/static.northpass.com/zenjob/FINAL+-+Zenjob+(Purple+Cashier).png" alt="">
</div>
@ -75,11 +85,17 @@
{% endfor %}
{% for learning_path in learning_paths.available %}
{% assign learning_path_lang = "DE" %}
{% for learning_path_cat in learning_path.categories %}
{% if learning_path_cat.id == "087ea56d-888b-4e0f-af1f-68627318c841" or learning_path_cat.id == "9be55234-19c5-4df4-bd1d-03e93f0faf83" or learning_path_cat.id == "6580e10e-eacf-402d-a330-51d202721cce" or learning_path_cat.id == "a63019c7-0a46-40bd-bc1b-935c887a4380" %}
<div class="col-xs-12 col-sm-6 col-md-3 homepage-card-column" style="display:none;" data-category="{{learning_path_cat.id}}">
{% if learning_path_cat.name == "English" %}
{% assign learning_path_lang = "EN" %}
{% endif %}
{% endfor %}
{% for learning_path_cat in learning_path.categories %}
{% if learning_path_cat.id == "087ea56d-888b-4e0f-af1f-68627318c841" or learning_path_cat.id == "9be55234-19c5-4df4-bd1d-03e93f0faf83" or learning_path_cat.id == "6580e10e-eacf-402d-a330-51d202721cce" or learning_path_cat.id == "a63019c7-0a46-40bd-bc1b-935c887a4380" or learning_path_cat.name == "Warenverräumer/in" or learning_path_cat.name == "Kellner/in" or learning_path_cat.name == "Kassierer/in" %}
<div class="col-xs-12 col-sm-6 col-md-3 homepage-card-column" style="display:none;" data-category="{{learning_path_cat.id}}" data-category-name="{{learning_path_cat.name}}" data-lang="{{learning_path_lang}}">
<a href="{% route learning_path, id: learning_path.id %}" class="homepage-card">
<div class="homepage-card-content">
<div class="homepage-card-content">
<div class="homepage-card-img">
<img src="https://s3.amazonaws.com/static.northpass.com/zenjob/opened-book.png" alt="">
</div>
@ -100,9 +116,9 @@
{% endif %}
<style>
.np-header {
background: transparent;
}
main.np-homepage {
@ -323,33 +339,55 @@
</style>
<script>
$("document").ready(function() {
if (window.location.hash) {
filterCoursesByHash(window.location.hash)
} else {
//$(".homepage-card-column[data-category='087ea56d-888b-4e0f-af1f-68627318c841']").show()
if ($("body").attr("data-lang") == "DE") {
$(".homepage-card-column[data-category-name='Kassierer/in'][data-lang='DE']").show()
} else if ($("body").attr("data-lang") == "EN") {
$(".homepage-card-column[data-category-name='Kassierer/in'][data-lang='EN']").show()
}
if (window.location.hash) {
filterCoursesByHash(window.location.hash)
} else {
$(".homepage-card-column[data-category='087ea56d-888b-4e0f-af1f-68627318c841']").show()
}
}
})
$(".dropdown-content a").click(function() {
$(".dropbtn").text($(this).text())
filterCoursesBySelectedJob($(this))
})
function filterCoursesBySelectedJob(selection) {
const selectedCategoryId = $(selection).data("category")
const selectedCategory = $(selection).data("category-name")
$(".homepage-card-column").hide()
$(`.homepage-card-column[data-category='${selectedCategoryId}']`).show()
if ($("body").attr("data-lang") == "DE") {
$(`.homepage-card-column[data-category-name='${selectedCategory}'][data-lang='DE']`).show()
} else if ($("body").attr("data-lang") == "EN") {
$(`.homepage-card-column[data-category-name='${selectedCategory}'][data-lang='EN']`).show()
}
}
function filterCoursesByHash(urlHash) {
$(".dropdown-content a").each(function() {
if ($(this).attr('href') == urlHash) {
$(".dropbtn").text($(this).text())
filterCoursesBySelectedJob($(this))
}
})
if ($("body").attr("data-lang") == "DE") {
$("span[data-lang='DE'] .dropdown-content a").each(function() {
if ($(this).attr('href') == urlHash) {
$("span[data-lang='DE'] .dropbtn").text($(this).text())
filterCoursesBySelectedJob($(this))
}
})
} else if ($("body").attr("data-lang") == "EN") {
$("span[data-lang='EN'] .dropdown-content a").each(function() {
if ($(this).attr('href') == urlHash) {
$("span[data-lang='EN'] .dropbtn").text($(this).text())
filterCoursesBySelectedJob($(this))
}
})
}
}
</script>

View File

@ -5,6 +5,20 @@
{% include "footer" %}
<style>
body[data-lang='EN'] .card-learning-path[data-lang='DE'],
body[data-lang='DE'] .card-learning-path[data-lang='EN'] {
display: none !important;
}
body[data-lang='EN'] .card-learning-path[data-lang='EN'],
body[data-lang='DE'] .card-learning-path[data-lang='DE'] {
display: block !important;
}
.card-learning-path[data-lang='DE'] {display:block;}
.card-learning-path[data-lang='EN'] {display:none;}
.np-learning-paths {
background: #8B78FA;
}

View File

@ -10,8 +10,8 @@
<div class="np-catalog-courses row row-with-thumbnails">
{% for course in courses.in_catalog %}
{% for cat in course.categories %}
{% if cat.id == "40b1f3d7-6faf-4d54-a74f-92d330831728" %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% if cat.id == "40b1f3d7-6faf-4d54-a74f-92d330831728" or cat.name == "On-The-Job" %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content video-column" data-lang="{{course.properties.course_language}}">
{% include "cards_course" with course %}
</div>
{% assign num_of_video_courses = num_of_video_courses | plus: 1 %}

View File

@ -59,6 +59,33 @@
font-style: normal;
}
body[data-lang='EN'] span[data-lang='DE'],
body[data-lang='DE'] span[data-lang='EN'],
body[data-lang='EN'] .course-column[data-lang='DE'],
body[data-lang='DE'] .course-column[data-lang='EN'],
body[data-lang='EN'] .video-column[data-lang='DE'],
body[data-lang='DE'] .video-column[data-lang='EN'] {
display: none !important;
}
body[data-lang='EN'] span[data-lang='EN'],
body[data-lang='DE'] span[data-lang='DE'],
body[data-lang='EN'] .course-column[data-lang='EN']:not(.np-hidden),
body[data-lang='DE'] .course-column[data-lang='DE']:not(.np-hidden),
body[data-lang='EN'] .video-column[data-lang='EN'],
body[data-lang='DE'] .video-column[data-lang='DE'] {
display: inline-block !important;
}
span[data-lang='DE'],
.course-column[data-lang='DE'],
.video-column[data-lang='DE'] {display:inline-block;}
span[data-lang='EN'],
.course-column[data-lang='EN'],
.video-column[data-lang='EN'] {display:none;}
/* ------------ Northpass Style Overrides ------------ */
/* ------ Learner/Admin Mode Button ------ */

View File

@ -2,10 +2,12 @@
<main class="np-main np-training-events np-subpage-container">
<div class="page__header-wrapper">
<h1 class="np-resource-title">
{% t .title %}
<span data-lang="DE">{% t .title %}</span>
<span data-lang="EN">Training Events</span>
</h1>
<div class="np-resource-subtitle">
{% t .subtitle %}
<span data-lang="DE">{% t .subtitle %}</span>
<span data-lang="EN">Discover face-to-face and online events that help you maximize your learning success</span>
</div>
</div>
{% include "training_events_index" %}

View File

@ -1,7 +1,9 @@
{% include "header" %}
<main class="np-main np-certificates np-subpage-container">
<h1 class="np-resource-title">
{{custom_page.headline}}
<span data-lang="DE">{{custom_page.headline}}</span>
<span data-lang="EN">Awards</span>
</h1>
<div class="np-resource-subtitle"></div>
@ -10,7 +12,7 @@
{% assign number_of_badges = 0 %}
{% for course in courses.in_catalog %}
{% unless course.properties.course_badge == "none" or course.properties.course_badge == "" %}
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="col-xs-12 col-sm-6 col-md-3 badge-column" data-lang="{{course.properties.course_language}}">
<a href="{% route course, id: course.id %}" class="badge-container">
<img src="{{course.properties.course_badge}}" class="{% if course.progress < 100 %}inactive{% endif %}" />
@ -32,6 +34,19 @@
{% include "footer" %}
<style>
body[data-lang='EN'] .badge-column[data-lang='DE'],
body[data-lang='DE'] .badge-column[data-lang='EN'] {
display: none !important;
}
body[data-lang='EN'] .badge-column[data-lang='EN'],
body[data-lang='DE'] .badge-column[data-lang='DE'] {
display: block !important;
}
.badge-column[data-lang='DE'] {display:block;}
.badge-column[data-lang='EN'] {display:none;}
.np-resource-title {
text-transform:none;
}

BIN
Scripts/.DS_Store vendored

Binary file not shown.