Custom Templates for DeepL backed up and EmailMonkey. GS University was also re-downloaded. Then small scripts updated like for Chubb.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,66 @@
|
||||
<div class="np-hidden-mobile">
|
||||
<p>{% t .description %}</p>
|
||||
<p>{% t .requirements %}</p>
|
||||
</div>
|
||||
|
||||
<img
|
||||
alt=""
|
||||
class="np-account-avatar-image"
|
||||
src="{{ form.gravatar_url }}?s=200"
|
||||
id="{{version}}_gravatar_img"
|
||||
{% unless form.use_gravatar? %}style="display: none"{% endunless %}
|
||||
/>
|
||||
<img
|
||||
alt=""
|
||||
class="np-account-avatar-image"
|
||||
src="{{ form.secure_custom_avatar_url }}"
|
||||
id="{{version}}_custom_avatar_img"
|
||||
{% if form.use_gravatar? %}style="display: none"{% endif %}
|
||||
/>
|
||||
|
||||
<div class="np-account-avatar-choice">
|
||||
<div class="np-form-field">
|
||||
<label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_true">
|
||||
<span class="radio__input">
|
||||
<input
|
||||
id="{{version}}_learner_use_gravatar_true"
|
||||
name="learner[use_gravatar]"
|
||||
type="radio"
|
||||
value="true"
|
||||
{% if form.use_gravatar? %}checked{% endif %}
|
||||
/>
|
||||
<span class="np-button-color radio__control"></span>
|
||||
</span>
|
||||
<span class="radio__label">
|
||||
{% t .use_gravatar %}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field">
|
||||
<label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_false">
|
||||
<span class="radio__input">
|
||||
<input
|
||||
id="{{version}}_learner_use_gravatar_false"
|
||||
name="learner[use_gravatar]"
|
||||
type="radio"
|
||||
value="false"
|
||||
{% unless form.use_gravatar? %}checked{% endunless %}
|
||||
/>
|
||||
<span class="np-button-color radio__control"></span>
|
||||
</span>
|
||||
<span class="radio__label">
|
||||
{% t .upload_custom_photo %}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
id="{{version}}_upload_avatar"
|
||||
type="button"
|
||||
class="np-button np-button-secondary" {% if form.use_gravatar? %}style="visibility: hidden"{% endif %}
|
||||
>
|
||||
{% t .upload %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,19 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="desktop_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card">
|
||||
<div class="np-card-container np-card-padding">
|
||||
<div class="row">
|
||||
<div class="col-sm-7 np-account-form">
|
||||
{% render "account_form", form: form, version: "desktop" %}
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-sm-5 np-account-avatar">
|
||||
{% include "account_avatar", version: "desktop" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@ -0,0 +1,139 @@
|
||||
<div class="np-resource-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'email' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_email">{% t shared.email %} *</label>
|
||||
<input
|
||||
{% if form.options.invite? %} disabled {% endif %}
|
||||
autofocus="autofocus"
|
||||
class="np-input"
|
||||
id="{{version}}_learner_email"
|
||||
name="learner[email]"
|
||||
type="email"
|
||||
value="{{ form.email }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'first_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_first_name">
|
||||
{% t shared.first_name %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_first_name"
|
||||
name="learner[first_name]"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'last_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_last_name">
|
||||
{% t shared.last_name %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_last_name"
|
||||
name="learner[last_name]"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'display_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_display_name">
|
||||
{% t .display_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_display_name"
|
||||
name="learner[display_name]"
|
||||
value="{{ form.display_name }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{% unless form.options.invite? %}
|
||||
<div class="np-form-field {% if form.errors contains 'current_password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_current_password">
|
||||
{% t .current_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_current_password"
|
||||
name="learner[current_password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password">
|
||||
{% t .new_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password"
|
||||
name="learner[password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field {% if form.errors contains 'password_confirmation' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password_confirmation">
|
||||
{% t .confirm_new_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password_confirmation"
|
||||
name="learner[password_confirmation]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
{% endunless %}
|
||||
|
||||
{% if form.options.invite? %}
|
||||
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password">
|
||||
{% t shared.password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password"
|
||||
name="learner[password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{% if form.terms_of_service_required? %}
|
||||
<div class="np-form-field terms-of-service {% if form.errors contains 'terms_of_service_accepted' %}np-account-form-field-error{% endif %}">
|
||||
<input
|
||||
id="{{version}}_learner_terms_of_service"
|
||||
name="learner[terms_of_service_accepted]"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div class="label">
|
||||
{% t .terms_of_service %}
|
||||
<a
|
||||
target="_blank"
|
||||
href={{ form.terms_of_service_url }}
|
||||
>
|
||||
{% t .terms_link %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-margin-top">
|
||||
<span class="np-form-terms ">
|
||||
{% t .terms %}
|
||||
<a
|
||||
class="np-form-link np-button-color"
|
||||
target="_blank"
|
||||
href={{ form.terms_of_service_url }}
|
||||
>
|
||||
{% t .terms_link %}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<input
|
||||
id="{{version}}_invite_token"
|
||||
name="learner[token]"
|
||||
value="{{ form.invite_token }}"
|
||||
type="hidden"
|
||||
/>
|
||||
{% endif %}
|
||||
@ -0,0 +1,17 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="mobile_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card np-account-form">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% render "account_form", form: form, version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card np-account-avatar">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% include "account_avatar", version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</form>
|
||||
@ -0,0 +1,23 @@
|
||||
{% capture settings_path %}{% route account %}{% endcapture %}
|
||||
{% capture transcript_path %}{% route transcript %}{% endcapture %}
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
{% unless current_school.sso_active? %}
|
||||
<nav class="np-tabs np-account-tabs">
|
||||
<div class="np-tabs-content">
|
||||
<div class="np-tab{% if page.path == settings_path %} np-tab-active{% endif %}">
|
||||
<a class="np-tab-link" href="{{ settings_path}}">
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
<div class="np-tab-indicator np-button-background-color"></div>
|
||||
</div>
|
||||
<div class="np-tab{% if page.path == transcript_path %} np-tab-active{% endif %}">
|
||||
<a class="np-tab-link" href="{{ transcript_path }}">
|
||||
{% t .transcript %}
|
||||
</a>
|
||||
<div class="np-tab-indicator np-button-background-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,124 @@
|
||||
<div class="recommended-wrapper">
|
||||
<div class="heading lang-en">
|
||||
Browse all courses
|
||||
</div>
|
||||
<div class="heading lang-de">
|
||||
Alle Kurse durchsuchen
|
||||
</div>
|
||||
<div class="carousel-filters-wrapper">
|
||||
{% include 'catalog-filters' %}
|
||||
</div>
|
||||
<div class="catalog-courses-wrapper">
|
||||
{% for course in courses.enrolled %}
|
||||
{% unless course.properties.resource or course.properties.on_demand%}
|
||||
{% if course.properties.language == userLanguage %}
|
||||
<div class="catalog-course-container">{% include "cards_course" %}</div>
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.catalog-courses-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.all-courses-carousel {
|
||||
position: relative;
|
||||
}
|
||||
.slick-arrow {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
z-index: 111;
|
||||
cursor: pointer;
|
||||
}
|
||||
.right-arrow {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.slick-dots button {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 1px;
|
||||
background: #8878FF;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
.slick-dots {
|
||||
list-style-type: none;
|
||||
}
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding-top: 3rem;
|
||||
list-style-type: none;
|
||||
gap: 10px;
|
||||
}
|
||||
.slick-dots li {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
.slick-dots li.slick-active button {
|
||||
background: #6CF1C9;
|
||||
|
||||
}
|
||||
@media only screen and (max-width: 1170px) {
|
||||
.catalog-courses-wrapper {
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.catalog-courses-wrapper {
|
||||
grid-template-columns: repeat(1,1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const filters = document.querySelectorAll('.filter');
|
||||
const cards = document.querySelectorAll('.catalog-course-container .card');
|
||||
|
||||
let activeFilter = null;
|
||||
|
||||
filters.forEach(filter => {
|
||||
filter.addEventListener('click', function() {
|
||||
const value = filter.getAttribute('value');
|
||||
|
||||
if (activeFilter === value) {
|
||||
activeFilter = null;
|
||||
filter.classList.remove('filter-active');
|
||||
} else {
|
||||
activeFilter = value;
|
||||
|
||||
filters.forEach(f => f.classList.remove('filter-active'));
|
||||
filter.classList.add('filter-active');
|
||||
}
|
||||
|
||||
filterCourses();
|
||||
});
|
||||
});
|
||||
|
||||
function filterCourses() {
|
||||
if (!activeFilter) {
|
||||
cards.forEach(card => {
|
||||
card.parentElement.style.display = 'block';
|
||||
});
|
||||
} else {
|
||||
cards.forEach(card => {
|
||||
const cardCategories = card.getAttribute('categories').split(',');
|
||||
if (cardCategories.includes(activeFilter)) {
|
||||
card.parentElement.style.display = 'block';
|
||||
} else {
|
||||
card.parentElement.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,81 @@
|
||||
<div class="recommended-wrapper">
|
||||
<div class="heading lang-en">
|
||||
Browse all learning paths
|
||||
</div>
|
||||
<div class="heading lang-de">
|
||||
Alle Lernpfade durchsuchen
|
||||
</div>
|
||||
|
||||
<div class="all-lp-wrapper">
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if category.name == userLanguage %}
|
||||
<div class="carousel-card">
|
||||
{% include "cards_learning_path" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.all-lp-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.all-lp-carousel {
|
||||
position: relative;
|
||||
}
|
||||
.slick-arrow {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
z-index: 111;
|
||||
cursor: pointer;
|
||||
}
|
||||
.right-arrow {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.slick-dots button {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 1px;
|
||||
background: #8878FF;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
.slick-dots {
|
||||
list-style-type: none;
|
||||
}
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding-top: 3rem;
|
||||
list-style-type: none;
|
||||
gap: 10px;
|
||||
}
|
||||
.slick-dots li {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
.slick-dots li.slick-active button {
|
||||
background: #6CF1C9;
|
||||
|
||||
}
|
||||
@media only screen and (max-width: 1170px) {
|
||||
.all-lp-wrapper {
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.all-lp-wrapper {
|
||||
grid-template-columns: repeat(1,1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,64 @@
|
||||
<div class="banner-container">
|
||||
<div class="banner-content">
|
||||
<div class="banner-text-wrapper">
|
||||
<div class="banner-heading">
|
||||
Become part of the DeepL community
|
||||
</div>
|
||||
<div class="desc">
|
||||
Join our vibrant community today and connect with like-minded individuals from around the world! Share your ideas, passions, and experiences while learning from others.
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-btn-container">
|
||||
<a href="#" class="dark-btn">Join us now</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-image-wrapper">
|
||||
<img src="https://s3.amazonaws.com/static.northpass.com/DeepL/images/Group+427321804.png" alt="" class="banner-img">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.banner-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
background: #F8F8F8;
|
||||
padding: 32px;
|
||||
border-radius: 8px;
|
||||
|
||||
}
|
||||
.banner-content, .banner-image-wrapper {
|
||||
flex-basis: 50%;
|
||||
}
|
||||
.banner-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.banner-heading {
|
||||
font-size: 80px;
|
||||
font-weight: 300;
|
||||
line-height: 80px;
|
||||
letter-spacing: -0.015em;
|
||||
text-align: left;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.desc {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 25.2px;
|
||||
}
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
height: fit-content;
|
||||
}
|
||||
.banner-image-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.banner-btn-container {
|
||||
display: flex;
|
||||
margin-top: 15%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,54 @@
|
||||
<div class="card" categories="{% for category in course.categories %}{{category.name}},{% endfor %}" progress="{% if course.progress > 0 and course.progress < 100 %}In progress{% elsif course.progress == 100 %}Completed{% else %}Not started{% endif %}">
|
||||
<div class="card-container">
|
||||
<img
|
||||
class="card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="card-content">
|
||||
<div class="card-details">
|
||||
<div class="card-detail course-lessons lang-en">
|
||||
{{course.activities_count}} lessons
|
||||
</div>
|
||||
<div class="card-detail course-lessons lang-de">
|
||||
{{course.activities_count}} Lektionen
|
||||
</div>
|
||||
<div class="card-detail course-time lang-en">
|
||||
{{course.properties.course_time}} minutes
|
||||
</div>
|
||||
<div class="card-detail course-time lang-de">
|
||||
{{course.properties.course_time}} Minuten
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="course-content-desc">
|
||||
{{ course.short_description }}
|
||||
</div>
|
||||
<div class="course-progress-container">
|
||||
<div class="progress-number">{{course.progress}}%</div>
|
||||
<div class="course-progress">
|
||||
<span class="course-progress-bar" style="width: {{course.progress}}%;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content-footer">
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a class="card-btn dark-btn lang-en" href="{{ course_path }}">
|
||||
{% if course.progress == 0 %}
|
||||
Get started
|
||||
{% else %}
|
||||
Continue
|
||||
{% endif %}
|
||||
</a>
|
||||
<a class="card-btn dark-btn lang-de" href="{{ course_path }}">
|
||||
{% if course.progress == 0 %}
|
||||
Loslegen
|
||||
{% else %}
|
||||
Weiter
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,63 @@
|
||||
<div class="card">
|
||||
<div class="card-container">
|
||||
<img
|
||||
class="card-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
src="{{ learning_path.image_url }}"
|
||||
>
|
||||
<div class="card-content">
|
||||
<div class="card-details-lp">
|
||||
<div class="card-detail lang-en">
|
||||
{% assign lessons = 0 %}
|
||||
{% for item in learning_path.items %}
|
||||
{% assign lessons = lessons | plus: 1 %}
|
||||
{% endfor %}
|
||||
{{lessons}}
|
||||
Lessons
|
||||
</div>
|
||||
<div class="card-detail lang-de">
|
||||
{% assign lessons = 0 %}
|
||||
{% for item in learning_path.items %}
|
||||
{% assign lessons = lessons | plus: 1 %}
|
||||
{% endfor %}
|
||||
{{lessons}}
|
||||
Lektionen
|
||||
</div>
|
||||
{% if learning_path.has_certificate? %}
|
||||
<div class="cert-tag lang-en">
|
||||
Certification
|
||||
</div>
|
||||
<div class="cert-tag lang-de">
|
||||
Zertifizierung
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
<div class="course-progress-container">
|
||||
<div class="progress-number">{{learning_path.progress}}%</div>
|
||||
<div class="course-progress">
|
||||
<span class="course-progress-bar" style="width: {{learning_path.progress}}%;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content-footer">
|
||||
<a class="card-btn dark-btn lang-en" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% if learning_path.progress == 0 %}
|
||||
Get started
|
||||
{% else %}
|
||||
Continue
|
||||
{% endif %}
|
||||
</a>
|
||||
<a class="card-btn dark-btn lang-de" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% if learning_path.progress == 0 %}
|
||||
Loslegen
|
||||
{% else %}
|
||||
Weiter
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,60 @@
|
||||
<div class="card" categories="{% for category in course.categories %}{{category.name}},{% endfor %}" progress="{% if course.progress > 0 and course.progress < 100 %}In progress{% elsif course.progress == 100 %}Completed{% else %}Not started{% endif %}">
|
||||
<div class="card-container">
|
||||
<img
|
||||
class="card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="card-content">
|
||||
<div class="card-details">
|
||||
<div class="card-detail course-lessons">
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == 'PDF' %}
|
||||
PDF
|
||||
{% elsif category.name == 'Video' %}
|
||||
Video
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="card-detail course-time">
|
||||
{{course.properties.course_time}} minutes
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
|
||||
<div class="card-content-footer">
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a class="card-btn dark-btn lang-en"
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{{ course_path }}"
|
||||
{% endif %}>
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == 'PDF' %}
|
||||
Read now
|
||||
{% elsif category.name == 'Video' %}
|
||||
Watch now
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</a>
|
||||
<a class="card-btn dark-btn lang-de"
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{{ course_path }}"
|
||||
{% endif %}>
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == 'PDF' %}
|
||||
Jetzt lesen
|
||||
{% elsif category.name == 'Video' %}
|
||||
Jetzt anschauen
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,89 @@
|
||||
<div class="card-webinar">
|
||||
<div class="card-content-training-event">
|
||||
<div class="card-content-title">
|
||||
{{ training_event.title }}
|
||||
</div>
|
||||
<div class="card-details-webinar">
|
||||
<div class="card-detail-webinar course-lessons">
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 21.8149H20V22.8149H4V21.8149Z" fill="#42A2FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 2.81494C7.22386 2.81494 7 3.0388 7 3.31494V14.8149C7 15.0172 7.12182 15.1995 7.30866 15.2769C7.4955 15.3543 7.71055 15.3115 7.85355 15.1685L10.2071 12.8149H21.5C21.7761 12.8149 22 12.5911 22 12.3149V3.31494C22 3.0388 21.7761 2.81494 21.5 2.81494H7.5ZM8 13.6078V3.81494H21V11.8149H10C9.86739 11.8149 9.74021 11.8676 9.64645 11.9614L8 13.6078ZM2 7.81494C2 7.5388 2.22386 7.31494 2.5 7.31494H6V8.31494H3V16.3149H14C14.1326 16.3149 14.2598 16.3676 14.3536 16.4614L15.5 17.6078V13.8149H16.5V18.8149C16.5 19.0172 16.3782 19.1995 16.1913 19.2769C16.0045 19.3543 15.7894 19.3115 15.6464 19.1685L13.7929 17.3149H2.5C2.22386 17.3149 2 17.0911 2 16.8149V7.81494ZM17 7.31494H16V8.31494H17V7.31494ZM14 7.31494H15V8.31494H14V7.31494ZM13 7.31494H12V8.31494H13V7.31494Z" fill="#42A2FF"/>
|
||||
</svg>
|
||||
|
||||
{% t shared.event_types, key: training_event.event_type %}
|
||||
</div>
|
||||
<div class="card-detail-webinar course-time">
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 21.8149H20V22.8149H4V21.8149Z" fill="#42A2FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 5.31494V6.81494H6.5V5.31494H17.5V6.81494H18.5V5.31494H21V7.81494H3V5.31494H5.5ZM5.5 4.31494H2.5C2.22386 4.31494 2 4.5388 2 4.81494V19.3149C2 19.5911 2.22386 19.8149 2.5 19.8149H21.5C21.7761 19.8149 22 19.5911 22 19.3149V4.81494C22 4.5388 21.7761 4.31494 21.5 4.31494H18.5V2.81494H17.5V4.31494H6.5V2.81494H5.5V4.31494ZM3 8.81494V18.8149H21V8.81494H3ZM5.5 10.3149H8V11.3149H5.5V10.3149ZM9 10.3149H11.5V11.3149H9V10.3149ZM15 10.3149H12.5V11.3149H15V10.3149ZM16 10.3149H18.5V11.3149H16V10.3149ZM5.5 16.3149H8V17.3149H5.5V16.3149ZM11.5 16.3149H9V17.3149H11.5V16.3149ZM12.5 16.3149H18.5V17.3149H12.5V16.3149ZM8 13.3149H5.5V14.3149H8V13.3149ZM9 13.3149H11.5V14.3149H9V13.3149ZM15 13.3149H12.5V14.3149H15V13.3149ZM16 13.3149H18.5V14.3149H16V13.3149Z" fill="#42A2FF"/>
|
||||
</svg>
|
||||
{% t .sessions, count: training_event.sessions.size %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-training-session">
|
||||
<span class="card-content-label lang-en">
|
||||
Next session
|
||||
</span>
|
||||
<span class="card-content-label lang-de">
|
||||
Nächste Sitzung
|
||||
</span>
|
||||
|
||||
|
||||
<div class="card-training-session-date">
|
||||
<div class="card-training-session-date-day">
|
||||
{{ training_event.sessions.first.day }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="card-training-session-date-month">
|
||||
{{ training_event.sessions.first.month }}
|
||||
</div>
|
||||
<div class="card-training-session-date-year">
|
||||
{{ training_event.sessions.first.year }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="card-training-sessions">
|
||||
<a
|
||||
class="card-btn dark-btn lang-en"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
>
|
||||
Register now
|
||||
</a>
|
||||
<a
|
||||
class="card-btn dark-btn lang-de"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
>
|
||||
Jetzt registrieren
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.card-webinar {
|
||||
background: #f8f8f8;
|
||||
padding: 32px;
|
||||
border-radius: 8px;
|
||||
margin: 0 20px 20px 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
}
|
||||
.card-details-webinar {
|
||||
display: flex;
|
||||
color: #42A2FF;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.card-detail-webinar {
|
||||
padding-left: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,136 @@
|
||||
<div class="carousel-filters">
|
||||
<div class="filters-container">
|
||||
<div class="filter lang-en" value="Popular">Popular</div>
|
||||
<div class="filter lang-de" value="Popular">Beliebt</div>
|
||||
<div class="filter lang-en" value="Administration">Administration</div>
|
||||
<div class="filter lang-de" value="Administration">Verwaltung</div>
|
||||
<div class="filter lang-en" value="Products" >Products</div>
|
||||
<div class="filter lang-de" value="Products" >Produkte</div>
|
||||
<div class="filter lang-en" value="Features" >Features</div>
|
||||
<div class="filter lang-de" value="Features" >Funktionen</div>
|
||||
</div>
|
||||
<div class="filter-dropdown-container">
|
||||
<div class="text lang-en">Filter by progress:</div>
|
||||
<div class="text lang-de">Nach Fortschritt filtern:</div>
|
||||
<div class="filter-dropdown-block">
|
||||
Not selected
|
||||
<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.8142 0.52832H10.6423C10.5626 0.52832 10.4876 0.567383 10.4407 0.631445L6.00166 6.7502L1.5626 0.631445C1.51573 0.567383 1.44073 0.52832 1.36104 0.52832H0.189163C0.0876002 0.52832 0.0282252 0.643946 0.0876002 0.726758L5.59698 8.32207C5.79698 8.59707 6.20635 8.59707 6.40479 8.32207L11.9142 0.726758C11.9751 0.643946 11.9157 0.52832 11.8142 0.52832Z" fill="black" fill-opacity="0.25"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="filter-by-progress-dropdown hidden">
|
||||
<div class="filter-by-progress-option lang-en" value="All courses">All courses</div>
|
||||
<div class="filter-by-progress-option lang-de" value="All courses">Alle Kurse</div>
|
||||
<div class="filter-by-progress-option lang-en" value="Not started">Not started</div>
|
||||
<div class="filter-by-progress-option lang-de" value="Not started">Nicht gestartet</div>
|
||||
<div class="filter-by-progress-option lang-en" value="In progress">In progress</div>
|
||||
<div class="filter-by-progress-option lang-de" value="In progress">In Arbeit</div>
|
||||
<div class="filter-by-progress-option lang-en" value="Completed">Completed</div>
|
||||
<div class="filter-by-progress-option lang-de" value="Completed">Abgeschlossen</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.carousel-filters {
|
||||
background: #EDEDED;
|
||||
border-radius: 8px;
|
||||
padding: 24px 32px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
display: flex;
|
||||
gap: 44px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
.filter {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 27px;
|
||||
color: #0F2B46;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.filter-dropdown-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
justify-content: end;
|
||||
width: 100%;
|
||||
max-width: 290px;
|
||||
}
|
||||
|
||||
.filter-dropdown-block {
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
max-width: 150px;
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-by-progress-dropdown {
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.filter-by-progress-option {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-by-progress-option:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-active {
|
||||
color: #42A2FF;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const dropdownBlock = document.querySelector('.filter-dropdown-block');
|
||||
const dropdown = document.querySelector('.filter-by-progress-dropdown');
|
||||
const options = document.querySelectorAll('.filter-by-progress-option');
|
||||
|
||||
dropdownBlock.addEventListener('click', function () {
|
||||
dropdown.classList.toggle('hidden');
|
||||
});
|
||||
|
||||
options.forEach(option => {
|
||||
option.addEventListener('click', function () {
|
||||
const selectedValue = option.getAttribute('value');
|
||||
dropdownBlock.textContent = selectedValue;
|
||||
dropdown.classList.add('hidden');
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
if (!dropdownBlock.contains(event.target) && !dropdown.contains(event.target)) {
|
||||
dropdown.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,88 @@
|
||||
<div class="carousel-filters">
|
||||
<div class="filters-container">
|
||||
<div class="filter lang-en" value="Popular">Popular</div>
|
||||
<div class="filter lang-de" value="Popular">Beliebt</div>
|
||||
<div class="filter lang-en" value="Administration">Administration</div>
|
||||
<div class="filter lang-de" value="Administration">Verwaltung</div>
|
||||
<div class="filter lang-en" value="Products" >Products</div>
|
||||
<div class="filter lang-de" value="Products" >Produkte</div>
|
||||
<div class="filter lang-en" value="Features" >Features</div>
|
||||
<div class="filter lang-de" value="Features" >Funktionen</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.carousel-filters {
|
||||
background: #EDEDED;
|
||||
border-radius: 8px;
|
||||
padding: 24px 32px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
display: flex;
|
||||
gap: 44px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
.filter {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 27px;
|
||||
color: #0F2B46;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.filter-dropdown-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
justify-content: end;
|
||||
width: 100%;
|
||||
max-width: 290px;
|
||||
}
|
||||
|
||||
.filter-dropdown-block {
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
max-width: 150px;
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-by-progress-dropdown {
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.filter-by-progress-option {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-by-progress-option:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-active {
|
||||
color: #42A2FF;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,4 @@
|
||||
<div class="col-xs-12 col-md-4 spacing-clear">
|
||||
{% include "certificates_verification" %}
|
||||
{% include "certificates_metadata" %}
|
||||
</div>
|
||||
@ -0,0 +1,59 @@
|
||||
<div class="np-card spacing-clear">
|
||||
<div class="np-card-container padding-spacing-8">
|
||||
<div class="row np-certificate-metadata-row">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-title" >
|
||||
{% t .learner %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-value">
|
||||
{{certificate.learner_name}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
|
||||
{% if certificate.issuer_name_enabled? %}
|
||||
<div class="row np-certificate-metadata-row">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-title">
|
||||
{% t .issued_by %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-value">
|
||||
{{ certificate.issuer_name }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
{% endif %}
|
||||
|
||||
<div class="row np-certificate-metadata-row">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-title" >
|
||||
{% t .issued_on %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-value">
|
||||
{{ certificate.issue_date }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="row np-certificate-metadata-row">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-title" >
|
||||
{% t .expires_on %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-value">
|
||||
{{ certificate.expiration_date_translation }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,35 @@
|
||||
<script type="text/javascript">
|
||||
const resizeIframe = () => {
|
||||
const combinedPadding = 16;
|
||||
const previewIframe = document.getElementById("previewIframe");
|
||||
const previewIFrameCard = document.getElementById("previewIFrameCard");
|
||||
const templateInPreviewContainer = previewIframe.contentWindow.document.querySelector('.np-certificate-container');
|
||||
const previewIframeContentHeight = templateInPreviewContainer.offsetHeight;
|
||||
const previewIframeContentWidth = templateInPreviewContainer.offsetWidth;
|
||||
const certificateRatio = previewIframeContentHeight / previewIframeContentWidth;
|
||||
|
||||
templateInPreviewContainer.style.margin = 0;
|
||||
previewIFrameCard.style.height = `${previewIFrameCard.offsetWidth * certificateRatio}px`;
|
||||
|
||||
const scaledIframeWidth = previewIFrameCard.offsetWidth - combinedPadding;
|
||||
const scaledIframeHeight = scaledIframeWidth * certificateRatio;
|
||||
const scale = scaledIframeHeight / previewIframeContentHeight;
|
||||
|
||||
previewIframe.style.transform = `scale(${scale})`;
|
||||
}
|
||||
|
||||
window.onresize = resizeIframe;
|
||||
</script>
|
||||
|
||||
<div class="col-xs-12 col-md-8 np-certificate-iframe-container">
|
||||
<div class="np-card spacing-clear">
|
||||
<div id="previewIFrameCard" class="np-card-container np-certificate-card">
|
||||
<iframe
|
||||
id="previewIframe"
|
||||
onload="resizeIframe()"
|
||||
class="np-certificate-iframe-preview"
|
||||
srcdoc="{{ certificate.certificate_template_html }}"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,44 @@
|
||||
<div class="top-bar np-certificate-top-bar-spacing">
|
||||
<div class="top-bar__container uk-container uk-container-center uk-padding-horizontal np-max-width">
|
||||
<div class="top-bar__col">
|
||||
<h2 class="np-certificate-title" >
|
||||
{{certificate.certificate_name}}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="button-container np-certificate-button-container">
|
||||
{% if certificate.linkedin_sharing_enabled and current_person.signed_in? and certificate.learner_uuid == current_person.id %}
|
||||
<a
|
||||
class="np-button np-certificate-button np-certificate-button-secondary"
|
||||
href="{{certificate.linkedin_share_url}}"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="fab fa-linkedin np-certificate-share-icon"></i>
|
||||
{% t .share %}
|
||||
</a>
|
||||
{% endif %}
|
||||
<button
|
||||
id="print"
|
||||
type="button"
|
||||
class="np-button np-certificate-button np-certificate-button-secondary np-certificate-button-print"
|
||||
>
|
||||
{% t .print %}
|
||||
</button>
|
||||
{% if certificate.generating_pdf %}
|
||||
<div class="np-button np-certificate-button np-certificate-button-primary np-certificate-spinner-container">
|
||||
<i class="loader fad fa-spinner-third fa-spin np-certificate-spinner-icon np-button-font-color"></i>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
href="{{ certificate.download_url }}"
|
||||
aria-label="{% t .download %}"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
download
|
||||
class="np-button np-certificate-button np-certificate-button-primary np-button-font-color"
|
||||
>
|
||||
{% t .download %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,15 @@
|
||||
<div class="np-card spacing-clear np-certificate-verification-card">
|
||||
<div class="np-card-container np-certificate-verification-container">
|
||||
<div class="np-certificate-verification-icon-container np-certificate-verification-icon-container-{{certificate.verification_status}}">
|
||||
<i class="far fa-{{certificate.verification_icon}} np-certificate-verification-icon"></i>
|
||||
</div>
|
||||
<div class="np-certificate-verification-info-container">
|
||||
<h2 class="np-certificate-verification-info-status spacing-clear">
|
||||
{{certificate.verification_title}}
|
||||
</h2>
|
||||
<p class="np-certificate-verification-info-description spacing-clear">
|
||||
{{certificate.verification_description}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,4 @@
|
||||
<i class="far fa-lock-alt np-course-outline-content-activity-icon-locked"></i>
|
||||
<span class="np-course-outline-content-activity-title">
|
||||
{{ activity.title }}
|
||||
</span>
|
||||
@ -0,0 +1,15 @@
|
||||
{% if course.enrolled? %}
|
||||
<a
|
||||
href="{% route activity_viewer,
|
||||
id: activity.id,
|
||||
course_id: params.course_id,
|
||||
learning_path_id: params.learning_path_id
|
||||
%}" class="{{ class }}"
|
||||
>
|
||||
{{ activity.title }}
|
||||
</a>
|
||||
{% else%}
|
||||
<span class="{{ class }}">
|
||||
{{ activity.title }}
|
||||
</span>
|
||||
{% endif %}
|
||||
@ -0,0 +1,7 @@
|
||||
<div class="overview-categories-wrapper">
|
||||
{% for category in course.categories %}
|
||||
<div class="category-item">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,4 @@
|
||||
|
||||
<div class="np-card-text">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
@ -0,0 +1,150 @@
|
||||
<div class="overview-container">
|
||||
<div class="overview-header-container">
|
||||
<div class="overview-btn-container">
|
||||
<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 4.49991L1 4.49991M1 4.49991L4.33417 1.09082M1 4.49991L4.33417 7.909" stroke="#0F2B46" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<a href="/app/catalog" class="overview-back-btn">Back to all courses</a>
|
||||
</div>
|
||||
<div class="overview-heading">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overview-content-container">
|
||||
<div class="content-details">
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
|
||||
{% include "course_description" %}
|
||||
|
||||
<div class="overview-details-container">
|
||||
<div class="overview-detail">
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M40 44.0001L8.00001 44L8.00001 42L40 42.0001L40 44.0001Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 36C31.732 36 38 29.732 38 22C38 14.268 31.732 8 24 8C16.268 8 10 14.268 10 22C10 29.732 16.268 36 24 36ZM24 38C32.8366 38 40 30.8366 40 22C40 13.1634 32.8366 6 24 6C15.1634 6 8 13.1634 8 22C8 30.8366 15.1634 38 24 38Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M23 21L23 11L25 11L25 21L23 21Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3397 22.2679L35 27.2679L34 29L25.3397 24L26.3397 22.2679Z" fill="#0F2B46"/>
|
||||
</svg>
|
||||
<div class="detail-content">
|
||||
{{course.properties.course_time}} minutes
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overview-detail">
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M40 44.0033H8V42.0033H40V44.0033Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M34 23H24V21H34V23Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 18H14V16H19V18Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M34 30L24 30V28L34 28V30Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 25H14V23H19V25Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2368 4.35388C13.4268 4.12943 13.7059 4 14 4H29C29.5523 4 30 4.44772 30 5V10H28V6H14.4637L10 11.2727V31H19V33H9C8.44772 33 8 32.5523 8 32V10.9062C8 10.6696 8.08389 10.4407 8.23677 10.2601L13.2368 4.35388Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.2368 9.35388C23.4268 9.12943 23.7059 9 24 9H39C39.5523 9 40 9.44772 40 10V37C40 37.5523 39.5523 38 39 38H19C18.4477 38 18 37.5523 18 37V15.9062C18 15.6696 18.0839 15.4407 18.2368 15.2601L23.2368 9.35388ZM24.4637 11L20 16.2727V36H38V11H24.4637Z" fill="#0F2B46"/>
|
||||
</svg>
|
||||
<div class="detail-content">
|
||||
{{course.activities_count}} lessons
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.categories.any? %}
|
||||
{% include "course_categories" %}
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="content-activities">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.overview-back-btn {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 25.2px;
|
||||
letter-spacing: -0.01em;
|
||||
text-align: center;
|
||||
color: #0F2B46;
|
||||
text-decoration: none;
|
||||
}
|
||||
.overview-btn-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.overview-heading {
|
||||
font-size: 48px;
|
||||
font-weight: 320;
|
||||
line-height: 50.4px;
|
||||
letter-spacing: -0.015em;
|
||||
color: #0F2B46;
|
||||
}
|
||||
.overview-header-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
.overview-content-container {
|
||||
display: grid;
|
||||
margin-top: 30px;
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
gap: 70px;
|
||||
}
|
||||
.overview-details-container {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
.overview-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 13px;
|
||||
align-items: start;
|
||||
}
|
||||
.detail-content {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 25.2px;
|
||||
letter-spacing: -0.01em;
|
||||
color: #0F2B46;
|
||||
}
|
||||
.category-item {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 19.6px;
|
||||
letter-spacing: -0.01em;
|
||||
color: #0F2B46;
|
||||
padding: 11px 12px;
|
||||
background: #EDEDED;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.overview-categories-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 17px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
.overview-content-container {
|
||||
grid-template-columns: repeat(1,1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,28 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex-column">
|
||||
{% for event in course.events %}
|
||||
<div class="np-course-events-content-item">
|
||||
<div class="np-course-events-content-date np-button-background-color">
|
||||
<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 np-button-color">
|
||||
{{ event.sessions.first.time_period }} {{ event.sessions.first.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,16 @@
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
{{ current_school.course_vocabulary }}
|
||||
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
|
||||
</i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-hidden-desktop"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
@ -0,0 +1,22 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex">
|
||||
{% 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>
|
||||
<div class="np-content-instructors-content-info np-text-light">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.progress == 0 %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,77 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="small-heading">
|
||||
Course outline
|
||||
</div>
|
||||
<div class="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="outline-section-name">
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<ol class="course-outline-content-activity">
|
||||
{% for activity in section.activities %}
|
||||
|
||||
<li class="np-course-outline-content-activity-list">
|
||||
{% if activity.completed? %}
|
||||
<i class="fas fa-circle np-course-outline-content-activity-icon np-button-color"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "course-outline-content-activity-link-completed" %}
|
||||
{% endif %}
|
||||
<div class="np-button-background-color np-course-outline-content-activity-list-bar"></div>
|
||||
{% else %}
|
||||
{% unless activity.locked? %}
|
||||
<i class="far fa-circle np-course-outline-content-activity-icon"></i>
|
||||
{% endunless %}
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "course-outline-content-activity-link" %}
|
||||
{% endif %}
|
||||
<div class="np-course-outline-content-activity-list-bar"></div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.course-outline-content {
|
||||
margin-top: 50px;
|
||||
}
|
||||
.outline-section-name {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
letter-spacing: -0.015em;
|
||||
color: #0F2B46;
|
||||
}
|
||||
.course-outline-content-activity {
|
||||
padding: 0;
|
||||
}
|
||||
.np-course-outline-content-activity-list {
|
||||
border-bottom: none;
|
||||
|
||||
}
|
||||
.course-outline-content-activity-link {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 25.2px;
|
||||
letter-spacing: -0.01em;
|
||||
text-align: left;
|
||||
color: #42A2FF;
|
||||
text-decoration: none;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.np-course-outline-content-activity-icon {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
color: #0F2B46
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,77 @@
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="small-heading">
|
||||
Course progress
|
||||
</div>
|
||||
<div class="progress-overview">
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ course.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-text">
|
||||
{{ course.progress }}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{% if course.learner_can_retake? %}
|
||||
<form action="{% route course_retake, id: course.id %}" method="POST">
|
||||
{% form_authenticity_token %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% t .retake, key: current_school.course_vocabulary %}
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<div class="overview-cta-btn-container">
|
||||
<a
|
||||
class="overview-cta-btn"
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
{% 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>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.progress-text {
|
||||
color: #42A2FF;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 19.6px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.progress-overview {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
.overview-cta-btn {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 25.2px;
|
||||
letter-spacing: -0.01em;
|
||||
color: #FFFFFF;
|
||||
padding: 7px 18px;
|
||||
background: #0F2B46;
|
||||
border-radius: 40px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.overview-cta-btn-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 150px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,7 @@
|
||||
{% if courses.include_courses_to_restart? %}
|
||||
<div role="alert" class="np-alert np-alert-global np-alert-info">
|
||||
<div class="np-alert-container uk-container uk-container-center">
|
||||
{% t .content %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,33 @@
|
||||
<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
|
||||
></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"></i>
|
||||
<h3 class="np-popup-header-title">
|
||||
{% t .title %}
|
||||
</h3>
|
||||
</header>
|
||||
<div class="np-popup-body">
|
||||
<h4>{% t .body.header %}</h4>
|
||||
<p>{% t .body.content %}</p>
|
||||
<a
|
||||
class="np-popup-body-button"
|
||||
href="{{ path }}"
|
||||
>
|
||||
{% t .body.button %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-popup-tail"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,16 @@
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.in_catalog %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,16 @@
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
<div class="{{ class }}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,6 @@
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{{ message }}
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="{{ message }}" />
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
<input
|
||||
id={{value}}
|
||||
name={{ name }}
|
||||
value={{ value }}
|
||||
type="checkbox"
|
||||
{% if selected %} checked="checked" {% endif %}
|
||||
/>
|
||||
<label for={{value}}>
|
||||
{{label}}
|
||||
</label>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-filter">
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="np-button dropdown-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
>
|
||||
{% t shared.filters.filter %}
|
||||
</button>
|
||||
|
||||
<div class="dropdown-menu" data-test="modal">
|
||||
<form method="get">
|
||||
{%
|
||||
include "filter_select",
|
||||
filters: filters,
|
||||
key: key,
|
||||
label: label
|
||||
%}
|
||||
|
||||
<button
|
||||
class="np-button dropdown-button-apply lang-en"
|
||||
data-toggle-trigger-off
|
||||
type="submit"
|
||||
>
|
||||
{% t shared.filters.apply %}
|
||||
</button>
|
||||
<button
|
||||
class="np-button dropdown-button-apply lang-de"
|
||||
data-toggle-trigger-off
|
||||
type="submit"
|
||||
>
|
||||
Anwenden
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,25 @@
|
||||
{% if params.q %}
|
||||
<input type="hidden" name="q" value="{{ params.q }}">
|
||||
{% endif %}
|
||||
|
||||
<label class="dropdown-label lang-en" for="filter[category_uuid][in][]">
|
||||
{{ label }}
|
||||
</label>
|
||||
<label class="dropdown-label lang-de" for="filter[category_uuid][in][]">
|
||||
Nach Typ
|
||||
</label>
|
||||
|
||||
<select
|
||||
class="np-filter-select"
|
||||
multiple
|
||||
name="filter[{{ key }}][in][]"
|
||||
>
|
||||
{% for filter in filters %}
|
||||
<option
|
||||
value="{{ filter.value }}"
|
||||
{% if filter.selected? %} selected="selected" {% endif %}
|
||||
>
|
||||
{{ filter.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
@ -0,0 +1,110 @@
|
||||
{% assign available_learning_path_categories = '' %}
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% unless available_learning_path_categories contains category.name %}
|
||||
{% assign available_learning_path_categories = available_learning_path_categories | append: category.name | append: '$' %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
{% assign learning_path_cats = available_learning_path_categories | split: '$' %}
|
||||
|
||||
<div class="lp-filter-wrapper">
|
||||
<div class="filter-container">
|
||||
<div class="filter" id="filterToggle">Filter</div>
|
||||
</div>
|
||||
<div class="filter-content" id="filterContent">
|
||||
{% for category in learning_path_cats %}
|
||||
{% if category != '' %}
|
||||
<div class="filter-option">
|
||||
<input class="filter-checkbox" value="{{ category }}" type="checkbox" onchange="filterLearningPaths()">
|
||||
<label class="filter-name">{{ category }}</label>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.lp-filter-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
color: #000;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.filter-checkbox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.filter-container {
|
||||
position: relative;
|
||||
}
|
||||
.filter {
|
||||
background-color: #d9dfe2;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
color: #305263;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.filter-content {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 250px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.4s ease, width 0.4s ease;
|
||||
z-index: 111;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
padding: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.filter-option {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 10px;
|
||||
}
|
||||
.filter-active .filter-content {
|
||||
display: flex;
|
||||
max-height: 500px;
|
||||
width: 250px;
|
||||
}
|
||||
.learning-path-card {
|
||||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.getElementById("filterToggle").addEventListener("click", function() {
|
||||
const filterWrapper = document.querySelector('.lp-filter-wrapper');
|
||||
filterWrapper.classList.toggle("filter-active");
|
||||
});
|
||||
|
||||
function filterLearningPaths() {
|
||||
const checkedCategories = Array.from(document.querySelectorAll('.filter-checkbox:checked')).map(checkbox => checkbox.value.toLowerCase());
|
||||
const learningPaths = document.querySelectorAll('.learning-path-card');
|
||||
|
||||
learningPaths.forEach(path => {
|
||||
const pathCategories = path.getAttribute('data-categories').toLowerCase().split(',');
|
||||
const isVisible = checkedCategories.some(category => pathCategories.includes(category));
|
||||
path.style.display = isVisible || checkedCategories.length === 0 ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
154
Custom_Templates/customer_templates/DeepL/_footer.html.liquid
Normal file
154
Custom_Templates/customer_templates/DeepL/_footer.html.liquid
Normal file
@ -0,0 +1,154 @@
|
||||
<footer class="academy-footer np-max-width">
|
||||
<div class="links-footer">
|
||||
<div class="footer-items-wrapper">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="footer-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="footer-items-wrapper">
|
||||
<div class="footer-item-title lang-en">Resources</div>
|
||||
<div class="footer-item-title lang-de">Ressourcen</div>
|
||||
<div class="footer-links-container">
|
||||
<a href="https://support.deepl.com/hc/en-us" target="_blank" class="footer-link lang-en">Help Center</a>
|
||||
<a href="https://support.deepl.com/hc/de" target="_blank" class="footer-link lang-de">Hilfecenter</a>
|
||||
<a href="https://www.deepl.com/en/blog" target="_blank" class="footer-link lang-en">Blog</a>
|
||||
<a href="https://www.deepl.com/de/blog" target="_blank" class="footer-link lang-de">Blog</a>
|
||||
<a href="https://developers.deepl.com/docs" target="_blank" class="footer-link lang-en">API documentation</a>
|
||||
<a href="https://developers.deepl.com/docs" target="_blank" class="footer-link lang-de">API-Dokumentation</a>
|
||||
<a href="https://www.deepl.com/en/pro-data-security" target="_blank" class="footer-link lang-en">Data security</a>
|
||||
<a href="https://www.deepl.com/de/pro-data-security" target="_blank" class="footer-link lang-de">Datensicherheit</a>
|
||||
<a href="https://www.deepl.com/en/privacy" target="_blank" class="footer-link lang-en">Privacy policy</a>
|
||||
<a href="https://www.deepl.com/de/privacy" target="_blank" class="footer-link lang-de">Datenschutzerklärung</a>
|
||||
<a href="https://www.deepl.com/en/pro-license" target="_blank" class="footer-link lang-en">Terms and conditions</a>
|
||||
<a href="https://www.deepl.com/de/pro-license" target="_blank" class="footer-link lang-de">AGB</a>
|
||||
<a href="https://support.deepl.com/hc/en-us/requests/new?ticket_form_id=13384459519132" target="_blank" class="footer-link lang-en">Cancel subscriptions</a>
|
||||
<a href="https://support.deepl.com/hc/de/requests/new?ticket_form_id=13384459519132" target="_blank" class="footer-link lang-de">Abonnements kündigen</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-items-wrapper">
|
||||
<div class="footer-item-title lang-en">Product</div>
|
||||
<div class="footer-item-title lang-de">Produkte</div>
|
||||
<div class="footer-links-container">
|
||||
<a href="https://www.deepl.com/en/translator" target="_blank" class="footer-link lang-en">Free translator</a>
|
||||
<a href="https://www.deepl.com/de/translator" target="_blank" class="footer-link lang-de">Kostenloser Übersetzer</a>
|
||||
<a href="https://www.deepl.com/en/features" target="_blank" class="footer-link lang-en">Features</a>
|
||||
<a href="https://www.deepl.com/de/features" target="_blank" class="footer-link lang-de">Features</a>
|
||||
<a href="https://www.deepl.com/en/pro?cta=footer-pro" target="_blank" class="footer-link">DeepL Pro</a>
|
||||
<a href="https://www.deepl.com/en/pro-api" target="_blank" class="footer-link lang-en">Translation API</a>
|
||||
<a href="https://www.deepl.com/de/pro-api" target="_blank" class="footer-link lang-de">API</a>
|
||||
<a href="https://www.deepl.com/en/write" target="_blank" class="footer-link lang-en">DeepL Write</a>
|
||||
<a href="https://www.deepl.com/de/write" target="_blank" class="footer-link lang-de">DeepL Write</a>
|
||||
<a href="https://www.deepl.com/en/write" target="_blank" class="footer-link lang-en">DeepL Voice</a>
|
||||
<a href="https://www.deepl.com/de/write" target="_blank" class="footer-link lang-de">DeepL Voice</a>
|
||||
<a href="https://www.deepl.com/en/app" target="_blank" class="footer-link lang-en">Apps</a>
|
||||
<a href="https://www.deepl.com/de/app" target="_blank" class="footer-link lang-de">Apps</a>
|
||||
<a href="https://www.deepl.com/en/integrations" target="_blank" class="footer-link lang-en">Integrations</a>
|
||||
<a href="https://www.deepl.com/de/integrations" target="_blank" class="footer-link lang-de">Integrationen</a>
|
||||
<a href="https://www.deepl.com/en/features/document-translation" target="_blank" class="footer-link lang-en">Document translation</a>
|
||||
<a href="https://www.deepl.com/de/features/document-translation" target="_blank" class="footer-link lang-de">Dokumentübersetzung</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-items-wrapper">
|
||||
<div class="footer-item-title lang-en">Download</div>
|
||||
<div class="footer-item-title lang-de">Downloads</div>
|
||||
<div class="footer-links-container">
|
||||
<a href="https://www.deepl.com/en/android-app" target="_blank" class="footer-link lang-en">DeepL for Android</a>
|
||||
<a href="https://www.deepl.com/de/android-app" target="_blank" class="footer-link lang-de">DeepL für Android</a>
|
||||
<a href="https://www.deepl.com/en/android-app" target="_blank" class="footer-link lang-en">DeepL for ChromeOS</a>
|
||||
<a href="https://www.deepl.com/de/android-app" target="_blank" class="footer-link lang-de">DeepL für ChromeOS</a>
|
||||
<a href="https://www.deepl.com/en/ios-app" target="_blank" class="footer-link lang-en">DeepL for iPhone</a>
|
||||
<a href="https://www.deepl.com/de/ios-app" target="_blank" class="footer-link lang-de">DeepL für iPhone</a>
|
||||
<a href="https://www.deepl.com/en/ios-app" target="_blank" class="footer-link lang-en">DeepL for iPad</a>
|
||||
<a href="https://www.deepl.com/de/ios-app" target="_blank" class="footer-link lang-de">DeepL für iPad</a>
|
||||
<a href="https://www.deepl.com/en/macos-app" target="_blank" class="footer-link lang-en">DeepL for Mac</a>
|
||||
<a href="https://www.deepl.com/de/macos-app" target="_blank" class="footer-link lang-de">DeepL für Mac</a>
|
||||
<a href="https://www.deepl.com/en/windows-app" target="_blank" class="footer-link lang-en">DeepL for Windows</a>
|
||||
<a href="https://www.deepl.com/de/windows-app" target="_blank" class="footer-link lang-de">DeepL für Windows</a>
|
||||
<a href="https://www.deepl.com/en/chrome-extension" target="_blank" class="footer-link lang-en">DeepL Chrome extension</a>
|
||||
<a href="https://www.deepl.com/de/chrome-extension" target="_blank" class="footer-link lang-de">DeepL-Erweiterung für Chrome</a>
|
||||
<a href="https://www.deepl.com/en/edge-extension" target="_blank" class="footer-link lang-en">DeepL Edge extension</a>
|
||||
<a href="https://www.deepl.com/de/edge-extension" target="_blank" class="footer-link lang-de">DeepL-Erweiterung für Edge</a>
|
||||
<a href="https://www.deepl.com/en/firefox-extension" target="_blank" class="footer-link lang-en">DeepL Firefox extension</a>
|
||||
<a href="https://www.deepl.com/de/firefox-extension" target="_blank" class="footer-link lang-de">DeepL-Erweiterung für Firefox</a>
|
||||
<a href="https://www.deepl.com/en/word-addin" target="_blank" class="footer-link lang-en">DeepL in Microsoft Word</a>
|
||||
<a href="https://www.deepl.com/de/word-addin" target="_blank" class="footer-link lang-de">DeepL für Microsoft Word</a>
|
||||
<a href="https://www.deepl.com/en/integrations/outlook-addin" target="_blank" class="footer-link lang-en">DeepL for Microsoft Outlook</a>
|
||||
<a href="https://www.deepl.com/de/integrations/outlook-addin" target="_blank" class="footer-link lang-de">DeepL für Microsoft Outlook</a>
|
||||
<a href="https://www.deepl.com/en/integrations/powerpoint-addin" target="_blank" class="footer-link lang-en">DeepL for Microsoft Powerpoint</a>
|
||||
<a href="https://www.deepl.com/de/integrations/powerpoint-addin" target="_blank" class="footer-link lang-de">DeepL für Microsoft PowerPoint</a>
|
||||
<a href="https://www.deepl.com/en/google-workspace" target="_blank" class="footer-link lang-en">DeepL for Google Workspace</a>
|
||||
<a href="https://www.deepl.com/de/google-workspace" target="_blank" class="footer-link lang-de">DeepL für Google Workspace</a>
|
||||
<a href="https://www.deepl.com/en/microsoft-365" target="_blank" class="footer-link lang-en">DeepL for Microsoft 365</a>
|
||||
<a href="https://www.deepl.com/de/microsoft-365" target="_blank" class="footer-link lang-en">DeepL für Microsoft 365</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-items-wrapper">
|
||||
<div class="footer-item-title lang-en">Company</div>
|
||||
<div class="footer-item-title lang-de">Unternehmen</div>
|
||||
<div class="footer-links-container">
|
||||
<a href="https://www.deepl.com/en/contact-us" target="_blank" class="footer-link lang-en">Contact Sales</a>
|
||||
<a href="https://www.deepl.com/de/contact-us" target="_blank" class="footer-link lang-de">Sales-Team kontaktieren</a>
|
||||
<a href="https://www.deepl.com/en/press" target="_blank" class="footer-link lang-en">Press</a>
|
||||
<a href="https://www.deepl.com/de/press" target="_blank" class="footer-link lang-de">Presse</a>
|
||||
<a href="https://www.deepl.com/en/careers" target="_blank" class="footer-link lang-en">Careers</a>
|
||||
<a href="https://www.deepl.com/de/careers" target="_blank" class="footer-link lang-de">Karriere</a>
|
||||
<a href="https://www.deepl.com/en/publisher" target="_blank" class="footer-link lang-en">Publisher</a>
|
||||
<a href="https://www.deepl.com/de/publisher" target="_blank" class="footer-link lang-de">Impressum</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer-links-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.links-footer {
|
||||
display: flex;
|
||||
}
|
||||
.footer-items-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.academy-footer {
|
||||
padding: 60px;
|
||||
}
|
||||
.footer-item-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
color: #292C32;
|
||||
}
|
||||
.footer-link {
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
color: #292C32;
|
||||
}
|
||||
.footer-link:hover {
|
||||
color: #42a2ff;
|
||||
}
|
||||
.footer-logo-image {
|
||||
width: 100%;
|
||||
max-width: 100px;
|
||||
}
|
||||
.social-links-wrapper {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
gap: 10px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.social-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
25
Custom_Templates/customer_templates/DeepL/_head.html.liquid
Normal file
25
Custom_Templates/customer_templates/DeepL/_head.html.liquid
Normal file
@ -0,0 +1,25 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
|
||||
|
||||
<script>
|
||||
function changeLangText() {
|
||||
const searchInput = document.querySelector('.search-input');
|
||||
const selectedLang = localStorage.getItem("userLanguage");
|
||||
|
||||
console.log(selectedLang);
|
||||
|
||||
if (selectedLang === 'de') {
|
||||
searchInput.placeholder = "Suche";
|
||||
}
|
||||
}
|
||||
addEventListener("DOMContentLoaded", (event) => {
|
||||
changeLangText()
|
||||
});
|
||||
|
||||
</script>
|
||||
516
Custom_Templates/customer_templates/DeepL/_header.html.liquid
Normal file
516
Custom_Templates/customer_templates/DeepL/_header.html.liquid
Normal file
@ -0,0 +1,516 @@
|
||||
{% assign userLanguage = current_person.properties.learner_language | upcase%}
|
||||
|
||||
<div id="loader-overlay">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
|
||||
<header class="header">
|
||||
<div class="np-header-content np-max-width">
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
></button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="header-navigation-container">
|
||||
<div class="header-logo">
|
||||
<a class="deepl-logo" href="/app">
|
||||
<img class="deepl-logo-img" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/DeepL/images/Academy.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="navigation">
|
||||
<a href="/app/learning_paths" id="lp" class="navigation-item lang-en">
|
||||
Learning paths
|
||||
</a>
|
||||
<a href="/app/learning_paths" id="lp" class="navigation-item lang-de">
|
||||
Lernpfade
|
||||
</a>
|
||||
<a href="/app/catalog" id="courses" class="navigation-item lang-en">
|
||||
Courses
|
||||
</a>
|
||||
<a href="/app/catalog" id="courses" class="navigation-item lang-de">
|
||||
Kurse
|
||||
</a>
|
||||
<a href="/app/training_events" id="webinars" class="navigation-item lang-en">
|
||||
Webinars
|
||||
</a>
|
||||
<a href="/app/training_events" id="webinars" class="navigation-item lang-de">
|
||||
Webinare
|
||||
</a>
|
||||
<a href="/app/resources" id="resources" class="navigation-item lang-en">
|
||||
Resources
|
||||
</a>
|
||||
<a href="/app/resources" id="resources" class="navigation-item lang-de">
|
||||
Ressourcen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="header-profile-container">
|
||||
<div class="np-hidden-mobile search-bar">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
{% if current_person.properties.new_content %}
|
||||
<div class="languge-dropdown">
|
||||
<button
|
||||
type="button"
|
||||
class="navigation-item languge-dropdown-button lang-en"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-target-next
|
||||
data-toggle-outside
|
||||
data-toggle-escape>
|
||||
<span style="display:inline-block">Language</span>
|
||||
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="navigation-item languge-dropdown-button lang-de"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-target-next
|
||||
data-toggle-outside
|
||||
data-toggle-escape>
|
||||
<span style="display:inline-block">Sprache</span>
|
||||
|
||||
</button>
|
||||
|
||||
<ul class="languge-dropdown-list">
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
id="en-lang"
|
||||
data-lang="en"
|
||||
class="lang-option active"
|
||||
data-toggle-trigger-off
|
||||
>
|
||||
<span style="display:inline-block">English</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
id="de-lang"
|
||||
data-lang="de"
|
||||
class="lang-option"
|
||||
data-toggle-trigger-off>
|
||||
<span style="display:inline-block">Deutsch</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
<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
|
||||
>
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 6C0 2.68629 2.68629 0 6 0H34C37.3137 0 40 2.68629 40 6V34C40 37.3137 37.3137 40 34 40H6C2.68629 40 0 37.3137 0 34V6Z" fill="#EDEDED"/>
|
||||
<path d="M26.6666 27.5V25.8333C26.6666 24.9493 26.3154 24.1014 25.6903 23.4763C25.0652 22.8512 24.2173 22.5 23.3333 22.5H16.6666C15.7825 22.5 14.9347 22.8512 14.3096 23.4763C13.6844 24.1014 13.3333 24.9493 13.3333 25.8333V27.5M23.3333 15.8333C23.3333 17.6743 21.8409 19.1667 19.9999 19.1667C18.159 19.1667 16.6666 17.6743 16.6666 15.8333C16.6666 13.9924 18.159 12.5 19.9999 12.5C21.8409 12.5 23.3333 13.9924 23.3333 15.8333Z" stroke="#0F2B46" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</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 %}
|
||||
{% if current_person.signed_in? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route transcript %}"
|
||||
>
|
||||
{% t .transcript %}
|
||||
</a>
|
||||
{% endif %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
aria-label="{% t shared.sign_in %}"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</a>
|
||||
{% 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="header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
{% if current_person.signed_in? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route transcript %}"
|
||||
>
|
||||
{% t .transcript %}
|
||||
</a>
|
||||
{% endif %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
|
||||
<style>
|
||||
.deepl-logo-img {
|
||||
width: 100%;
|
||||
max-width: 230px;
|
||||
}
|
||||
.header-navigation-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
}
|
||||
.deepl-logo {
|
||||
display: flex;
|
||||
}
|
||||
.header-profile-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.np-header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.search-bar {
|
||||
position: relative;
|
||||
height: fit-content;
|
||||
}
|
||||
.navigation {
|
||||
display: flex;
|
||||
gap: 25px;
|
||||
height: 100%;
|
||||
}
|
||||
.search-input {
|
||||
border: 1px solid rgba(0,0,0, 0.25);
|
||||
padding: 5px 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.navigation-item {
|
||||
text-decoration: none;
|
||||
color: #0f2b46;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.navigation-item:hover {
|
||||
color: #42A2FF;
|
||||
}
|
||||
|
||||
.active-nav {
|
||||
color: #42A2FF;
|
||||
}
|
||||
.header {
|
||||
background: #f8f8f8;
|
||||
padding: 10px 40px;
|
||||
}
|
||||
.header-search-icon {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
top: 0%;
|
||||
}
|
||||
.search-input {
|
||||
border: 1px solid rgba(0,0,0, 0.25);
|
||||
padding: 5px 10px 5px 30px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.languge-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left:24px;
|
||||
}
|
||||
.languge-dropdown-button {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
background: #ededed;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
padding: 0 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.np-header-avatar-button {
|
||||
display: flex;
|
||||
}
|
||||
.languge-dropdown-button::after {
|
||||
font-family:"Font awesome 5 Pro";
|
||||
display: inline-block;
|
||||
content: "\f078";
|
||||
transition: transform .25s ease-out;
|
||||
margin-left:4px;
|
||||
}
|
||||
.languge-dropdown-button.is-open::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.languge-dropdown-list {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
max-width: 15em;
|
||||
max-height: 13em;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
transform: translateY(-1em);
|
||||
transform-origin: center top;
|
||||
background-color: white;
|
||||
perspective: 1000px;
|
||||
box-shadow: 0 0 8px rgba(72,103,118,.5);
|
||||
list-style: none;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: .25s ease-in;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.languge-dropdown-list.is-open {
|
||||
transform: translateY(0);
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.languge-dropdown-list li {
|
||||
border-bottom: 1px solid #ededed;
|
||||
cursor:pointer;
|
||||
padding:12px 24px;
|
||||
}
|
||||
.languge-dropdown-list li:hover button,
|
||||
.languge-dropdown-list li:focus button{
|
||||
font-weight:700;
|
||||
}
|
||||
.languge-dropdown-list li button.active {
|
||||
font-weight:700;
|
||||
cursor:text;
|
||||
}
|
||||
.languge-dropdown-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.languge-dropdown-list button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
background: none;
|
||||
text-align: left;
|
||||
}
|
||||
.languge-dropdown-list button:hover,
|
||||
.languge-dropdown-list button:focus {
|
||||
cursor:pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const url = window.location.pathname;
|
||||
|
||||
const lp = document.getElementById('lp');
|
||||
const academy = document.getElementById('academy');
|
||||
const courses = document.getElementById('courses');
|
||||
const webinars = document.getElementById('webinars');
|
||||
const resources = document.getElementById('resources');
|
||||
|
||||
switch (url) {
|
||||
case '/app':
|
||||
academy.classList.add('active-nav');
|
||||
break;
|
||||
case '/app/learning_paths':
|
||||
lp.classList.add('active-nav');
|
||||
break;
|
||||
case '/app/catalog':
|
||||
courses.classList.add('active-nav');
|
||||
break;
|
||||
case '/app/training_events':
|
||||
webinars.classList.add('active-nav');
|
||||
break;
|
||||
case '/app/resources':
|
||||
resources.classList.add('active-nav');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function changeElementsText() {
|
||||
const searchInput = document.querySelector('.search-input');
|
||||
const selectedLang = localStorage.getItem("userLanguage");
|
||||
|
||||
console.log(selectedLang);
|
||||
|
||||
if (selectedLang === 'de') {
|
||||
searchInput.placeholder = "Suche";
|
||||
}
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
let userLanguage = localStorage.getItem("userLanguage");
|
||||
let userLanguageCustomPropValue = '{{current_person.properties.learner_language}}'
|
||||
|
||||
if (userLanguage === null) {
|
||||
userLanguage = "en";
|
||||
localStorage.setItem("userLanguage", userLanguage);
|
||||
}
|
||||
|
||||
if (userLanguageCustomPropValue) {
|
||||
localStorage.setItem("userLanguage", userLanguageCustomPropValue);
|
||||
}
|
||||
|
||||
document.body.setAttribute("data-lang", userLanguage);
|
||||
document.querySelectorAll(".lang-option").forEach(function(button) {
|
||||
button.classList.remove("active");
|
||||
});
|
||||
document.querySelector(`.lang-option[data-lang='${userLanguage}']`).classList.add("active");
|
||||
|
||||
document.querySelectorAll(".lang-option").forEach(function(button) {
|
||||
button.addEventListener("click", function() {
|
||||
const selectedLangOption = this.getAttribute("data-lang");
|
||||
localStorage.setItem("userLanguage", selectedLangOption);
|
||||
|
||||
document.querySelectorAll(".lang-option").forEach(function(button) {
|
||||
button.classList.remove("active");
|
||||
});
|
||||
this.classList.add("active");
|
||||
document.body.setAttribute("data-lang", selectedLangOption);
|
||||
|
||||
document.getElementById("loader-overlay").style.display = "flex";
|
||||
|
||||
fetch("https://webhooks.workato.com/webhooks/rest/3be1030a-8bc7-4063-a6dc-7e529b869613/user-language-handler", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
language: selectedLangOption,
|
||||
id: '{{current_person.id}}'
|
||||
})
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok ' + response.statusText);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log("Language information sent successfully:", data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error sending language information:", error);
|
||||
});
|
||||
|
||||
changeElementsText();
|
||||
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 5000);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,17 @@
|
||||
<header class="np-box-header np-header-color">
|
||||
<a class="np-box-header-link" href="{% route home %}">
|
||||
{% if current_school.logo_url %}
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
src="{{ current_school.logo_url }}"
|
||||
class="np-box-header-logo"
|
||||
/>
|
||||
{% else %}
|
||||
<span class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</header>
|
||||
|
||||
{% include "messages" %}
|
||||
@ -0,0 +1,5 @@
|
||||
{% if learning_path.new_content_available? %}
|
||||
{% include "learning_path_new_content_banner" %}
|
||||
{% else %}
|
||||
{% include "learning_path_completed_banner" %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,7 @@
|
||||
<div class="overview-categories-wrapper">
|
||||
{% for category in learning_path.categories %}
|
||||
<div class="category-item">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,17 @@
|
||||
{% if learning_path.has_certificate? %}
|
||||
{% if learning_path.certificate_completed? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="np-learning-path-certificate-link"
|
||||
href="{{ learning_path.certificate_link }}"
|
||||
>
|
||||
<div class="np-learning-path-certificate">
|
||||
{% include "learning_path_certificate_content" %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-certificate np-learning-path-certificate--inactive">
|
||||
{% include "learning_path_certificate_content" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,19 @@
|
||||
<div class="np-learning-path-certificate-content">
|
||||
<div class="np-learning-path-certificate-avatar" role="img">
|
||||
<i class="np-learning-path-certificate-avatar-icon fal fa-award"></i>
|
||||
<h5 class="np-learning-path-certificate-avatar-title">
|
||||
{% t .avatar_title %}
|
||||
</h5>
|
||||
</div>
|
||||
<h4 class="np-learning-path-certificate-name">
|
||||
{{ learning_path.certificate_name }}
|
||||
</h4>
|
||||
{% if learning_path.certificate_completed? %}
|
||||
<time
|
||||
class="np-learning-path-certificate-issue-date"
|
||||
datetime="{{ learning_path.certificate_issue_date }}"
|
||||
>
|
||||
{{ learning_path.certificate_issue_date | date: "%B %d, %Y" }}
|
||||
</time>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
<div class="np-learning-path-completed-banner np-learning-path-banner">
|
||||
<img class="np-learning-path-banner-image" src="https://s3.amazonaws.com/static.northpass.com/images/stars-completed.svg"/>
|
||||
<div class="np-learning-path-banner-content">
|
||||
<h3 class="np-learning-path-banner-headline">{% t .headline %}</h3>
|
||||
<p class="np-learning-path-banner-description">{% t .description %}</p>
|
||||
<div class="np-learning-path-banner-actions">
|
||||
{% if learning_path.certificate_link %}
|
||||
<a href="{{ learning_path.certificate_link }}" class="np-learning-path-banner-action np-learning-path-banner-action--primary">{% t .actions.certificate %}</a>
|
||||
{% endif %}
|
||||
<a href="/app/courses" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">{% t .actions.more_courses %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,80 @@
|
||||
{% if learning_path.enrolled? and course.unlocked? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="learning-path-outline-item"
|
||||
href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
|
||||
>
|
||||
<div class="lp-overview-item">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="learning-path-outline-name">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="progress-text
|
||||
{% if course.completed? %} np-color-success {% else %} progress-text {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
|
||||
<div class="lp-overview-item">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="learning-path-outline-name">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
</div>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.lp-overview-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
.learning-path-outline-course-image {
|
||||
width: 135px;
|
||||
height: 75px;
|
||||
}
|
||||
.np-learning-path-outline-inactive-item {
|
||||
border: none;
|
||||
}
|
||||
.learning-path-outline-name {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
letter-spacing: -0.015em;
|
||||
text-align: left;
|
||||
color: #0F2B46;
|
||||
}
|
||||
.np-learning-path-outline-item {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.learning-path-outline-item {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,4 @@
|
||||
|
||||
<div class="np-card-text">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
@ -0,0 +1,19 @@
|
||||
<div class="overview-content-container">
|
||||
<div class="content-details">
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
|
||||
{% include "learning_path_description" %}
|
||||
{% include "learning_path_instructors" %}
|
||||
{% include "learning_path_categories" %}
|
||||
</div>
|
||||
<div class="content-activities">
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
|
||||
<div class="overview-header-container">
|
||||
<div class="overview-btn-container">
|
||||
<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 4.49991L1 4.49991M1 4.49991L4.33417 1.09082M1 4.49991L4.33417 7.909" stroke="#0F2B46" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
<a href="/app/learning_paths" class="overview-back-btn">Back to all learning paths</a>
|
||||
</div>
|
||||
<div class="overview-heading">
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,76 @@
|
||||
{% include "learning_path_desktop_header" %}
|
||||
{% include "learning_path_desktop_content" %}
|
||||
|
||||
<style>
|
||||
.overview-back-btn {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 25.2px;
|
||||
letter-spacing: -0.01em;
|
||||
text-align: center;
|
||||
color: #0F2B46;
|
||||
text-decoration: none;
|
||||
}
|
||||
.overview-btn-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.overview-heading {
|
||||
font-size: 48px;
|
||||
font-weight: 320;
|
||||
line-height: 50.4px;
|
||||
letter-spacing: -0.015em;
|
||||
color: #0F2B46;
|
||||
}
|
||||
.overview-header-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
.overview-content-container {
|
||||
display: grid;
|
||||
margin-top: 30px;
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
gap: 70px;
|
||||
}
|
||||
.overview-details-container {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
.overview-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 13px;
|
||||
align-items: start;
|
||||
}
|
||||
.detail-content {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 25.2px;
|
||||
letter-spacing: -0.01em;
|
||||
color: #0F2B46;
|
||||
}
|
||||
.category-item {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 19.6px;
|
||||
letter-spacing: -0.01em;
|
||||
color: #0F2B46;
|
||||
padding: 11px 12px;
|
||||
background: #EDEDED;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.overview-categories-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 17px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
.overview-content-container {
|
||||
grid-template-columns: repeat(1,1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1 @@
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
{% if learning_path.in_progress? %}
|
||||
{% include "learning_path_outline" %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_description" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_description" %}
|
||||
</div>
|
||||
<div class="np-card-spacing">
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if learning_path.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,17 @@
|
||||
<div class="np-resource-header np-card-padding-vertical">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.learning_path.title %}
|
||||
<i class="far fa-road np-button-color np-learning-path-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,2 @@
|
||||
{% include "learning_path_mobile_header" %}
|
||||
{% include "learning_path_mobile_content" %}
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="np-learning-path-new-content-banner np-learning-path-banner">
|
||||
<div class="np-learning-path-banner-content">
|
||||
<h3 class="np-learning-path-banner-headline">{% t .headline %}</h3>
|
||||
<p class="np-learning-path-banner-description">{% t .description %}</p>
|
||||
<div class="np-learning-path-banner-actions">
|
||||
{% learning_path_next_step_button learning_path, class: "np-learning-path-banner-action np-learning-path-banner-action--primary" %}
|
||||
{% if learning_path.certificate_link %}
|
||||
<a href="{{ learning_path.certificate_link }}" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">{% t .actions.view_certificate %}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
<div class="np-learning-path-outline">
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% include "learning_path_course", course: item %}
|
||||
{% elsif item.training_event? %}
|
||||
{% include "learning_path_training_session", training_session: item %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% include "learning_path_certificate" %}
|
||||
</div>
|
||||
@ -0,0 +1,52 @@
|
||||
{% if learning_path.enrolled? %}
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="small-heading">
|
||||
{% t .progress %}
|
||||
</div>
|
||||
<div class="progress-overview">
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-text">
|
||||
{{ learning_path.progress }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="overview-cta-btn-container">
|
||||
{% learning_path_next_step_button learning_path, class: "overview-cta-btn" %}
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.progress-text {
|
||||
color: #42A2FF;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 19.6px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.progress-overview {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
.overview-cta-btn {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 25.2px;
|
||||
letter-spacing: -0.01em;
|
||||
color: #FFFFFF;
|
||||
padding: 7px 18px;
|
||||
background: #0F2B46;
|
||||
border-radius: 40px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.overview-cta-btn-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 150px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,3 @@
|
||||
{% include "learning_path_desktop_header" %}
|
||||
{% include "learning_path_banners" %}
|
||||
{% include "learning_path_desktop_content" %}
|
||||
@ -0,0 +1,5 @@
|
||||
<div class="np-card-padding">
|
||||
{% include "learning_path_banners" %}
|
||||
</div>
|
||||
{% include "learning_path_mobile_header" %}
|
||||
{% include "learning_path_mobile_content" %}
|
||||
@ -0,0 +1,53 @@
|
||||
{% if learning_path.enrolled? and training_session.unlocked? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<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>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% if training_session.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<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>
|
||||
{% endif %}
|
||||
@ -0,0 +1,14 @@
|
||||
<div class="np-learning-paths-resources">
|
||||
{% if items.any? %}
|
||||
{% for learning_path in items %}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,19 @@
|
||||
{% if messages.alert.size > 0 %}
|
||||
<div class="np-alert np-alert-error">
|
||||
<div class="np-alert-wrapper">
|
||||
{% for message in messages.alert %}
|
||||
<div>{{ message }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if messages.notice.size > 0 %}
|
||||
<div class="np-alert np-alert-success">
|
||||
<div class="np-alert-wrapper">
|
||||
{% for message in messages.notice %}
|
||||
<div>{{ message }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,73 @@
|
||||
<div class="recommended-wrapper">
|
||||
<div class="heading lang-en">
|
||||
On-demand library
|
||||
</div>
|
||||
<div class="heading lang-de">
|
||||
On-Demand-Bibliothek
|
||||
</div>
|
||||
|
||||
<div class="webinars-cards-wrapper on-demand-cards-wrapper">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.properties.on_demand %}
|
||||
{% if course.properties.language == userLanguage %}
|
||||
{% include "on_demand_cards" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.your-course-carousel {
|
||||
position: relative;
|
||||
}
|
||||
.slick-arrow {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
z-index: 111;
|
||||
cursor: pointer;
|
||||
}
|
||||
.right-arrow {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.slick-dots button {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 1px;
|
||||
background: #8878FF;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
.slick-dots {
|
||||
list-style-type: none;
|
||||
}
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding-top: 3rem;
|
||||
list-style-type: none;
|
||||
gap: 10px;
|
||||
}
|
||||
.slick-dots li {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
.slick-dots li.slick-active button {
|
||||
background: #6CF1C9;
|
||||
|
||||
}
|
||||
@media only screen and (max-width: 1170px) {
|
||||
.on-demand-cards-wrapper {
|
||||
grid-template-columns: repeat(2,1fr) !important;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.on-demand-cards-wrapper {
|
||||
grid-template-columns: repeat(1,1fr) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
<div class="card" categories="{% for category in course.categories %}{{category.name}},{% endfor %}" progress="{% if course.progress > 0 and course.progress < 100 %}In progress{% elsif course.progress == 100 %}Completed{% else %}Not started{% endif %}">
|
||||
<div class="card-container">
|
||||
<img
|
||||
class="card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="card-content">
|
||||
<div class="card-content-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="card-content-footer">
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
|
||||
<a class="card-btn dark-btn lang-en" {% if course.enrolled? %}href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"{% else %}href="{{ course_path }}"{% endif %}>
|
||||
Watch now
|
||||
</a>
|
||||
<a class="card-btn dark-btn lang-de" {% if course.enrolled? %}href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"{% else %}href="{{ course_path }}"{% endif %}>
|
||||
Jetzt anschauen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
144
Custom_Templates/customer_templates/DeepL/_popular.html.liquid
Normal file
144
Custom_Templates/customer_templates/DeepL/_popular.html.liquid
Normal file
@ -0,0 +1,144 @@
|
||||
<div class="recommended-wrapper">
|
||||
<div class="heading lang-en">
|
||||
Explore our most popular courses
|
||||
</div>
|
||||
<div class="heading lang-de">
|
||||
Entdecken Sie unsere beliebtesten Kurse
|
||||
</div>
|
||||
|
||||
<div class="carousel-filters-wrapper">
|
||||
{% include 'carousel-filters' %}
|
||||
</div>
|
||||
<div class="carousel-wrapper popular-carousel">
|
||||
{% for course in courses.enrolled %}
|
||||
{% unless course.properties.resource or course.properties.on_demand %}
|
||||
{% if course.properties.language == userLanguage %}
|
||||
<div class="carousel-card popular-carousel-card">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.popular-carousel {
|
||||
position: relative;
|
||||
}
|
||||
.slick-arrow {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
z-index: 111;
|
||||
cursor: pointer;
|
||||
}
|
||||
.right-arrow {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.slick-dots button {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 1px;
|
||||
background: #8878FF;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
.slick-dots {
|
||||
list-style-type: none;
|
||||
}
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding-top: 3rem;
|
||||
list-style-type: none;
|
||||
gap: 10px;
|
||||
}
|
||||
.slick-dots li {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
.slick-dots li.slick-active button {
|
||||
background: #6CF1C9;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".popular-carousel").slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
prevArrow: '<i class="fal fa-chevron-left left-arrow"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right right-arrow"></i>',
|
||||
infinite: false,
|
||||
dots: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
let selectedCategory = null;
|
||||
let selectedProgress = null;
|
||||
|
||||
function filterCards() {
|
||||
$(".popular-carousel").slick('slickUnfilter');
|
||||
|
||||
let filterFunction = function() {
|
||||
const card = $(this).find('.card');
|
||||
const cardCategories = card.attr('categories').split(',').map(c => c.trim());
|
||||
const cardProgress = card.attr('progress');
|
||||
|
||||
let showByCategory = !selectedCategory || cardCategories.includes(selectedCategory);
|
||||
let showByProgress = !selectedProgress || selectedProgress === 'All courses' || cardProgress === selectedProgress;
|
||||
|
||||
return showByCategory && showByProgress;
|
||||
};
|
||||
|
||||
$(".popular-carousel").slick('slickFilter', filterFunction);
|
||||
}
|
||||
|
||||
$('.filter').on('click', function() {
|
||||
let clickedCategory = $(this).attr('value');
|
||||
|
||||
if (selectedCategory === clickedCategory) {
|
||||
selectedCategory = null;
|
||||
$(this).removeClass('filter-active');
|
||||
} else {
|
||||
selectedCategory = clickedCategory;
|
||||
$('.filter').removeClass('filter-active');
|
||||
$(this).addClass('filter-active');
|
||||
}
|
||||
|
||||
filterCards();
|
||||
});
|
||||
|
||||
$('.filter-by-progress-option').on('click', function() {
|
||||
let clickedProgress = $(this).attr('value');
|
||||
|
||||
if (selectedProgress === clickedProgress) {
|
||||
selectedProgress = null;
|
||||
} else {
|
||||
selectedProgress = clickedProgress;
|
||||
}
|
||||
|
||||
filterCards();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,92 @@
|
||||
{% assign recommended_counter = 0 %}
|
||||
|
||||
<div class="recommended-wrapper" id="recommended-section">
|
||||
<div class="heading lang-en">
|
||||
Recommended for you
|
||||
</div>
|
||||
<div class="heading lang-de">
|
||||
Für Sie empfohlen
|
||||
</div>
|
||||
|
||||
<div class="recommended-wrapper-content">
|
||||
{% comment %} {% for course in courses.enrolled %}
|
||||
{% unless course.properties.resource or course.properties.on_demand %}
|
||||
<div class="carousel-card recommended-card">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% assign recommended_counter = recommended_counter | plus: 1 %}
|
||||
{% endunless %}
|
||||
{% endfor %} {% endcomment %}
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if category.name == userLanguage %}
|
||||
<div class="carousel-card recommended-card">
|
||||
{% include "cards_learning_path" %}
|
||||
</div>
|
||||
{% assign recommended_counter = recommended_counter | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="see-all-btn-container">
|
||||
<a class="light-btn" id="expand-btn" href="/app/catalog">See all</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.recommended-wrapper-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
@media only screen and (max-width: 1170px) {
|
||||
.recommended-wrapper-content {
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.recommended-wrapper-content {
|
||||
grid-template-columns: repeat(1,1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const cards = document.querySelectorAll('.recommended-card');
|
||||
const seeAllBtn = document.getElementById('expand-btn');
|
||||
|
||||
const maxCards = 8;
|
||||
const initialVisibleCards = 4;
|
||||
const totalCards = cards.length;
|
||||
let isExpanded = false;
|
||||
|
||||
if (totalCards > initialVisibleCards) {
|
||||
seeAllBtn.style.display = 'block';
|
||||
} else {
|
||||
seeAllBtn.style.display = 'none';
|
||||
}
|
||||
|
||||
function updateCardVisibility() {
|
||||
cards.forEach((card, index) => {
|
||||
if (isExpanded) {
|
||||
card.style.display = index < maxCards ? 'block' : 'none';
|
||||
} else {
|
||||
card.style.display = index < initialVisibleCards ? 'block' : 'none';
|
||||
}
|
||||
});
|
||||
|
||||
seeAllBtn.textContent = isExpanded ? 'Show Less' : 'See All';
|
||||
}
|
||||
|
||||
updateCardVisibility();
|
||||
|
||||
seeAllBtn.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
isExpanded = !isExpanded;
|
||||
updateCardVisibility();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,94 @@
|
||||
<div class="carousel-filters">
|
||||
<div class="filters-container">
|
||||
<div class="filter lang-en" value="Administration">Administration</div>
|
||||
<div class="filter lang-de" value="Administration">Verwaltung</div>
|
||||
<div class="filter lang-en" value="Translator">Translator</div>
|
||||
<div class="filter lang-de" value="Translator">Übersetzer</div>
|
||||
<div class="filter lang-en" value="Glossaries" >Glossaries</div>
|
||||
<div class="filter lang-de" value="Glossaries" >Glossare</div>
|
||||
<div class="filter lang-en" value="Document translation" >Document translation</div>
|
||||
<div class="filter lang-de" value="Document translation" >Dokumentübersetzung</div>
|
||||
<div class="filter" value="Apps" >Apps</div>
|
||||
<div class="filter lang-en" value="Extensions and integrations" >Extensions and integrations</div>
|
||||
<div class="filter lang-de" value="Extensions and integrations" >Erweiterungen und Integrationen</div>
|
||||
<div class="filter" value="Write" >Write</div>
|
||||
<div class="filter" value="Voice">Voice</div>
|
||||
<div class="filter" value="API" >API</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.carousel-filters {
|
||||
background: #EDEDED;
|
||||
border-radius: 8px;
|
||||
padding: 24px 32px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
display: flex;
|
||||
gap: 44px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
.filter {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 27px;
|
||||
color: #0F2B46;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.filter-dropdown-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
justify-content: end;
|
||||
width: 100%;
|
||||
max-width: 290px;
|
||||
}
|
||||
|
||||
.filter-dropdown-block {
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
max-width: 150px;
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-by-progress-dropdown {
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.filter-by-progress-option {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-by-progress-option:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-active {
|
||||
color: #42A2FF;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,117 @@
|
||||
<div class="recommended-wrapper">
|
||||
<div class="carousel-filters-wrapper">
|
||||
{% include 'resources-filters' %}
|
||||
</div>
|
||||
<div class="catalog-courses-wrapper">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.properties.resource == true %}
|
||||
{% if course.properties.language == userLanguage %}
|
||||
<div class="catalog-course-container">{% include "cards_resources" %}</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.catalog-courses-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.all-courses-carousel {
|
||||
position: relative;
|
||||
}
|
||||
.slick-arrow {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
z-index: 111;
|
||||
cursor: pointer;
|
||||
}
|
||||
.right-arrow {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.slick-dots button {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 1px;
|
||||
background: #8878FF;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
.slick-dots {
|
||||
list-style-type: none;
|
||||
}
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding-top: 3rem;
|
||||
list-style-type: none;
|
||||
gap: 10px;
|
||||
}
|
||||
.slick-dots li {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
.slick-dots li.slick-active button {
|
||||
background: #6CF1C9;
|
||||
|
||||
}
|
||||
@media only screen and (max-width: 1170px) {
|
||||
.catalog-courses-wrapper {
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.catalog-courses-wrapper {
|
||||
grid-template-columns: repeat(1,1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const filters = document.querySelectorAll('.filter');
|
||||
const cards = document.querySelectorAll('.catalog-course-container .card');
|
||||
|
||||
let activeFilter = null;
|
||||
|
||||
filters.forEach(filter => {
|
||||
filter.addEventListener('click', function() {
|
||||
const value = filter.getAttribute('value');
|
||||
|
||||
if (activeFilter === value) {
|
||||
activeFilter = null;
|
||||
filter.classList.remove('filter-active');
|
||||
} else {
|
||||
activeFilter = value;
|
||||
|
||||
filters.forEach(f => f.classList.remove('filter-active'));
|
||||
filter.classList.add('filter-active');
|
||||
}
|
||||
|
||||
filterCourses();
|
||||
});
|
||||
});
|
||||
|
||||
function filterCourses() {
|
||||
if (!activeFilter) {
|
||||
cards.forEach(card => {
|
||||
card.parentElement.style.display = 'block';
|
||||
});
|
||||
} else {
|
||||
cards.forEach(card => {
|
||||
const cardCategories = card.getAttribute('categories').split(',');
|
||||
if (cardCategories.includes(activeFilter)) {
|
||||
card.parentElement.style.display = 'block';
|
||||
} else {
|
||||
card.parentElement.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,19 @@
|
||||
<div class="np-card np-search-result">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content">
|
||||
<img
|
||||
class="np-search-result-image"
|
||||
alt="{{ result.name }}"
|
||||
src="{{ result.image_url }}"
|
||||
/>
|
||||
<div class="np-search-result-content">
|
||||
<div>
|
||||
<a class="np-search-result-title" href="{{ result.path }}">
|
||||
{{ result.name }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-search-result-snippet">{{ result.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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">
|
||||
{% t .nothing_found %}
|
||||
</h3>
|
||||
<div class="np-search-zero-state-subtitle">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<div class="np-search-zero-state-image"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
<nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
@ -0,0 +1,9 @@
|
||||
<div class="np-dashboard-resources">
|
||||
{% if training_events.enrolled.any? %}
|
||||
{% for training_event in training_events.enrolled %}
|
||||
{% include "cards_training_event" with training_event %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,53 @@
|
||||
<div class="np-filter">
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="np-button dropdown-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
>
|
||||
{% t shared.filters.filter %}
|
||||
</button>
|
||||
|
||||
<div class="dropdown-menu" data-test="modal">
|
||||
<form method="get">
|
||||
<span class="dropdown-label">
|
||||
{% t shared.filters.by_event_type %}
|
||||
</span>
|
||||
<ul class="dropdown-checkboxes">
|
||||
{% for event_type in training_events.filters.event_types %}
|
||||
{% capture label %}
|
||||
{% t shared.event_types, key: event_type.value %}
|
||||
{% endcapture %}
|
||||
<li>
|
||||
{% include "filter_checkbox",
|
||||
label: label,
|
||||
name: event_type.name,
|
||||
value: event_type.value
|
||||
selected: event_type.selected?
|
||||
%}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{% capture label %}{% t shared.filters.by_course %}{% endcapture %}
|
||||
{%
|
||||
include "filter_select",
|
||||
filters: training_events.filters.courses,
|
||||
key: "courses_uuid",
|
||||
label: label
|
||||
%}
|
||||
|
||||
<button
|
||||
class="np-button dropdown-button-apply"
|
||||
data-toggle-trigger-off
|
||||
type="submit"
|
||||
>
|
||||
{% t shared.filters.apply %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,21 @@
|
||||
<div class="np-dashboard-resources">
|
||||
{% if training_events.available.any? %}
|
||||
<div class="webinars-wrapper">
|
||||
{% for training_event in training_events.available %}
|
||||
<div class="webinar-container">
|
||||
{% include "cards_training_event" with training_event %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.webinars-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,9 @@
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-training-events"
|
||||
alt="{% t .empty %}"
|
||||
/>
|
||||
</div>
|
||||
@ -0,0 +1,52 @@
|
||||
<div class="dropdown dropdown-calendar">
|
||||
<button
|
||||
class="np-top-button np-button-font-color np-button np-button-big dropdown-calendar-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
>
|
||||
{% t .add_to_calendar %}
|
||||
<i class="fas fa-chevron-down dropdown-calendar-button-chevron"></i>
|
||||
</button>
|
||||
|
||||
<ul class="dropdown-calendar-menu">
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.google_calendar_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
{% 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.outlook_office_calendar_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
{% t .office_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.ical_calendar_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
{% t .ical_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-training-session-cta">
|
||||
<div class="overview-cta-btn-container">
|
||||
<form
|
||||
action="{{ training_session.cta.url }}"
|
||||
method="post"
|
||||
>
|
||||
{% form_authenticity_token %}
|
||||
|
||||
{% if training_session.show_calendar_links? %}
|
||||
{% include "training_session_calendars" %}
|
||||
{% endif %}
|
||||
|
||||
{% if training_session.cta.undo? %}
|
||||
<input type="hidden" name="_method" value="delete" />
|
||||
{% endif %}
|
||||
|
||||
{% if training_session.cta.label %}
|
||||
<button
|
||||
id="register-btn"
|
||||
type="submit"
|
||||
class="overview-cta-btn"
|
||||
onclick="redirectToSessionUrl()"
|
||||
>
|
||||
{{ training_session.cta.label }}
|
||||
</button>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function redirectToSessionUrl() {
|
||||
const registerBtn = document.getElementById('register-btn');
|
||||
const sessionUrl = '{{training_session.session_url}}';
|
||||
|
||||
if (registerBtn.innerText == 'Register') {
|
||||
window.open(sessionUrl, '_blank').focus();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,16 @@
|
||||
<div class="np-card-training-session-date">
|
||||
<div class="np-button-background-color np-card-training-session-date-bar"></div>
|
||||
<div class="card-training-session-date">
|
||||
<div class="card-training-session-date-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="card-training-session-date-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="card-training-session-date-year">
|
||||
{{ training_session.year }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ training_event.description }}
|
||||
</div>
|
||||
@ -0,0 +1,48 @@
|
||||
|
||||
{% include "training_session_header" %}
|
||||
<div class="overview-content-container">
|
||||
<div class="content-details">
|
||||
<div class="training-card-container">
|
||||
<div class="np-card-padding-large">
|
||||
<div>
|
||||
{% include "training_session_status" %}
|
||||
{% include "training_session_date" %}
|
||||
</div>
|
||||
<div class="np-training-session-details">
|
||||
{% include "training_session_details" %}
|
||||
{% include "training_session_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content-divider"></div>
|
||||
<div class="np-card-padding-large">
|
||||
{% include "training_session_description" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-activities">
|
||||
<div class="training-session-container">
|
||||
<div class="np-training-session-sessions-title">
|
||||
{% t shared.more_sessions %}
|
||||
</div>
|
||||
{% if 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>
|
||||
|
||||
<style>
|
||||
.training-card-container {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
<div class="np-training-session-info">
|
||||
|
||||
<div class="np-training-session-time">
|
||||
<i class="fal fa-clock np-button-color np-training-session-icon"></i>
|
||||
<time>{{ training_session.time_period }} {{ training_session.time_zone }}</time>
|
||||
</div>
|
||||
|
||||
{% if training_session.approved? and training_session.location %}
|
||||
<div class="np-training-session-location">
|
||||
<i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
|
||||
{{ training_session.location }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if training_session.approved? and training_session.session_url %}
|
||||
<div class="np-training-session-location">
|
||||
<i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
|
||||
<a href="{{ training_session.session_url }}" class="np-button-color" target="_blank" >
|
||||
{{ training_session.session_url }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,11 @@
|
||||
<div class="overview-header-container">
|
||||
<div class="overview-btn-container">
|
||||
<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 4.49991L1 4.49991M1 4.49991L4.33417 1.09082M1 4.49991L4.33417 7.909" stroke="#0F2B46" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
<a href="/app/training_events" class="overview-back-btn">Back to all webinars</a>
|
||||
</div>
|
||||
<div class="overview-heading">
|
||||
{{ training_event.title }}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,27 @@
|
||||
<div class="np-training-session-view">
|
||||
<div class="np-training-session-view-header">
|
||||
{% include "training_session_header" %}
|
||||
</div>
|
||||
|
||||
<div class="np-card-container np-training-session-view-details np-card-padding np-card-spacing">
|
||||
{% include "training_session_status" %}
|
||||
{% include "training_session_date" %}
|
||||
{% include "training_session_details" %}
|
||||
<div class="np-card-padding-large">
|
||||
{% include "training_session_cta" %}
|
||||
</div>
|
||||
{% include "training_session_description" %}
|
||||
</div>
|
||||
|
||||
{% if training_event.sessions.size > 1 %}
|
||||
<div class="np-card-spacing">
|
||||
<div class="np-training-session-container">
|
||||
<div class="np-training-session-sessions-title">
|
||||
{% t shared.more_sessions %}
|
||||
</div>
|
||||
{% include "training_session_more_sessions" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
{% for session in training_event.sessions %}
|
||||
{% include "training_session_tile", current_session: training_session %}
|
||||
{% endfor %}
|
||||
@ -0,0 +1,6 @@
|
||||
<div class="np-training-session-cta-note np-training-session-tile-badge np-training-session-tile-badge-{{ training_session.status.type }}">
|
||||
{% if training_session.approved? %}
|
||||
<i class="far fa-check np-training-session-icon"></i>
|
||||
{% endif %}
|
||||
{{ training_session.status.label }}
|
||||
</div>
|
||||
@ -0,0 +1,24 @@
|
||||
{% if current_session.id != session.id %}
|
||||
<a
|
||||
class="np-training-session-tile"
|
||||
href="{% route training_session, id: session.id %}"
|
||||
>
|
||||
<div class="np-training-session-tile-header">
|
||||
<i class="far fa-calendar-star np-training-session-tile-icon"></i>
|
||||
<div class="np-training-session-tile-badge np-training-session-tile-badge-{{ session.status.type }}">
|
||||
{{ session.status.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-training-session-tile-content">
|
||||
<div>
|
||||
<div class="np-training-session-tile-date">
|
||||
{{ session.month }} {{ session.day }}, {{ session.year }}
|
||||
</div>
|
||||
<div class="np-training-session-tile-time">
|
||||
{{ session.time_period }} {{ session.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-arrow-right np-training-session-tile-chevron"></i>
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
@ -0,0 +1,64 @@
|
||||
<div class="recommended-wrapper">
|
||||
<div class="heading">
|
||||
Upcoming webinars
|
||||
</div>
|
||||
|
||||
<div class="upcoming-webinars-cards-wrapper">
|
||||
{% for training_event in training_events.available %}
|
||||
<div class="upcoming-webinar-card" date="{{ training_event.sessions.first.day }},{{ training_event.sessions.first.month }},{{ training_event.sessions.first.year }}">
|
||||
{% include "cards_training_event" with training_event %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.your-course-carousel {
|
||||
position: relative;
|
||||
}
|
||||
.slick-arrow {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
z-index: 111;
|
||||
cursor: pointer;
|
||||
}
|
||||
.right-arrow {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.slick-dots button {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 1px;
|
||||
background: #8878FF;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
.slick-dots {
|
||||
list-style-type: none;
|
||||
}
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding-top: 3rem;
|
||||
list-style-type: none;
|
||||
gap: 10px;
|
||||
}
|
||||
.slick-dots li {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
.slick-dots li.slick-active button {
|
||||
background: #6CF1C9;
|
||||
|
||||
}
|
||||
.upcoming-webinars-cards-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
margin-top: 40px;
|
||||
gap: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,45 @@
|
||||
<div class="webinars-wrapper">
|
||||
<div class="heading">
|
||||
Watch webinars
|
||||
</div>
|
||||
|
||||
<div class="webinars-wrapper">
|
||||
{% if training_events.available.any? %}
|
||||
<div class="webinars-cards-wrapper">
|
||||
{% for training_event in training_events.available %}
|
||||
<div class="webinar-card-container">
|
||||
{% include "cards_training_event" with training_event %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="see-all-btn-container">
|
||||
<a class="light-btn" href="/app/training_events">See all</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.webinars-cards-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.webinars-wrapper {
|
||||
margin-top: 30px;
|
||||
}
|
||||
@media only screen and (max-width: 1170px) {
|
||||
.webinars-cards-wrapper {
|
||||
grid-template-columns: repeat(2,1fr) !important;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.webinars-cards-wrapper {
|
||||
grid-template-columns: repeat(1,1fr) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,112 @@
|
||||
<div class="card-webinar">
|
||||
<div class="card-content-training-event">
|
||||
<div class="card-content-title">
|
||||
{{ training_event.title }}
|
||||
</div>
|
||||
<div class="card-details-webinar">
|
||||
<div class="card-detail-webinar course-lessons">
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 21.8149H20V22.8149H4V21.8149Z" fill="#42A2FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 2.81494C7.22386 2.81494 7 3.0388 7 3.31494V14.8149C7 15.0172 7.12182 15.1995 7.30866 15.2769C7.4955 15.3543 7.71055 15.3115 7.85355 15.1685L10.2071 12.8149H21.5C21.7761 12.8149 22 12.5911 22 12.3149V3.31494C22 3.0388 21.7761 2.81494 21.5 2.81494H7.5ZM8 13.6078V3.81494H21V11.8149H10C9.86739 11.8149 9.74021 11.8676 9.64645 11.9614L8 13.6078ZM2 7.81494C2 7.5388 2.22386 7.31494 2.5 7.31494H6V8.31494H3V16.3149H14C14.1326 16.3149 14.2598 16.3676 14.3536 16.4614L15.5 17.6078V13.8149H16.5V18.8149C16.5 19.0172 16.3782 19.1995 16.1913 19.2769C16.0045 19.3543 15.7894 19.3115 15.6464 19.1685L13.7929 17.3149H2.5C2.22386 17.3149 2 17.0911 2 16.8149V7.81494ZM17 7.31494H16V8.31494H17V7.31494ZM14 7.31494H15V8.31494H14V7.31494ZM13 7.31494H12V8.31494H13V7.31494Z" fill="#42A2FF"/>
|
||||
</svg>
|
||||
|
||||
{% t shared.event_types, key: training_event.event_type %}
|
||||
</div>
|
||||
<div class="card-detail-webinar course-time">
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 21.8149H20V22.8149H4V21.8149Z" fill="#42A2FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 5.31494V6.81494H6.5V5.31494H17.5V6.81494H18.5V5.31494H21V7.81494H3V5.31494H5.5ZM5.5 4.31494H2.5C2.22386 4.31494 2 4.5388 2 4.81494V19.3149C2 19.5911 2.22386 19.8149 2.5 19.8149H21.5C21.7761 19.8149 22 19.5911 22 19.3149V4.81494C22 4.5388 21.7761 4.31494 21.5 4.31494H18.5V2.81494H17.5V4.31494H6.5V2.81494H5.5V4.31494ZM3 8.81494V18.8149H21V8.81494H3ZM5.5 10.3149H8V11.3149H5.5V10.3149ZM9 10.3149H11.5V11.3149H9V10.3149ZM15 10.3149H12.5V11.3149H15V10.3149ZM16 10.3149H18.5V11.3149H16V10.3149ZM5.5 16.3149H8V17.3149H5.5V16.3149ZM11.5 16.3149H9V17.3149H11.5V16.3149ZM12.5 16.3149H18.5V17.3149H12.5V16.3149ZM8 13.3149H5.5V14.3149H8V13.3149ZM9 13.3149H11.5V14.3149H9V13.3149ZM15 13.3149H12.5V14.3149H15V13.3149ZM16 13.3149H18.5V14.3149H16V13.3149Z" fill="#42A2FF"/>
|
||||
</svg>
|
||||
{% assign session_counter = 0 %}
|
||||
{% for session in training_event.sessions %}
|
||||
{% assign session_counter = session_counter | plus: 1 %}
|
||||
{% endfor %}
|
||||
{{session_counter}} sessions
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-training-session">
|
||||
<span class="card-content-label lang-en">
|
||||
Next session
|
||||
</span>
|
||||
<span class="card-content-label lang-de">
|
||||
Nächste Sitzung
|
||||
</span>
|
||||
|
||||
|
||||
<div class="card-training-session-date">
|
||||
<div class="card-training-session-date-day">
|
||||
{{ training_event.sessions.first.day }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="card-training-session-date-month">
|
||||
{{ training_event.sessions.first.month }}
|
||||
</div>
|
||||
<div class="card-training-session-date-year">
|
||||
{{ training_event.sessions.first.year }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="card-training-sessions">
|
||||
<a
|
||||
class="card-btn dark-btn lang-en"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
>
|
||||
Join now
|
||||
</a>
|
||||
<a
|
||||
class="card-btn dark-btn lang-de"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
>
|
||||
Jetzt beitreten
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.card-webinar {
|
||||
background: #f8f8f8;
|
||||
padding: 32px;
|
||||
border-radius: 8px;
|
||||
margin: 0 20px 20px 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
}
|
||||
.card-details-webinar {
|
||||
display: flex;
|
||||
color: #42A2FF;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.card-training-session-date-day {
|
||||
font-size: 64px;
|
||||
font-weight: 300;
|
||||
line-height: 67.2px;
|
||||
letter-spacing: -0.015em;
|
||||
color: #0F2B46;
|
||||
}
|
||||
.card-training-session-date-month, .card-training-session-date-year {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 25.2px;
|
||||
color: #0F2B46;
|
||||
}
|
||||
.card-training-session-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20px 0;
|
||||
gap: 15px;
|
||||
}
|
||||
.card-detail-webinar {
|
||||
padding-left: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,143 @@
|
||||
<div class="recommended-wrapper">
|
||||
<div class="heading lang-en">
|
||||
Your courses
|
||||
</div>
|
||||
<div class="heading lang-de">
|
||||
Ihre Kurse
|
||||
</div>
|
||||
|
||||
<div class="carousel-wrapper your-course-carousel">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress > 0 %}
|
||||
{% unless course.properties.resource == true %}
|
||||
{% if course.properties.language == userLanguage %}
|
||||
<div class="carousel-card">
|
||||
{% include "cards_course" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.your-course-carousel {
|
||||
position: relative;
|
||||
}
|
||||
.slick-arrow {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
z-index: 111;
|
||||
cursor: pointer;
|
||||
}
|
||||
.right-arrow {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.slick-dots button {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 1px;
|
||||
background: #8878FF;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
.slick-dots {
|
||||
list-style-type: none;
|
||||
}
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding-top: 3rem;
|
||||
list-style-type: none;
|
||||
gap: 10px;
|
||||
}
|
||||
.slick-dots li {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
.slick-dots li.slick-active button {
|
||||
background: #6CF1C9;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".your-course-carousel").slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
prevArrow: '<i class="fal fa-chevron-left left-arrow"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right right-arrow"></i>',
|
||||
infinite: false,
|
||||
dots: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
let selectedCategory = null;
|
||||
let selectedProgress = null;
|
||||
|
||||
function filterCards() {
|
||||
$(".popular-carousel").slick('slickUnfilter');
|
||||
|
||||
let filterFunction = function() {
|
||||
const card = $(this).find('.card');
|
||||
const cardCategories = card.attr('categories').split(',').map(c => c.trim());
|
||||
const cardProgress = card.attr('progress');
|
||||
|
||||
let showByCategory = !selectedCategory || cardCategories.includes(selectedCategory);
|
||||
let showByProgress = !selectedProgress || selectedProgress === 'All courses' || cardProgress === selectedProgress;
|
||||
|
||||
return showByCategory && showByProgress;
|
||||
};
|
||||
|
||||
$(".popular-carousel").slick('slickFilter', filterFunction);
|
||||
}
|
||||
|
||||
$('.filter').on('click', function() {
|
||||
let clickedCategory = $(this).attr('value');
|
||||
|
||||
if (selectedCategory === clickedCategory) {
|
||||
selectedCategory = null;
|
||||
$(this).removeClass('filter-active');
|
||||
} else {
|
||||
selectedCategory = clickedCategory;
|
||||
$('.filter').removeClass('filter-active');
|
||||
$(this).addClass('filter-active');
|
||||
}
|
||||
|
||||
filterCards();
|
||||
});
|
||||
|
||||
$('.filter-by-progress-option').on('click', function() {
|
||||
let clickedProgress = $(this).attr('value');
|
||||
|
||||
if (selectedProgress === clickedProgress) {
|
||||
selectedProgress = null;
|
||||
} else {
|
||||
selectedProgress = clickedProgress;
|
||||
}
|
||||
|
||||
filterCards();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
143
Custom_Templates/customer_templates/DeepL/_your_lp.html.liquid
Normal file
143
Custom_Templates/customer_templates/DeepL/_your_lp.html.liquid
Normal file
@ -0,0 +1,143 @@
|
||||
<div class="recommended-wrapper">
|
||||
<div class="heading lang-en">
|
||||
Your learning paths
|
||||
</div>
|
||||
<div class="heading lang-de">
|
||||
Ihre Lernpfade
|
||||
</div>
|
||||
|
||||
<div class="carousel-wrapper your-lp-carousel">
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
{% if learning_path.progress > 0 %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if category.name == userLanguage %}
|
||||
<div class="carousel-card">
|
||||
{% include "cards_learning_path" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.your-lp-carousel {
|
||||
position: relative;
|
||||
}
|
||||
.slick-arrow {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
z-index: 111;
|
||||
cursor: pointer;
|
||||
}
|
||||
.right-arrow {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.slick-dots button {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 1px;
|
||||
background: #8878FF;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
.slick-dots {
|
||||
list-style-type: none;
|
||||
}
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding-top: 3rem;
|
||||
list-style-type: none;
|
||||
gap: 10px;
|
||||
}
|
||||
.slick-dots li {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
.slick-dots li.slick-active button {
|
||||
background: #6CF1C9;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".your-lp-carousel").slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
prevArrow: '<i class="fal fa-chevron-left left-arrow"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right right-arrow"></i>',
|
||||
infinite: false,
|
||||
dots: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
let selectedCategory = null;
|
||||
let selectedProgress = null;
|
||||
|
||||
function filterCards() {
|
||||
$(".popular-carousel").slick('slickUnfilter');
|
||||
|
||||
let filterFunction = function() {
|
||||
const card = $(this).find('.card');
|
||||
const cardCategories = card.attr('categories').split(',').map(c => c.trim());
|
||||
const cardProgress = card.attr('progress');
|
||||
|
||||
let showByCategory = !selectedCategory || cardCategories.includes(selectedCategory);
|
||||
let showByProgress = !selectedProgress || selectedProgress === 'All courses' || cardProgress === selectedProgress;
|
||||
|
||||
return showByCategory && showByProgress;
|
||||
};
|
||||
|
||||
$(".popular-carousel").slick('slickFilter', filterFunction);
|
||||
}
|
||||
|
||||
$('.filter').on('click', function() {
|
||||
let clickedCategory = $(this).attr('value');
|
||||
|
||||
if (selectedCategory === clickedCategory) {
|
||||
selectedCategory = null;
|
||||
$(this).removeClass('filter-active');
|
||||
} else {
|
||||
selectedCategory = clickedCategory;
|
||||
$('.filter').removeClass('filter-active');
|
||||
$(this).addClass('filter-active');
|
||||
}
|
||||
|
||||
filterCards();
|
||||
});
|
||||
|
||||
$('.filter-by-progress-option').on('click', function() {
|
||||
let clickedProgress = $(this).attr('value');
|
||||
|
||||
if (selectedProgress === clickedProgress) {
|
||||
selectedProgress = null;
|
||||
} else {
|
||||
selectedProgress = clickedProgress;
|
||||
}
|
||||
|
||||
filterCards();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,64 @@
|
||||
<div class="recommended-wrapper">
|
||||
<div class="heading">
|
||||
Your Webinars
|
||||
</div>
|
||||
|
||||
<div class="upcoming-webinars-cards-wrapper">
|
||||
{% for training_event in training_events.enrolled %}
|
||||
<div class="carousel-card">
|
||||
{% include "your_cards_training_event" with training_event%}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.your-course-carousel {
|
||||
position: relative;
|
||||
}
|
||||
.slick-arrow {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
z-index: 111;
|
||||
cursor: pointer;
|
||||
}
|
||||
.right-arrow {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.slick-dots button {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 1px;
|
||||
background: #8878FF;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
.upcoming-webinars-cards-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
margin-top: 40px;
|
||||
gap: 20px;
|
||||
}
|
||||
.slick-dots {
|
||||
list-style-type: none;
|
||||
}
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding-top: 3rem;
|
||||
list-style-type: none;
|
||||
gap: 10px;
|
||||
}
|
||||
.slick-dots li {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
.slick-dots li.slick-active button {
|
||||
background: #6CF1C9;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
{% include "header" %}
|
||||
{% include "account_tabs" %}
|
||||
|
||||
<main class="np-main np-subpage-container np-account">
|
||||
<div class="np-hidden-desktop">
|
||||
{% include "account_mobile_view", form: form %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-flex np-flex-center">
|
||||
{% include "account_desktop_view", form: form %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% include "footer" %}
|
||||
|
||||
@ -0,0 +1,59 @@
|
||||
<main class="np-box-container np-open-access">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-headline">
|
||||
{% t shared.welcome_to_school, school_name: current_school.name %}
|
||||
</div>
|
||||
<div class="np-form-subheadline">
|
||||
{% t .headline, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_first_name">
|
||||
{% t shared.first_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="text"
|
||||
name="first_name"
|
||||
id="learner_first_name"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_last_name">
|
||||
{% t shared.last_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="last_name"
|
||||
id="learner_last_name"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_email">
|
||||
{% t shared.email_address %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="email"
|
||||
id="learner_email"
|
||||
value="{{ form.email }}"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="submit"
|
||||
name="commit"
|
||||
value="{% t shared.enter %}"
|
||||
class="np-button np-button-big np-form-action"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -0,0 +1,59 @@
|
||||
<main class="np-box-container np-open-access">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-headline">
|
||||
{% t shared.welcome_to_school, school_name: current_school.name %}
|
||||
</div>
|
||||
<div class="np-form-subheadline">
|
||||
{% t .headline, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_employee_id">
|
||||
{% t shared.employee_id %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="text"
|
||||
name="employee_id"
|
||||
id="learner_employee_id"
|
||||
value="{{ form.employee_id }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_first_name">
|
||||
{% t shared.first_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="first_name"
|
||||
id="learner_first_name"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_last_name">
|
||||
{% t shared.last_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="last_name"
|
||||
id="learner_last_name"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="submit"
|
||||
name="commit"
|
||||
value="{% t shared.enter %}"
|
||||
class="np-button np-button-big np-form-action"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -0,0 +1,40 @@
|
||||
<main class="np-box-container np-open-access">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||
<div class="np-form-headline"> {% t shared.welcome_to_school, school_name: current_school.name %} </div>
|
||||
<div class="np-form-subheadline"> {% t .headline, key: current_school.course_vocabulary %} </div>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_last_name">
|
||||
{% t shared.last_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="text"
|
||||
name="last_name"
|
||||
id="learner_last_name"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_phone_number">
|
||||
{% t shared.phone_number %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="phone_number"
|
||||
id="learner_phone_number"
|
||||
value="{{ form.phone_number }}"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" class="np-button np-button-big np-form-action">
|
||||
{% t shared.enter %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -0,0 +1,74 @@
|
||||
<main class="np-box-container np-open-access">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||
<div class="np-form-headline"> {% t shared.welcome_to_school, school_name: current_school.name %} </div>
|
||||
<div class="np-form-subheadline"> {% t .headline, key: current_school.course_vocabulary %} </div>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_email">
|
||||
{% t shared.email_address %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="email"
|
||||
name="email"
|
||||
id="learner_email"
|
||||
value="{{ form.email }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_first_name">
|
||||
{% t shared.first_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="first_name"
|
||||
id="learner_first_name"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_last_name">
|
||||
{% t shared.last_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="last_name"
|
||||
id="learner_last_name"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_phone_number">
|
||||
{% t shared.phone_number_optional %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="phone_number"
|
||||
id="learner_phone_number"
|
||||
value="{{ form.phone_number }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field np-open-access-terms">
|
||||
<input type="hidden" name="terms" value="0" />
|
||||
<input id="terms" type="checkbox" name="terms" value="1" />
|
||||
<label for="terms" class="np-open-access-terms-checkbox">
|
||||
{{ current_school.custom_terms }}
|
||||
</label>
|
||||
</div>
|
||||
<input
|
||||
type="submit"
|
||||
name="commit"
|
||||
value="{% t shared.enter %}"
|
||||
class="np-button np-button-big np-form-action"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user