small script changes and notes
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,30 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
{% endif %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
|
||||
</div>
|
||||
{% if features.training_events? %}
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-4">
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t .upcoming_events %}
|
||||
</div>
|
||||
{% include "training_events_dashboard" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
current_page: "/app/user-guides"
|
||||
BIN
Custom_Templates/customer_templates/Zenjob/.DS_Store
vendored
Normal file
BIN
Custom_Templates/customer_templates/Zenjob/.DS_Store
vendored
Normal file
Binary file not shown.
@ -1,3 +1,4 @@
|
||||
{% assign course_ribbon = course.ribbon | downcase %}
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="card__image" style="background-image: url({{ course.image_url }})">
|
||||
@ -26,8 +27,8 @@
|
||||
{% 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" %}
|
||||
|
||||
{% if course_ribbon == "hochladen" %}
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
Hochladen
|
||||
</a>
|
||||
@ -39,19 +40,21 @@
|
||||
|
||||
|
||||
{% 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 %}
|
||||
{% unless course_ribbon == "demnächst" or course.name == "Neue Lerninhalte" %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<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>
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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>
|
||||
@ -16,14 +16,19 @@
|
||||
{% 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 %}
|
||||
{% assign course_ribbon = course.ribbon | downcase %}
|
||||
{% if course_ribbon == "hochladen" %}
|
||||
Hochladen
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% 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 %}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
@ -1,385 +0,0 @@
|
||||
{% 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>
|
||||
@ -1,385 +0,0 @@
|
||||
{% 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>
|
||||
@ -1,398 +0,0 @@
|
||||
{% 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>
|
||||
@ -4,7 +4,7 @@
|
||||
{% if group.name == "All Users" or group.id == "6331d115-ea74-418a-99b2-af5c81208fe1" %}
|
||||
{% assign is_in_authenticated_group = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
{% if current_person.email contains "+preview" %}
|
||||
{% assign is_in_authenticated_group = true %}
|
||||
@ -69,6 +69,10 @@
|
||||
<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>
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a href="/app/training_events" class="np-header-desktop-nav-link events-link">
|
||||
Veranstaltungen</a>
|
||||
</li>
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
@ -156,6 +160,7 @@
|
||||
<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>
|
||||
<a href="/app/training_events" class="np-header-mobile-menu-content-button">Veranstaltungen</a>
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
@ -208,6 +213,7 @@ body.mobile-menu-open .np-header {
|
||||
|
||||
.np-header-logo {
|
||||
padding: 0.75rem 0;
|
||||
justify-content:flex-start;
|
||||
}
|
||||
|
||||
.np-header-logo-image {
|
||||
@ -395,4 +401,4 @@ function detectScroll() {
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -49,7 +49,17 @@
|
||||
{% else %}
|
||||
<div class="outline-card__icon-container outline-card__icon-link np-hidden-desktop">
|
||||
{% if course.optional? %}
|
||||
Heft öffnen
|
||||
{% if course.name == "Servicetraining" or course.name == "Kassentraining" %}
|
||||
{% if course.progress == 0 %}
|
||||
Start
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
Fortsetzen
|
||||
{% else %}
|
||||
Anzeigen
|
||||
{% endif %}
|
||||
{% else %}
|
||||
Heft öffnen
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if course.progress == 0 %}
|
||||
Start
|
||||
@ -89,7 +99,18 @@
|
||||
{% else %}
|
||||
<div class="outline-card__icon-container outline-card__icon-link np-hidden-desktop">
|
||||
{% if course.optional? %}
|
||||
{% if course.name == "Servicetraining" or course.name == "Kassentraining" %}
|
||||
{% if course.progress == 0 %}
|
||||
Start
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
Fortsetzen
|
||||
{% else %}
|
||||
Anzeigen
|
||||
{% endif %}
|
||||
{% else %}
|
||||
Heft öffnen
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
{% if course.progress == 0 %}
|
||||
Start
|
||||
@ -117,7 +138,17 @@
|
||||
{% else %}
|
||||
<div class="outline-card__icon-container outline-card__icon-link np-hidden-mobile">
|
||||
{% if course.optional? %}
|
||||
Heft öffnen
|
||||
{% if course.name == "Servicetraining" or course.name == "Kassentraining" %}
|
||||
{% if course.progress == 0 %}
|
||||
Start
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
Fortsetzen
|
||||
{% else %}
|
||||
Anzeigen
|
||||
{% endif %}
|
||||
{% else %}
|
||||
Heft öffnen
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if course.progress == 0 %}
|
||||
Start
|
||||
|
||||
@ -26,14 +26,24 @@
|
||||
padding:16px;
|
||||
}
|
||||
|
||||
.np-learning-path-session-card .np-events-content-date-wrapper {
|
||||
height:185px;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
.np-learning-path-session-card .np-events-content-date {
|
||||
min-width: auto;
|
||||
width: 90px;
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
height: auto;
|
||||
height: 100%;
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
|
||||
.np-learning-path-session-card .np-events-content-month,
|
||||
.np-learning-path-session-card .np-events-content-day {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.np-learning-path-session-card .np-events-content-time { font-size:16px;}
|
||||
|
||||
.np-learning-path-session-card .np-optional-ribbon {
|
||||
@ -72,11 +82,22 @@
|
||||
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-date-wrapper {
|
||||
width: 40%;
|
||||
max-width: 300px;
|
||||
height: calc(100% + 32px);
|
||||
margin: -16px 0;
|
||||
padding: 16px;
|
||||
border-right: 1px solid #e0f3ff;
|
||||
position:relative;
|
||||
left: -16px;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
.np-learning-path-session-card .np-events-content-date {
|
||||
margin: 0 8px;
|
||||
width:auto;
|
||||
}
|
||||
|
||||
.np-learning-path-session-card .np-events-content-day {
|
||||
font-size: 30px;
|
||||
@ -85,16 +106,18 @@
|
||||
|
||||
.np-learning-path-session-card .np-learning-path-outline-content {
|
||||
flex-direction:column;
|
||||
padding: 6px 16px 0 0;
|
||||
height:100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.np-learning-path-session-card .np-optional-ribbon {
|
||||
left: 26%;
|
||||
right: unset;
|
||||
top: 16px;
|
||||
right: 22px;
|
||||
top: 22px;
|
||||
}
|
||||
|
||||
.np-learning-path-session-card .np-learning-path-outline-name {
|
||||
margin-top: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,6 +10,29 @@
|
||||
{% assign lp_session_required = 0 %}
|
||||
{% endif %}
|
||||
|
||||
{% assign training_session_time = training_session.time | split: " - " %}
|
||||
|
||||
{% assign start_time = training_session_time | slice: 0 | join: "" %}
|
||||
{% if start_time contains "PM" %}
|
||||
{% assign start_time = start_time | remove: " PM" %}
|
||||
{% assign split_start_time = start_time | split: ":" %}
|
||||
{% assign start_time_hour = split_start_time | slice: 0 | join: "" | abs | plus: 12 %}
|
||||
{% assign start_time_mins = split_start_time | slice: 1 | join: "" %}
|
||||
{% elsif start_time contains "AM" %}
|
||||
{% assign start_time = start_time | remove: " AM" %}
|
||||
{% endif %}
|
||||
|
||||
{% assign end_time = training_session_time | slice: 1 | join: "" %}
|
||||
{% if end_time contains "PM" %}
|
||||
{% assign end_time = end_time | remove: " PM" %}
|
||||
{% assign split_end_time = end_time | split: ":" %}
|
||||
{% assign end_time_hour = split_end_time | slice: 0 | join: "" | abs | plus: 12 %}
|
||||
{% assign end_time_mins = split_end_time | slice: 1 | join: "" %}
|
||||
{% elsif end_time contains "AM" %}
|
||||
{% assign end_time = end_time | remove: " AM" %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% 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}}">
|
||||
@ -18,53 +41,62 @@
|
||||
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 class="np-events-content-date-wrapper">
|
||||
<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>
|
||||
{% if training_session.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</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-learning-path-outline-caption">
|
||||
{% assign instructor_name = training_session.instructors | split: " " %}
|
||||
{{ instructor_name | slice: 0 }}
|
||||
</div>
|
||||
<div class="np-events-content-time np-learning-path-outline-time np-button-color">
|
||||
{{ training_session.time }} {{ training_session.time_zone }}
|
||||
{{start_time_hour}}:{{start_time_mins}} - {{end_time_hour}}:{{end_time_mins}} Uhr
|
||||
</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-card np-learning-path-session-card lp-course">
|
||||
<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 class="np-events-content-date-wrapper">
|
||||
<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>
|
||||
{% if training_session.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</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>
|
||||
|
||||
@ -1,3 +1,25 @@
|
||||
{% assign training_session_time = training_session.time_period | split: " - " %}
|
||||
|
||||
{% assign start_time = training_session_time | slice: 0 | join: "" %}
|
||||
{% if start_time contains "PM" %}
|
||||
{% assign start_time = start_time | remove: " PM" %}
|
||||
{% assign split_start_time = start_time | split: ":" %}
|
||||
{% assign start_time_hour = split_start_time | slice: 0 | join: "" | abs | plus: 12 %}
|
||||
{% assign start_time_mins = split_start_time | slice: 1 | join: "" %}
|
||||
{% elsif start_time contains "AM" %}
|
||||
{% assign start_time = start_time | remove: " AM" %}
|
||||
{% endif %}
|
||||
|
||||
{% assign end_time = training_session_time | slice: 1 | join: "" %}
|
||||
{% if end_time contains "PM" %}
|
||||
{% assign end_time = end_time | remove: " PM" %}
|
||||
{% assign split_end_time = end_time | split: ":" %}
|
||||
{% assign end_time_hour = split_end_time | slice: 0 | join: "" | abs | plus: 12 %}
|
||||
{% assign end_time_mins = split_end_time | slice: 1 | join: "" %}
|
||||
{% elsif end_time contains "AM" %}
|
||||
{% assign end_time = end_time | remove: " AM" %}
|
||||
{% endif %}
|
||||
|
||||
<div class="np-card-training-session-date">
|
||||
{% include "training_session_date", training_session: training_session %}
|
||||
|
||||
@ -38,7 +60,7 @@
|
||||
<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 }}
|
||||
{{start_time_hour}}:{{start_time_mins}} - {{end_time_hour}}:{{end_time_mins}} Uhr
|
||||
</div>
|
||||
<div class="np-training-session-location">
|
||||
{% if training_session.location %}
|
||||
@ -54,7 +76,8 @@
|
||||
{% 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 }}
|
||||
{% assign instructor_name = training_session.instructor | split: " " %}
|
||||
{{ instructor_name | slice: 0 }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -11,6 +11,14 @@
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if course.properties.skip_course_cover_page == true %}
|
||||
{% 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 %}
|
||||
|
||||
{% include "header", current_page_orgin: "catalog" %}
|
||||
<main class="np-main np-page-container page--course-overview">
|
||||
|
||||
|
||||
@ -1,354 +0,0 @@
|
||||
{% 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>
|
||||
@ -144,7 +144,8 @@
|
||||
}
|
||||
|
||||
@media (min-width:1400px) {
|
||||
.np-learning-path-outline-item .np-card-content-title {
|
||||
.np-learning-path-outline-item .np-card-content-title,
|
||||
.np-learning-path-session-card .np-learning-path-outline-name {
|
||||
font-size:18px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user