Forgot to save yesterday. Mostly data and jupyter changes. Some notes.
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.
@ -0,0 +1,74 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="card__image" style="background-image: url({{ course.image_url }})">
|
||||
{% unless course.properties.course_image == "NULL" or course.properties.course_image == "" %}
|
||||
<img class="course-img-static" src="{{course.properties.course_image}}" />
|
||||
{% endunless %}
|
||||
{% if course.ribbon and course.ribbon.size > 0 %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
{% if course.instructor_names and course.instructor_names.size > 0 %}
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if course.short_description and course.short_description.size > 0 %}
|
||||
<div class="np-card-content-description">
|
||||
{{ course.short_description | split: " --- " | last }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-card-content-footer">
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
|
||||
{% if course.name == "Gesundheitszeugnis" or course.id == "061147ec-5a19-4bda-b439-1ba9bcd24fe9" %}
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
Hochladen
|
||||
</a>
|
||||
{% else %}
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if course.enrolled? %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% if course.completed? %}
|
||||
Abgeschlossen
|
||||
{% elsif course.started? == false %}
|
||||
0% abgeschlossen
|
||||
{% else %}
|
||||
{% comment %} {{ course.progress }}% Abgeschlossen {% endcomment %}
|
||||
{% t shared.progress, count: course.progress %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.card__image {
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.course-img-static {
|
||||
max-width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,68 @@
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<div class="image-wrapper">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
<div class="np-card-ribbon np-hidden-mobile">
|
||||
<i class="fa fa-book-open" aria-hidden="true"></i>
|
||||
{{ learning_path.items.count }} Inhalte
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-text-wrapper">
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
|
||||
{% include "learning_path_description" %}
|
||||
|
||||
{% if learning_path.has_instructors? %}
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-card-ribbon np-hidden-desktop">
|
||||
<i class="fa fa-book-open" aria-hidden="true"></i>
|
||||
{{ learning_path.items.count }} Inhalte
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
<a class="np-button"
|
||||
{% if learning_path.enrolled? %}
|
||||
href="{% route learning_path, id: learning_path.id %}"
|
||||
{% else %}
|
||||
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>
|
||||
</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 %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</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,59 @@
|
||||
<div class="np-card card--training-event {{ card_classes }}">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ training_event.title }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{% case training_event.event_type %}
|
||||
{% when "online" %}
|
||||
Online Event
|
||||
{% when "in_person" %}
|
||||
In-Person Event
|
||||
{% endcase %}
|
||||
</div>
|
||||
{% if training_event.description and training_event.description.size > 0 %}
|
||||
<div class="np-card-content-description">
|
||||
|
||||
{{ training_event.description | strip }}
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-card-training-session-date">
|
||||
|
||||
{% comment %} Fallback to the first session {% endcomment %}
|
||||
{% assign session_to_display = training_event.sessions | first %}
|
||||
{% comment %} Check for an enrolled session and preferrably display that {% endcomment %}
|
||||
{% assign enrolled_sessions = training_event.sessions | where: "registered?", true %}
|
||||
{% if enrolled_sessions and enrolled_sessions.size > 0 %}
|
||||
{% assign session_to_display = enrolled_sessions | first %}
|
||||
{% endif %}
|
||||
|
||||
{% include "training_session_date", training_session: session_to_display %}
|
||||
{% if training_event.sessions and training_event.sessions.size > 1 %}
|
||||
<div class="session-date__other-info-container">
|
||||
<div class="session-date__other-info-wrapper">
|
||||
<i class="np-card-training-sessions-icon far fa-calendar-star" aria-hidden="true"></i>
|
||||
<span class="np-card-training-sessions-label">
|
||||
{{ training_event.sessions.size | minus: 1 }}
|
||||
{% if training_event.sessions.size == 2 %}
|
||||
Other Session
|
||||
{% else %}
|
||||
Other Sessions
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
<a
|
||||
class="np-button np-button-wide"
|
||||
href="{% route training_session, id: session_to_display.id %}"
|
||||
>
|
||||
{% t shared.view %} Event
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,4 @@
|
||||
<span class="np-course-outline-content-activity-title">
|
||||
{{ activity.title }}
|
||||
</span>
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
<a
|
||||
href="{% route activity_viewer,
|
||||
id: activity.id,
|
||||
course_id: params.course_id,
|
||||
learning_path_id: params.learning_path_id
|
||||
%}" class="{{ activity_classes }}"
|
||||
>
|
||||
{{ activity.title }}
|
||||
</a>
|
||||
@ -0,0 +1,29 @@
|
||||
{% if course.learner_can_retake? %}
|
||||
<form action="{% route course_retake, id: course.id %}" method="POST">
|
||||
{% form_authenticity_token %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
Training wiederholen
|
||||
</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' %}
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
{% t shared.course.start, key: current_school.course_vocabulary %}
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
Über diesen Kurs
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
@ -0,0 +1,26 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
{% for event in course.events %}
|
||||
<div class="np-course-events-content-item">
|
||||
<div class="np-course-events-content-date">
|
||||
<div class="np-course-events-content-month">
|
||||
{{ event.sessions.first.abbreviated_month }}
|
||||
</div>
|
||||
<div class="np-course-events-content-day">
|
||||
{{ event.sessions.first.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-course-events-content-details">
|
||||
<div class="np-course-events-content-name">
|
||||
{{ event.title }}
|
||||
</div>
|
||||
<div class="np-course-events-content-type np-text-light">
|
||||
{% t shared.event_types, key: event.event_type %}
|
||||
</div>
|
||||
<div class="np-course-events-content-time">
|
||||
{{ event.sessions.first.time_period | replace: "AM", "am" | replace: "PM", "pm" | replace: "-", "–" }} {{ event.sessions.first.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
@ -0,0 +1,6 @@
|
||||
<div class="np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div>
|
||||
{% comment %} {% include "course_cta_button" %} {% endcomment %}
|
||||
</div>
|
||||
@ -0,0 +1,26 @@
|
||||
<h3 class="np-card-heading">
|
||||
Instructors
|
||||
</h3>
|
||||
<div class="instructors-list__container">
|
||||
{% for instructor in course.instructors %}
|
||||
<div class="np-content-instructors-content-item">
|
||||
<img
|
||||
src="{{ instructor.avatar_url }}"
|
||||
class="np-content-instructors-content-image"
|
||||
alt="{{ instructor.name }}"
|
||||
/>
|
||||
<div class="np-content-instructors-content-description">
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ instructor.name }}
|
||||
</div>
|
||||
|
||||
{% if instructor.title and instructor.title.size > 0 %}
|
||||
<div class="np-content-instructors-content-info">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,71 @@
|
||||
<div class="np-course-outline np-card-content-divider">
|
||||
<h3 class="np-card-heading">
|
||||
Inhalt
|
||||
</h3>
|
||||
<div class="np-course-outline-content">
|
||||
<ol class="np-course-outline-content-section">
|
||||
{% for section in course.sections %}
|
||||
<li class="np-course-outline-content-section-list">
|
||||
<div class="np-course-outline-content-section-name">
|
||||
{{ section.name }}
|
||||
{% assign section_completed = true %}
|
||||
{% for activity in section.activities %}
|
||||
{% unless activity.completed? %}
|
||||
{% assign section_completed = false %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
|
||||
{% if section_completed %}
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.section-status-icon {
|
||||
margin-left:8px;
|
||||
color:#7625f7;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
<div class="np-top-cta">
|
||||
<div class="np-hidden-mobile">
|
||||
{% include "course_cta_button" %}
|
||||
</div>
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
Lernfortschritt
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ course.progress }}%"
|
||||
class="np-progress-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-top-cta-progress-text">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-hidden-desktop">
|
||||
{% include "course_cta_button" %}
|
||||
</div>
|
||||
@ -0,0 +1,49 @@
|
||||
<div class="np-course-version-outdated-popup np-popup">
|
||||
<div class="np-popup-positioner">
|
||||
<i
|
||||
class="np-course-version-outdated-popup-trigger fas fa-exclamation-circle"
|
||||
data-toggle-class-on-target="np-popup-tooltip--visible"
|
||||
data-toggle-target-parent=".np-popup-tooltip"
|
||||
data-toggle-outside
|
||||
aria-label="New Version Available"
|
||||
tabindex="0"
|
||||
></i>
|
||||
<div
|
||||
class="np-popup-tooltip"
|
||||
role="tooltip"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<header class="np-popup-header">
|
||||
<i class="np-popup-header-icon fas fa-exclamation-circle" aria-hidden="true"></i>
|
||||
<h3 class="np-popup-header-title">
|
||||
{% t .title %}
|
||||
</h3>
|
||||
</header>
|
||||
<div class="np-popup-body">
|
||||
<h4>
|
||||
{% capture header_text %}
|
||||
{% t .body.header %}
|
||||
{% endcapture %}
|
||||
{{ header_text | replace: "course", "course" }}
|
||||
|
||||
</h4>
|
||||
<p>
|
||||
{% capture body_text %}
|
||||
{% t .body.content %}
|
||||
{% endcapture %}
|
||||
{{ body_text | replace: "course", "course" }}
|
||||
</p>
|
||||
<a
|
||||
class="np-popup-body-button"
|
||||
href="{{ path }}"
|
||||
>
|
||||
{% capture button_text %}
|
||||
{% t .body.button %}
|
||||
{% endcapture %}
|
||||
{{ button_text | replace: "Course", "Course" }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-popup-tail"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,179 @@
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="category-header">
|
||||
{%
|
||||
include "filter_by_progress",
|
||||
label: "Nach Fortschritt filtern:",
|
||||
default_option: "Alle Kurse"
|
||||
%}
|
||||
</div>
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% assign is_on_the_job_video = false %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.id == "40b1f3d7-6faf-4d54-a74f-92d330831728" or category.name contains "On-The-Job" %}
|
||||
{% assign is_on_the_job_video = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% unless is_on_the_job_video %}
|
||||
{% assign progress_status = "jetzt-starten" %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign progress_status = "angefangen" %}
|
||||
{% elsif course.progress == 100 %}
|
||||
{% assign progress_status = "abgeschlossen" %}
|
||||
{% endif %}
|
||||
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content course-column {{progress_status}}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% assign message = message | replace: "Courses", "Courses" %}
|
||||
{% include "courses_zero_state", message: message, filters_applied: false %}
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.np-progress-filter-wrapper {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
margin-bottom:16px;
|
||||
margin-top:24px;
|
||||
}
|
||||
|
||||
.course-img-static {
|
||||
transition:opacity 0.1s;
|
||||
}
|
||||
|
||||
.course-img-static:hover {
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-catalog-courses {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Creates the custom dropdown and dropdown functionality
|
||||
var x,
|
||||
i,
|
||||
j,
|
||||
l,
|
||||
ll,
|
||||
selElmnt,
|
||||
a,
|
||||
b,
|
||||
c;
|
||||
|
||||
/* Look for any elements with the class “select-wrapper”: */
|
||||
x = document.getElementsByClassName("progress-filter");
|
||||
l = x.length;
|
||||
for (i = 0; i < l; i++) {
|
||||
selElmnt = x[i].getElementsByTagName("select")[0];
|
||||
ll = selElmnt.length;
|
||||
a = document.createElement("DIV");
|
||||
a.setAttribute("class", "select-selected");
|
||||
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
|
||||
x[i].appendChild(a);
|
||||
b = document.createElement("DIV");
|
||||
b.setAttribute("class", "select-items select-hide");
|
||||
for (j = 1; j < ll; j++) {
|
||||
c = document.createElement("DIV");
|
||||
c.innerHTML = selElmnt.options[j].innerHTML;
|
||||
c.addEventListener("click", function(e) {
|
||||
var y,
|
||||
i,
|
||||
k,
|
||||
s,
|
||||
h,
|
||||
sl,
|
||||
yl;
|
||||
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
|
||||
sl = s.length;
|
||||
h = this.parentNode.previousSibling;
|
||||
for (i = 0; i < sl; i++) {
|
||||
if (s.options[i].innerHTML == this.innerHTML) {
|
||||
s.selectedIndex = i;
|
||||
h.innerHTML = this.innerHTML;
|
||||
y = this.parentNode.getElementsByClassName("same-as-selected");
|
||||
yl = y.length;
|
||||
for (k = 0; k < yl; k++) {
|
||||
y[k].removeAttribute("class");
|
||||
}
|
||||
this.setAttribute("class", "same-as-selected");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
filterCourses(this);
|
||||
|
||||
h.click();
|
||||
});
|
||||
b.appendChild(c);
|
||||
}
|
||||
x[i].appendChild(b);
|
||||
a.addEventListener("click", function(e) {
|
||||
e.stopPropagation();
|
||||
closeAllSelect(this);
|
||||
this.nextSibling.classList.toggle("select-hide");
|
||||
this.classList.toggle("select-arrow-active");
|
||||
});
|
||||
}
|
||||
|
||||
function closeAllSelect(elmnt) {
|
||||
var x,
|
||||
y,
|
||||
i,
|
||||
xl,
|
||||
yl,
|
||||
arrNo = [];
|
||||
x = document.getElementsByClassName("select-items");
|
||||
y = document.getElementsByClassName("select-selected");
|
||||
xl = x.length;
|
||||
yl = y.length;
|
||||
for (i = 0; i < yl; i++) {
|
||||
if (elmnt == y[i]) {
|
||||
arrNo.push(i)
|
||||
} else {
|
||||
y[i].classList.remove("select-arrow-active");
|
||||
}
|
||||
}
|
||||
for (i = 0; i < xl; i++) {
|
||||
if (arrNo.indexOf(i)) {
|
||||
x[i].classList.add("select-hide");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* If the user clicks anywhere outside the select box,
|
||||
then close all select boxes: */
|
||||
document.addEventListener("click", closeAllSelect);
|
||||
$(".select-items div").each(function() {
|
||||
if ($(this).text() == $(".select-selected").text()) {
|
||||
$(this).addClass("same-as-selected");
|
||||
}
|
||||
});
|
||||
|
||||
function filterCourses(selectedItem) {
|
||||
let 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')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,200 @@
|
||||
{% if courses.enrolled and courses.enrolled.any? %}
|
||||
{%- assign all_categories = "" -%}
|
||||
|
||||
{%- for category in categories.enrolled -%}
|
||||
{% comment %} <div class="np-resource-subtitle">Rolle</div> {% endcomment %}
|
||||
{% unless category.id == "087ea56d-888b-4e0f-af1f-68627318c841" or category.id == "9be55234-19c5-4df4-bd1d-03e93f0faf83" or category.id == "6580e10e-eacf-402d-a330-51d202721cce" or category.id == "a63019c7-0a46-40bd-bc1b-935c887a4380" or category.id == "40b1f3d7-6faf-4d54-a74f-92d330831728" %}
|
||||
<div class="category-header">
|
||||
<div class="category-title" style="">
|
||||
{{category.name}}
|
||||
</div>
|
||||
{% assign topic = category.id %}
|
||||
{%
|
||||
include "filter_by_progress",
|
||||
label: "Nach Fortschritt filtern:",
|
||||
default_option: "Alle Kurse",
|
||||
topic: topic,
|
||||
%}
|
||||
</div>
|
||||
<div class="row" data-topic="{{category.id}}">
|
||||
{%- for course in courses.enrolled -%}
|
||||
{% assign all_categories = course.categories | map: "id" %}
|
||||
|
||||
{%- if all_categories contains category.id -%}
|
||||
{% assign course_status = "" %}
|
||||
|
||||
{% if course.started? == false %}
|
||||
{% assign course_status = "jetzt-starten" %}
|
||||
{% elsif course.completed? %}
|
||||
{% assign course_status = "abgeschlossen" %}
|
||||
{% elsif course.started? %}
|
||||
{% assign course_status = "angefangen" %}
|
||||
{% endif %}
|
||||
<div class="cards-course-wrapper col-xs-12 col-sm-6 col-lg-4 np-stretch-content {{course_status}}">
|
||||
{% include 'cards_course' %}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
{% endunless %}
|
||||
{%- endfor -%}
|
||||
|
||||
{%- comment -%} <div class="blocks-layout">
|
||||
{% for course in courses.enrolled %}
|
||||
{% include "cards_course", course: course, card_classes: card_classes %}
|
||||
{% endfor %}
|
||||
</div> {%- endcomment -%}
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% assign message = message | replace: "Courses", "Courses" %}
|
||||
{% include "courses_zero_state", message: message, filters_applied: false %}
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.np-progress-filter-wrapper {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.category-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Creates the custom dropdown and dropdown functionality
|
||||
var x,
|
||||
i,
|
||||
j,
|
||||
l,
|
||||
ll,
|
||||
selElmnt,
|
||||
a,
|
||||
b,
|
||||
c;
|
||||
|
||||
/* Look for any elements with the class “select-wrapper”: */
|
||||
x = document.getElementsByClassName("progress-filter");
|
||||
l = x.length;
|
||||
for (i = 0; i < l; i++) {
|
||||
selElmnt = x[i].getElementsByTagName("select")[0];
|
||||
ll = selElmnt.length;
|
||||
a = document.createElement("DIV");
|
||||
a.setAttribute("class", "select-selected");
|
||||
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
|
||||
x[i].appendChild(a);
|
||||
b = document.createElement("DIV");
|
||||
b.setAttribute("class", "select-items select-hide");
|
||||
for (j = 1; j < ll; j++) {
|
||||
c = document.createElement("DIV");
|
||||
c.innerHTML = selElmnt.options[j].innerHTML;
|
||||
c.addEventListener("click", function(e) {
|
||||
var y,
|
||||
i,
|
||||
k,
|
||||
s,
|
||||
h,
|
||||
sl,
|
||||
yl;
|
||||
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
|
||||
sl = s.length;
|
||||
h = this.parentNode.previousSibling;
|
||||
for (i = 0; i < sl; i++) {
|
||||
if (s.options[i].innerHTML == this.innerHTML) {
|
||||
s.selectedIndex = i;
|
||||
h.innerHTML = this.innerHTML;
|
||||
y = this.parentNode.getElementsByClassName("same-as-selected");
|
||||
yl = y.length;
|
||||
for (k = 0; k < yl; k++) {
|
||||
y[k].removeAttribute("class");
|
||||
}
|
||||
this.setAttribute("class", "same-as-selected");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
filterCourses(this);
|
||||
|
||||
h.click();
|
||||
});
|
||||
b.appendChild(c);
|
||||
}
|
||||
x[i].appendChild(b);
|
||||
a.addEventListener("click", function(e) {
|
||||
e.stopPropagation();
|
||||
closeAllSelect(this);
|
||||
this.nextSibling.classList.toggle("select-hide");
|
||||
this.classList.toggle("select-arrow-active");
|
||||
});
|
||||
}
|
||||
|
||||
function closeAllSelect(elmnt) {
|
||||
var x,
|
||||
y,
|
||||
i,
|
||||
xl,
|
||||
yl,
|
||||
arrNo = [];
|
||||
x = document.getElementsByClassName("select-items");
|
||||
y = document.getElementsByClassName("select-selected");
|
||||
xl = x.length;
|
||||
yl = y.length;
|
||||
for (i = 0; i < yl; i++) {
|
||||
if (elmnt == y[i]) {
|
||||
arrNo.push(i)
|
||||
} else {
|
||||
y[i].classList.remove("select-arrow-active");
|
||||
}
|
||||
}
|
||||
for (i = 0; i < xl; i++) {
|
||||
if (arrNo.indexOf(i)) {
|
||||
x[i].classList.add("select-hide");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* If the user clicks anywhere outside the select box,
|
||||
then close all select boxes: */
|
||||
document.addEventListener("click", closeAllSelect);
|
||||
$(".select-items div").each(function() {
|
||||
if ($(this).text() == $(".select-selected").text()) {
|
||||
$(this).addClass("same-as-selected");
|
||||
}
|
||||
});
|
||||
|
||||
function filterCourses(selectedItem) {
|
||||
let filterGroup = $(selectedItem).closest(".progress-filter").data("topic");
|
||||
let selectedFilter = $(selectedItem).text().replace(" ", "-").toLowerCase();
|
||||
|
||||
let carouselGroup = $('.row[data-topic="' + filterGroup + '"]');
|
||||
console.log(filterGroup, selectedFilter, carouselGroup)
|
||||
carouselGroup.find('.cards-course-wrapper').removeClass('np-hidden')
|
||||
if (selectedFilter != "alle-kurse") {
|
||||
carouselGroup.find(`.cards-course-wrapper:not(.${selectedFilter})`).addClass('np-hidden')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,9 @@
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
<p>{{ message }}</p>
|
||||
{% if filters_applied %}
|
||||
<button class="np-button np-button-wide js-clear-filter-button js-filter-type__all">Clear All Filters</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="{{ message }}" />
|
||||
</div>
|
||||
@ -0,0 +1,123 @@
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<style>
|
||||
.np-progress-filter-label {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
padding-right: 7px;
|
||||
text-transform: none;
|
||||
font-weight:500;
|
||||
font-size:0.812rem;
|
||||
}
|
||||
.np-progress-filter-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 1rem;
|
||||
margin-top:12px;
|
||||
align-items: center;
|
||||
}
|
||||
.filter-select-wrapper {
|
||||
position: relative;
|
||||
padding:0;
|
||||
border: 2px solid rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
height:auto;
|
||||
text-transform: none;
|
||||
background: transparent;
|
||||
border-radius:0;
|
||||
font-size:14px;
|
||||
}
|
||||
.filter-select-wrapper:hover {
|
||||
background:transparent;
|
||||
color:#fff;
|
||||
}
|
||||
.select-items {
|
||||
position: absolute;
|
||||
background-color: #E1E2E5;
|
||||
top: 105%;
|
||||
left: -2px;
|
||||
z-index: 99;
|
||||
width: 102%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.25);
|
||||
border-top:none;
|
||||
}
|
||||
.select-items div {
|
||||
color: #707483;
|
||||
border-top:none;
|
||||
cursor: pointer;
|
||||
width:100%;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.select-items div:hover { color: rgba(255, 255, 255, 1); }
|
||||
.select-selected {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 6px 50px 6px 15px;
|
||||
position: relative;
|
||||
color:rgb(0, 0, 0);
|
||||
}
|
||||
.select-selected::after {
|
||||
content:"\f078";
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
position: absolute;
|
||||
width:20px;
|
||||
height:100%;
|
||||
color:rgba(0, 0, 0, 0.5);
|
||||
right:10px;
|
||||
top:0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size:1rem;
|
||||
}
|
||||
.select-selected::before {
|
||||
content:"";
|
||||
position: absolute;
|
||||
width:20px;
|
||||
height:100%;
|
||||
border-left:2px solid rgba(0, 0, 0, 0.5);
|
||||
right:20px;
|
||||
top:0;
|
||||
}
|
||||
.select-selected.select-arrow-active::after { transform: rotate(180deg); }
|
||||
.same-as-selected,
|
||||
.filter-select-wrapper select,
|
||||
.select-hide {
|
||||
display: none;
|
||||
}
|
||||
.mo-filter-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.select-items div:hover,
|
||||
.same-as-selected {
|
||||
background-color: #707483;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-progress-filter-wrapper {
|
||||
margin-top:0;
|
||||
font-size:16px;
|
||||
}
|
||||
.select-selected {
|
||||
padding: 9px 66px 9px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,81 @@
|
||||
{% comment %}
|
||||
<footer class="np-footer">
|
||||
<div class="np-footer-top">
|
||||
{% if website_footer.show_navigation_links? %}
|
||||
<div class="np-footer-navigation">
|
||||
<ul class="np-footer-navigation-list">
|
||||
{% for website_navigation in navigations.footer_navigations %}
|
||||
<li class="np-footer-navigation-item">
|
||||
<a
|
||||
class="np-footer-navigation-link np-button-color"
|
||||
href="{{ website_navigation.path }}"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if current_school.logo_url %}
|
||||
<h2 class="np-footer-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-footer-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h2>
|
||||
{% else %}
|
||||
<div class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="np-footer-bottom">
|
||||
<nav class="np-footer-social-links">
|
||||
{% if website_footer.show_social_media_links? %}
|
||||
<ul class="np-footer-social-links-list">
|
||||
{% for social_media_link in website_footer.social_media_links %}
|
||||
<li class="np-footer-social-links-item">
|
||||
<a
|
||||
class="np-footer-social-links-link np-button-color"
|
||||
href="{{ social_media_link.link }}"
|
||||
target="_blank" title="{{ social_media_link.name }}"
|
||||
>
|
||||
<i class="np-footer-social-links-icon
|
||||
np-button-color
|
||||
fab fa-{{ social_media_link.name }}"
|
||||
aria-label="{{ social_media_linke.name }}"
|
||||
></i>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
{% if website_footer.show_customer_service_email? and
|
||||
website_footer.school_customer_service_email
|
||||
%}
|
||||
<div class="np-footer-support">
|
||||
<div class="np-footer-support-item np-footer-support-help">
|
||||
{% t .need_help %}
|
||||
</div>
|
||||
<div class="np-footer-support-item np-footer-support-email">
|
||||
{% t .email %}
|
||||
</div>
|
||||
<a
|
||||
class="np-footer-support-item np-footer-support-link np-button-color"
|
||||
href="mailto:{{ website_footer.school_customer_service_email }}"
|
||||
>
|
||||
{{ website_footer.school_customer_service_email }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</footer>
|
||||
{% endcomment %}
|
||||
@ -0,0 +1,8 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="https://unpkg.com/freezeframe@3.0.10/build/css/freezeframe_styles.min.css">
|
||||
<script type="text/javascript" src="https://unpkg.com/freezeframe@3.0.10/build/js/freezeframe.pkgd.min.js"></script>
|
||||
@ -0,0 +1,385 @@
|
||||
{% assign is_in_authenticated_group = false %}
|
||||
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.name == "All Users" or group.id == "6331d115-ea74-418a-99b2-af5c81208fe1" %}
|
||||
{% assign is_in_authenticated_group = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if current_person.email contains "+preview" %}
|
||||
{% assign is_in_authenticated_group = true %}
|
||||
{% endif %}
|
||||
|
||||
{% unless is_in_authenticated_group %}
|
||||
<script>
|
||||
console.log(window.location.pathname)
|
||||
if (window.location.pathname != "/app") {
|
||||
window.location.replace("/app")
|
||||
}
|
||||
</script>
|
||||
{% endunless %}
|
||||
|
||||
<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"
|
||||
>
|
||||
{% comment %} <img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/> {% endcomment %}
|
||||
<i class="far fa-bars"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="/app/catalog">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="/app/catalog" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a href="/app/catalog" class="np-header-desktop-nav-link trainings-link">
|
||||
Trainings
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a href="/app/learning_paths" class="np-header-desktop-nav-link learning-paths-link">
|
||||
Lernweg
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a href="/app/zertifikate" class="np-header-desktop-nav-link certs-link">
|
||||
Auszeichnungen
|
||||
</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>
|
||||
</li>
|
||||
|
||||
{% comment %} <li class="np-header-desktop-nav-item" style="pointer-events:none;opacity: 0.6;">
|
||||
<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
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input np-header-font-background-color"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search" aria-label="Search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search" aria-label="search"></i>
|
||||
</form>
|
||||
|
||||
<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">
|
||||
Lernweg
|
||||
</a>
|
||||
|
||||
<a href="/app/zertifikate" class="np-header-mobile-menu-content-button">
|
||||
Auszeichnungen
|
||||
</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" style="pointer-events:none;
|
||||
opacity: 0.6;">
|
||||
Veranstaltungen
|
||||
</a> {% endcomment %}
|
||||
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
|
||||
.np-header {
|
||||
height: auto;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
body.mobile-menu-open .np-header {
|
||||
background-color:#3e1191;
|
||||
}
|
||||
|
||||
.np-header-logo {
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
.np-header-logo-image {
|
||||
height:30px;
|
||||
}
|
||||
|
||||
.np-header .fa-bars {
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content {
|
||||
background-color: #8B78FA;
|
||||
top:66px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-nav-button.np-header-font-color {
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-avatar {
|
||||
width:75px;
|
||||
height:75px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-name {
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
|
||||
@media screen and ( min-width: 48rem ) {
|
||||
.np-header-logo {
|
||||
padding: 1.25rem 0;
|
||||
}
|
||||
}
|
||||
/* --- Navigation --- */
|
||||
.np-header-desktop-nav-list {
|
||||
justify-content: end;
|
||||
margin: 1rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
.np-header-desktop-nav-link {
|
||||
padding: 0.1rem 0.75rem 0.15rem;
|
||||
border: transparent 2px solid;
|
||||
border-radius: 3rem;
|
||||
color:#fff;
|
||||
font-size:18px;
|
||||
margin-right:12px;
|
||||
}
|
||||
.np-header-desktop-nav-item {
|
||||
padding: 0;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link:focus,
|
||||
.np-header-desktop-nav-link:hover {
|
||||
border-color: #7625f7;
|
||||
color:#fff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link.is-active {
|
||||
background-color: #8b78fa;
|
||||
}
|
||||
.np-header-desktop-nav-link.is-active:focus {
|
||||
border-color: #275cb8;
|
||||
}
|
||||
|
||||
.np-header-search-input:hover + .np-header-search-icon {
|
||||
color: #bfe4ff;
|
||||
}
|
||||
|
||||
.np-header-search-input:focus {
|
||||
border-color: #275cb8;
|
||||
outline: none;
|
||||
border-radius: 3rem;
|
||||
padding: 0 1.25rem 0 2.5rem;
|
||||
}
|
||||
|
||||
.np-header-search-input:focus + .np-header-search-icon {
|
||||
color: #304780;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button.np-danger {
|
||||
border-color: #ff5773;
|
||||
color: #E52242;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-header-search-input {
|
||||
opacity: unset;
|
||||
border-radius: 3rem;
|
||||
background-color: #304780;
|
||||
}
|
||||
|
||||
.np-header-search-icon {
|
||||
right: unset;
|
||||
left: 0.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const currentPath = window.location.pathname;
|
||||
|
||||
if (currentPath == "/app/courses") {
|
||||
$(".trainings-link").addClass("is-active")
|
||||
} else if (currentPath.includes("/app/learning_paths")) {
|
||||
$(".learning-paths-link").addClass("is-active")
|
||||
} else if (currentPath == "/app/zertifikate") {
|
||||
$(".certs-link").addClass("is-active")
|
||||
} else if (currentPath == "/app/on-the-job") {
|
||||
$(".videos-link").addClass("is-active")
|
||||
} else if (currentPath.includes("/app/training_events")) {
|
||||
$(".events-link").addClass("is-active")
|
||||
}
|
||||
|
||||
$("button[data-test='open-mobile-menu']").click(function() {
|
||||
console.log($(this))
|
||||
$("body").addClass("mobile-menu-open")
|
||||
})
|
||||
|
||||
$(".np-header-mobile-menu-nav-button:not([data-test='open-mobile-menu'])").click(function() {
|
||||
$("body").removeClass("mobile-menu-open")
|
||||
})
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,385 @@
|
||||
{% assign is_in_authenticated_group = false %}
|
||||
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.name == "All Users" or group.id == "6331d115-ea74-418a-99b2-af5c81208fe1" %}
|
||||
{% assign is_in_authenticated_group = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if current_person.email contains "+preview" %}
|
||||
{% assign is_in_authenticated_group = true %}
|
||||
{% endif %}
|
||||
|
||||
{% unless is_in_authenticated_group %}
|
||||
<script>
|
||||
console.log(window.location.pathname)
|
||||
if (window.location.pathname != "/app") {
|
||||
window.location.replace("/app")
|
||||
}
|
||||
</script>
|
||||
{% endunless %}
|
||||
|
||||
<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"
|
||||
>
|
||||
{% comment %} <img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/> {% endcomment %}
|
||||
<i class="far fa-bars"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="/app/catalog">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="/app/catalog" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a href="/app/catalog" class="np-header-desktop-nav-link trainings-link">
|
||||
Trainings
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a href="/app/learning_paths" class="np-header-desktop-nav-link learning-paths-link">
|
||||
Lernweg
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a href="/app/zertifikate" class="np-header-desktop-nav-link certs-link">
|
||||
Auszeichnungen
|
||||
</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>
|
||||
</li>
|
||||
|
||||
{% comment %} <li class="np-header-desktop-nav-item" style="pointer-events:none;opacity: 0.6;">
|
||||
<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
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input np-header-font-background-color"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search" aria-label="Search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search" aria-label="search"></i>
|
||||
</form>
|
||||
|
||||
<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">
|
||||
Lernweg
|
||||
</a>
|
||||
|
||||
<a href="/app/zertifikate" class="np-header-mobile-menu-content-button">
|
||||
Auszeichnungen
|
||||
</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" style="pointer-events:none;
|
||||
opacity: 0.6;">
|
||||
Veranstaltungen
|
||||
</a> {% endcomment %}
|
||||
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
|
||||
.np-header {
|
||||
height: auto;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
body.mobile-menu-open .np-header {
|
||||
background-color:#3e1191;
|
||||
}
|
||||
|
||||
.np-header-logo {
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
.np-header-logo-image {
|
||||
height:30px;
|
||||
}
|
||||
|
||||
.np-header .fa-bars {
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content {
|
||||
background-color: #8B78FA;
|
||||
top:66px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-nav-button.np-header-font-color {
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-avatar {
|
||||
width:75px;
|
||||
height:75px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-name {
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
|
||||
@media screen and ( min-width: 48rem ) {
|
||||
.np-header-logo {
|
||||
padding: 1.25rem 0;
|
||||
}
|
||||
}
|
||||
/* --- Navigation --- */
|
||||
.np-header-desktop-nav-list {
|
||||
justify-content: end;
|
||||
margin: 1rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
.np-header-desktop-nav-link {
|
||||
padding: 0.1rem 0.75rem 0.15rem;
|
||||
border: transparent 2px solid;
|
||||
border-radius: 3rem;
|
||||
color:#fff;
|
||||
font-size:18px;
|
||||
margin-right:12px;
|
||||
}
|
||||
.np-header-desktop-nav-item {
|
||||
padding: 0;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link:focus,
|
||||
.np-header-desktop-nav-link:hover {
|
||||
border-color: #7625f7;
|
||||
color:#fff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link.is-active {
|
||||
background-color: #8b78fa;
|
||||
}
|
||||
.np-header-desktop-nav-link.is-active:focus {
|
||||
border-color: #275cb8;
|
||||
}
|
||||
|
||||
.np-header-search-input:hover + .np-header-search-icon {
|
||||
color: #bfe4ff;
|
||||
}
|
||||
|
||||
.np-header-search-input:focus {
|
||||
border-color: #275cb8;
|
||||
outline: none;
|
||||
border-radius: 3rem;
|
||||
padding: 0 1.25rem 0 2.5rem;
|
||||
}
|
||||
|
||||
.np-header-search-input:focus + .np-header-search-icon {
|
||||
color: #304780;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button.np-danger {
|
||||
border-color: #ff5773;
|
||||
color: #E52242;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-header-search-input {
|
||||
opacity: unset;
|
||||
border-radius: 3rem;
|
||||
background-color: #304780;
|
||||
}
|
||||
|
||||
.np-header-search-icon {
|
||||
right: unset;
|
||||
left: 0.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const currentPath = window.location.pathname;
|
||||
|
||||
if (currentPath == "/app/courses") {
|
||||
$(".trainings-link").addClass("is-active")
|
||||
} else if (currentPath.includes("/app/learning_paths")) {
|
||||
$(".learning-paths-link").addClass("is-active")
|
||||
} else if (currentPath == "/app/zertifikate") {
|
||||
$(".certs-link").addClass("is-active")
|
||||
} else if (currentPath == "/app/on-the-job") {
|
||||
$(".videos-link").addClass("is-active")
|
||||
} else if (currentPath.includes("/app/training_events")) {
|
||||
$(".events-link").addClass("is-active")
|
||||
}
|
||||
|
||||
$("button[data-test='open-mobile-menu']").click(function() {
|
||||
console.log($(this))
|
||||
$("body").addClass("mobile-menu-open")
|
||||
})
|
||||
|
||||
$(".np-header-mobile-menu-nav-button:not([data-test='open-mobile-menu'])").click(function() {
|
||||
$("body").removeClass("mobile-menu-open")
|
||||
})
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,398 @@
|
||||
{% assign is_in_authenticated_group = false %}
|
||||
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.name == "All Users" or group.id == "6331d115-ea74-418a-99b2-af5c81208fe1" %}
|
||||
{% assign is_in_authenticated_group = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if current_person.email contains "+preview" %}
|
||||
{% assign is_in_authenticated_group = true %}
|
||||
{% endif %}
|
||||
|
||||
{% unless is_in_authenticated_group %}
|
||||
<script>
|
||||
console.log(window.location.pathname)
|
||||
if (window.location.pathname != "/app") {
|
||||
window.location.replace("/app")
|
||||
}
|
||||
</script>
|
||||
{% endunless %}
|
||||
|
||||
<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"
|
||||
>
|
||||
<i class="far fa-bars"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="/app/catalog">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="/app/catalog" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a href="/app/catalog" class="np-header-desktop-nav-link trainings-link">Trainings</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>
|
||||
</li>
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a href="/app/zertifikate" class="np-header-desktop-nav-link certs-link">Auszeichnungen</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>
|
||||
</li>
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input np-header-font-background-color"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search" aria-label="Search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
<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/on-the-job" class="np-header-mobile-menu-content-button">On-The-Job Videos</a>
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder=""
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search" aria-label="search"></i>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
body.mobile-menu-open main.np-main.np-hidden {
|
||||
display: block!important;
|
||||
}
|
||||
|
||||
.np-header {
|
||||
height: auto;
|
||||
padding-top: 12px;
|
||||
transition:transform 0.3s, background-color 0.2s;
|
||||
top:0;
|
||||
}
|
||||
|
||||
.np-header.sticky {
|
||||
position: sticky;
|
||||
background-color:#3e1191;
|
||||
}
|
||||
|
||||
.np-header.sticky-hide {
|
||||
transform: translateY(-100px);
|
||||
}
|
||||
|
||||
.np-header.sticky-show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
body.mobile-menu-open .np-header {
|
||||
background-color:#3e1191;
|
||||
}
|
||||
|
||||
.np-header-logo {
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
.np-header-logo-image {
|
||||
height:30px;
|
||||
}
|
||||
|
||||
.np-header .fa-bars {
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content {
|
||||
background-color: #3e1191;
|
||||
top:66px;
|
||||
left:unset;
|
||||
bottom:unset;
|
||||
width:50%;
|
||||
padding: 0 0 8px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content .np-header-mobile-menu-content-nav {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content .np-header-mobile-menu-content-button {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
border: 1px solid #fff;
|
||||
height: auto;
|
||||
font-size: 15px;
|
||||
padding: 3px;
|
||||
font-weight: 700;
|
||||
margin-top:10px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content .np-header-search-input,
|
||||
.np-header-mobile-menu-content .np-header-search-input:focus {
|
||||
background: transparent;
|
||||
border: 1px solid #fff;
|
||||
color: #fff;
|
||||
padding: 8px 30px 8px 10px;
|
||||
font-size:14px;
|
||||
height:auto;
|
||||
border-radius:4px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content .np-header-search { padding-top:10px; }
|
||||
|
||||
.np-header-mobile-menu-content .np-header-search-icon,
|
||||
.np-header-mobile-menu-content .np-header-search-input:hover + .np-header-search-icon {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 19px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-nav-button.np-header-font-color,
|
||||
.np-header-mobile-menu-content-name { color:#fff;}
|
||||
|
||||
@media screen and ( min-width: 48rem ) {
|
||||
.np-header-logo {
|
||||
padding: 1.25rem 0;
|
||||
}
|
||||
}
|
||||
/* --- Navigation --- */
|
||||
.np-header-desktop-nav-list {
|
||||
justify-content: end;
|
||||
margin: 1rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
.np-header-desktop-nav-link {
|
||||
padding: 0.1rem 0.75rem 0.15rem;
|
||||
border: transparent 2px solid;
|
||||
border-radius: 3rem;
|
||||
color:#fff;
|
||||
font-size:18px;
|
||||
margin-right:12px;
|
||||
}
|
||||
.np-header-desktop-nav-item {
|
||||
padding: 0;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link:focus,
|
||||
.np-header-desktop-nav-link:hover {
|
||||
border-color: #7625f7;
|
||||
color:#fff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link.is-active {
|
||||
background-color: #8b78fa;
|
||||
}
|
||||
.np-header-desktop-nav-link.is-active:focus {
|
||||
border-color: #275cb8;
|
||||
}
|
||||
|
||||
.np-header-search-input:hover + .np-header-search-icon {
|
||||
color: #bfe4ff;
|
||||
}
|
||||
|
||||
.np-header-search-input:focus {
|
||||
border-color: #275cb8;
|
||||
outline: none;
|
||||
border-radius: 3rem;
|
||||
padding: 0 1.25rem 0 2.5rem;
|
||||
}
|
||||
|
||||
.np-header-search-input:focus + .np-header-search-icon {
|
||||
color: #304780;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button.np-danger {
|
||||
border-color: #ff5773;
|
||||
color: #E52242;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-header-search-input {
|
||||
opacity: unset;
|
||||
border-radius: 3rem;
|
||||
background-color: #304780;
|
||||
}
|
||||
|
||||
.np-header-search-icon {
|
||||
right: unset;
|
||||
left: 0.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const currentPath = window.location.pathname;
|
||||
|
||||
if (currentPath == "/app/courses") {
|
||||
$(".trainings-link").addClass("is-active")
|
||||
} else if (currentPath.includes("/app/learning_paths")) {
|
||||
$(".learning-paths-link").addClass("is-active")
|
||||
} else if (currentPath == "/app/zertifikate") {
|
||||
$(".certs-link").addClass("is-active")
|
||||
} else if (currentPath == "/app/on-the-job") {
|
||||
$(".videos-link").addClass("is-active")
|
||||
} else if (currentPath.includes("/app/training_events")) {
|
||||
$(".events-link").addClass("is-active")
|
||||
}
|
||||
|
||||
$("button[data-test='open-mobile-menu']").click(function() {
|
||||
console.log($(this))
|
||||
$("body").addClass("mobile-menu-open")
|
||||
})
|
||||
|
||||
$(".np-header-mobile-menu-nav-button:not([data-test='open-mobile-menu'])").click(function() {
|
||||
$("body").removeClass("mobile-menu-open")
|
||||
})
|
||||
|
||||
window.onscroll = function() {detectScroll()};
|
||||
|
||||
var header = document.querySelector(".np-header");
|
||||
var lastScrollTop = 0;
|
||||
|
||||
function detectScroll() {
|
||||
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
if (window.pageYOffset > 0) {
|
||||
header.classList.add("sticky");
|
||||
} else {
|
||||
header.classList.remove("sticky");
|
||||
}
|
||||
|
||||
if (window.pageYOffset > 150) {
|
||||
if (scrollTop > lastScrollTop) {
|
||||
header.classList.remove("sticky-show");
|
||||
header.classList.add("sticky-hide");
|
||||
if (!$(".np-header-mobile-menu-content").hasClass("np-hidden")) {
|
||||
$(".np-header-mobile-menu-nav-button.fa-times").click()
|
||||
}
|
||||
|
||||
} else if (scrollTop < lastScrollTop) {
|
||||
header.classList.add("sticky-show");
|
||||
header.classList.remove("sticky-hide");
|
||||
}
|
||||
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
398
Custom_Templates/customer_templates/Zenjob/_header.html.liquid
Normal file
398
Custom_Templates/customer_templates/Zenjob/_header.html.liquid
Normal file
@ -0,0 +1,398 @@
|
||||
{% assign is_in_authenticated_group = false %}
|
||||
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.name == "All Users" or group.id == "6331d115-ea74-418a-99b2-af5c81208fe1" %}
|
||||
{% assign is_in_authenticated_group = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if current_person.email contains "+preview" %}
|
||||
{% assign is_in_authenticated_group = true %}
|
||||
{% endif %}
|
||||
|
||||
{% unless is_in_authenticated_group %}
|
||||
<script>
|
||||
console.log(window.location.pathname)
|
||||
if (window.location.pathname != "/app") {
|
||||
window.location.replace("/app")
|
||||
}
|
||||
</script>
|
||||
{% endunless %}
|
||||
|
||||
<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"
|
||||
>
|
||||
<i class="far fa-bars"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="/app/catalog">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="/app/catalog" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a href="/app/catalog" class="np-header-desktop-nav-link trainings-link">Trainings</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>
|
||||
</li>
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a href="/app/zertifikate" class="np-header-desktop-nav-link certs-link">Auszeichnungen</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>
|
||||
</li>
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input np-header-font-background-color"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search" aria-label="Search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
<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/on-the-job" class="np-header-mobile-menu-content-button">On-The-Job Videos</a>
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder=""
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search" aria-label="search"></i>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
body.mobile-menu-open main.np-main.np-hidden {
|
||||
display: block!important;
|
||||
}
|
||||
|
||||
.np-header {
|
||||
height: auto;
|
||||
padding-top: 12px;
|
||||
transition:transform 0.3s, background-color 0.2s;
|
||||
top:0;
|
||||
}
|
||||
|
||||
.np-header.sticky {
|
||||
position: sticky;
|
||||
background-color:#3e1191;
|
||||
}
|
||||
|
||||
.np-header.sticky-hide {
|
||||
transform: translateY(-100px);
|
||||
}
|
||||
|
||||
.np-header.sticky-show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
body.mobile-menu-open .np-header {
|
||||
background-color:#3e1191;
|
||||
}
|
||||
|
||||
.np-header-logo {
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
.np-header-logo-image {
|
||||
height:30px;
|
||||
}
|
||||
|
||||
.np-header .fa-bars {
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content {
|
||||
background-color: #3e1191;
|
||||
top:66px;
|
||||
left:unset;
|
||||
bottom:unset;
|
||||
width:50%;
|
||||
padding: 0 0 8px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content .np-header-mobile-menu-content-nav {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content .np-header-mobile-menu-content-button {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
border: 1px solid #fff;
|
||||
height: auto;
|
||||
font-size: 15px;
|
||||
padding: 3px;
|
||||
font-weight: 700;
|
||||
margin-top:10px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content .np-header-search-input,
|
||||
.np-header-mobile-menu-content .np-header-search-input:focus {
|
||||
background: transparent;
|
||||
border: 1px solid #fff;
|
||||
color: #fff;
|
||||
padding: 8px 30px 8px 10px;
|
||||
font-size:14px;
|
||||
height:auto;
|
||||
border-radius:4px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content .np-header-search { padding-top:10px; }
|
||||
|
||||
.np-header-mobile-menu-content .np-header-search-icon,
|
||||
.np-header-mobile-menu-content .np-header-search-input:hover + .np-header-search-icon {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 19px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-nav-button.np-header-font-color,
|
||||
.np-header-mobile-menu-content-name { color:#fff;}
|
||||
|
||||
@media screen and ( min-width: 48rem ) {
|
||||
.np-header-logo {
|
||||
padding: 1.25rem 0;
|
||||
}
|
||||
}
|
||||
/* --- Navigation --- */
|
||||
.np-header-desktop-nav-list {
|
||||
justify-content: end;
|
||||
margin: 1rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
.np-header-desktop-nav-link {
|
||||
padding: 0.1rem 0.75rem 0.15rem;
|
||||
border: transparent 2px solid;
|
||||
border-radius: 3rem;
|
||||
color:#fff;
|
||||
font-size:18px;
|
||||
margin-right:12px;
|
||||
}
|
||||
.np-header-desktop-nav-item {
|
||||
padding: 0;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link:focus,
|
||||
.np-header-desktop-nav-link:hover {
|
||||
border-color: #7625f7;
|
||||
color:#fff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link.is-active {
|
||||
background-color: #8b78fa;
|
||||
}
|
||||
.np-header-desktop-nav-link.is-active:focus {
|
||||
border-color: #275cb8;
|
||||
}
|
||||
|
||||
.np-header-search-input:hover + .np-header-search-icon {
|
||||
color: #bfe4ff;
|
||||
}
|
||||
|
||||
.np-header-search-input:focus {
|
||||
border-color: #275cb8;
|
||||
outline: none;
|
||||
border-radius: 3rem;
|
||||
padding: 0 1.25rem 0 2.5rem;
|
||||
}
|
||||
|
||||
.np-header-search-input:focus + .np-header-search-icon {
|
||||
color: #304780;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button.np-danger {
|
||||
border-color: #ff5773;
|
||||
color: #E52242;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-header-search-input {
|
||||
opacity: unset;
|
||||
border-radius: 3rem;
|
||||
background-color: #304780;
|
||||
}
|
||||
|
||||
.np-header-search-icon {
|
||||
right: unset;
|
||||
left: 0.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const currentPath = window.location.pathname;
|
||||
|
||||
if (currentPath == "/app/courses") {
|
||||
$(".trainings-link").addClass("is-active")
|
||||
} else if (currentPath.includes("/app/learning_paths")) {
|
||||
$(".learning-paths-link").addClass("is-active")
|
||||
} else if (currentPath == "/app/zertifikate") {
|
||||
$(".certs-link").addClass("is-active")
|
||||
} else if (currentPath == "/app/on-the-job") {
|
||||
$(".videos-link").addClass("is-active")
|
||||
} else if (currentPath.includes("/app/training_events")) {
|
||||
$(".events-link").addClass("is-active")
|
||||
}
|
||||
|
||||
$("button[data-test='open-mobile-menu']").click(function() {
|
||||
console.log($(this))
|
||||
$("body").addClass("mobile-menu-open")
|
||||
})
|
||||
|
||||
$(".np-header-mobile-menu-nav-button:not([data-test='open-mobile-menu'])").click(function() {
|
||||
$("body").removeClass("mobile-menu-open")
|
||||
})
|
||||
|
||||
window.onscroll = function() {detectScroll()};
|
||||
|
||||
var header = document.querySelector(".np-header");
|
||||
var lastScrollTop = 0;
|
||||
|
||||
function detectScroll() {
|
||||
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
if (window.pageYOffset > 0) {
|
||||
header.classList.add("sticky");
|
||||
} else {
|
||||
header.classList.remove("sticky");
|
||||
}
|
||||
|
||||
if (window.pageYOffset > 150) {
|
||||
if (scrollTop > lastScrollTop) {
|
||||
header.classList.remove("sticky-show");
|
||||
header.classList.add("sticky-hide");
|
||||
if (!$(".np-header-mobile-menu-content").hasClass("np-hidden")) {
|
||||
$(".np-header-mobile-menu-nav-button.fa-times").click()
|
||||
}
|
||||
|
||||
} else if (scrollTop < lastScrollTop) {
|
||||
header.classList.add("sticky-show");
|
||||
header.classList.remove("sticky-hide");
|
||||
}
|
||||
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,136 @@
|
||||
{% comment %} Determine if the item should be a link or not {% endcomment %}
|
||||
{% if learning_path.enrolled? and course.unlocked? %}
|
||||
{% assign element_type = "a" %}
|
||||
{% else %}
|
||||
{% assign element_type = "div" %}
|
||||
{% endif %}
|
||||
|
||||
{% assign lp_course_required = 1 %}
|
||||
{% if course.optional? %}
|
||||
{% assign lp_course_required = 0 %}
|
||||
{% endif %}
|
||||
|
||||
<div class="lp-course" data-required="{{lp_course_required}}">
|
||||
<{{ element_type }}
|
||||
class="np-learning-path-outline-item np-card card--horizontal"
|
||||
{% if element_type == "a" %}
|
||||
href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
|
||||
{% endif %}
|
||||
>
|
||||
<div class="np-card-container">
|
||||
<div class="card__image">
|
||||
{% assign lp_image_not_cropped = item.image | replace: ',fit:crop/', '/' %}
|
||||
<img src="{{lp_image_not_cropped}}">
|
||||
{% unless course.optional? %}
|
||||
<div class="np-card-ribbon">
|
||||
Erforderlich
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-ribbon">
|
||||
Optional
|
||||
</div>
|
||||
{% endunless %}
|
||||
</div>
|
||||
<div class="np-card-content np-learning-path-outline-content np-card-padding">
|
||||
<div class="text-wrapper">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
|
||||
<div class="np-hidden-mobile">
|
||||
{% if course.completed? %}
|
||||
<div class="outline-card__icon-container outline-card__icon-complete np-hidden-desktop">
|
||||
<i class="fas fa-check np-learning-path-outline-icon" aria-label="Course Completed"></i>
|
||||
</div>
|
||||
{% elsif element_type == "div" %}
|
||||
<div class="outline-card__icon-container outline-card__icon-locked np-hidden-desktop">
|
||||
<i class="fas fa-lock np-learning-path-outline-icon" aria-label="Course Locked"></i>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="outline-card__icon-container outline-card__icon-link np-hidden-desktop">
|
||||
{% if course.optional? %}
|
||||
Heft öffnen
|
||||
{% else %}
|
||||
{% if course.progress == 0 %}
|
||||
Start
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
Fortsetzen
|
||||
{% else %}
|
||||
Anzeigen
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
{% if course.instructors and course.instructors.size > 0 %}
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress">
|
||||
{% if course.completed? %}
|
||||
Vollständig
|
||||
{% else %}
|
||||
{{ course.progress }}% Vollständig
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-hidden-desktop">
|
||||
{% if course.completed? %}
|
||||
<div class="outline-card__icon-container outline-card__icon-complete np-hidden-desktop">
|
||||
<i class="fas fa-check np-learning-path-outline-icon" aria-label="Course Completed"></i>
|
||||
</div>
|
||||
{% elsif element_type == "div" %}
|
||||
<div class="outline-card__icon-container outline-card__icon-locked np-hidden-desktop">
|
||||
<i class="fas fa-lock np-learning-path-outline-icon" aria-label="Course Locked"></i>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="outline-card__icon-container outline-card__icon-link np-hidden-desktop">
|
||||
{% if course.optional? %}
|
||||
Heft öffnen
|
||||
{% else %}
|
||||
{% if course.progress == 0 %}
|
||||
Start
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
Fortsetzen
|
||||
{% else %}
|
||||
Anzeigen
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% comment %} Use a different icon based on the state of the learning path and course {% endcomment %}
|
||||
{% if course.completed? %}
|
||||
<div class="outline-card__icon-container outline-card__icon-complete np-hidden-mobile">
|
||||
<i class="fas fa-check np-learning-path-outline-icon" aria-label="Course Completed"></i>
|
||||
</div>
|
||||
{% elsif element_type == "div" %}
|
||||
<div class="outline-card__icon-container outline-card__icon-locked np-hidden-mobile">
|
||||
<i class="fas fa-lock np-learning-path-outline-icon" aria-label="Course Locked"></i>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="outline-card__icon-container outline-card__icon-link np-hidden-mobile">
|
||||
{% if course.optional? %}
|
||||
Heft öffnen
|
||||
{% else %}
|
||||
{% if course.progress == 0 %}
|
||||
Start
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
Fortsetzen
|
||||
{% else %}
|
||||
Anzeigen
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</{{ element_type }}>
|
||||
</div>
|
||||
@ -0,0 +1,22 @@
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
{% if learning_path.enrolled? %}
|
||||
{% if learning_path.current_item.course? %}
|
||||
href="{% route learning_path_course, id: learning_path.current_item.id, learning_path_id: learning_path.id %}"
|
||||
{% elsif learning_path.current_item.training_event? %}
|
||||
href="{% route training_session, id: learning_path.current_item.id %}"
|
||||
{% endif %}
|
||||
{% else %}
|
||||
href="{% route learning_path_enrollment, code: learning_path.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if learning_path.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif learning_path.started? == false %}
|
||||
Weiter
|
||||
{% elsif learning_path.completed? %}
|
||||
{% t shared.learning_path.view %}
|
||||
{% else %}
|
||||
Weiter
|
||||
{% endif %}
|
||||
</a>
|
||||
@ -0,0 +1,3 @@
|
||||
<div class="np-card-text">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
@ -0,0 +1,27 @@
|
||||
<h3 class="np-card-heading">
|
||||
Instructors
|
||||
</h3>
|
||||
<div class="np-content-instructors-content row">
|
||||
{% for instructor in learning_path.instructors %}
|
||||
<div class="np-content-instructors-content-item">
|
||||
<img
|
||||
src="{{ instructor.avatar_url }}"
|
||||
class="np-content-instructors-content-image"
|
||||
alt="{{ instructor.name }}"
|
||||
>
|
||||
<div class="np-content-instructors-content-description">
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ instructor.name }}
|
||||
</div>
|
||||
|
||||
{% assign instructor_title_size = instructor.title | size %}
|
||||
{% if instructor.title and instructor.title.size > 0 %}
|
||||
<div class="np-content-instructors-content-info">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,137 @@
|
||||
{% assign lp_contains_ilt = false %}
|
||||
|
||||
<div class="np-learning-path-outline blocks-layout">
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% include "learning_path_course", course: item %}
|
||||
{% elsif item.training_event? %}
|
||||
{% assign lp_contains_ilt = true %}
|
||||
{% include "learning_path_training_session", training_session: item %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.outline-card__icon-link {
|
||||
background-color: #3E1191;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.outline-card__icon-link:hover {
|
||||
background-color: #7625F7;;
|
||||
}
|
||||
|
||||
.np-learning-path-session-card .np-card-content {
|
||||
flex-direction:column;
|
||||
padding:16px;
|
||||
}
|
||||
|
||||
.np-learning-path-session-card .np-events-content-date {
|
||||
min-width: auto;
|
||||
width: 90px;
|
||||
padding: 8px 16px;
|
||||
height: auto;
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
|
||||
.np-learning-path-session-card .np-events-content-time { font-size:16px;}
|
||||
|
||||
.np-learning-path-session-card .np-optional-ribbon {
|
||||
background-color: #B6B9C2;
|
||||
padding: 0.25rem 1rem;
|
||||
border-radius: 1.5rem;
|
||||
line-height: 1.1;
|
||||
text-transform: none;
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
right: 22px;
|
||||
top: 22px;
|
||||
bottom: unset;
|
||||
}
|
||||
|
||||
.np-learning-path-session-card .np-learning-path-outline-name {
|
||||
font-size:18px;
|
||||
}
|
||||
|
||||
.np-learning-path-session-card .register-button {
|
||||
width: auto;
|
||||
border-radius: 30px;
|
||||
padding: 6px 16px;
|
||||
min-width: 115px;
|
||||
text-align: center;
|
||||
margin-right: 0;
|
||||
background-color: #3E1191;
|
||||
color: #ffffff;
|
||||
margin-left:auto;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-learning-path-session-card .np-card-content {
|
||||
flex-direction:row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.np-learning-path-session-card .np-events-content-date {
|
||||
width: 150px;
|
||||
margin: 0 12px 0 0;
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.np-learning-path-session-card .np-events-content-day {
|
||||
font-size: 30px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.np-learning-path-session-card .np-learning-path-outline-content {
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.np-learning-path-session-card .np-optional-ribbon {
|
||||
left: 26%;
|
||||
right: unset;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.np-learning-path-session-card .np-learning-path-outline-name {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
buttons = document.getElementsByClassName("np-learning-path-outline-item");
|
||||
|
||||
for (i = 0; i < buttons.length; i++) {
|
||||
buttons[i].href = buttons[i].href.replace('/app','');
|
||||
}
|
||||
|
||||
const lpContainsILT = {{lp_contains_ilt}}
|
||||
|
||||
//if (!lpContainsILT) {
|
||||
if (!$(".cta__container.cta--outline").hasClass('all-optional-items')) {
|
||||
console.log("reorder lp.")
|
||||
reorderLpCoursesByRequirement()
|
||||
}
|
||||
//}
|
||||
|
||||
function reorderLpCoursesByRequirement() {
|
||||
var indexes = document.querySelectorAll(".lp-course");
|
||||
var indexesArray = Array.from(indexes);
|
||||
|
||||
const sortByRequirementAttr = arr => {
|
||||
const sorter = (a, b) => {
|
||||
return b.dataset.required - a.dataset.required;
|
||||
}
|
||||
arr.sort(sorter);
|
||||
};
|
||||
|
||||
sortByRequirementAttr(indexesArray);
|
||||
$(".np-learning-path-outline").empty()
|
||||
|
||||
indexesArray.forEach(e =>
|
||||
document.querySelector(".np-learning-path-outline").appendChild(e));
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,21 @@
|
||||
<div class="np-top-cta">
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
Lernfortschritt
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%"
|
||||
class="np-progress-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-top-cta-progress-text">
|
||||
{% if learning_path.progress > 0 %}
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
{% else %}
|
||||
nicht angefangen
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,72 @@
|
||||
{% assign session_element_type = "a" %}
|
||||
{% if learning_path.enrolled? and training_session.unlocked? %}
|
||||
{% assign session_element_type = "a" %}
|
||||
{% else %}
|
||||
{% assign session_element_type = "div" %}
|
||||
{% endif %}
|
||||
|
||||
{% assign lp_session_required = 1 %}
|
||||
{% if training_session.optional? %}
|
||||
{% assign lp_session_required = 0 %}
|
||||
{% endif %}
|
||||
|
||||
{% if learning_path.enrolled? and training_session.unlocked? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile" style='display: none;'></div>
|
||||
<div class="np-card np-learning-path-session-card lp-course" data-required="{{lp_session_required}}">
|
||||
<a
|
||||
class="np-learning-path-outline-item np-card-container"
|
||||
href="{% route training_session, id: training_session.id %}"
|
||||
>
|
||||
<div class="np-card-content np-card-padding">
|
||||
<div class="np-events-content-date np-button-background-color">
|
||||
<div class="np-events-content-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-events-content-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
|
||||
<div class="np-learning-path-outline-caption">{{ training_session.instructors }}</div>
|
||||
<div class="np-events-content-time np-learning-path-outline-time np-button-color">
|
||||
{{ training_session.time }} {{ training_session.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="register-button">
|
||||
Registrieren
|
||||
</div>
|
||||
{% if training_session.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card">
|
||||
<div class="np-learning-path-outline-item np-card-container np-learning-path-outline-inactive-item">
|
||||
<div class="np-card-content np-card-padding">
|
||||
<div class="np-events-content-date np-button-background-color">
|
||||
<div class="np-events-content-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-events-content-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
|
||||
<div class="np-learning-path-outline-caption">{{ training_session.caption }}</div>
|
||||
</div>
|
||||
{% if training_session.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
<div class="np-card np-search-zero-state">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content np-card-content-vertical np-search-zero-state-card">
|
||||
<h3 class="np-search-zero-state-title">
|
||||
Nichts gefunden
|
||||
</h3>
|
||||
<div class="np-search-zero-state-subtitle">
|
||||
Entschuldigung, wir konnten keine Übereinstimmungen finden. Bitte versuchen Sie es mit einem anderen Begriff.
|
||||
</div>
|
||||
<div class="np-search-zero-state-image"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,37 @@
|
||||
<nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
|
||||
<div class="np-sub-navigation-content-item trainings-sub-link np-sub-navigation-content-item-inactive">
|
||||
<a class="np-sub-navigation-content-item-link subnav-item" href="/app/courses">
|
||||
<i class="far fa-home-lg-alt np-button-color np-sub-navigation-content-item-icon" aria-hidden="true"></i>
|
||||
<div class="oa-sub-navigation-content-item-label">
|
||||
Trainings
|
||||
</div>
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
|
||||
<div class="np-sub-navigation-content-item learning-paths-sub-link np-sub-navigation-content-item-inactive">
|
||||
<a class="np-sub-navigation-content-item-link subnav-item" href="/app/learning_paths/a528e5fd-cd1c-4323-865e-db795895e2a3">
|
||||
<i class="fa fa-tasks np-button-color np-sub-navigation-content-item-icon" aria-hidden="true"></i>
|
||||
<div class="oa-sub-navigation-content-item-label">
|
||||
Lernwege
|
||||
</div>
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
const currentSubPath = window.location.pathname;
|
||||
|
||||
if (currentSubPath == "/app/courses") {
|
||||
$(".trainings-sub-link").addClass("np-sub-navigation-content-item-active")
|
||||
$(".trainings-sub-link").removeClass("np-sub-navigation-content-item-inactive")
|
||||
} else if (currentSubPath.includes("/app/learning_paths")) {
|
||||
$(".learning-paths-sub-link").addClass("np-sub-navigation-content-item-active")
|
||||
$(".learning-paths-sub-link").removeClass("np-sub-navigation-content-item-inactive")
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,11 @@
|
||||
<div>
|
||||
{% if training_events.available and training_events.available.any? %}
|
||||
<div class="blocks-layout">
|
||||
{% for training_event in training_events.available %}
|
||||
{% include "cards_training_event", training_event: training_event, card_classes: "col-x-sm-6 col-sm-6 col-md-4" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,43 @@
|
||||
<div class="dropdown dropdown-calendar">
|
||||
<button
|
||||
class="np-button np-button-big dropdown-calendar-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
>
|
||||
{% t .add_to_calendar %}
|
||||
<i class="fas fa-chevron-down dropdown-calendar-button-chevron" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<ul class="dropdown-calendar-menu">
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.google_calendar_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
{% t .google_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.outlook_calendar_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
{% t .outlook_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.ical_calendar_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
{% t .ical_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -0,0 +1,31 @@
|
||||
<div class="np-training-session-cta">
|
||||
<div class="np-training-session-cta-buttons">
|
||||
<form
|
||||
action="{% route training_session_registration, id: training_session.id %}"
|
||||
method="post"
|
||||
>
|
||||
{% form_authenticity_token %}
|
||||
|
||||
{% if training_session.internal? and training_session.approved? %}
|
||||
{% if features.training_events_google_calendar? %}
|
||||
{% include "training_session_calendars" %}
|
||||
<button type="submit" class="np-button np-button-big np-button-secondary">
|
||||
{% t .unregister %}
|
||||
</button>
|
||||
{% else %}
|
||||
<button type="submit" class="np-button-font-color np-button np-button-big">
|
||||
{% t .unregister %}
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<input type="hidden" name="_method" value="delete" />
|
||||
{% endif %}
|
||||
|
||||
{% if training_session.not_registered? %}
|
||||
<button type="submit" class="np-top-button np-button np-button-big">
|
||||
{% t .register %}
|
||||
</button>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="np-card-training-session-date-bar"></div>
|
||||
<div class="np-card-training-session-date-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
<div class="card__month-year-container">
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year">
|
||||
{{ training_session.year }}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,73 @@
|
||||
{% include "header", current_page_orgin: "training_events" %}
|
||||
<main class="np-main np-page-container np-training-session">
|
||||
<div class="blocks-layout">
|
||||
|
||||
<div class="col-md-8">
|
||||
<div class="np-card">
|
||||
<div class="np-card-container details-card__card-container">
|
||||
<div class="np-resource-header details-card__header np-card-padding-dynamic">
|
||||
<div class="np-top-title">
|
||||
{{ training_event.title }}
|
||||
</div>
|
||||
<div class="np-top-vocabulary">
|
||||
|
||||
{% case training_event.event_type %}
|
||||
{% when "online" %}
|
||||
<i class="fa fa-laptop np-training-session-icon" aria-hidden="true"></i>
|
||||
Online Event
|
||||
{% when "in_person" %}
|
||||
<i class="fa fa-users-class np-training-session-icon" aria-hidden="true"></i>
|
||||
In-Person Event
|
||||
{% endcase %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="np-card-padding-dynamic details-card__card-content">
|
||||
|
||||
{% if training_event.description and training_event.description.size > 0 %}
|
||||
{% include "training_session_description" %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
|
||||
<div class="blocks-layout">
|
||||
<div class="np-card col-sm-6 col-md-12">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
{% include "training_session_details" %}
|
||||
{% include "training_session_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6 col-md-12">
|
||||
<div class="np-training-session-sessions-title">
|
||||
{% t shared.more_sessions %}
|
||||
</div>
|
||||
{% if training_event.sessions and training_event.sessions.size > 1 %}
|
||||
{% include "training_session_more_sessions" %}
|
||||
{% else %}
|
||||
<div class="np-training-session-zero-state">
|
||||
<img
|
||||
alt="{% t .empty %}"
|
||||
class="np-zero-state-training-sessions"
|
||||
/>
|
||||
<div class="np-training-session-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,60 @@
|
||||
<div class="np-card-training-session-date">
|
||||
{% include "training_session_date", training_session: training_session %}
|
||||
|
||||
{% if training_session.approved? %}
|
||||
<div class="session-date__other-info-container np-training-session-cta-note np-alert-success">
|
||||
<div class="session-date__other-info-wrapper">
|
||||
<i class="far fa-check np-training-session-icon" aria-hidden="true"></i>
|
||||
<span>You're registered!</span>
|
||||
</div>
|
||||
</div>
|
||||
{% elsif training_session.pending? %}
|
||||
<div class="session-date__other-info np-training-session-cta-note np-alert-error">
|
||||
<div class="session-date__other-info-wrapper">
|
||||
<span>Pending – waiting approval</span>
|
||||
</div>
|
||||
</div>
|
||||
{% elsif training_session.denied? %}
|
||||
<div class="session-date__other-info np-training-session-cta-note np-alert-error">
|
||||
<div class="session-date__other-info-wrapper">
|
||||
<span>Denied – contact your academy admin</span>
|
||||
</div>
|
||||
</div>
|
||||
{% elsif training_session.too_late? %}
|
||||
<div class="session-date__other-info np-training-session-cta-note np-alert-error">
|
||||
<div class="session-date__other-info-wrapper">
|
||||
<span>Too late – meeting started</span>
|
||||
</div>
|
||||
</div>
|
||||
{% elsif training_session.no_seats? %}
|
||||
<div class="session-date__other-info np-training-session-cta-note np-alert-error">
|
||||
<div class="session-date__other-info-wrapper">
|
||||
<span>No seats available</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="training-session__details">
|
||||
<div class="np-training-session-time">
|
||||
<i class="fa fa-clock np-training-session-icon" aria-label="Event Time"></i>
|
||||
{{ training_session.time_period | replace: "AM", "am" | replace: "PM", "pm" | replace: "-", "–" }} {{ training_session.time_zone }}
|
||||
</div>
|
||||
<div class="np-training-session-location">
|
||||
{% if training_session.location %}
|
||||
<i class="fa fa-map-marker-alt np-training-session-icon" aria-label="Event Location"></i>
|
||||
{{ training_session.location }}
|
||||
{% elsif training_session.session_url %}
|
||||
<i class="fa fa-globe np-training-session-icon" aria-label="Event URL"></i>
|
||||
<a href="{{ training_session.session_url }}" class="np-button-color" target="_blank" >
|
||||
{{ training_session.session_url }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if training_session.instructor and training_session.instructor.size > 0 %}
|
||||
<div>
|
||||
<i class="fa fa-chalkboard-teacher np-training-session-icon" aria-label="Instructor"></i>
|
||||
{{ training_session.instructor }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,24 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-courses np-subpage-container">
|
||||
<h1 class="np-resource-title">
|
||||
Deine Trainings für mehr Jobauswahl
|
||||
</h1>
|
||||
{% comment %} <br>
|
||||
{% 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 %} {% endcomment %}
|
||||
{% include "courses_catalog" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-resource-title {
|
||||
text-transform:none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,67 @@
|
||||
{% comment %} Skip cover page is course contains on the job category {% endcomment %}
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | downcase %}
|
||||
{% if cat_name == "on-the-job" or cat.id == "40b1f3d7-6faf-4d54-a74f-92d330831728" %}
|
||||
|
||||
{% if course.enrolled? %}
|
||||
<script>window.location.replace("{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}")</script>
|
||||
{% else %}
|
||||
<script>window.location.replace("{% route course_enrollment, code: course.enrollment_code %}")</script>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% include "header", current_page_orgin: "catalog" %}
|
||||
<main class="np-main np-page-container page--course-overview">
|
||||
|
||||
{% comment %} Get the full size background image by removing the modifier from the URL {% endcomment %}
|
||||
{% assign course_image_full_size = course.image_url | replace: '/resize=width:820,height:500,fit:crop/', '/' %}
|
||||
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-resource-header details-card__header np-card-padding-dynamic">
|
||||
{% include "course_header" %}
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="details-card__card-content np-card-padding-dynamic">
|
||||
|
||||
{% if course.full_description and course.full_description.size > 0 %}
|
||||
{% include "course_description" %}
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors and course.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% include "course_outline" %}
|
||||
|
||||
{% if course.events and course.events.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.enrolled? and course.started? %}
|
||||
{% include "course_progress_and_cta" %}
|
||||
{% else %}
|
||||
{% include "course_cta_button" %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-main {
|
||||
background:#8B78FA;
|
||||
}
|
||||
|
||||
.np-top-button.disabled {
|
||||
background-color: #ddd;
|
||||
cursor: text;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,20 @@
|
||||
{% include "header" %}
|
||||
{% comment %} {% include "sub_navigation", current_page: "/app/courses" %} {% endcomment %}
|
||||
<main class="np-main np-courses np-subpage-container">
|
||||
<h1 class="np-resource-title">
|
||||
Deine Trainings für mehr Jobauswahl
|
||||
</h1>
|
||||
<br>
|
||||
{% include "courses_index", card_classes: "col-xs-12 col-sm-6 col-lg-4 np-stretch-content" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-resource-title {
|
||||
text-transform:none;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% comment %} <script>
|
||||
$('.np-card-image').freezeframe({'animation_play_duration': 2500, 'non_touch_device_trigger_event': 'hover'})
|
||||
</script> {% endcomment %}
|
||||
@ -0,0 +1,3 @@
|
||||
<script>
|
||||
window.location.replace("/app/courses")
|
||||
</script>
|
||||
@ -0,0 +1,354 @@
|
||||
{% assign isAuthenticatedUser = false %}
|
||||
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.name == "All Users" or group.id == "6331d115-ea74-418a-99b2-af5c81208fe1" %}
|
||||
{% assign isAuthenticatedUser = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if current_person.email contains "+preview" %}
|
||||
{% assign isAuthenticatedUser = true %}
|
||||
{% endif %}
|
||||
|
||||
{% unless isAuthenticatedUser %}
|
||||
<main class="np-main np-homepage unauthorized">
|
||||
<div class="np-homepage-content">
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-headline" style="color: #fff">
|
||||
{{ homepage.headline }}
|
||||
</div>
|
||||
<div class="np-homepage-subheadline">
|
||||
Entschuldigung! Es scheint, dass deine E-Mail-Adresse ({{current_person.email}}) nicht den richtigen Zugang erhalten hat. Bitte wende dich an <a href="mailto:talents@zenjob.com" target="_blank" style="color:#fff;">talents@zenjob.com</a>, um den Zugang zu den vollständigen Lerninhalten anzufragen.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% endunless %}
|
||||
|
||||
{% if isAuthenticatedUser %}
|
||||
{% assign catalog_courses = courses.in_catalog %}
|
||||
{% include "header", current_page_orgin: "false" %}
|
||||
|
||||
<main class="np-main np-homepage">
|
||||
<div class="np-homepage-content">
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-headline" style="color: #fff">
|
||||
{{ homepage.headline }}
|
||||
</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
|
||||
<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 %}
|
||||
</div>
|
||||
</div>
|
||||
wissen musst.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="homepage-cards-section row np-max-width">
|
||||
{% 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}}">
|
||||
<a href="{% route course, id: course.id %}" class="homepage-card">
|
||||
<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>
|
||||
<div class="homepage-card-title-wrapper">
|
||||
<div>{{course.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% 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}}">
|
||||
<a href="{% route learning_path, id: learning_path.id %}" class="homepage-card">
|
||||
<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>
|
||||
<div class="homepage-card-title-wrapper">
|
||||
<div>{{learning_path.name}} <span>(optional)</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.np-header {
|
||||
background: transparent;
|
||||
|
||||
}
|
||||
|
||||
main.np-homepage {
|
||||
background-color: rgba(118,37,247,1);
|
||||
background: linear-gradient(90deg, rgba(62,17,145,1) 0%, rgba(118,37,247,1) 50%, rgba(139,120,250,1) 100%);
|
||||
background-size: cover;
|
||||
animation: gradient 15s ease-in-out infinite;
|
||||
height: 100%;
|
||||
padding-top: 100px;
|
||||
margin-bottom:0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
main.np-homepage.unauthorized {
|
||||
padding-top:0;
|
||||
}
|
||||
|
||||
.np-homepage-content {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.unauthorized .np-homepage-content {
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.np-homepage-hero-content {
|
||||
position: unset;
|
||||
padding-bottom: 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.np-homepage-content .np-homepage-headline {
|
||||
font-size: 1.75rem;
|
||||
color: #fff;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.np-homepage-content .np-homepage-subheadline {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.1;
|
||||
color: #fff;
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 79%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 22%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 79%;
|
||||
}
|
||||
}
|
||||
|
||||
.homepage-content-dropdown {
|
||||
margin-right: 13px;
|
||||
}
|
||||
|
||||
.dropbtn {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
border: black;
|
||||
text-decoration: underline;
|
||||
font-weight: 700;
|
||||
position:relative;
|
||||
cursor:pointer;
|
||||
padding: 0 4px 0 0;
|
||||
}
|
||||
|
||||
.dropbtn:after {
|
||||
content:"▼";
|
||||
position:absolute;
|
||||
right: -13px;
|
||||
top: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #E1E2E5;
|
||||
color:#707483;
|
||||
min-width: 100%;
|
||||
box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {display: block;}
|
||||
|
||||
.dropdown:hover .dropbtn {background-color: #635bff60;}
|
||||
|
||||
|
||||
/* CARDS SECTION */
|
||||
.homepage-cards-section {
|
||||
padding: 0 24px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.homepage-card {
|
||||
margin: 0 auto 24px;
|
||||
max-width: 350px;
|
||||
text-decoration:none;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.homepage-card-content {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: rgb(141 148 158 / 30%) 0px 4px 12px;
|
||||
}
|
||||
|
||||
.homepage-card-title-wrapper {
|
||||
width:65%;
|
||||
color: #3E1191;
|
||||
font-weight:700;
|
||||
text-align:center;
|
||||
padding:16px;
|
||||
transition:all 0.2s;
|
||||
}
|
||||
|
||||
.homepage-card:hover .homepage-card-title-wrapper {
|
||||
color:#7625F7;
|
||||
}
|
||||
|
||||
.homepage-card-img {
|
||||
width:45%;
|
||||
border-right: 1px solid #e0f3ff;
|
||||
padding:24px 16px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.homepage-card-img img {
|
||||
max-width: 90px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-homepage-hero-content {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 3rem;
|
||||
max-width:1170px;
|
||||
}
|
||||
.np-homepage-content .np-homepage-headline {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.np-homepage-content .np-homepage-subheadline {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.homepage-content-dropdown {
|
||||
margin-right: 22px;
|
||||
}
|
||||
|
||||
.dropbtn:after {
|
||||
right: -21px;
|
||||
top: 12px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.homepage-cards-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.homepage-card {
|
||||
max-width: 275px;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.homepage-card-content {
|
||||
flex-direction: column-reverse;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.homepage-card-title-wrapper {
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
width:100%;
|
||||
border-bottom:1px solid #e0f3ff;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.homepage-card-img {
|
||||
width: 100%;
|
||||
border: none;
|
||||
padding: 40px 16px;
|
||||
}
|
||||
|
||||
.homepage-card-img img {
|
||||
width: 120px;
|
||||
height:120px;
|
||||
max-width:120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
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")
|
||||
|
||||
$(".homepage-card-column").hide()
|
||||
$(`.homepage-card-column[data-category='${selectedCategoryId}']`).show()
|
||||
}
|
||||
|
||||
function filterCoursesByHash(urlHash) {
|
||||
|
||||
$(".dropdown-content a").each(function() {
|
||||
if ($(this).attr('href') == urlHash) {
|
||||
$(".dropbtn").text($(this).text())
|
||||
filterCoursesBySelectedJob($(this))
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
354
Custom_Templates/customer_templates/Zenjob/homepage.html.liquid
Normal file
354
Custom_Templates/customer_templates/Zenjob/homepage.html.liquid
Normal file
@ -0,0 +1,354 @@
|
||||
{% assign isAuthenticatedUser = false %}
|
||||
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.name == "All Users" or group.id == "6331d115-ea74-418a-99b2-af5c81208fe1" %}
|
||||
{% assign isAuthenticatedUser = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if current_person.email contains "+preview" %}
|
||||
{% assign isAuthenticatedUser = true %}
|
||||
{% endif %}
|
||||
|
||||
{% unless isAuthenticatedUser %}
|
||||
<main class="np-main np-homepage unauthorized">
|
||||
<div class="np-homepage-content">
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-headline" style="color: #fff">
|
||||
{{ homepage.headline }}
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% endunless %}
|
||||
|
||||
{% if isAuthenticatedUser %}
|
||||
{% assign catalog_courses = courses.in_catalog %}
|
||||
{% include "header", current_page_orgin: "false" %}
|
||||
|
||||
<main class="np-main np-homepage">
|
||||
<div class="np-homepage-content">
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-headline" style="color: #fff">
|
||||
{{ homepage.headline }}
|
||||
</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
|
||||
<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 %}
|
||||
</div>
|
||||
</div>
|
||||
wissen musst.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="homepage-cards-section row np-max-width">
|
||||
{% 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}}">
|
||||
<a href="{% route course, id: course.id %}" class="homepage-card">
|
||||
<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>
|
||||
<div class="homepage-card-title-wrapper">
|
||||
<div>{{course.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% 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}}">
|
||||
<a href="{% route learning_path, id: learning_path.id %}" class="homepage-card">
|
||||
<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>
|
||||
<div class="homepage-card-title-wrapper">
|
||||
<div>{{learning_path.name}} <span>(optional)</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.np-header {
|
||||
background: transparent;
|
||||
|
||||
}
|
||||
|
||||
main.np-homepage {
|
||||
background-color: rgba(118,37,247,1);
|
||||
background: linear-gradient(90deg, rgba(62,17,145,1) 0%, rgba(118,37,247,1) 50%, rgba(139,120,250,1) 100%);
|
||||
background-size: cover;
|
||||
animation: gradient 15s ease-in-out infinite;
|
||||
height: 100%;
|
||||
padding-top: 100px;
|
||||
margin-bottom:0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
main.np-homepage.unauthorized {
|
||||
padding-top:0;
|
||||
}
|
||||
|
||||
.np-homepage-content {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.unauthorized .np-homepage-content {
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.np-homepage-hero-content {
|
||||
position: unset;
|
||||
padding-bottom: 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.np-homepage-content .np-homepage-headline {
|
||||
font-size: 1.75rem;
|
||||
color: #fff;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.np-homepage-content .np-homepage-subheadline {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.1;
|
||||
color: #fff;
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 79%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 22%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 79%;
|
||||
}
|
||||
}
|
||||
|
||||
.homepage-content-dropdown {
|
||||
margin-right: 13px;
|
||||
}
|
||||
|
||||
.dropbtn {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
border: black;
|
||||
text-decoration: underline;
|
||||
font-weight: 700;
|
||||
position:relative;
|
||||
cursor:pointer;
|
||||
padding: 0 4px 0 0;
|
||||
}
|
||||
|
||||
.dropbtn:after {
|
||||
content:"▼";
|
||||
position:absolute;
|
||||
right: -13px;
|
||||
top: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #E1E2E5;
|
||||
color:#707483;
|
||||
min-width: 100%;
|
||||
box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {display: block;}
|
||||
|
||||
.dropdown:hover .dropbtn {background-color: #635bff60;}
|
||||
|
||||
|
||||
/* CARDS SECTION */
|
||||
.homepage-cards-section {
|
||||
padding: 0 24px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.homepage-card {
|
||||
margin: 0 auto 24px;
|
||||
max-width: 350px;
|
||||
text-decoration:none;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.homepage-card-content {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: rgb(141 148 158 / 30%) 0px 4px 12px;
|
||||
}
|
||||
|
||||
.homepage-card-title-wrapper {
|
||||
width:65%;
|
||||
color: #3E1191;
|
||||
font-weight:700;
|
||||
text-align:center;
|
||||
padding:16px;
|
||||
transition:all 0.2s;
|
||||
}
|
||||
|
||||
.homepage-card:hover .homepage-card-title-wrapper {
|
||||
color:#7625F7;
|
||||
}
|
||||
|
||||
.homepage-card-img {
|
||||
width:45%;
|
||||
border-right: 1px solid #e0f3ff;
|
||||
padding:24px 16px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.homepage-card-img img {
|
||||
max-width: 90px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-homepage-hero-content {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 3rem;
|
||||
max-width:1170px;
|
||||
}
|
||||
.np-homepage-content .np-homepage-headline {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.np-homepage-content .np-homepage-subheadline {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.homepage-content-dropdown {
|
||||
margin-right: 22px;
|
||||
}
|
||||
|
||||
.dropbtn:after {
|
||||
right: -21px;
|
||||
top: 12px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.homepage-cards-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.homepage-card {
|
||||
max-width: 275px;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.homepage-card-content {
|
||||
flex-direction: column-reverse;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.homepage-card-title-wrapper {
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
width:100%;
|
||||
border-bottom:1px solid #e0f3ff;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.homepage-card-img {
|
||||
width: 100%;
|
||||
border: none;
|
||||
padding: 40px 16px;
|
||||
}
|
||||
|
||||
.homepage-card-img img {
|
||||
width: 120px;
|
||||
height:120px;
|
||||
max-width:120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
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")
|
||||
|
||||
$(".homepage-card-column").hide()
|
||||
$(`.homepage-card-column[data-category='${selectedCategoryId}']`).show()
|
||||
}
|
||||
|
||||
function filterCoursesByHash(urlHash) {
|
||||
|
||||
$(".dropdown-content a").each(function() {
|
||||
if ($(this).attr('href') == urlHash) {
|
||||
$(".dropbtn").text($(this).text())
|
||||
filterCoursesBySelectedJob($(this))
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,156 @@
|
||||
{% include "header", current_page_orgin: "learning_paths" %}
|
||||
|
||||
{% assign lp_items_all_optional = true %}
|
||||
{% for item in learning_path.items %}
|
||||
{% unless item.optional? %}
|
||||
{% assign lp_items_all_optional = false %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
|
||||
<main class="np-main np-page-container page--learning-path-overview">
|
||||
|
||||
{% assign learning_path_image_full_size = learning_path.image_url | replace: '/resize=width:820,height:500,fit:crop/', '/' %}
|
||||
|
||||
<div class="blocks-layout">
|
||||
|
||||
<div class="col-md-5 col-lg-6">
|
||||
<div class="np-card">
|
||||
<div class="details-card__card-container np-card-container">
|
||||
<div class="np-resource-header details-card__header np-card-padding-dynamic">
|
||||
<div class="np-top-title">
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="details-card__card-content np-card-padding-dynamic">
|
||||
{% if learning_path.description and learning_path.description.size > 0 %}
|
||||
{% include "learning_path_description" %}
|
||||
{% endif %}
|
||||
|
||||
{% if learning_path.instructors and learning_path.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-7 col-lg-6">
|
||||
<div class="cta__container cta--outline {% if lp_items_all_optional %}all-optional-items{% endif %}">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
|
||||
.cta__container.cta--outline.all-optional-items {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.page--learning-path-overview {
|
||||
background: #8B78FA;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-item .np-card-container {
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-item .card__image {
|
||||
width:100%;
|
||||
padding:16px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-item .card__image > img {
|
||||
max-width:100%;
|
||||
max-height:200px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-item .card__image .np-card-ribbon {
|
||||
right:22px;
|
||||
top:22px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-content {
|
||||
margin-left: 0;
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-item .np-card-content-title {
|
||||
font-size:18px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.outline-card__icon-container {
|
||||
width: auto;
|
||||
border-radius: 30px;
|
||||
padding: 6px 16px;
|
||||
min-width: 115px;
|
||||
text-align: center;
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-item .np-card-content-progress {
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
|
||||
.np-learning-path-outline-item .np-card-container {
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-item .card__image {
|
||||
width:40%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-item .card__image > img {
|
||||
max-height:130px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-content {
|
||||
padding: 16px;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
justify-content: space-between;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-content .text-wrapper {
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-item .np-card-content-title {
|
||||
font-size:16px;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
.outline-card__icon-container {
|
||||
margin-left:16px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width:1400px) {
|
||||
.np-learning-path-outline-item .np-card-content-title {
|
||||
font-size:18px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-item .np-card-content-progress {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,60 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-learning-paths np-subpage-container">
|
||||
{% include "learning_paths_index", items: learning_paths.available %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-learning-paths {
|
||||
background: #8B78FA;
|
||||
}
|
||||
|
||||
.np-resource-title {
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.np-learning-paths-resources {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.np-learning-paths-resources .np-card-container {
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.np-learning-paths-resources .image-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.np-learning-paths-resources .image-wrapper img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.np-learning-paths-resources .np-card-ribbon {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.np-learning-paths-resources .np-card-content-title {
|
||||
font-size:18px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-learning-paths .np-learning-path-image {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.np-learning-paths-resources .image-wrapper {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.np-learning-paths-resources .np-card-text-wrapper {
|
||||
width:65%;
|
||||
}
|
||||
|
||||
.np-learning-paths-resources .np-card-content-title {
|
||||
font-size:24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,57 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-courses np-subpage-container">
|
||||
<h1 class="np-resource-title">
|
||||
On-The-Job Videos
|
||||
</h1>
|
||||
<br>
|
||||
|
||||
{% assign num_of_video_courses = 0 %}
|
||||
{% if courses.in_catalog.any? %}
|
||||
<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">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% assign num_of_video_courses = num_of_video_courses | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% comment %} {% capture message %}
|
||||
{% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %} {% endcomment %}
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
<p> {% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}</p>
|
||||
</div>
|
||||
<img class="np-zero-state-courses" />
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if num_of_video_courses == 0 %}
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
<p> {% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}</p>
|
||||
</div>
|
||||
<img class="np-zero-state-courses" />
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-resource-title {
|
||||
text-transform:none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,58 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-search np-subpage-container np-max-width">
|
||||
<div class="np-resource-title">
|
||||
{% t .title %}
|
||||
</div>
|
||||
<div class="np-search-header">
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .showing %}
|
||||
<span class="np-resource-subtitle-number">{{ results.count }}</span>
|
||||
{% t .results_for %}
|
||||
<span class="np-button-color">"{{ results.term }}"</span>
|
||||
</div>
|
||||
{% capture label %}{% t shared.filters.by_type %}{% endcapture %}
|
||||
{%
|
||||
include "filter_dropdown",
|
||||
filters: results.filters,
|
||||
key: "type",
|
||||
label: label
|
||||
%}
|
||||
</div>
|
||||
{% if results.items.any? %}
|
||||
{% render "search_result" for results.items as result %}
|
||||
{% else %}
|
||||
{% include "search_zero_state" %}
|
||||
{% endif %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
|
||||
.np-search-result {
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.np-search-result a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.np-search-result .np-card-content {
|
||||
flex-direction: row;
|
||||
padding:0;
|
||||
}
|
||||
.np-search-result-snippet {
|
||||
overflow: hidden;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.np-search-result-image {
|
||||
margin-right:12px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-search-result-image {
|
||||
margin-right:24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1942
Custom_Templates/customer_templates/Zenjob/styles.css.liquid
Normal file
1942
Custom_Templates/customer_templates/Zenjob/styles.css.liquid
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,13 @@
|
||||
{% include "header", current_page_orgin: "training_events" %}
|
||||
<main class="np-main np-training-events np-subpage-container">
|
||||
<div class="page__header-wrapper">
|
||||
<h1 class="np-resource-title">
|
||||
{% t .title %}
|
||||
</h1>
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .subtitle %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "training_events_index" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1 @@
|
||||
{% include "training_session_desktop_view" %}
|
||||
@ -0,0 +1,74 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-certificates np-subpage-container">
|
||||
<h1 class="np-resource-title">
|
||||
{{custom_page.headline}}
|
||||
</h1>
|
||||
<div class="np-resource-subtitle"></div>
|
||||
|
||||
<div class="badges-section">
|
||||
<div class="row">
|
||||
{% 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">
|
||||
<a href="{% route course, id: course.id %}" class="badge-container">
|
||||
|
||||
<img src="{{course.properties.course_badge}}" class="{% if course.progress < 100 %}inactive{% endif %}" />
|
||||
<div class="badge-course-title">{{course.name}}</div>
|
||||
</a>
|
||||
</div>
|
||||
{% assign number_of_badges = number_of_badges | plus: 1 %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
|
||||
{% if number_of_badges == 0 %}
|
||||
<div class="np-dashboard-resources-container">
|
||||
<img class="np-zero-state-courses" alt="" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-resource-title {
|
||||
text-transform:none;
|
||||
}
|
||||
|
||||
.badges-section {
|
||||
margin-top:32px;
|
||||
}
|
||||
|
||||
.badge-container {
|
||||
text-align:center;
|
||||
padding: 32px;
|
||||
background: #fff;
|
||||
box-shadow: rgb(141 148 158 / 80%) 0px 4px 12px;
|
||||
border-radius: 16px;
|
||||
margin: 0 16px 32px;
|
||||
display: block;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.badge-container img {
|
||||
max-width:100%;
|
||||
}
|
||||
|
||||
.badge-container img.inactive {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.badge-course-title {
|
||||
line-height: 1.3;
|
||||
color: #333333;
|
||||
font-weight:700;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.badge-course-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user