Nintex templates download as I was investigating some issue with their search bar. In the header file, if you have multiple '<input' (like we would normally do for language switcher options) it negates the button being clickable at all.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,106 @@
|
||||
<div class="np-hidden-mobile">
|
||||
<p>
|
||||
<span class="lang-en-US">{% t.description %}</span>
|
||||
<span class="lang-es">Añadir una foto añade un toque personal a tu perfil. Tu foto de perfil se utiliza como icono para tu cuenta para representarte. También se muestra en varios otros lugares junto a tu nombre.</span>
|
||||
<span class="lang-fr">Ajouter une photo ajoute un toucher personnel à votre profil. Votre photo de profil est utilisée comme icône pour votre compte pour vous représenter. Elle est également affichée dans divers autres endroits à côté de votre nom.</span>
|
||||
<span class="lang-de">Eine Fotobild fügt Ihrem Profil eine persönliche Note hinzu. Ihr Profilbild wird als Symbol für Ihr Konto verwendet, um Sie zu repräsentieren. Es wird auch in verschiedenen anderen Orten neben Ihrem Namen angezeigt.</span>
|
||||
<span class="lang-en-GB">Adding a photo adds a personal touch to your profile. Your profile picture is used as the icon for your account to represent you. It is also displayed in various other places next to your name.</span>
|
||||
<span class="lang-nl">Een foto toevoegen maakt je profiel persoonlijker. Je profielfoto wordt gebruikt als icoon voor je account om je te representeren. Het wordt ook in verschillende andere plaatsen naast je naam getoond.</span>
|
||||
<span class="lang-pt-BR">Adicionar uma foto adiciona um toque pessoal ao seu perfil. Sua foto de perfil é usada como ícone para sua conta para representá-lo. Também é exibido em vários outros lugares ao lado do seu nome.</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="lang-en-US">{% t.requirements %}</span>
|
||||
<span class="lang-es">
|
||||
Para obtener los mejores resultados, el tamaño de tu foto de perfil debe ser de al menos 400x400 píxeles y un tamaño máximo de 2MB. El formato del archivo debe ser PNG, JPG o GIF.</span>
|
||||
<span class="lang-fr">Pour obtenir les meilleurs résultats, la taille de votre photo de profil doit être d'au moins 400x400 pixels, et une taille maximale de 2MB. Le format du fichier doit être PNG, JPG ou GIF.</span>
|
||||
<span class="lang-de">Für die besten Ergebnisse sollte die Größe Ihrer Profilbild 400x400 Pixel oder größer sein und eine maximale Größe von 2MB haben. Das Dateiformat sollte PNG, JPG oder GIF sein.</span>
|
||||
<span class="lang-en-GB">For the best results, your profile picture size should be at least 400x400 pixels, and a max size of 2MB. The file format should be PNG, JPG or GIF.</span>
|
||||
<span class="lang-nl">Voor de beste resultaten moet de grootte van uw profielfoto minimaal 400x400 pixels zijn, en een maximale grootte van 2MB. Het bestandsformaat moet PNG, JPG of GIF zijn.</span>
|
||||
<span class="lang-pt-BR">Para obter os melhores resultados, o tamanho da sua foto de perfil deve ser de pelo menos 400x400 pixels e um tamanho máximo de 2MB. O formato do arquivo deve ser PNG, JPG ou GIF.</span>
|
||||
|
||||
</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">
|
||||
<span class="lang-en-US">{% t.use_gravatar %}</span>
|
||||
<span class="lang-es">Usar Gravatar™</span>
|
||||
<span class="lang-fr">Utiliser Gravatar™</span>
|
||||
<span class="lang-de">Gravatar verwenden™</span>
|
||||
<span class="lang-en-GB">Use Gravatar™</span>
|
||||
<span class="lang-nl">Gravatar gebruiken™</span>
|
||||
<span class="lang-pt-BR">Usar Gravatar™</span>
|
||||
</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">
|
||||
<span class="lang-en-US">{% t.upload_custom_photo %}</span>
|
||||
<span class="lang-es">Subir foto personalizada</span>
|
||||
<span class="lang-fr">Télécharger une photo personnalisée</span>
|
||||
<span class="lang-de">Benutzerdefinierte Foto hochladen</span>
|
||||
<span class="lang-en-GB">Upload Custom Photo</span>
|
||||
<span class="lang-nl">Uploaden van een aangepaste foto</span>
|
||||
<span class="lang-pt-BR">Carregar foto personalizada</span>
|
||||
</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 %}>
|
||||
<span class="lang-en-US"></span>{% t.upload %}</span>
|
||||
<span class="lang-es">Subir</span>
|
||||
<span class="lang-fr">Télécharger</span>
|
||||
<span class="lang-de">Hochladen</span>
|
||||
<span class="lang-en-GB">Upload Photo</span>
|
||||
<span class="lang-nl">Uploaden</span>
|
||||
<span class="lang-pt-BR">Carregar</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,36 @@
|
||||
<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">
|
||||
<span class="lang-en-US">{% t shared.account.save %}</span>
|
||||
<span class="lang-es">Guardar</span>
|
||||
<span class="lang-fr">Enregistrer</span>
|
||||
<span class="lang-de">Speichern</span>
|
||||
<span class="lang-en-GB">Save Profile</span>
|
||||
<span class="lang-nl">Opslaan</span>
|
||||
<span class="lang-pt-BR">Salvar</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-sm-5 np-account-avatar">
|
||||
{% include "account_avatar"
|
||||
, version: "desktop" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@ -0,0 +1,181 @@
|
||||
<div class="np-resource-title">
|
||||
<span class="lang-en-US">{% t.header %}</span>
|
||||
<span class="lang-es">Mi Perfil</span>
|
||||
<span class="lang-fr">Mon Profil</span>
|
||||
<span class="lang-de">Mein Profil</span>
|
||||
<span class="lang-en-GB">My Profile</span>
|
||||
<span class="lang-nl">Mijn Profiel</span>
|
||||
<span class="lang-pt-BR">Meu Perfil</span>
|
||||
</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">
|
||||
<span class="lang-en-US">{% t shared.first_name %}</span>
|
||||
<span class="lang-es">Nombre</span>
|
||||
<span class="lang-fr">Prénom</span>
|
||||
<span class="lang-de">Vorname</span>
|
||||
<span class="lang-en-GB">First Name</span>
|
||||
<span class="lang-nl">Voornaam</span>
|
||||
<span class="lang-pt-BR">Nome</span>
|
||||
*
|
||||
</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">
|
||||
<span class="lang-en-US">{% t shared.last_name %}</span>
|
||||
<span class="lang-es">Apellido</span>
|
||||
<span class="lang-fr">Nom</span>
|
||||
<span class="lang-de">Nachname</span>
|
||||
<span class="lang-en-GB">Last Name</span>
|
||||
<span class="lang-nl">Achternaam</span>
|
||||
<span class="lang-pt-BR">Sobrenome</span>
|
||||
*
|
||||
</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">
|
||||
<span class="lang-en-US">{% t.display_name %}</span>
|
||||
<span class="lang-es">Nombre de pantalla</span>
|
||||
<span class="lang-fr">Nom d'affichage</span>
|
||||
<span class="lang-de">Anzeigename</span>
|
||||
<span class="lang-en-GB">Display Name</span>
|
||||
<span class="lang-nl">Weergavenaam</span>
|
||||
<span class="lang-pt-BR">Nome de exibição</span>
|
||||
</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">
|
||||
<span class="lang-en-US">{% t.current_password %}</span>
|
||||
<span class="lang-es">Contraseña actual</span>
|
||||
<span class="lang-fr">Mot de passe actuel</span>
|
||||
<span class="lang-de">Aktuelle Passwort</span>
|
||||
<span class="lang-en-GB">Current Password</span>
|
||||
<span class="lang-nl">Huidig wachtwoord</span>
|
||||
<span class="lang-pt-BR">Senha atual</span>
|
||||
*
|
||||
</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">
|
||||
<span class="lang-en-US">{% t.new_password %}</span>
|
||||
<span class="lang-es">Nueva contraseña</span>
|
||||
<span class="lang-fr">Nouveau mot de passe</span>
|
||||
<span class="lang-de">Neues Passwort</span>
|
||||
<span class="lang-en-GB">New Password</span>
|
||||
<span class="lang-nl">Nieuw wachtwoord</span>
|
||||
<span class="lang-pt-BR">Nova senha</span>
|
||||
*
|
||||
</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">
|
||||
<span class="lang-en-US">{% t.confirm_new_password %}</span>
|
||||
<span class="lang-es">Confirmar nueva contraseña</span>
|
||||
<span class="lang-fr">Confirmer le nouveau mot de passe</span>
|
||||
<span class="lang-de">Neues Passwort bestätigen</span>
|
||||
<span class="lang-en-GB">Confirm New Password</span>
|
||||
<span class="lang-nl">Nieuw wachtwoord bevestigen</span>
|
||||
<span class="lang-pt-BR">Confirmar nova senha</span>
|
||||
*
|
||||
</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">
|
||||
<span class="lang-en-US">{% t shared.password %}</span>
|
||||
<span class="lang-es">Contraseña</span>
|
||||
<span class="lang-fr">Mot de passe</span>
|
||||
<span class="lang-de">Passwort</span>
|
||||
<span class="lang-en-GB">Password</span>
|
||||
<span class="lang-nl">Wachtwoord</span>
|
||||
<span class="lang-pt-BR">Senha</span>
|
||||
*
|
||||
</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,34 @@
|
||||
<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">
|
||||
<span class="lang-en-US">{% t shared.account.save %}</span>
|
||||
<span class="lang-es">Guardar</span>
|
||||
<span class="lang-fr">Enregistrer</span>
|
||||
<span class="lang-de">Speichern</span>
|
||||
<span class="lang-en-GB">Save Profile</span>
|
||||
<span class="lang-nl">Opslaan</span>
|
||||
<span class="lang-pt-BR">Salvar</span>
|
||||
</button>
|
||||
</form>
|
||||
@ -0,0 +1,55 @@
|
||||
{% capture settings_path %}{% route account %}{% endcapture %}
|
||||
{% capture transcript_path %}{% route transcript %}{% endcapture %}
|
||||
{% capture order_history_path %}{% route order_history %}{% 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}}">
|
||||
<span class="lang-en-US">{% t.profile_settings %}</span>
|
||||
<span class="lang-es">Configuración de perfil</span>
|
||||
<span class="lang-fr">Paramètres du profil</span>
|
||||
<span class="lang-de">Profil Einstellungen</span>
|
||||
<span class="lang-en-GB">Profile Settings</span>
|
||||
<span class="lang-nl">Profielinstellingen</span>
|
||||
<span class="lang-pt-BR">Configurações de perfil</span>
|
||||
</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 }}">
|
||||
<span class="lang-en-US">{% t.transcript %}</span>
|
||||
<span class="lang-es">Transcripción</span>
|
||||
<span class="lang-fr">Transcription</span>
|
||||
<span class="lang-de">Transkript</span>
|
||||
<span class="lang-en-GB">Transcript</span>
|
||||
<span class="lang-nl">Afschrift</span>
|
||||
<span class="lang-pt-BR">Transcrito</span>
|
||||
</a>
|
||||
<div class="np-tab-indicator np-button-background-color"></div>
|
||||
</div>
|
||||
{% if features.commerce? %}
|
||||
<div class="np-tab{% if page.path == order_history_path %} np-tab-active{% endif %}">
|
||||
<a class="np-tab-link" href="{{ order_history_path }}">
|
||||
{% t.order_history %}
|
||||
</a>
|
||||
<div class="np-tab-indicator np-button-background-color"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-tab{% if page.path == "/app/badges" %} np-tab-active{% endif %}">
|
||||
<a class="np-tab-link" href="/app/badges">
|
||||
<span class="lang-en-US">Badges</span>
|
||||
<span class="lang-es">Insignias</span>
|
||||
<span class="lang-fr">Insignes</span>
|
||||
<span class="lang-de">Abzeichen</span>
|
||||
<span class="lang-en-GB">Badges</span>
|
||||
<span class="lang-nl">Insignes</span>
|
||||
<span class="lang-pt-BR">Emblemas</span>
|
||||
</a>
|
||||
<div class="np-tab-indicator np-button-background-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .about %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ product.description }}
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.product_types.bundle %}
|
||||
<i class="far fa-layer-group np-button-color np-learning-path-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route catalog %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-icon-back"></i>
|
||||
</a>
|
||||
{{ product.name }}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,21 @@
|
||||
{% include "bundle_desktop_header" %}
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
src="{{ product.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ product.name }}"
|
||||
/>
|
||||
<div class="np-card-padding-dynamic">
|
||||
{% include "bundle_description" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 np-grid-spacing">
|
||||
<div class="np-top-cta np-card-container np-card-padding np-product-cta">
|
||||
{% include "product_price_and_cta"%}
|
||||
</div>
|
||||
{% include "bundle_product_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,27 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
{% t shared.product_types.bundle %}
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route catalog %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{{ product.name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ product.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ product.name }}"
|
||||
/>
|
||||
<div class="np-top-cta">
|
||||
{% include "product_price_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "bundle_description" %}
|
||||
</div>
|
||||
|
||||
<div class="np-card-spacing">
|
||||
{% include "bundle_product_outline" %}
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="np-learning-path-outline">
|
||||
<h3 class="np-product-outline-title">{% t shared.bundle.title %}</h3>
|
||||
{% for item in product.bundle_items %}
|
||||
{% if item.course? %}
|
||||
{% include "product_outline_course", id: forloop.index %}
|
||||
{% elsif item.training_event? %}
|
||||
{% include "product_outline_event", id: forloop.index %}
|
||||
{% elsif item.learning_path? %}
|
||||
{% include "product_outline_lp", id: forloop.index %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,552 @@
|
||||
{% assign event = '' %}
|
||||
|
||||
{% for training_event in training_events.available %}
|
||||
{% assign event = event | append: training_event.title | append: ',' | append: training_event.sessions.first.day | append: ',' | append: training_event.sessions.first.month | append: ',' | append: training_event.sessions.first.year | append: ',' | append: training_event.sessions.first.id | append: '$$' %}
|
||||
{% endfor %}
|
||||
|
||||
|
||||
<div class="wrapper-cal">
|
||||
<div class="calendar">
|
||||
<div class="calendar-header">
|
||||
<button id="prev">
|
||||
<i class="far fa-chevron-left"></i>
|
||||
</button>
|
||||
<span id="monthYear"></span>
|
||||
<button id="next">
|
||||
<i class="far fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="day-names">
|
||||
<div>
|
||||
<span class="lang-en-US">Sun</span>
|
||||
<span class="lang-es">Dom</span>
|
||||
<span class="lang-fr">Dim</span>
|
||||
<span class="lang-de">So</span>
|
||||
<span class="lang-en-GB">Sun</span>
|
||||
<span class="lang-nl">Zo</span>
|
||||
<span class="lang-pt-BR">Dom</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="lang-en-US">Mon</span>
|
||||
<span class="lang-es">Lun</span>
|
||||
<span class="lang-fr">Lun</span>
|
||||
<span class="lang-de">Mo</span>
|
||||
<span class="lang-en-GB">Mon</span>
|
||||
<span class="lang-nl">Ma</span>
|
||||
<span class="lang-pt-BR">Lun</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="lang-en-US">Tue</span>
|
||||
<span class="lang-es">Mar</span>
|
||||
<span class="lang-fr">Mar</span>
|
||||
<span class="lang-de">Di</span>
|
||||
<span class="lang-en-GB">Tue</span>
|
||||
<span class="lang-nl">Di</span>
|
||||
<span class="lang-pt-BR">Mar</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="lang-en-US">Wed</span>
|
||||
<span class="lang-es">Mié</span>
|
||||
<span class="lang-fr">Mer</span>
|
||||
<span class="lang-de">Mi</span>
|
||||
<span class="lang-en-GB">Wed</span>
|
||||
<span class="lang-nl">Mi</span>
|
||||
<span class="lang-pt-BR">Mié</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="lang-en-US">Thu</span>
|
||||
<span class="lang-es">Jue</span>
|
||||
<span class="lang-fr">Jue</span>
|
||||
<span class="lang-de">Do</span>
|
||||
<span class="lang-en-GB">Thu</span>
|
||||
<span class="lang-nl">Do</span>
|
||||
<span class="lang-pt-BR">Jue</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="lang-en-US">Fri</span>
|
||||
<span class="lang-es">Vie</span>
|
||||
<span class="lang-fr">Ven</span>
|
||||
<span class="lang-de">Fr</span>
|
||||
<span class="lang-en-GB">Fri</span>
|
||||
<span class="lang-nl">Vr</span>
|
||||
<span class="lang-pt-BR">Vie</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="lang-en-US">Sat</span>
|
||||
<span class="lang-es">Sáb</span>
|
||||
<span class="lang-fr">Sam</span>
|
||||
<span class="lang-de">Sa</span>
|
||||
<span class="lang-en-GB">Sat</span>
|
||||
<span class="lang-nl">Za</span>
|
||||
<span class="lang-pt-BR">Sáb</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-grid" id="calendarGrid"></div>
|
||||
<div class="calendar-footer">
|
||||
<div class="agenda">
|
||||
<div class="red-agenda"></div>
|
||||
<div class="agenda-desc">
|
||||
<span class="lang-en-US">Today</span>
|
||||
<span class="lang-es">Hoy</span>
|
||||
<span class="lang-fr">Aujourd'hui</span>
|
||||
<span class="lang-de">Heute</span>
|
||||
<span class="lang-en-GB">Today</span>
|
||||
<span class="lang-nl">Vandaag</span>
|
||||
<span class="lang-pt-BR">Hoje</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="agenda">
|
||||
<div class="blue-agenda"></div>
|
||||
<div class="agenda-desc">
|
||||
<span class="lang-en-US">Upcoming Event</span>
|
||||
<span class="lang-es">Evento próximo</span>
|
||||
<span class="lang-fr">Événement à venir</span>
|
||||
<span class="lang-de">Ereignis in der Zukunft</span>
|
||||
<span class="lang-en-GB">Upcoming Event</span>
|
||||
<span class="lang-nl">Aankomende evenement</span>
|
||||
<span class="lang-pt-BR">Evento futuro</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-info" id="eventInfo">
|
||||
<span class="lang-en-US">Select a date</span>
|
||||
<span class="lang-es">Seleccionar una fecha</span>
|
||||
<span class="lang-fr">Sélectionner une date</span>
|
||||
<span class="lang-de">Datum auswählen</span>
|
||||
<span class="lang-en-GB">Select a date</span>
|
||||
<span class="lang-nl">Selecteer een datum</span>
|
||||
<span class="lang-pt-BR">Selecionar uma data</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.calendar-footer {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.agenda {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.red-agenda {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: #bd0074;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.blue-agenda {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: #BF9ACA;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.wrapper-cal {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #f4f4f4;
|
||||
flex-direction: column;
|
||||
}
|
||||
.calendar {
|
||||
background: #fff;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.calendar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.calendar-header button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
color: #0000007a;
|
||||
}
|
||||
|
||||
.calendar-header span {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #5f676e;
|
||||
}
|
||||
|
||||
.day-names,
|
||||
.calendar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.day-names div {
|
||||
font-weight: 400;
|
||||
color: #5f676e;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.calendar-grid div {
|
||||
padding: 0.7rem 0;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
font-size: 0.9rem;
|
||||
color: #222;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 36px;
|
||||
margin: 2px auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: #5f676e;
|
||||
}
|
||||
.agenda-desc {
|
||||
font-weight: 400;
|
||||
color: #5f676e;
|
||||
}
|
||||
.calendar-grid div:hover {
|
||||
background: #8080802e;
|
||||
color: #5f676e !important;
|
||||
}
|
||||
|
||||
.other-month {
|
||||
color: #ccc !important;
|
||||
}
|
||||
|
||||
.fade-message {
|
||||
animation: fadeSlideIn 0.4s ease both;
|
||||
}
|
||||
|
||||
.today {
|
||||
background-color: #bd0074;
|
||||
color: #fff !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.has-event {
|
||||
background-color: #BF9ACA;
|
||||
color: #fff !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.today.has-event {
|
||||
background-color: purple;
|
||||
color: #fff !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.event-info {
|
||||
margin-top: 1rem;
|
||||
background: #eee;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.event-card {
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 0.5rem;
|
||||
text-align: left;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
animation: fadeSlideIn 0.4s ease both;
|
||||
}
|
||||
|
||||
.event-card h4 {
|
||||
margin: 0 0 0.25rem 0.8rem;
|
||||
}
|
||||
|
||||
.event-card .date {
|
||||
color: #555;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-left: 0.8rem;
|
||||
}
|
||||
|
||||
.event-card a {
|
||||
display: inline-block;
|
||||
margin-top: 0.5rem;
|
||||
text-decoration: none;
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.selected-day {
|
||||
outline: 2px solid #9C9C9C;
|
||||
background: #8080802e;
|
||||
color: #5f676e !important;
|
||||
}
|
||||
@keyframes fadeSlideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const rawEventData = "{{ event | strip_newlines }}";
|
||||
// Month name to number mapping for consistent comparison
|
||||
// Supports multiple languages as used in the application
|
||||
const monthNames = {
|
||||
// English
|
||||
'January': 0, 'january': 0, 'Jan': 0, 'jan': 0,
|
||||
'February': 1, 'february': 1, 'Feb': 1, 'feb': 1,
|
||||
'March': 2, 'march': 2, 'Mar': 2, 'mar': 2,
|
||||
'April': 3, 'april': 3, 'Apr': 3, 'apr': 3,
|
||||
'May': 4, 'may': 4,
|
||||
'June': 5, 'june': 5, 'Jun': 5, 'jun': 5,
|
||||
'July': 6, 'july': 6, 'Jul': 6, 'jul': 6,
|
||||
'August': 7, 'august': 7, 'Aug': 7, 'aug': 7,
|
||||
'September': 8, 'september': 8, 'Sep': 8, 'sep': 8,
|
||||
'October': 9, 'october': 9, 'Oct': 9, 'oct': 9,
|
||||
'November': 10, 'november': 10, 'Nov': 10, 'nov': 10,
|
||||
'December': 11, 'december': 11, 'Dec': 11, 'dec': 11,
|
||||
|
||||
// Spanish
|
||||
'enero': 0, 'Enero': 0,
|
||||
'febrero': 1, 'Febrero': 1,
|
||||
'marzo': 2, 'Marzo': 2,
|
||||
'abril': 3, 'Abril': 3,
|
||||
'mayo': 4, 'Mayo': 4,
|
||||
'junio': 5, 'Junio': 5,
|
||||
'julio': 6, 'Julio': 6,
|
||||
'agosto': 7, 'Agosto': 7,
|
||||
'septiembre': 8, 'Septiembre': 8,
|
||||
'octubre': 9, 'Octubre': 9,
|
||||
'noviembre': 10, 'Noviembre': 10,
|
||||
'diciembre': 11, 'Diciembre': 11,
|
||||
|
||||
// French
|
||||
'janvier': 0, 'Janvier': 0,
|
||||
'février': 1, 'Février': 1,
|
||||
'mars': 2, 'Mars': 2,
|
||||
'avril': 3, 'Avril': 3,
|
||||
'mai': 4, 'Mai': 4,
|
||||
'juin': 5, 'Juin': 5,
|
||||
'juillet': 6, 'Juillet': 6,
|
||||
'août': 7, 'Août': 7,
|
||||
'septembre': 8, 'Septembre': 8,
|
||||
'octobre': 9, 'Octobre': 9,
|
||||
'novembre': 10, 'Novembre': 10,
|
||||
'décembre': 11, 'Décembre': 11,
|
||||
|
||||
// German
|
||||
'Januar': 0, 'januar': 0,
|
||||
'Februar': 1, 'februar': 1,
|
||||
'März': 2, 'märz': 2,
|
||||
'April': 3, 'april': 3,
|
||||
'Mai': 4, 'mai': 4,
|
||||
'Juni': 5, 'juni': 5,
|
||||
'Juli': 6, 'juli': 6,
|
||||
'August': 7, 'august': 7,
|
||||
'September': 8, 'september': 8,
|
||||
'Oktober': 9, 'oktober': 9,
|
||||
'November': 10, 'november': 10,
|
||||
'Dezember': 11, 'dezember': 11,
|
||||
|
||||
// Dutch
|
||||
'januari': 0, 'Januari': 0,
|
||||
'februari': 1, 'Februari': 1,
|
||||
'maart': 2, 'Maart': 2,
|
||||
'april': 3, 'April': 3,
|
||||
'mei': 4, 'Mei': 4,
|
||||
'juni': 5, 'Juni': 5,
|
||||
'juli': 6, 'Juli': 6,
|
||||
'augustus': 7, 'Augustus': 7,
|
||||
'september': 8, 'September': 8,
|
||||
'oktober': 9, 'Oktober': 9,
|
||||
'november': 10, 'November': 10,
|
||||
'december': 11, 'December': 11,
|
||||
|
||||
// Portuguese (Brazil)
|
||||
'janeiro': 0, 'Janeiro': 0,
|
||||
'fevereiro': 1, 'Fevereiro': 1,
|
||||
'março': 2, 'Março': 2,
|
||||
'abril': 3, 'Abril': 3,
|
||||
'maio': 4, 'Maio': 4,
|
||||
'junho': 5, 'Junho': 5,
|
||||
'julho': 6, 'Julho': 6,
|
||||
'agosto': 7, 'Agosto': 7,
|
||||
'setembro': 8, 'Setembro': 8,
|
||||
'outubro': 9, 'Outubro': 9,
|
||||
'novembro': 10, 'Novembro': 10,
|
||||
'dezembro': 11, 'Dezembro': 11
|
||||
};
|
||||
|
||||
const events = rawEventData
|
||||
.split('$$')
|
||||
.filter(e => e)
|
||||
.map(item => {
|
||||
const [title, day, month, year, id] = item.split(',');
|
||||
return {
|
||||
title: title.trim(),
|
||||
day: parseInt(day),
|
||||
month: month.trim(),
|
||||
monthNumber: monthNames[month.trim()] || 0,
|
||||
year: parseInt(year),
|
||||
id: id.trim()
|
||||
};
|
||||
});
|
||||
|
||||
const monthYear = document.getElementById('monthYear');
|
||||
const calendarGrid = document.getElementById('calendarGrid');
|
||||
const prevBtn = document.getElementById('prev');
|
||||
const nextBtn = document.getElementById('next');
|
||||
const eventInfo = document.getElementById('eventInfo');
|
||||
|
||||
let currentDate = new Date();
|
||||
let selectedDayElement = null;
|
||||
|
||||
function renderCalendar(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = date.getMonth();
|
||||
|
||||
const firstDayOfMonth = new Date(year, month, 1);
|
||||
const startDay = firstDayOfMonth.getDay();
|
||||
|
||||
const lastDateOfMonth = new Date(year, month + 1, 0).getDate();
|
||||
const lastDatePrevMonth = new Date(year, month, 0).getDate();
|
||||
|
||||
let locale = 'en-US';
|
||||
if (lang === 'es') {
|
||||
locale = 'es';
|
||||
} else if (lang === 'fr') {
|
||||
locale = 'fr';
|
||||
} else if (lang === 'de') {
|
||||
locale = 'de';
|
||||
} else if (lang === 'en-GB') {
|
||||
locale = 'en-GB';
|
||||
} else if (lang === 'nl') {
|
||||
locale = 'nl';
|
||||
} else if (lang === 'pt-BR') {
|
||||
locale = 'pt-BR';
|
||||
}
|
||||
|
||||
const monthName = date.toLocaleString(locale, { month: 'long' });
|
||||
monthYear.textContent = `${monthName} ${year}`;
|
||||
calendarGrid.innerHTML = '';
|
||||
|
||||
const today = new Date();
|
||||
const isToday = (d) =>
|
||||
d.getDate() === today.getDate() &&
|
||||
d.getMonth() === today.getMonth() &&
|
||||
d.getFullYear() === today.getFullYear();
|
||||
|
||||
for (let i = 0; i < 42; i++) {
|
||||
const dayCell = document.createElement('div');
|
||||
let dayNum, actualMonth = month, actualYear = year;
|
||||
|
||||
if (i < startDay) {
|
||||
dayNum = lastDatePrevMonth - startDay + i + 1;
|
||||
actualMonth = month - 1;
|
||||
if (actualMonth < 0) {
|
||||
actualMonth = 11;
|
||||
actualYear -= 1;
|
||||
}
|
||||
dayCell.classList.add('other-month');
|
||||
} else if (i >= startDay + lastDateOfMonth) {
|
||||
dayNum = i - (startDay + lastDateOfMonth) + 1;
|
||||
actualMonth = month + 1;
|
||||
if (actualMonth > 11) {
|
||||
actualMonth = 0;
|
||||
actualYear += 1;
|
||||
}
|
||||
dayCell.classList.add('other-month');
|
||||
} else {
|
||||
dayNum = i - startDay + 1;
|
||||
}
|
||||
|
||||
dayCell.textContent = dayNum;
|
||||
const displayDate = new Date(actualYear, actualMonth, dayNum);
|
||||
|
||||
const isTodayDate = isToday(displayDate);
|
||||
const matchingEvents = events.filter(ev =>
|
||||
ev.day === dayNum &&
|
||||
ev.monthNumber === actualMonth &&
|
||||
ev.year === actualYear
|
||||
);
|
||||
|
||||
if (isTodayDate) dayCell.classList.add('today');
|
||||
if (matchingEvents.length > 0) dayCell.classList.add('has-event');
|
||||
|
||||
dayCell.addEventListener('click', () => {
|
||||
if (selectedDayElement) {
|
||||
selectedDayElement.classList.remove('selected-day');
|
||||
}
|
||||
dayCell.classList.add('selected-day');
|
||||
selectedDayElement = dayCell;
|
||||
renderEventInfo(displayDate, matchingEvents);
|
||||
});
|
||||
|
||||
calendarGrid.appendChild(dayCell);
|
||||
}
|
||||
}
|
||||
|
||||
function renderEventInfo(dateObj, matchedEvents) {
|
||||
if (matchedEvents.length === 0) {
|
||||
eventInfo.innerHTML = `<p class="fade-message">${lang === 'es' ? 'No hay eventos para la fecha seleccionada' : lang === 'fr' ? 'Aucun événement pour la date sélectionnée' : lang === 'de' ? 'Keine Ereignisse für die ausgewählte Datum' : lang === 'en-GB' ? 'No events for selected date' : lang === 'nl' ? 'Geen evenementen voor de geselecteerde datum' : lang === 'pt-BR' ? 'Nenhum evento para a data selecionada' : 'No events for selected date'}</p>`;
|
||||
return;
|
||||
}
|
||||
|
||||
eventInfo.innerHTML = matchedEvents.map(ev => {
|
||||
const eventDate = new Date(ev.year, ev.monthNumber, ev.day);
|
||||
const formattedDate = eventDate.toLocaleDateString(locale, {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
|
||||
return `
|
||||
<div class="event-card">
|
||||
<h4>${ev.title}</h4>
|
||||
<div class="date">${formattedDate}</div>
|
||||
<a href="/app/training_sessions/${ev.id}" class="nintex-card-link">
|
||||
<span class="lang-en-US">View</span>
|
||||
<span class="lang-es">Ver</span>
|
||||
<span class="lang-fr">Voir</span>
|
||||
<span class="lang-de">Ansehen</span>
|
||||
<span class="lang-en-GB">View</span>
|
||||
<span class="lang-nl">Bekijken</span>
|
||||
<span class="lang-pt-BR">Ver</span>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
`}).join('');
|
||||
}
|
||||
|
||||
prevBtn.addEventListener('click', () => {
|
||||
currentDate.setMonth(currentDate.getMonth() - 1);
|
||||
renderCalendar(currentDate);
|
||||
eventInfo.innerHTML = `${lang === 'es' ? 'Seleccionar una fecha' : lang === 'fr' ? 'Sélectionner une date' : lang === 'de' ? 'Datum auswählen' : lang === 'en-GB' ? 'Select a date' : lang === 'nl' ? 'Selecteer een datum' : lang === 'pt-BR' ? 'Selecionar uma data' : 'Select a date'}`;
|
||||
});
|
||||
|
||||
nextBtn.addEventListener('click', () => {
|
||||
currentDate.setMonth(currentDate.getMonth() + 1);
|
||||
renderCalendar(currentDate);
|
||||
eventInfo.innerHTML = `${lang === 'es' ? 'Seleccionar una fecha' : lang === 'fr' ? 'Sélectionner une date' : lang === 'de' ? 'Datum auswählen' : lang === 'en-GB' ? 'Select a date' : lang === 'nl' ? 'Selecteer een datum' : lang === 'pt-BR' ? 'Selecionar uma data' : 'Select a date'}`;
|
||||
});
|
||||
|
||||
renderCalendar(currentDate);
|
||||
</script>
|
||||
@ -0,0 +1,38 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ item.name }}"
|
||||
src="{{ item.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-catalog-card-title">
|
||||
{{ item.name }}
|
||||
</h3>
|
||||
<div class="np-product-badge np-product-badge-catalog">
|
||||
<i class="far {{ item.icon }} np-product-badge-icon np-product-badge-catalog-icon"></i>
|
||||
<h3 class="np-product-badge-name np-product-badge-catalog-name">{{ item.formatted_type }}</h3>
|
||||
</div>
|
||||
<div class="np-card-content-footer np-catalog-card-footer">
|
||||
{% if item.free_course? %}
|
||||
<div class="np-card-content-progress np-learning-progress-text-color">
|
||||
{% t shared.progress, count: item.progress %}
|
||||
</div>
|
||||
{% if item.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: item.path %}
|
||||
{% endif %}
|
||||
<a class="np-button np-button-wide" href="{{ item.path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
{% else %}
|
||||
<span class="np-catalog-card-price">
|
||||
{{ item.formatted_price}}
|
||||
</span>
|
||||
<a class="np-button np-button-wide" href="{{ item.path }}">
|
||||
{% t shared.learn_more %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,34 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h2 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h2>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-learning-progress-text-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
{% 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="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,187 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% assign progress = course.progress %}
|
||||
{% if course.enrolled? %}
|
||||
{% if progress < 100 %}
|
||||
{% assign progress = 1 %}
|
||||
{% elsif progress == 100 %}
|
||||
{% assign progress = 100 %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<div class="nintex-card" categories="{% for category in course.categories %}{{ category.name }}{% unless forloop.last %},{% endunless %}{% endfor %}" progress="{{ progress }}" is-new="{{ course.properties.is_new }}" created-at="{{ course.created_at }}">
|
||||
<div class="nintex-card-ribbons">
|
||||
{% if course.ribbon %}
|
||||
<div class="nintex-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="nintex-card-ribbon">
|
||||
Course
|
||||
</div>
|
||||
{% if course.properties.is_new == true %}
|
||||
<div class="nintex-card-ribbon">
|
||||
New!
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<div class="nintex-card-image" style="background-image: url({{course.image_url}})"></div>
|
||||
<div class="nintex-card-content">
|
||||
<div class="nintex-card-property-ribbons">
|
||||
{% if course.properties.duration and course.properties.duration != "0 minutes" %}
|
||||
<div class="nintex-card-property-ribbon">
|
||||
<i class="far fa-clock"></i>
|
||||
{{ course.properties.duration }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if course.properties.certification == 'Yes' and course.properties.npcu > 0 %}
|
||||
<div class="nintex-card-property-ribbon">
|
||||
<i class="far fa-tag"></i>
|
||||
NPCU:
|
||||
{{ course.properties.npcu }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if course.properties.skill_level and course.properties.skill_level != "None" %}
|
||||
<div class="nintex-card-property-ribbon"
|
||||
style="background-color:
|
||||
{% if course.properties.skill_level == "Beginner" %}
|
||||
#ddf9ea;
|
||||
{% elsif course.properties.skill_level == "Intermediate" %}
|
||||
#f29f83;
|
||||
{% elsif course.properties.skill_level == "Advanced" %}
|
||||
#fad0d0;
|
||||
{% else %}
|
||||
#e6e7eb;
|
||||
{% endif %}">
|
||||
{{ course.properties.skill_level }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="nintex-card-text">
|
||||
{% if progress > 0 and progress < 100 %}
|
||||
<span class="lang-en-US">
|
||||
In progress
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Progreso
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
En cours
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
In Bearbeitung
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
In progress
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
In progress
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Em progresso
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if progress == 0 %}
|
||||
<span class="lang-en-US">
|
||||
Not started
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Progreso
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Non commencé
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Nicht begonnen
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Not started
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Niet begonnen
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Não iniciado
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if progress == 100 %}
|
||||
<span class="lang-en-US">
|
||||
Completed
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Completado
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Terminé
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Abgeschlossen
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Completed
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Voltooid
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Completo
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="nintex-card-header card-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="nintex-card-text">
|
||||
{{ course.short_description }}
|
||||
</div>
|
||||
<div class="nintex-card-footer-placeholder"></div>
|
||||
<div class="nintex-card-footer np-learning-progress-text-color">
|
||||
<a href="{{ course_path }}" class="nintex-card-link">
|
||||
<span class="lang-en-US">
|
||||
Learn more
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Aprender más
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
En savoir plus
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Mehr erfahren
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Learn more
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Meer informatie
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Mais informações
|
||||
</span>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M9.71402 2L8.2998 3.41421L13.0927 8.20711L8.2998 13L9.71402 14.4142L15.9211 8.20711L9.71402 2Z"
|
||||
fill="white"></path>
|
||||
</svg>
|
||||
</a>
|
||||
{% if course.properties.course_rating_count != 0 %}
|
||||
<div class="nintex-course-rating">
|
||||
{{course.properties.course_rating | round: 1}}
|
||||
{% assign rating = course.properties.course_rating | times: 1.0 %}
|
||||
{% for i in (1..5) %}
|
||||
{% assign current = i | minus: 1.0 %}
|
||||
{% assign diff = rating | minus: current %}
|
||||
{% if diff >= 1.0 %}
|
||||
<i class="fas fa-star"></i>
|
||||
{% elsif diff >= 0.5 %}
|
||||
<i class="fas fa-star-half-alt"></i>
|
||||
{% else %}
|
||||
<i class="far fa-star"></i>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
({{course.properties.course_rating_count}})
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,69 @@
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="np-hidden-desktop np-card-header">
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<div class="np-hidden-desktop np-card-header-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-card-header">
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h2 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h2>
|
||||
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-description">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-progress np-learning-progress-text-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%"
|
||||
class="np-card-progress-bar np-learning-progress-bar-color">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-hidden-desktop np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
<a class="np-button" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
<i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i>
|
||||
<span class="np-learning-path-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-stack">
|
||||
<div class="np-card-stack-level-1"></div>
|
||||
<div class="np-card-stack-level-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,220 @@
|
||||
{% assign live_events = false %}
|
||||
{% assign progress = learning_path.progress %}
|
||||
{% if progress == 0 and learning_path.enrolled? %}
|
||||
{% assign progress = 1 %}
|
||||
{% endif %}
|
||||
|
||||
<div class="nintex-card" categories="{% for category in learning_path.categories %}{{ category.name }}{% unless forloop.last %},{% endunless %}{% endfor %}" progress="{{ progress }}" live-events="{{ live_events }}" created-at="{{ learning_path.created_at }}">
|
||||
<div class="nintex-card-ribbons">
|
||||
<div class="nintex-card-ribbon">
|
||||
<span class="lang-en-US">
|
||||
Learning Path
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Ruta de aprendizaje
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Chemin d'apprentissage
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Lernpfad
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Learning Path
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Leerpad
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Caminho de aprendizagem
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nintex-card-image" style="background-image: url({{learning_path.image_url}})"></div>
|
||||
<div class="nintex-card-content">
|
||||
<div class="nintex-card-preheader" style="
|
||||
{% if learning_path.progress > 0 %}
|
||||
border-image: linear-gradient(to right, #8249a6 {{ progress }}%, var(--nintex--color--cyan-bluish-gray) {{ progress | plus: 5}}%) 1;
|
||||
{% else %}
|
||||
border-color: var(--nintex--color--cyan-bluish-gray);
|
||||
{% endif %}
|
||||
">
|
||||
<div >
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
<span class="lang-en-US">
|
||||
Learning Path
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Ruta de aprendizaje
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Chemin d'apprentissage
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Lernpfad
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Learning Path
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Leerpad
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Caminho de aprendizagem
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
{{ learning_path.items.count }}
|
||||
{% if learning_path.items.count > 1 or learning_path.items.count == 0 %}
|
||||
<span class="lang-en-US">
|
||||
Courses
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Cursos
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Cours
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Kurse
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Courses
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Cursussen
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Cursos
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="lang-en-US">
|
||||
Course
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Curso
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Cours
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Kurs
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Course
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Cours
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Curso
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="nintex-card-text">
|
||||
{% if progress > 0 and progress < 100 %}
|
||||
<span class="lang-en-US">
|
||||
In progress
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Progreso
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
En cours
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
In Bearbeitung
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
In progress
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
In progress
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Em progresso
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if progress == 0 %}
|
||||
<span class="lang-en-US">
|
||||
Not started
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Progreso
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Non commencé
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Nicht begonnen
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Not started
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Niet begonnen
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Não iniciado
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if progress == 100 %}
|
||||
<span class="lang-en-US">
|
||||
Completed
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Completado
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Terminé
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Abgeschlossen
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Completed
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Voltooid
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Completo
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="nintex-card-header card-title">
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
|
||||
<div class="nintex-card-footer-placeholder"></div>
|
||||
<div class="nintex-card-footer np-learning-progress-text-color">
|
||||
<a href="{% route learning_path, id: learning_path.id %}" class="nintex-card-link">
|
||||
<span class="lang-en-US">
|
||||
Learn more
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Aprender más
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
En savoir plus
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Mehr erfahren
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Learn more
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Meer informatie
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Mais informações
|
||||
</span>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.71402 2L8.2998 3.41421L13.0927 8.20711L8.2998 13L9.71402 14.4142L15.9211 8.20711L9.71402 2Z" fill="white"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,53 @@
|
||||
<div class="np-card np-card-training-event">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content-training-event">
|
||||
<h2 class="np-card-content-title">
|
||||
{{ training_event.title }}
|
||||
</h2>
|
||||
<div class="np-card-content-subtitle">
|
||||
<i class="far {{ training_event.event_type_icon }} np-training-session-icon"></i>
|
||||
{% t shared.event_types, key: training_event.event_type %}
|
||||
<span class="np-card-training-sessions-separator">•</span>
|
||||
<i class="np-card-training-sessions-icon far fa-calendar-star"></i>
|
||||
<span class="np-card-training-sessions-label">
|
||||
{% t .sessions, count: training_event.sessions.size %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="np-card-training-session">
|
||||
<span class="np-card-content-label">
|
||||
{% t .next_session %} -
|
||||
<span class="{{ training_event.sessions.first.status.type}}">
|
||||
{{ training_event.sessions.first.status.label}}
|
||||
</span>
|
||||
</span>
|
||||
<div class="np-card-training-session-date">
|
||||
<div class="np-button-background-color np-card-training-session-date-bar"></div>
|
||||
<div class="np-card-training-session-date-label">
|
||||
<div class="np-card-training-session-date-day">
|
||||
{{ training_event.sessions.first.day }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_event.sessions.first.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year">
|
||||
{{ training_event.sessions.first.year }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-content-training-event">
|
||||
<div class="np-card-training-sessions">
|
||||
|
||||
<a
|
||||
class="np-button np-button-wide"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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,16 @@
|
||||
<h2 class="np-card-heading">
|
||||
<span class="lang-en-US">{% t.header %}</span>
|
||||
<span class="lang-es">Categorías</span>
|
||||
<span class="lang-fr">Catégories</span>
|
||||
<span class="lang-de">Kategorien</span>
|
||||
<span class="lang-en-GB">Categories</span>
|
||||
<span class="lang-nl">Categorieën</span>
|
||||
<span class="lang-pt-BR">Categorias</span>
|
||||
</h2>
|
||||
<div class="np-flex">
|
||||
{% for category in course.categories %}
|
||||
<div class="np-content-categories-content-item">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,18 @@
|
||||
<h2 class="np-card-heading">
|
||||
<span class="lang-en-US">{% t.header
|
||||
, key: current_school.course_vocabulary %}</span>
|
||||
<span class="lang-es">
|
||||
Descripción</span>
|
||||
<span class="lang-fr">
|
||||
Description</span>
|
||||
<span class="lang-de">
|
||||
Beschreibung</span>
|
||||
<span class="lang-en-GB">Description</span>
|
||||
<span class="lang-nl">
|
||||
Beschrijving</span>
|
||||
<span class="lang-pt-BR">
|
||||
Descrição</span>
|
||||
</h2>
|
||||
<div class="np-card-text">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container">
|
||||
<div class="np-resource-header np-course-header np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
{% include "course_description" %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% 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="np-grid-spacing col-xs-12 col-sm-6">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<h2 class="np-card-heading">
|
||||
<span class="lang-en-US">{% t.header %}</span>
|
||||
<span class="lang-es">
|
||||
Eventos</span>
|
||||
<span class="lang-fr">
|
||||
Événements</span>
|
||||
<span class="lang-de">
|
||||
Ereignisse</span>
|
||||
<span class="lang-en-GB">Events</span>
|
||||
<span class="lang-nl">
|
||||
Eventen</span>
|
||||
<span class="lang-pt-BR">
|
||||
Eventos</span>
|
||||
</h2>
|
||||
<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,23 @@
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
<span class="lang-en-US">{{ current_school.course_vocabulary }}</span>
|
||||
<span class="lang-es">Curso</span>
|
||||
<span class="lang-fr">Cours</span>
|
||||
<span class="lang-de">Kurs</span>
|
||||
<span class="lang-en-GB">Course</span>
|
||||
<span class="lang-nl">Cours</span>
|
||||
<span class="lang-pt-BR">Curso</span>
|
||||
<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,27 @@
|
||||
<h2 class="np-card-heading">
|
||||
<span class="lang-en-US">{% t.header %}</span>
|
||||
<span class="lang-es">Instructores</span>
|
||||
<span class="lang-fr">Instructeurs</span>
|
||||
<span class="lang-de">Instructoren</span>
|
||||
<span class="lang-en-GB">Instructors</span>
|
||||
<span class="lang-nl">Instructeurs</span>
|
||||
<span class="lang-pt-BR">Instructores</span>
|
||||
</h2>
|
||||
<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,53 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="np-text-title np-course-outline-title">
|
||||
<span class="lang-en-US">{% t.header
|
||||
, key: current_school.course_vocabulary %}</span>
|
||||
<span class="lang-es">
|
||||
Outline</span>
|
||||
<span class="lang-fr">
|
||||
Plan</span>
|
||||
<span class="lang-de">
|
||||
Outline</span>
|
||||
<span class="lang-en-GB">Outline</span>
|
||||
<span class="lang-nl">
|
||||
Outline</span>
|
||||
<span class="lang-pt-BR">Outline</span>
|
||||
</div>
|
||||
<div class="np-course-outline-content">
|
||||
<ol class="np-course-outline-content-section">
|
||||
{% for section in course.sections %}
|
||||
<li class="np-course-outline-content-section-list">
|
||||
<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<ol class="np-course-outline-content-activity">
|
||||
{% for activity in section.activities %}
|
||||
|
||||
<li class="np-course-outline-content-activity-list">
|
||||
{% if activity.completed? %}
|
||||
<i class="fas fa-circle np-course-outline-content-activity-icon np-button-color"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked"
|
||||
, class: "np-course-outline-content-activity-link-completed" %}
|
||||
{% endif %}
|
||||
<div class="np-button-background-color np-course-outline-content-activity-list-bar"></div>
|
||||
{% else %}
|
||||
<i class="far fa-circle np-course-outline-content-activity-icon"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked"
|
||||
, class: "np-course-outline-content-activity-link" %}
|
||||
{% endif %}
|
||||
<div class="np-course-outline-content-activity-list-bar"></div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,41 @@
|
||||
<div class="np-card-container">
|
||||
<div class="np-resource-header np-course-header np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
{% include "course_description" %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% 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="np-grid-spacing col-xs-12 col-sm-6">
|
||||
<div class="np-top-cta np-card-container np-card-padding np-product-cta">
|
||||
{% include "product_price_and_cta" %}
|
||||
</div>
|
||||
{% include "product_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,31 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
<div class="np-top-cta">
|
||||
{% include "product_price_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 "product_outline" %}
|
||||
</div>
|
||||
|
||||
{% 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,112 @@
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
<span class="lang-en-US">{% t.header %}</span>
|
||||
<span class="lang-es">
|
||||
Progreso del Curso</span>
|
||||
<span class="lang-fr">
|
||||
Progression du Cours</span>
|
||||
<span class="lang-de">
|
||||
Kurs-Fortschritt</span>
|
||||
<span class="lang-en-GB">Course Progress</span>
|
||||
<span class="lang-nl">
|
||||
Cursus-voortgang</span>
|
||||
<span class="lang-pt-BR">Progresso do Curso</span>
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div style="width: {{ course.progress }}%" class="np-card-progress-bar np-learning-progress-bar-color"></div>
|
||||
</div>
|
||||
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if course.completed? %} np-color-success {% else %} np-learning-progress-text-color {% endif %}
|
||||
">
|
||||
{% if course.completed? %}
|
||||
<span class="lang-en-US">Completed</span>
|
||||
<span class="lang-es">Completado</span>
|
||||
<span class="lang-fr">Terminé</span>
|
||||
<span class="lang-de">Abgeschlossen</span>
|
||||
<span class="lang-en-GB">Completed</span>
|
||||
<span class="lang-nl">Voltooid</span>
|
||||
<span class="lang-pt-BR">Completo</span>
|
||||
{% elsif course.enrolled? %}
|
||||
<span class="lang-en-US">In Progress</span>
|
||||
<span class="lang-es">En Progreso</span>
|
||||
<span class="lang-fr">En Cours</span>
|
||||
<span class="lang-de">In Bearbeitung</span>
|
||||
<span class="lang-en-GB">In Progress</span>
|
||||
<span class="lang-nl">In Progress</span>
|
||||
<span class="lang-pt-BR">Em Progresso</span>
|
||||
{% else %}
|
||||
<span class="lang-en-US">{% t shared.progress
|
||||
, count: course.progress %}</span>
|
||||
<span class="lang-es">No iniciado</span>
|
||||
<span class="lang-fr">Non commencé</span>
|
||||
<span class="lang-de">Fortschritt</span>
|
||||
<span class="lang-en-GB">Not started</span>
|
||||
<span class="lang-nl">Niet begonnen</span>
|
||||
<span class="lang-pt-BR">Não iniciado</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% include "product_expiration_date"
|
||||
, date: course.expiration_date %}
|
||||
</div>
|
||||
|
||||
<div class="np-top-cta-container">
|
||||
{% 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">
|
||||
<span class="lang-en-US">{% t.retake
|
||||
, key: current_school.course_vocabulary %}</span>
|
||||
<span class="lang-es">Repetir Curso</span>
|
||||
<span class="lang-fr">Reprendre le Cours</span>
|
||||
<span class="lang-de">Kurs wiederholen</span>
|
||||
<span class="lang-en-GB">Retake Course</span>
|
||||
<span class="lang-nl">Cursus herhalen</span>
|
||||
<span class="lang-pt-BR">Repetir Curso</span>
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
{% 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 %}
|
||||
<span class="lang-en-US">{% t shared.enroll %}</span>
|
||||
<span class="lang-es">Inscribirse</span>
|
||||
<span class="lang-fr">S'inscrire</span>
|
||||
<span class="lang-de">Anmelden</span>
|
||||
<span class="lang-en-GB">Enroll</span>
|
||||
<span class="lang-nl">Inschrijven</span>
|
||||
<span class="lang-pt-BR">Inscrição</span>
|
||||
{% elsif course.started? == false %}
|
||||
<span class="lang-en-US">View Course</span>
|
||||
<span class="lang-es">Ver Curso</span>
|
||||
<span class="lang-fr">Voir le Cours</span>
|
||||
<span class="lang-de">Kurs ansehen</span>
|
||||
<span class="lang-en-GB">View Course</span>
|
||||
<span class="lang-nl">Cursus bekijken</span>
|
||||
<span class="lang-pt-BR">Ver Curso</span>
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view
|
||||
, key: current_school.course_vocabulary %}</span>
|
||||
<span class="lang-es">Ver Curso</span>
|
||||
<span class="lang-fr">Voir le Cours</span>
|
||||
<span class="lang-de">Kurs ansehen</span>
|
||||
<span class="lang-en-GB">View Course</span>
|
||||
<span class="lang-nl">Cursus bekijken</span>
|
||||
<span class="lang-pt-BR">Ver Curso</span>
|
||||
{% else %}
|
||||
<span class="lang-en-US">{% t shared.continue %}</span>
|
||||
<span class="lang-es">Continuar</span>
|
||||
<span class="lang-fr">Continuer</span>
|
||||
<span class="lang-de">Fortsetzen</span>
|
||||
<span class="lang-en-GB">Continue</span>
|
||||
<span class="lang-nl">Verder</span>
|
||||
<span class="lang-pt-BR">Continuar</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -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>
|
||||
<h2 class="np-popup-header-title">
|
||||
{% t .title %}
|
||||
</h2>
|
||||
</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,56 @@
|
||||
{% assign is_partner = false %}
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.name == "All Partners" %}
|
||||
{% assign is_partner = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-catalog-courses row nintex-cards-container">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name contains "Nintex Partner Sales" and is_partner == false %}
|
||||
{% continue %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 display-flex">
|
||||
{% include "cards_course_nintex" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="np-courses-resources-container" style="display: none;">
|
||||
<div class="np-zero-state-text">
|
||||
<span class="lang-en-US">
|
||||
No courses found
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
No se encontraron cursos
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Aucun cours trouvé
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Keine Kurse gefunden
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
No courses found
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Geen cursussen gevonden
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Nenhum curso encontrado
|
||||
</span>
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="{% t .empty %}" />
|
||||
</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,70 @@
|
||||
{% assign is_partner = false %}
|
||||
{% assign filter_partners = false %}
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.name == "All Partners" %}
|
||||
{% assign is_partner = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if filter_partners == false %}
|
||||
{% assign is_partner = true %}
|
||||
{% endif %}
|
||||
|
||||
{% if courses.enrolled.any? %}
|
||||
|
||||
<div class="row np-catalog-courses nintex-cards-container">
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name contains "Nintex Partner Sales" and is_partner == false %}
|
||||
{% continue %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="{{ class }} display-flex">
|
||||
{% include "cards_course_nintex" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="np-courses-resources-container" style="display: none;">
|
||||
<div class="np-zero-state-text">
|
||||
<span class="lang-en-US">
|
||||
No courses found
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
No se encontraron cursos
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Aucun cours trouvé
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Keine Kurse gefunden
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
No courses found
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Geen cursussen gevonden
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Nenhum curso encontrado
|
||||
</span>
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="{% t .empty %}" />
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div class="np-courses-resources-container" style="margin-top: 60px;">
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
<div class="np-zero-state-text">
|
||||
{{ message }}
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="{{ message }}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,6 @@
|
||||
<div class="np-dashboard-resources-container" style="margin-top: 60px;">
|
||||
<div class="np-zero-state-text">
|
||||
{{ message }}
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="{{ message }}" />
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
<div class="col-xs-12 col-sm-4 nintex-card-stretch">
|
||||
<div class="nintex-card">
|
||||
<div class="nintex-card-image" style="background-image: url({{imageUrl}})"></div>
|
||||
<div class="nintex-card-content">
|
||||
<div class="nintex-card-header">
|
||||
{{ name }}
|
||||
</div>
|
||||
<div class="nintex-card-text">
|
||||
{{ contents }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,36 @@
|
||||
<div class="nintex-fw-container">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="nintex-headline">
|
||||
<span class="lang-en-US">Customer Testimonials</span>
|
||||
<span class="lang-es">Testimonios de clientes</span>
|
||||
<span class="lang-fr">Témoignages de clients</span>
|
||||
<span class="lang-de">Kundenbewertungen</span>
|
||||
<span class="lang-en-GB">Customer Testimonials</span>
|
||||
<span class="lang-nl">Klantenbeoordelingen</span>
|
||||
<span class="lang-pt-BR">Testemunhos de clientes</span>
|
||||
</div>
|
||||
<div class="nintex-subheadline">
|
||||
<span class="lang-en-US">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-es">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-fr">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-de">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-en-GB">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-nl">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-pt-BR">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{% include "customer_testimonia"
|
||||
, name: "John Doe"
|
||||
, imageUrl: "https://placehold.co/1000x400"
|
||||
, contents: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." %}
|
||||
{% include "customer_testimonia"
|
||||
, name: "John Doe"
|
||||
, imageUrl: "https://placehold.co/600x400"
|
||||
, contents: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." %}
|
||||
{% include "customer_testimonia"
|
||||
, name: "John Doe"
|
||||
, imageUrl: "https://placehold.co/600x400"
|
||||
, contents: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,64 @@
|
||||
{% assign question_en = question_en %}
|
||||
{% assign question_es = question_es %}
|
||||
{% assign question_fr = question_fr %}
|
||||
{% assign question_de = question_de %}
|
||||
{% assign question_en_GB = question_en_GB %}
|
||||
{% assign question_nl = question_nl %}
|
||||
{% assign question_pt_BR = question_pt_BR %}
|
||||
|
||||
{% assign answer_en = answer_en %}
|
||||
{% assign answer_es = answer_es %}
|
||||
{% assign answer_fr = answer_fr %}
|
||||
{% assign answer_de = answer_de %}
|
||||
{% assign answer_en_GB = answer_en_GB %}
|
||||
{% assign answer_nl = answer_nl %}
|
||||
{% assign answer_pt_BR = answer_pt_BR %}
|
||||
|
||||
|
||||
<div class="faq-card" onclick="this.classList.toggle('active')">
|
||||
<div class="faq-question">
|
||||
<div class="faq-icon">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12 4L12 20"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round" />
|
||||
<path
|
||||
d="M4 12L20 12"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="faq-question-text">
|
||||
<p>
|
||||
<span class="faq-label">Q:</span>
|
||||
<span class="lang-en-US">{{ question_en }}</span>
|
||||
<span class="lang-es">{{ question_es }}</span>
|
||||
<span class="lang-fr">{{ question_fr }}</span>
|
||||
<span class="lang-de">{{ question_de }}</span>
|
||||
<span class="lang-en-GB">{{ question_en_GB }}</span>
|
||||
<span class="lang-nl">{{ question_nl }}</span>
|
||||
<span class="lang-pt-BR">{{ question_pt_BR }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-answer">
|
||||
<p>
|
||||
<span class="faq-label">A:</span>
|
||||
<span class="lang-en-US">{{ answer_en }}</span>
|
||||
<span class="lang-es">{{ answer_es }}</span>
|
||||
<span class="lang-fr">{{ answer_fr }}</span>
|
||||
<span class="lang-de">{{ answer_de }}</span>
|
||||
<span class="lang-en-GB">{{ answer_en_GB }}</span>
|
||||
<span class="lang-nl">{{ answer_nl }}</span>
|
||||
<span class="lang-pt-BR">{{ answer_pt_BR }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</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,33 @@
|
||||
<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"
|
||||
data-toggle-trigger-off
|
||||
type="submit"
|
||||
>
|
||||
{% t shared.filters.apply %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,22 @@
|
||||
{% if params.q %}
|
||||
<input type="hidden" name="q" value="{{ params.q }}">
|
||||
{% endif %}
|
||||
|
||||
<label class="dropdown-label" for="filter[category_uuid][in][]">
|
||||
{{ label }}
|
||||
</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 @@
|
||||
<footer class="np-footer">
|
||||
<div class="np-footer-top">
|
||||
{% if website_footer.show_navigation_links? %}
|
||||
<div class="np-footer-navigation">
|
||||
<ul class="np-footer-navigation-list">
|
||||
{% for website_navigation in navigations.footer_navigations %}
|
||||
{% if website_navigation.external? %}
|
||||
<li class="np-footer-navigation-item">
|
||||
<a
|
||||
class="np-footer-navigation-link np-button-color"
|
||||
href="{{ website_navigation.path }}"
|
||||
target="_blank">
|
||||
{% if website_navigation.name == "Terms & Conditions" %}
|
||||
<span class="lang-en-US">
|
||||
Terms & Conditions
|
||||
</span>
|
||||
<span class="lang-es">Términos y condiciones</span>
|
||||
<span class="lang-fr">Conditions d'utilisation</span>
|
||||
<span class="lang-de">Vorbedingungen und Bedingungen</span>
|
||||
<span class="lang-en-GB">Terms & Conditions</span>
|
||||
<span class="lang-nl">Voorwaarden en voorwaarden</span>
|
||||
<span class="lang-pt-BR">Termos e condições</span>
|
||||
{% elsif website_navigation.name == "Privacy Policy" %}
|
||||
<span class="lang-en-US">
|
||||
Privacy Policy
|
||||
</span>
|
||||
<span class="lang-es">Política de privacidad</span>
|
||||
<span class="lang-fr">Politique de confidentialité</span>
|
||||
<span class="lang-de">Politique de confidentialité</span>
|
||||
<span class="lang-en-GB">Privacy Policy</span>
|
||||
<span class="lang-nl">Privacybeleid</span>
|
||||
<span class="lang-pt-BR">Política de privacidade</span>
|
||||
{% elsif website_navigation.name == "Legal" %}
|
||||
<span class="lang-en-US">Legal</span>
|
||||
<span class="lang-es">Legal</span>
|
||||
<span class="lang-fr">Mentions légales</span>
|
||||
<span class="lang-de">Legal</span>
|
||||
<span class="lang-en-GB">Legal</span>
|
||||
<span class="lang-nl">Legal</span>
|
||||
<span class="lang-pt-BR">Legal</span>
|
||||
{% else %}
|
||||
{{ website_navigation.name }}
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if current_school.logo_url %}
|
||||
<h2 class="np-footer-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="nintex-footer-logo-image"
|
||||
src="{{ current_school.logo_url }}" />
|
||||
</a>
|
||||
</h2>
|
||||
{% else %}
|
||||
<div class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="np-footer-bottom">
|
||||
<nav class="np-footer-social-links">
|
||||
{% if website_footer.show_social_media_links? %}
|
||||
<ul class="np-footer-social-links-list">
|
||||
{% for social_media_link in website_footer.social_media_links %}
|
||||
<li class="np-footer-social-links-item">
|
||||
<a
|
||||
class="np-footer-social-links-link np-button-color"
|
||||
href="{{ social_media_link.link }}"
|
||||
target="_blank"
|
||||
title="{{ social_media_link.name }}">
|
||||
<i class="np-footer-social-links-icon
|
||||
np-button-color
|
||||
fab fa-{{ social_media_link.name }}">
|
||||
</i>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
{% if website_footer.show_customer_service_email? and website_footer.school_customer_service_email
|
||||
%}
|
||||
<div class="np-footer-support">
|
||||
<div class="np-footer-support-item np-footer-support-help">
|
||||
<span class="lang-en-US">{% t.need_help %}</span>
|
||||
<span class="lang-es">¿Necesitas ayuda?</span>
|
||||
<span class="lang-fr">Besoin d'aide ?</span>
|
||||
<span class="lang-de">Hilfe benötigt?</span>
|
||||
<span class="lang-en-GB">Need help?</span>
|
||||
<span class="lang-nl">Hulp nodig?</span>
|
||||
<span class="lang-pt-BR">Precisa de ajuda?</span>
|
||||
</div>
|
||||
<div class="np-footer-support-item np-footer-support-email">
|
||||
<strong>{% t.email %}</strong>
|
||||
</div>
|
||||
<a class="np-footer-support-item np-footer-support-link np-button-color" href="mailto:{{ website_footer.school_customer_service_email }}">
|
||||
{{ website_footer.school_customer_service_email }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</footer>
|
||||
@ -0,0 +1,20 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<script>
|
||||
|
||||
function changeTranscriptText(){
|
||||
const path = window.location.pathname;
|
||||
if (path.includes("/transcript")) {
|
||||
const heading = document.querySelector('.Transcript_Caption');
|
||||
if (heading) {
|
||||
heading.textContent = "Transcript";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
addEventListener("DOMContentLoaded", (event) => {
|
||||
changeTranscriptText()
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,524 @@
|
||||
{% assign color = color | default: "#3d0456" %}
|
||||
{% assign text_en_US = text_en_US | default: "" %}
|
||||
{% assign text_es = text_es | default: "" %}
|
||||
{% assign text_fr = text_fr | default: "" %}
|
||||
{% assign text_de = text_de | default: "" %}
|
||||
{% assign text_en_GB = text_en_GB | default: "" %}
|
||||
{% assign text_nl = text_nl | default: "" %}
|
||||
{% assign text_pt_BR = text_pt_BR | default: "" %}
|
||||
{% assign button_text_en_US = button_text_en_US | default: "" %}
|
||||
{% assign button_text_es = button_text_es | default: "" %}
|
||||
{% assign button_text_fr = button_text_fr | default: "" %}
|
||||
{% assign button_text_de = button_text_de | default: "" %}
|
||||
{% assign button_text_en_GB = button_text_en_GB | default: "" %}
|
||||
{% assign button_text_nl = button_text_nl | default: "" %}
|
||||
{% assign button_text_pt_BR = button_text_pt_BR | default: "" %}
|
||||
{% assign button_link = button_link | default: "" %}
|
||||
{% assign text_color = text_color | default: "white" %}
|
||||
{% assign subtitle_en_US = subtitle_en_US | default: "" %}
|
||||
{% assign subtitle_es = subtitle_es | default: "" %}
|
||||
{% assign subtitle_fr = subtitle_fr | default: "" %}
|
||||
{% assign subtitle_de = subtitle_de | default: "" %}
|
||||
{% assign subtitle_en_GB = subtitle_en_GB | default: "" %}
|
||||
{% assign subtitle_nl = subtitle_nl | default: "" %}
|
||||
{% assign subtitle_pt_BR = subtitle_pt_BR | default: "" %}
|
||||
|
||||
<header class="np-header" style="background-color: {{ color }};">
|
||||
<div class="np-header-content">
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer">
|
||||
</button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer">
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}" />
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
{% if text_color == "white" %}
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}" />
|
||||
{% else %}
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="https://s3.us-east-1.amazonaws.com/static.northpass.com/nintex/logo/na_logo_alt.png" />
|
||||
{% endif %}
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<h1>
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
</h1>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank">
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class=" ql-hidden-mobile" style="flex-grow: 1;">
|
||||
{% include "nintex_quicklinks"
|
||||
, text_color: text_color
|
||||
, verticalPadding: "0 4%" %}
|
||||
</div>
|
||||
{% if current_person.signed_in? %}
|
||||
{% if features.commerce? %}
|
||||
<a class="np-hidden-mobile np-header-button np-header-button-cart" href="{% route cart %}">
|
||||
<i class="np-header-button-icon far fa-shopping-cart"></i>
|
||||
{% t.cart %}
|
||||
{% commerce_cart_badge %}
|
||||
</a>
|
||||
{% endif %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form
|
||||
action="{% route search %}"
|
||||
method="get"
|
||||
data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="header-search-input lang-en-US"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}" />
|
||||
<input
|
||||
aria-label="Buscar"
|
||||
class="header-search-input lang-es"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Buscar" />
|
||||
<input
|
||||
aria-label="Rechercher"
|
||||
class="header-search-input lang-fr"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Rechercher" />
|
||||
<input
|
||||
aria-label="Suchen"
|
||||
class="header-search-input lang-de"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Suchen" />
|
||||
<input
|
||||
aria-label="Search"
|
||||
class="header-search-input lang-en-GB"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Search" />
|
||||
<input
|
||||
aria-label="Zoeken"
|
||||
class="header-search-input lang-nl"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Zoeken" />
|
||||
<input
|
||||
aria-label="Pesquisar"
|
||||
class="header-search-input lang-pt-BR"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Pesquisar" />
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}">
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="{% route account %}">
|
||||
<span class="lang-en-US">
|
||||
{% t.profile_settings %}
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Configuración de perfil
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Paramètres du profil
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Profil Einstellungen
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Profile Settings
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Profielinstellingen
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Configurações de perfil
|
||||
</span>
|
||||
</a>
|
||||
{% endunless %}
|
||||
{% if current_person.signed_in? %}
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="{% route transcript %}">
|
||||
<span class="lang-en-US">
|
||||
{% t.transcript %}
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Transcripción
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Transcription
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Transkript
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Transcript
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Afschrift
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Transcrito
|
||||
</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if current_person.signed_in? and features.commerce? %}
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="{% route order_history %}">
|
||||
{% t.order_history %}
|
||||
</a>
|
||||
{% endif %}
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="{% route badges %}">
|
||||
<span class="lang-en-US">
|
||||
Badges
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Insignias
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Insignes
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Abzeichen
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Badges
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Insignes
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Emblemas
|
||||
</span>
|
||||
</a>
|
||||
{% include "language_selector"
|
||||
, desktopMode: true
|
||||
, parentClass: 'np-header-avatar-tooltip-navigation' %}
|
||||
<a class="np-header-avatar-tooltip-navigation-link np-danger" href="{% route logout %}">
|
||||
<span class="lang-en-US">
|
||||
{% t.sign_out %}
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Cerrar sesión
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Se déconnecter
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Abmelden
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Sign Out
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Afmelden
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Sair
|
||||
</span>
|
||||
</a>
|
||||
</nav>
|
||||
</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 lang-en-US"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}" />
|
||||
<input
|
||||
aria-label="Buscar"
|
||||
class="header-search-input lang-es"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Buscar" />
|
||||
<input
|
||||
aria-label="Rechercher"
|
||||
class="header-search-input lang-fr"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Rechercher" />
|
||||
<input
|
||||
class="lang-de"
|
||||
aria-label="Suchen"
|
||||
class="header-search-input lang-de"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Suchen" />
|
||||
<input
|
||||
aria-label="Search"
|
||||
class="header-search-input lang-en-GB"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Search" />
|
||||
<input
|
||||
aria-label="Zoeken"
|
||||
class="header-search-input lang-nl"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Zoeken" />
|
||||
<input
|
||||
aria-label="Pesquisar"
|
||||
class="header-search-input lang-pt-BR"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Pesquisar" />
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a class="np-header-mobile-menu-content-button" href="{% route account %}">
|
||||
<span class="lang-en-US">
|
||||
{% t.profile_settings %}
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Configuración de perfil
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Paramètres du profil
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Profil Einstellungen
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Profile Settings
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Profielinstellingen
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Configurações de perfil
|
||||
</span>
|
||||
</a>
|
||||
{% endunless %}
|
||||
{% if current_person.signed_in? %}
|
||||
<a class="np-header-mobile-menu-content-button" href="{% route transcript %}">
|
||||
<span class="lang-en-US">
|
||||
{% t.transcript %}
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Transcripción
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Transcription
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Transkript
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Transcript
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Afschrift
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Transcrito
|
||||
</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if current_person.signed_in? and features.commerce? %}
|
||||
<a class="np-header-mobile-menu-content-button" href="{% route order_history %}">
|
||||
{% t.order_history %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if current_person.signed_in? and features.commerce? %}
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
<a class="np-header-mobile-menu-content-button np-header-mobile-menu-content-button-cart" href="{% route cart %}">
|
||||
<i class="np-header-mobile-menu-content-button-icon far fa-shopping-cart"></i>
|
||||
{% t.cart %}
|
||||
{% commerce_cart_badge %}
|
||||
</a>
|
||||
{% endif %}
|
||||
<a class="np-header-mobile-menu-content-button" href="{% route badges %}">
|
||||
<span class="lang-en-US">
|
||||
Badges
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Insignias
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Insignes
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Abzeichen
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Badges
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Insignes
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Emblemas
|
||||
</span>
|
||||
</a>
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
|
||||
{% include "language_selector"
|
||||
, desktopMode: false
|
||||
, parentClass: 'np-header-mobile-menu-content-nav' %}
|
||||
<a class="np-header-mobile-menu-content-button np-danger" href="{% route logout %}">
|
||||
<span class="lang-en-US">
|
||||
{% t.sign_out %}
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Cerrar sesión
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Se déconnecter
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Abmelden
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Sign Out
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Afmelden
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Sair
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ql-hidden-desktop">
|
||||
{% include "nintex_quicklinks"
|
||||
, text_color: text_color
|
||||
, verticalPadding: "10px 4% 20px" %}
|
||||
</div>
|
||||
|
||||
{% if text_en_US != '' %}
|
||||
{% include "nintex_hero"
|
||||
, color: color
|
||||
, text_en_US: text_en_US
|
||||
, text_es: text_es
|
||||
, text_fr: text_fr
|
||||
, text_de: text_de
|
||||
, text_en_GB: text_en_GB
|
||||
, text_nl: text_nl
|
||||
, text_pt_BR: text_pt_BR
|
||||
, subtitle_en_US: subtitle_en_US
|
||||
, subtitle_es: subtitle_es
|
||||
, subtitle_fr: subtitle_fr
|
||||
, subtitle_de: subtitle_de
|
||||
, subtitle_en_GB: subtitle_en_GB
|
||||
, subtitle_nl: subtitle_nl
|
||||
, subtitle_pt_BR: subtitle_pt_BR
|
||||
, button_text: button_text_en_US
|
||||
, button_text_es: button_text_es
|
||||
, button_text_fr: button_text_fr
|
||||
, button_text_de: button_text_de
|
||||
, button_text_en_GB: button_text_en_GB
|
||||
, button_text_nl: button_text_nl
|
||||
, button_text_pt_BR: button_text_pt_BR
|
||||
, button_link: button_link
|
||||
, text_color: text_color %}
|
||||
{% endif %}
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
.np-header .np-header-font-color {
|
||||
color: {{ text_color }}
|
||||
!important;
|
||||
}
|
||||
.ql-hidden-desktop {
|
||||
display: block;
|
||||
}
|
||||
.ql-hidden-mobile {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.ql-hidden-desktop {
|
||||
display: none;
|
||||
}
|
||||
.ql-hidden-mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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,247 @@
|
||||
<div class="nintex-fw-container">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="nintex-headline">
|
||||
<span class="lang-en-US">Frequently Asked Questions</span>
|
||||
<span class="lang-es">Preguntas Frecuentes</span>
|
||||
<span class="lang-fr">Questions Fréquemment Posées</span>
|
||||
<span class="lang-de">Häufig Gestellte Fragen</span>
|
||||
<span class="lang-en-GB">Frequently Asked Questions</span>
|
||||
<span class="lang-nl">Veelgestelde Vragen</span>
|
||||
<span class="lang-pt-BR">Perguntas Frequentes</span>
|
||||
</div>
|
||||
{% comment %} <div class="nintex-subheadline">
|
||||
<span class="lang-en-US">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-es">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-fr">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-de">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-en-GB">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-nl">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-pt-BR">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
</div> {% endcomment %}
|
||||
</div>
|
||||
<div class="faq-container">
|
||||
<div class="faq-column faq-column-left">
|
||||
{% include "faq_card"
|
||||
, question_en: "How do I find courses that fit my role?"
|
||||
, question_es: "How do I find courses that fit my role?"
|
||||
, question_fr: "How do I find courses that fit my role?"
|
||||
, question_de: "How do I find courses that fit my role?"
|
||||
, question_en_GB: "How do I find courses that fit my role?"
|
||||
, question_nl: "How do I find courses that fit my role?"
|
||||
, question_pt_BR: "How do I find courses that fit my role?"
|
||||
, answer_en: "Use the filters in the Catalog to search by product, skill level, or course type. This makes it easy to discover content tailored to your needs."
|
||||
, answer_es: "Use the filters in the Catalog to search by product, skill level, or course type. This makes it easy to discover content tailored to your needs."
|
||||
, answer_fr: "Use the filters in the Catalog to search by product, skill level, or course type. This makes it easy to discover content tailored to your needs."
|
||||
, answer_de: "Use the filters in the Catalog to search by product, skill level, or course type. This makes it easy to discover content tailored to your needs."
|
||||
, answer_en_GB: "Use the filters in the Catalog to search by product, skill level, or course type. This makes it easy to discover content tailored to your needs."
|
||||
, answer_nl: "Use the filters in the Catalog to search by product, skill level, or course type. This makes it easy to discover content tailored to your needs."
|
||||
, answer_pt_BR: "Use the filters in the Catalog to search by product, skill level, or course type. This makes it easy to discover content tailored to your needs." %}
|
||||
{% include "faq_card"
|
||||
, question_en: "Where can I see my progress?"
|
||||
, question_es: "Where can I see my progress?"
|
||||
, question_fr: "Where can I see my progress?"
|
||||
, question_de: "Where can I see my progress?"
|
||||
, question_en_GB: "Where can I see my progress?"
|
||||
, question_nl: "Where can I see my progress?"
|
||||
, question_pt_BR: "Where can I see my progress?"
|
||||
, answer_en: "Your Dashboard tracks all your enrolled courses, learning paths, and certifications. You will also see a progress circle to show how much you have completed."
|
||||
, answer_es: "Your Dashboard tracks all your enrolled courses, learning paths, and certifications. You will also see a progress circle to show how much you have completed."
|
||||
, answer_fr: "Your Dashboard tracks all your enrolled courses, learning paths, and certifications. You will also see a progress circle to show how much you have completed."
|
||||
, answer_de: "Your Dashboard tracks all your enrolled courses, learning paths, and certifications. You will also see a progress circle to show how much you have completed."
|
||||
, answer_en_GB: "Your Dashboard tracks all your enrolled courses, learning paths, and certifications. You will also see a progress circle to show how much you have completed."
|
||||
, answer_nl: "Your Dashboard tracks all your enrolled courses, learning paths, and certifications. You will also see a progress circle to show how much you have completed."
|
||||
, answer_pt_BR: "Your Dashboard tracks all your enrolled courses, learning paths, and certifications. You will also see a progress circle to show how much you have completed." %}
|
||||
{% include "faq_card"
|
||||
, question_en: "What is a Learning Path?"
|
||||
, question_es: "What is a Learning Path?"
|
||||
, question_fr: "What is a Learning Path?"
|
||||
, question_de: "What is a Learning Path?"
|
||||
, question_en_GB: "What is a Learning Path?"
|
||||
, question_nl: "What is a Learning Path?"
|
||||
, question_pt_BR: "What is a Learning Path?"
|
||||
, answer_en: "A Learning Path is a curated series of courses that build on each other to help you master a topic or skill. It is your guided roadmap for structured, step-by-step learning."
|
||||
, answer_es: "A Learning Path is a curated series of courses that build on each other to help you master a topic or skill. It is your guided roadmap for structured, step-by-step learning."
|
||||
, answer_fr: "A Learning Path is a curated series of courses that build on each other to help you master a topic or skill. It is your guided roadmap for structured, step-by-step learning."
|
||||
, answer_de: "A Learning Path is a curated series of courses that build on each other to help you master a topic or skill. It is your guided roadmap for structured, step-by-step learning."
|
||||
, answer_en_GB: "A Learning Path is a curated series of courses that build on each other to help you master a topic or skill. It is your guided roadmap for structured, step-by-step learning."
|
||||
, answer_nl: "A Learning Path is a curated series of courses that build on each other to help you master a topic or skill. It is your guided roadmap for structured, step-by-step learning."
|
||||
, answer_pt_BR: "A Learning Path is a curated series of courses that build on each other to help you master a topic or skill. It is your guided roadmap for structured, step-by-step learning." %}
|
||||
</div>
|
||||
<div class="faq-column faq-column-right">
|
||||
{% include "faq_card"
|
||||
, question_en: "Where do I find the courses I am enrolled in?"
|
||||
, question_es: "Where do I find the courses I am enrolled in?"
|
||||
, question_fr: "Where do I find the courses I am enrolled in?"
|
||||
, question_de: "Where do I find the courses I am enrolled in?"
|
||||
, question_en_GB: "Where do I find the courses I am enrolled in?"
|
||||
, question_nl: "Where do I find the courses I am enrolled in?"
|
||||
, question_pt_BR: "Where do I find the courses I am enrolled in?"
|
||||
, answer_en: "Your enrolled courses, learning paths, and certifications appear directly on your Dashboard after you log in. You can use the filters or search bar to find what you need faster."
|
||||
, answer_es: "Your enrolled courses, learning paths, and certifications appear directly on your Dashboard after you log in. You can use the filters or search bar to find what you need faster."
|
||||
, answer_fr: "Your enrolled courses, learning paths, and certifications appear directly on your Dashboard after you log in. You can use the filters or search bar to find what you need faster."
|
||||
, answer_de: "Your enrolled courses, learning paths, and certifications appear directly on your Dashboard after you log in. You can use the filters or search bar to find what you need faster."
|
||||
, answer_en_GB: "Your enrolled courses, learning paths, and certifications appear directly on your Dashboard after you log in. You can use the filters or search bar to find what you need faster."
|
||||
, answer_nl: "Your enrolled courses, learning paths, and certifications appear directly on your Dashboard after you log in. You can use the filters or search bar to find what you need faster."
|
||||
, answer_pt_BR: "Your enrolled courses, learning paths, and certifications appear directly on your Dashboard after you log in. You can use the filters or search bar to find what you need faster." %}
|
||||
{% include "faq_card"
|
||||
, question_en: "Can I resume a course where I left off?"
|
||||
, question_es: "Can I resume a course where I left off?"
|
||||
, question_fr: "Can I resume a course where I left off?"
|
||||
, question_de: "Can I resume a course where I left off?"
|
||||
, question_en_GB: "Can I resume a course where I left off?"
|
||||
, question_nl: "Can I resume a course where I left off?"
|
||||
, question_pt_BR: "Can I resume a course where I left off?"
|
||||
, answer_en: "Yes! The system saves your progress automatically, so you can pick up right where you left off."
|
||||
, answer_es: "Yes! The system saves your progress automatically, so you can pick up right where you left off."
|
||||
, answer_fr: "Yes! The system saves your progress automatically, so you can pick up right where you left off."
|
||||
, answer_de: "Yes! The system saves your progress automatically, so you can pick up right where you left off."
|
||||
, answer_en_GB: "Yes! The system saves your progress automatically, so you can pick up right where you left off."
|
||||
, answer_nl: "Yes! The system saves your progress automatically, so you can pick up right where you left off."
|
||||
, answer_pt_BR: "Yes! The system saves your progress automatically, so you can pick up right where you left off." %}
|
||||
{% include "faq_card"
|
||||
, question_en: "How do I get support if I have issues?"
|
||||
, question_es: "How do I get support if I have issues?"
|
||||
, question_fr: "How do I get support if I have issues?"
|
||||
, question_de: "How do I get support if I have issues?"
|
||||
, question_en_GB: "How do I get support if I have issues?"
|
||||
, question_nl: "How do I get support if I have issues?"
|
||||
, question_pt_BR: "How do I get support if I have issues?"
|
||||
, answer_en: "If you happen to have an issue or can't find what you are looking for, you can easily contact us by clicking on the email address in the site footer."
|
||||
, answer_es: "If you happen to have an issue or can't find what you are looking for, you can easily contact us by clicking on the email address in the site footer."
|
||||
, answer_fr: "If you happen to have an issue or can't find what you are looking for, you can easily contact us by clicking on the email address in the site footer."
|
||||
, answer_de: "If you happen to have an issue or can't find what you are looking for, you can easily contact us by clicking on the email address in the site footer."
|
||||
, answer_en_GB: "If you happen to have an issue or can't find what you are looking for, you can easily contact us by clicking on the email address in the site footer."
|
||||
, answer_nl: "If you happen to have an issue or can't find what you are looking for, you can easily contact us by clicking on the email address in the site footer."
|
||||
, answer_pt_BR: "If you happen to have an issue or can't find what you are looking for, you can easily contact us by clicking on the email address in the site footer." %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.faq-card {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
height: 70px;
|
||||
transition: height 0.3s ease;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
|
||||
}
|
||||
|
||||
.faq-card.active {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.faq-icon {
|
||||
background-color: var(--nintex--color--pink-300);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: background-color 0.3s ease;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.faq-icon svg {
|
||||
color: white;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.faq-card:hover .faq-icon,
|
||||
.faq-card.active .faq-icon {
|
||||
background-color: var(--nintex--color--pink-400);
|
||||
}
|
||||
|
||||
.faq-card.active .faq-icon svg {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.faq-card.active:hover .faq-icon {
|
||||
background-color: var(--nintex--color--pink-300);
|
||||
}
|
||||
|
||||
.faq-question {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.faq-question .faq-question-text {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.faq-question .faq-question-text p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease-in-out;
|
||||
transform: translateY(-10px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: calc(100% - 70px);
|
||||
position: relative;
|
||||
left: 70px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.faq-answer p {
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.faq-card.active .faq-answer {
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Remove fixed height overflow since we're using auto height */
|
||||
.faq-card.active .faq-answer {
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
.faq-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.faq-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.faq-column {
|
||||
flex: 1;
|
||||
gap: 20px;
|
||||
}
|
||||
.faq-card {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.faq-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,117 @@
|
||||
|
||||
|
||||
{% if learning_paths.available.any? %}
|
||||
{% assign paths_shown = 0 %}
|
||||
{% assign paths_to_show = 6 %}
|
||||
<div class="nintex-fw-container">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="nintex-headline">
|
||||
<span class="lang-en-US">Learning Paths</span>
|
||||
<span class="lang-es">Rutas de aprendizaje</span>
|
||||
<span class="lang-fr">Chemins d'apprentissage</span>
|
||||
<span class="lang-de">Lernpfade</span>
|
||||
<span class="lang-en-GB">Learning Paths</span>
|
||||
<span class="lang-nl">Leerpaden</span>
|
||||
<span class="lang-pt-BR">Caminhos de aprendizagem</span>
|
||||
</div>
|
||||
{% comment %} <div class="nintex-subheadline">
|
||||
<span class="lang-en-US">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-es">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-fr">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-de">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-en-GB">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-nl">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-pt-BR">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
</div> {% endcomment %}
|
||||
</div>
|
||||
<div class="embla-container">
|
||||
<div class="embla-buttons">
|
||||
<button class="embla-button embla-button--prev" onclick="scrollPrev()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M9.71402 2L8.2998 3.41421L13.0927 8.20711L8.2998 13L9.71402 14.4142L15.9211 8.20711L9.71402 2Z"
|
||||
fill="#BE0075"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="embla-button embla-button--next" onclick="scrollNext()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M9.71402 2L8.2998 3.41421L13.0927 8.20711L8.2998 13L9.71402 14.4142L15.9211 8.20711L9.71402 2Z"
|
||||
fill="#BE0075"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="embla" id="embla-homepage-paths">
|
||||
<div class="embla__container">
|
||||
{% for learning_path in learning_paths.available %}
|
||||
<div class="embla__slide">
|
||||
{% include "cards_learning_path_nintex" with learning_path %}
|
||||
</div>
|
||||
{% assign paths_shown = paths_shown | plus: 1 %}
|
||||
{% if paths_shown >= paths_to_show %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nintex-btns-container">
|
||||
<a href="/app/learning_paths" class="nintex-text-button">
|
||||
<span class="lang-en-US">View more</span>
|
||||
<span class="lang-es">Ver más</span>
|
||||
<span class="lang-fr">Voir plus</span>
|
||||
<span class="lang-de">Mehr anzeigen</span>
|
||||
<span class="lang-en-GB">View more</span>
|
||||
<span class="lang-nl">Meer bekijken</span>
|
||||
<span class="lang-pt-BR">Ver mais</span>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M9.71402 2L8.2998 3.41421L13.0927 8.20711L8.2998 13L9.71402 14.4142L15.9211 8.20711L9.71402 2Z"
|
||||
fill="white"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
var embla;
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var emblaNode = document.querySelector('#embla-homepage-paths');
|
||||
const options = { loop: false }
|
||||
const plugins = [EmblaCarouselAutoplay({
|
||||
delay: 10000,
|
||||
stopOnMouseEnter: true,
|
||||
})]
|
||||
|
||||
embla = EmblaCarousel(emblaNode, options, plugins);
|
||||
|
||||
|
||||
});
|
||||
|
||||
function scrollPrev() {
|
||||
if(embla.canScrollPrev()) {
|
||||
embla.scrollPrev();
|
||||
}else{
|
||||
embla.scrollTo(document.getElementsByClassName('embla__slide').length - 1);
|
||||
}
|
||||
}
|
||||
|
||||
function scrollNext() {
|
||||
if(embla.canScrollNext()) {
|
||||
embla.scrollNext();
|
||||
}else{
|
||||
embla.scrollTo(0);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@media screen and (min-width: 768px) {
|
||||
.embla__slide {
|
||||
flex: 0 0 calc((100% - 2rem) / 3);
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,117 @@
|
||||
{% assign desktopMode = desktopMode | default: false %}
|
||||
{% assign parentClass = parentClass | default: "" %}
|
||||
|
||||
<a class="
|
||||
{% if desktopMode %}
|
||||
np-header-avatar-tooltip-navigation-link
|
||||
{% else %}
|
||||
np-header-mobile-menu-content-button
|
||||
{% endif %}
|
||||
" onclick="toggleLanguageSelector('{{parentClass}}')">
|
||||
<span class="lang-en-US">Language</span>
|
||||
<span class="lang-es">Idioma</span>
|
||||
<span class="lang-fr">Langue</span>
|
||||
<span class="lang-de">Sprache</span>
|
||||
<span class="lang-en-GB">Language</span>
|
||||
<span class="lang-nl">Taal</span>
|
||||
<span class="lang-pt-BR">Idioma</span>
|
||||
<div
|
||||
{% if desktopMode %}
|
||||
style="padding-top: 10px;"
|
||||
{% endif %}
|
||||
class="language-selector-dropdown">
|
||||
<div class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" onclick="changeLanguage('en-US')">English (US)</div>
|
||||
<div class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" onclick="changeLanguage('es')">Español</div>
|
||||
<div class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" onclick="changeLanguage('fr')">Français</div>
|
||||
<div class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" onclick="changeLanguage('de')">Deutsch</div>
|
||||
<div class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" onclick="changeLanguage('en-GB')">English (UK)</div>
|
||||
<div class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" onclick="changeLanguage('nl')">Nederlands</div>
|
||||
<div class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" onclick="changeLanguage('pt-BR')">Português (BR)</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
<style>
|
||||
.language-selector-dropdown {
|
||||
position: absolute;
|
||||
width: 97%;
|
||||
background-color: white;
|
||||
z-index: 1;
|
||||
top: 54px;
|
||||
padding: 0 10px 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px 0 rgba(72, 103, 118, 0.65);
|
||||
}
|
||||
.language-selector-dropdown-item {
|
||||
align-items: center;
|
||||
background: #e4e8eb;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px 0 rgba(72, 103, 118, 0.15);
|
||||
color: #305263;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
height: 52px;
|
||||
justify-content: center;
|
||||
margin-top: 12px;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize dropdowns as hidden
|
||||
const dropdowns = document.querySelectorAll('.language-selector-dropdown');
|
||||
dropdowns.forEach(dropdown => {
|
||||
dropdown.style.display = 'none';
|
||||
});
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
document.addEventListener('click', function(event) {
|
||||
const target = event.target;
|
||||
const isDropdown = target.closest('.language-selector-dropdown');
|
||||
const isToggleButton = target.closest('[onclick*="toggleLanguageSelector"]');
|
||||
|
||||
if (!isDropdown && !isToggleButton) {
|
||||
dropdowns.forEach(dropdown => {
|
||||
dropdown.style.display = 'none';
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function toggleLanguageSelector(parentClass) {
|
||||
const selector = parentClass ? `.${parentClass} .language-selector-dropdown` : '.language-selector-dropdown';
|
||||
const dropdown = document.querySelector(selector);
|
||||
if (dropdown) {
|
||||
dropdown.style.display = dropdown.style.display === 'none' || dropdown.style.display === '' ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function changeLanguage(language) {
|
||||
fetch("https://webhooks.workato.com/webhooks/rest/b60a3546-ce72-457f-bfbb-197803be77b8/change-preferred-language-nintex", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
language: language,
|
||||
userId: '{{current_person.id}}'
|
||||
})
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok ' + response.statusText);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
const currentUrl = new URL(window.location.href);
|
||||
currentUrl.searchParams.set('lang', language);
|
||||
window.location.href = currentUrl.toString();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error sending language information:", error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@ -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,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,27 @@
|
||||
<div class="np-learning-path-completed-banner np-learning-path-banner nintex-course-completion-banner">
|
||||
<img class="np-learning-path-banner-image 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" style="color: var(--nintex--color--deep-purple);">{% 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/learning_paths"
|
||||
class="np-learning-path-banner-action np-learning-path-banner-action--secondary"
|
||||
style="color: var(--nintex--color--deep-purple);border-color: var(--nintex--color--deep-purple);">Explore More Learning Paths</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-learning-path-completed-banner.nintex-course-completion-banner {
|
||||
color: var(--nintex--color--deep-purple);
|
||||
background-color: #f1d3db;
|
||||
}
|
||||
|
||||
.np-learning-path-banner-image.banner-image {
|
||||
filter: brightness(0) invert(32%) sepia(12%) saturate(2373%) hue-rotate(239deg) brightness(90%) contrast(96%)
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,77 @@
|
||||
{% if learning_path.enrolled? and course.unlocked? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a class="np-learning-path-outline-item np-card-container" href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}">
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image">
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
{% if course.instructors %}
|
||||
<div class="np-learning-path-outline-caption">
|
||||
{{ course.instructors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-learning-path-outline-progress
|
||||
{% if course.completed? %} np-color-success {% else %} np-learning-progress-text-color {% endif %}
|
||||
">
|
||||
{% if course.completed? %}
|
||||
<span class="lang-en-US">Completed</span>
|
||||
<span class="lang-es">Completado</span>
|
||||
<span class="lang-fr">Terminé</span>
|
||||
<span class="lang-de">Abgeschlossen</span>
|
||||
<span class="lang-en-GB">Completed</span>
|
||||
<span class="lang-nl">Voltooid</span>
|
||||
<span class="lang-pt-BR">Completo</span>
|
||||
{% elsif course.started? %}
|
||||
<span class="lang-en-US">In Progress</span>
|
||||
<span class="lang-es">En Progreso</span>
|
||||
<span class="lang-fr">En Cours</span>
|
||||
<span class="lang-de">In Bearbeitung</span>
|
||||
<span class="lang-en-GB">In Progress</span>
|
||||
<span class="lang-nl">In Progress</span>
|
||||
<span class="lang-pt-BR">Em Progresso</span>
|
||||
{% else %}
|
||||
<span class="lang-en-US">{% t shared.progress
|
||||
, count: course.progress %}</span>
|
||||
<span class="lang-es">No iniciado</span>
|
||||
<span class="lang-fr">Non commencé</span>
|
||||
<span class="lang-de">Fortschritt</span>
|
||||
<span class="lang-en-GB">Not started</span>
|
||||
<span class="lang-nl">Niet begonnen</span>
|
||||
<span class="lang-pt-BR">Não iniciado</span>
|
||||
{% endif %}
|
||||
|
||||
</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="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image">
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
</div>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,12 @@
|
||||
<h2 class="np-card-heading">
|
||||
<span class="lang-en-US">{% t.about %}</span>
|
||||
<span class="lang-es">Descripción</span>
|
||||
<span class="lang-fr">Description</span>
|
||||
<span class="lang-de">Beschreibung</span>
|
||||
<span class="lang-en-GB">Description</span>
|
||||
<span class="lang-nl">Beschrijving</span>
|
||||
<span class="lang-pt-BR">Descrição</span>
|
||||
</h2>
|
||||
<div class="np-card-text">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
@ -0,0 +1,21 @@
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
<div class="np-card-padding-dynamic">
|
||||
{% include "learning_path_description" %}
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 np-grid-spacing">
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,21 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
<span class="lang-en-US">{% t shared.learning_path.title %}</span>
|
||||
<span class="lang-es">Camino de Aprendizaje</span>
|
||||
<span class="lang-fr">Chemin d'apprentissage</span>
|
||||
<span class="lang-de">Lernpfad</span>
|
||||
<span class="lang-en-GB">Learning Path</span>
|
||||
<span class="lang-nl">Leerpad</span>
|
||||
<span class="lang-pt-BR">Caminho de Aprendizagem</span>
|
||||
<i class="far fa-road np-button-color np-learning-path-icon"></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-icon-back"></i>
|
||||
</a>
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,2 @@
|
||||
{% include "learning_path_desktop_header" %}
|
||||
{% include "learning_path_desktop_content" %}
|
||||
@ -0,0 +1,31 @@
|
||||
{% if learning_path.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
<h3 class="np-card-heading">
|
||||
<span class="lang-en-US">{% t shared.instructors %}</span>
|
||||
<span class="lang-es">Instructores</span>
|
||||
<span class="lang-fr">Instructeurs</span>
|
||||
<span class="lang-de">Instructoren</span>
|
||||
<span class="lang-en-GB">Instructors</span>
|
||||
<span class="lang-nl">Instructeurs</span>
|
||||
<span class="lang-pt-BR">Instructores</span>
|
||||
</h3>
|
||||
<div class="np-content-instructors-content row">
|
||||
{% for instructor in learning_path.instructors %}
|
||||
<div class="np-content-instructors-content-item col-xs-12 col-lg">
|
||||
<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>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -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">
|
||||
<h2 class="np-learning-path-banner-headline">{% t .headline %}</h2>
|
||||
<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,22 @@
|
||||
{% include "learning_path_desktop_header", learning_path: product %}
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
src="{{ product.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ product.name }}"
|
||||
/>
|
||||
<div class="np-card-padding-dynamic">
|
||||
{% include "learning_path_description", learning_path: product %}
|
||||
{% include "learning_path_instructors", learning_path: product %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 np-grid-spacing">
|
||||
<div class="np-top-cta np-card-container np-card-padding np-product-cta">
|
||||
{% include "product_price_and_cta"%}
|
||||
</div>
|
||||
{% include "learning_path_product_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,34 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
{% t shared.learning_path.title %}
|
||||
<i class="far fa-road 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>
|
||||
{{ product.name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ product.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ product.name }}"
|
||||
/>
|
||||
<div class="np-top-cta">
|
||||
{% include "product_price_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_description", learning_path: product %}
|
||||
</div>
|
||||
|
||||
<div class="np-card-spacing">
|
||||
{% include "learning_path_product_outline" %}
|
||||
</div>
|
||||
|
||||
{% if product.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_instructors", learning_path: product %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,10 @@
|
||||
<div class="np-learning-path-outline">
|
||||
<h3 class="np-product-outline-title">{% t .title %}</h3>
|
||||
{% for item in product.learning_path_items %}
|
||||
{% if item.course? %}
|
||||
{% include "product_outline_course", id: forloop.index %}
|
||||
{% elsif item.training_event? %}
|
||||
{% include "product_outline_event", id: forloop.index %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,55 @@
|
||||
{% if learning_path.enrolled? %}
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
<span class="lang-en-US">{% t .progress %}</span>
|
||||
<span class="lang-es">Progreso</span>
|
||||
<span class="lang-fr">Progression</span>
|
||||
<span class="lang-de">Fortschritt</span>
|
||||
<span class="lang-en-GB">Progress</span>
|
||||
<span class="lang-nl">Progressie</span>
|
||||
<span class="lang-pt-BR">Progresso</span>
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%"
|
||||
class="np-card-progress-bar np-learning-progress-bar-color">
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if learning_path.completed? %} np-color-success {% else %} np-learning-progress-text-color {% endif %}
|
||||
">
|
||||
{% if learning_path.completed? %}
|
||||
<span class="lang-en-US">Completed</span>
|
||||
<span class="lang-es">Completado</span>
|
||||
<span class="lang-fr">Terminé</span>
|
||||
<span class="lang-de">Abgeschlossen</span>
|
||||
<span class="lang-en-GB">Completed</span>
|
||||
<span class="lang-nl">Voltooid</span>
|
||||
<span class="lang-pt-BR">Completo</span>
|
||||
{% elsif learning_path.enrolled? %}
|
||||
<span class="lang-en-US">In Progress</span>
|
||||
<span class="lang-es">En Progreso</span>
|
||||
<span class="lang-fr">En Cours</span>
|
||||
<span class="lang-de">In Bearbeitung</span>
|
||||
<span class="lang-en-GB">In Progress</span>
|
||||
<span class="lang-nl">In Progress</span>
|
||||
<span class="lang-pt-BR">Em Progresso</span>
|
||||
{% else %}
|
||||
<span class="lang-en-US">{% t shared.progress
|
||||
, count: learning_path.progress %}</span>
|
||||
<span class="lang-es">No iniciado</span>
|
||||
<span class="lang-fr">Non commencé</span>
|
||||
<span class="lang-de">Fortschritt</span>
|
||||
<span class="lang-en-GB">Not started</span>
|
||||
<span class="lang-nl">Niet begonnen</span>
|
||||
<span class="lang-pt-BR">Não iniciado</span>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% include "product_expiration_date", date: learning_path.expiration_date %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-top-cta-container">
|
||||
{% learning_path_next_step_button learning_path, class: "np-top-button np-button-font-color np-button np-button-big" %}
|
||||
</div>
|
||||
@ -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,65 @@
|
||||
{% assign is_partner = false %}
|
||||
{% assign filter_partners = false %}
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.name == "All Partners" %}
|
||||
{% assign is_partner = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if filter_partners == false %}
|
||||
{% assign is_partner = true %}
|
||||
{% endif %}
|
||||
|
||||
{% if items.any? %}
|
||||
|
||||
<div class="row np-catalog-courses nintex-cards-container">
|
||||
|
||||
{% for learning_path in items %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if category.name contains "Nintex Partner Sales" and is_partner == false %}
|
||||
{% continue %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="{{classes }} display-flex">
|
||||
{% include "cards_learning_path_nintex" with learning_path %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="np-learning-paths-resources-container" style="display: none;">
|
||||
<div class="np-zero-state-text">
|
||||
<span class="lang-en-US">
|
||||
No learning paths found
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
No se encontraron rutas de aprendizaje
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Aucun parcours trouvé
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Keine Lernpfade gefunden
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
No learning paths found
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Geen leerpaden gevonden
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Nenhum caminho de aprendizagem encontrado
|
||||
</span>
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container" style="margin-top: 60px;">
|
||||
<div class="np-zero-state-text">
|
||||
{% t.empty %}
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,141 @@
|
||||
<div class="nintex-fw-container" style="padding-top: 150px">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="nintex-headline">
|
||||
<span class="lang-en-US">Meet the Team</span>
|
||||
<span class="lang-es">Meet the Team</span>
|
||||
<span class="lang-fr">Meet the Team</span>
|
||||
<span class="lang-de">Meet the Team</span>
|
||||
<span class="lang-en-GB">Meet the Team</span>
|
||||
<span class="lang-nl">Meet the Team</span>
|
||||
<span class="lang-pt-BR">Meet the Team</span>
|
||||
</div>
|
||||
<div class="nintex-subheadline">
|
||||
<span class="lang-en-US">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-es">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-fr">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-de">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-en-GB">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-nl">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-pt-BR">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="embla-container">
|
||||
<div class="embla-buttons">
|
||||
<button class="embla-button embla-button--prev" onclick="scrollPrevTeam()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M9.71402 2L8.2998 3.41421L13.0927 8.20711L8.2998 13L9.71402 14.4142L15.9211 8.20711L9.71402 2Z"
|
||||
fill="#BE0075"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="embla-button embla-button--next" onclick="scrollNextTeam()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M9.71402 2L8.2998 3.41421L13.0927 8.20711L8.2998 13L9.71402 14.4142L15.9211 8.20711L9.71402 2Z"
|
||||
fill="#BE0075"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="embla" id="embla-meet-the-team">
|
||||
<div class="embla__container">
|
||||
<div class="embla__slide">
|
||||
{% include "team_member_card", name: "John Doe", title: "CEO", image_url: "https://placehold.co/100x100" %}
|
||||
</div>
|
||||
<div class="embla__slide">
|
||||
{% include "team_member_card", name: "Jane Doe", title: "CTO", image_url: "https://placehold.co/100x100" %}
|
||||
</div>
|
||||
<div class="embla__slide">
|
||||
{% include "team_member_card", name: "Jim Beam", title: "CFO", image_url: "https://placehold.co/100x100" %}
|
||||
</div>
|
||||
<div class="embla__slide">
|
||||
{% include "team_member_card", name: "Jane Doe", title: "CTO", image_url: "https://placehold.co/100x100" %}
|
||||
</div>
|
||||
<div class="embla__slide">
|
||||
{% include "team_member_card", name: "Jim Beam", title: "CFO", image_url: "https://placehold.co/100x100" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.team-member-card {
|
||||
background-color: white;
|
||||
box-shadow: 1px 2px 11px 0px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.team-member-card-image {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 50%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.team-member-card-content {
|
||||
display: flex
|
||||
;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.team-member-card-title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#embla-meet-the-team .embla__slide{
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.embla__slide {
|
||||
flex: 0 0 calc((100% - 1rem) / 2);
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var emblaTeam;
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var emblaNode = document.querySelector('#embla-meet-the-team');
|
||||
const options = {
|
||||
loop: false
|
||||
}
|
||||
const plugins = [EmblaCarouselAutoplay({
|
||||
delay: 10000,
|
||||
stopOnMouseEnter: true,
|
||||
})]
|
||||
|
||||
emblaTeam = EmblaCarousel(emblaNode, options, plugins);
|
||||
});
|
||||
|
||||
function scrollPrevTeam() {
|
||||
if (emblaTeam.canScrollPrev()) {
|
||||
emblaTeam.scrollPrev();
|
||||
} else {
|
||||
emblaTeam.scrollTo(document.querySelectorAll('#embla-meet-the-team .embla__slide').length - 1);
|
||||
}
|
||||
}
|
||||
|
||||
function scrollNextTeam() {
|
||||
if (emblaTeam.canScrollNext()) {
|
||||
emblaTeam.scrollNext();
|
||||
} else {
|
||||
emblaTeam.scrollTo(0);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -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,40 @@
|
||||
<div class="nintex-fw-container">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="nintex-headline">
|
||||
<span class="lang-en-US">What's New</span>
|
||||
<span class="lang-es">Qué hay de nuevo</span>
|
||||
<span class="lang-fr">Quoi de neuf</span>
|
||||
<span class="lang-de">Was ist neu</span>
|
||||
<span class="lang-en-GB">What's New</span>
|
||||
<span class="lang-nl">Wat is nieuw</span>
|
||||
<span class="lang-pt-BR">O que há de novo</span>
|
||||
</div>
|
||||
{% comment %} <div class="nintex-subheadline">
|
||||
<span class="lang-en-US">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-es">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-fr">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-de">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-en-GB">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-nl">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span class="lang-pt-BR">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
</div> {% endcomment %}
|
||||
</div>
|
||||
{% if courses.in_catalog.any? %}
|
||||
{% assign sorted_courses = courses.in_catalog | sort: "created_at" | reverse %}
|
||||
{% assign display_courses = 0 %}
|
||||
<div class="row">
|
||||
{% for course in sorted_courses %}
|
||||
{% if course.properties.is_new == true %}
|
||||
<div class="col-xs-12 col-sm-4 nintex-card-stretch">
|
||||
{% include "cards_course_nintex" with course %}
|
||||
{% assign display_courses = display_courses | plus: 1 %}
|
||||
</div>
|
||||
{% if display_courses == 3 %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,259 @@
|
||||
{% assign color = color | default: "#3d0456" %}
|
||||
{% assign text_en_US = text_en_US | default: "" %}
|
||||
{% assign text_es = text_es | default: "" %}
|
||||
{% assign text_fr = text_fr | default: "" %}
|
||||
{% assign text_de = text_de | default: "" %}
|
||||
{% assign text_en_GB = text_en_GB | default: "" %}
|
||||
{% assign text_nl = text_nl | default: "" %}
|
||||
{% assign text_pt_BR = text_pt_BR | default: "" %}
|
||||
{% assign button_text_en_US = button_text_en_US | default: "" %}
|
||||
{% assign button_text_es = button_text_es | default: "" %}
|
||||
{% assign button_text_fr = button_text_fr | default: "" %}
|
||||
{% assign button_text_de = button_text_de | default: "" %}
|
||||
{% assign button_text_en_GB = button_text_en_GB | default: "" %}
|
||||
{% assign button_text_nl = button_text_nl | default: "" %}
|
||||
{% assign button_text_pt_BR = button_text_pt_BR | default: "" %}
|
||||
{% assign button_link = button_link | default: "" %}
|
||||
{% assign subtitle_en_US = subtitle_en_US | default: "" %}
|
||||
{% assign subtitle_es = subtitle_es | default: "" %}
|
||||
{% assign subtitle_fr = subtitle_fr | default: "" %}
|
||||
{% assign subtitle_de = subtitle_de | default: "" %}
|
||||
{% assign subtitle_en_GB = subtitle_en_GB | default: "" %}
|
||||
{% assign subtitle_nl = subtitle_nl | default: "" %}
|
||||
{% assign subtitle_pt_BR = subtitle_pt_BR | default: "" %}
|
||||
{% assign text_color = text_color | default: "white" %}
|
||||
<div class="nintex-homepage-hero">
|
||||
<div class="nintex-header-animation">
|
||||
<div class="nintex-lines-animation">
|
||||
<svg viewBox="0 0 5392 393" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M1.09229 380.193C256.031 398.471 485.518 390.369 880.247 185.382C1106.65 67.8087 1461.65 -152.288 2122.03 187.076C2244.01 249.758 2521.84 361.57 2696.34 380.205M2696 380.193C2950.94 398.471 3180.43 390.369 3575.15 185.382C3801.56 67.8087 4156.56 -152.288 4816.94 187.076C4938.92 249.758 5216.75 361.57 5391.24 380.205"
|
||||
stroke="red" stroke-width="5.5" stroke-miterlimit="10"></path>
|
||||
</svg>
|
||||
<svg viewBox="0 0 5392 393" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M1.09229 380.193C256.031 398.471 485.518 390.369 880.247 185.382C1106.65 67.8087 1461.65 -152.288 2122.03 187.076C2244.01 249.758 2521.84 361.57 2696.34 380.205M2696 380.193C2950.94 398.471 3180.43 390.369 3575.15 185.382C3801.56 67.8087 4156.56 -152.288 4816.94 187.076C4938.92 249.758 5216.75 361.57 5391.24 380.205"
|
||||
stroke="red" stroke-width="5.5" stroke-miterlimit="10"></path>
|
||||
</svg>
|
||||
<svg viewBox="0 0 5392 393" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M1.09229 380.193C256.031 398.471 485.518 390.369 880.247 185.382C1106.65 67.8087 1461.65 -152.288 2122.03 187.076C2244.01 249.758 2521.84 361.57 2696.34 380.205M2696 380.193C2950.94 398.471 3180.43 390.369 3575.15 185.382C3801.56 67.8087 4156.56 -152.288 4816.94 187.076C4938.92 249.758 5216.75 361.57 5391.24 380.205"
|
||||
stroke="red" stroke-width="5.5" stroke-miterlimit="10"></path>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<div class="nintex-orbs-animation-wrapper nintex-container">
|
||||
<div class="nintex-orbs-animation">
|
||||
<div class="nintex-orbs-animation__orb"></div>
|
||||
<div class="nintex-orbs-animation__orb"></div>
|
||||
<div class="nintex-orbs-animation__orb"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nintex-header-gradient"></div>
|
||||
<div class="header-content">
|
||||
<h1>
|
||||
<span class="lang-en-US">{{ text_en_US }}</span>
|
||||
<span class="lang-es">{{ text_es }}</span>
|
||||
<span class="lang-fr">{{ text_fr }}</span>
|
||||
<span class="lang-de">{{ text_de }}</span>
|
||||
<span class="lang-en-GB">{{ text_en_GB }}</span>
|
||||
<span class="lang-nl">{{ text_nl }}</span>
|
||||
<span class="lang-pt-BR">{{ text_pt_BR }}</span>
|
||||
</h1>
|
||||
{% if subtitle_en_US != "" %}
|
||||
<p class="nintex-hero-subtitle">
|
||||
<span class="lang-en-US">{{ subtitle_en_US }}</span>
|
||||
<span class="lang-es">{{ subtitle_es }}</span>
|
||||
<span class="lang-fr">{{ subtitle_fr }}</span>
|
||||
<span class="lang-de">{{ subtitle_de }}</span>
|
||||
<span class="lang-en-GB">{{ subtitle_en_GB }}</span>
|
||||
<span class="lang-nl">{{ subtitle_nl }}</span>
|
||||
<span class="lang-pt-BR">{{ subtitle_pt_BR }}</span>
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if button_text_en_US != "" %}
|
||||
<a href="{{ button_link }}" target="_blank" class="nintex-hero-button">
|
||||
<span class="lang-en-US">{{ button_text_en_US }}</span>
|
||||
<span class="lang-es">{{ button_text_es }}</span>
|
||||
<span class="lang-fr">{{ button_text_fr }}</span>
|
||||
<span class="lang-de">{{ button_text_de }}</span>
|
||||
<span class="lang-en-GB">{{ button_text_en_GB }}</span>
|
||||
<span class="lang-nl">{{ button_text_nl }}</span>
|
||||
<span class="lang-pt-BR">{{ button_text_pt_BR }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<style>
|
||||
@keyframes nintex-wave {
|
||||
0% {
|
||||
transform: translateX(0)
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(-50%)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nintex-wave-reverse {
|
||||
0% {
|
||||
transform: translateX(-50%)
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floating {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(10%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.nintex-homepage-hero {
|
||||
background-color: {{ color }};
|
||||
color: {{ text_color }};
|
||||
height: 400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nintex-header-animation {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.nintex-lines-animation {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.nintex-lines-animation svg {
|
||||
opacity: .2;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 400%;
|
||||
}
|
||||
|
||||
.nintex-lines-animation svg:nth-child(1) {
|
||||
animation: nintex-wave 28s linear infinite;
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
.nintex-lines-animation svg:nth-child(2) {
|
||||
animation: nintex-wave-reverse 38s linear infinite;
|
||||
top: -40px;
|
||||
}
|
||||
|
||||
.nintex-lines-animation svg:nth-child(3) {
|
||||
animation: nintex-wave 48s linear infinite;
|
||||
top: -20px;
|
||||
}
|
||||
|
||||
.nintex-lines-animation svg path {
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.nintex-lines-animation svg {
|
||||
width: 200%;
|
||||
}
|
||||
}
|
||||
|
||||
.nintex-orbs-animation-wrapper {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
top: 0;
|
||||
translate: 50% 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.nintex-orbs-animation {
|
||||
aspect-ratio: 1 / 1;
|
||||
height: 100%;
|
||||
max-height: 684px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 28%;
|
||||
top: -20px;
|
||||
}
|
||||
.nintex-orbs-animation__orb {
|
||||
animation: floating 7s ease 0s infinite;
|
||||
height: 50%;
|
||||
min-height: 345px;
|
||||
min-width: 345px;
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
background: radial-gradient(50% 50% at 50% 50%, rgba(var(--orb-rgb), var(--orb-alpha)) 0, rgba(var(--orb-rgb), calc(var(--orb-alpha) * .987)) 8.1%, rgba(var(--orb-rgb), calc(var(--orb-alpha) * .951)) 15.5%, rgba(var(--orb-rgb), calc(var(--orb-alpha) * .55)) 47.1%, rgba(var(--orb-rgb), calc(var(--orb-alpha) * .45)) 52.9%, rgba(var(--orb-rgb), calc(var(--orb-alpha) * .049)) 84.5%, rgba(var(--orb-rgb), calc(var(--orb-alpha) * .013)) 91.9%, rgba(var(--orb-rgb), 0) 100%);
|
||||
|
||||
}
|
||||
.nintex-orbs-animation__orb:nth-of-type(1){
|
||||
--orb-rgb: 132, 57, 166;
|
||||
--orb-alpha: 0.9;
|
||||
left: -100px;
|
||||
top: -75px;
|
||||
}
|
||||
.nintex-orbs-animation__orb:nth-of-type(2){
|
||||
--orb-rgb: 255, 109, 0;
|
||||
--orb-alpha: 0.7;
|
||||
animation-delay:1s;
|
||||
left: 100px;
|
||||
top: 50px;
|
||||
|
||||
}
|
||||
.nintex-orbs-animation__orb:nth-of-type(3){
|
||||
--orb-alpha: 0.7;
|
||||
--orb-rgb: 237, 40, 145;
|
||||
animation-delay:2s;
|
||||
left: 50px;
|
||||
top: -100px;
|
||||
}
|
||||
|
||||
.nintex-header-gradient {
|
||||
background: linear-gradient(90deg, {{ color }}, {{ color }} 50%, rgba(61, 4, 86, 0));
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 50%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nintex-hero-button {
|
||||
background-color: {{ text_color }};
|
||||
color: {{ color }};
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
width: fit-content;
|
||||
margin: 50px auto 0 auto;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.nintex-hero-button:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.nintex-hero-subtitle{
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,93 @@
|
||||
{% assign text_color = text_color | default: "white" %}
|
||||
{% assign verticalPadding = verticalPadding | default: "10px 4% 20px" %}
|
||||
<div class="nintex-quicklinks-container" style="padding: {{ verticalPadding }};">
|
||||
<div class="nintex-quicklinks-container-item">
|
||||
<a href="https://community.nintex.com/p/content_portal">
|
||||
<span class="lang-en-US">Nintex Customer Content Portal</span>
|
||||
<span class="lang-es">Portal de cliente de Nintex</span>
|
||||
<span class="lang-fr">Portail de client Nintex</span>
|
||||
<span class="lang-de">Nintex Kundeninhaltsportal</span>
|
||||
<span class="lang-en-GB">Nintex Customer Content Portal</span>
|
||||
<span class="lang-nl">Nintex Klantinhoudsportal</span>
|
||||
<span class="lang-pt-BR">Portal do cliente da Nintex</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="nintex-quicklinks-container-item">
|
||||
<a href="https://community.nintex.com/">
|
||||
<span class="lang-en-US">Nintex Community</span>
|
||||
<span class="lang-es">Comunidad de Nintex</span>
|
||||
<span class="lang-fr">Communauté Nintex</span>
|
||||
<span class="lang-de">Nintex Community</span>
|
||||
<span class="lang-en-GB">Nintex Community</span>
|
||||
<span class="lang-nl">Nintex Community</span>
|
||||
<span class="lang-pt-BR">Comunidade Nintex</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="nintex-quicklinks-container-item">
|
||||
<a href="https://help.nintex.com/">
|
||||
<span class="lang-en-US">Nintex Help</span>
|
||||
<span class="lang-es">Ayuda de Nintex</span>
|
||||
<span class="lang-fr">Aide de Nintex</span>
|
||||
<span class="lang-de">Nintex Hilfe</span>
|
||||
<span class="lang-en-GB">Nintex Help</span>
|
||||
<span class="lang-nl">Nintex Help</span>
|
||||
<span class="lang-pt-BR">Ajuda da Nintex</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="nintex-quicklinks-container-item">
|
||||
<a href="https://gallery.nintex.com/">
|
||||
<span class="lang-en-US">Nintex Gallery</span>
|
||||
<span class="lang-es">Galería de Nintex</span>
|
||||
<span class="lang-fr">Galerie Nintex</span>
|
||||
<span class="lang-de">Nintex Galerie</span>
|
||||
<span class="lang-en-GB">Nintex Gallery</span>
|
||||
<span class="lang-nl">Nintex Galerij</span>
|
||||
<span class="lang-pt-BR">Galeria da Nintex</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.nintex-quicklinks-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: {{ color }};
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.nintex-quicklinks-container-item a {
|
||||
color: {{ text_color }};
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.nintex-quicklinks-container-item a:after {
|
||||
background-color: {{ text_color }};
|
||||
bottom: -2px;
|
||||
content: "";
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
transition: width 0.3s ease
|
||||
, right 0.3s ease;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.nintex-quicklinks-container {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.nintex-quicklinks-container-item a:hover:after {
|
||||
width: 100%;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,369 @@
|
||||
{% assign isFormCompleted = current_person.properties.is_feedback_form_completed %}
|
||||
|
||||
|
||||
<div id="form-overlay" class="overlay">
|
||||
<div class="overlay-content">
|
||||
<div class="form-header">
|
||||
<span class="close-button" onclick="closeForm()">×</span>
|
||||
<div class="pop-up-image-container">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="pop-up-logo-image"
|
||||
src="{{ current_school.logo_url }}" />
|
||||
</div>
|
||||
<h2>Tell us more!</h2>
|
||||
<p>Providing more information about your experience can unlock more possibilities with Nintex University.</p>
|
||||
</div>
|
||||
<form id="feedback-form">
|
||||
<div class="form-input-wrapper">
|
||||
<label for="email">Email*</label>
|
||||
<input type="email" id="email" name="email" value="{{current_person.email}}" required>
|
||||
</div>
|
||||
<div class="form-input-wrapper">
|
||||
<label for="role">What best describes your role?*</label>
|
||||
<input type="role" id="role" name="role" required>
|
||||
</div>
|
||||
|
||||
<div class="form-input-wrapper">
|
||||
<label for="product">Which Nintex product(s) do you work with?*</label>
|
||||
<select id="product" name="product[]" multiple required size="3" required>
|
||||
<option value="">Please Select</option>
|
||||
<option value="nintex_apps">Nintex Apps</option>
|
||||
<option value="nintex_apps_for_salesforce">Nintex Apps for Salesforce</option>
|
||||
<option value="nintex_automation_k2">Nintex Automation K2</option>
|
||||
<option value="nintex_docgen">Nintex DocGen</option>
|
||||
<option value="nintex_docgen_for_salesforce">Nintex DocGen for Salesforce</option>
|
||||
<option value="nintex_docgen_for_salesforce_ge">Nintex DocGen for Salesforce GE</option>
|
||||
<option value="nintex_esign">Nintex eSign</option>
|
||||
<option value="nintex_for_office_365">Nintex for Office 365</option>
|
||||
<option value="nintex_for_sharepoint">Nintex for SharePoint</option>
|
||||
<option value="nintex_k2_cloud">Nintex K2 Cloud</option>
|
||||
<option value="nintex_partner_sales">Nintex Partner Sales</option>
|
||||
<option value="nintex_process_manager">Nintex Process Manager</option>
|
||||
<option value="nintex_rpa">Nintex RPA</option>
|
||||
<option value="nintex_rpa_le">Nintex RPA LE</option>
|
||||
<option value="nintex_solutions">Nintex Solutions</option>
|
||||
<option value="nintex_workflow">Nintex Workflow</option>
|
||||
<option value="nintex_workflow_ge">Nintex Workflow GE</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-input-wrapper">
|
||||
<label>Rate your overall experience:*</label>
|
||||
<div class="star-rating">
|
||||
<input type="radio" id="star5" name="rating" value="5" required><label for="star5">★</label>
|
||||
<input type="radio" id="star4" name="rating" value="4"><label for="star4">★</label>
|
||||
<input type="radio" id="star3" name="rating" value="3"><label for="star3">★</label>
|
||||
<input type="radio" id="star2" name="rating" value="2"><label for="star2">★</label>
|
||||
<input type="radio" id="star1" name="rating" value="1"><label for="star1">★</label>
|
||||
</div>
|
||||
<p class="rating-text">Your rating: <span id="rating-value">0</span></p>
|
||||
</div>
|
||||
|
||||
<div class="form-input-wrapper">
|
||||
<label>Would you recommend Nintex University to help others learn and adopt Nintex products?*</label>
|
||||
<div class="radio-group">
|
||||
<div class="radio-container">
|
||||
<input type="radio" id="recommend-yes" name="recommend" value="yes" required>
|
||||
<label for="recommend-yes">Yes</label>
|
||||
</div>
|
||||
|
||||
<div class="radio-container">
|
||||
<input type="radio" id="recommend-no" name="recommend" value="no">
|
||||
<label for="recommend-no">No</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-input-wrapper">
|
||||
<label for="comments">Additional comments:</label>
|
||||
<textarea id="comments" name="comments" rows="3" placeholder="Share any thoughts..."></textarea>
|
||||
</div>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="open-form" onclick="openForm()"><i class="fas fa-comments-alt"></i></button>
|
||||
|
||||
<style>
|
||||
body.form-open .open-form {
|
||||
display: none;
|
||||
}
|
||||
.pop-up-logo-image {
|
||||
height: 30px;
|
||||
}
|
||||
.open-form {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 1111;
|
||||
margin: 30px;
|
||||
background: #2A348A;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 100px;
|
||||
font-weight: 600;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.8);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
border-radius: 13px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.form-header {
|
||||
background: #3D0456;
|
||||
color: #fff;
|
||||
padding: 25px 30px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
.pop-up-image-container {
|
||||
|
||||
}
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.overlay form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 25px 30px;
|
||||
}
|
||||
.choices__item, .choices__list--dropdown .choices__list {
|
||||
color: #000;
|
||||
}
|
||||
.choices__list--multiple .choices__item {
|
||||
height: fit-content;
|
||||
background-color: #3D0456 !important;
|
||||
border: 1px solid #3D0456 !important;
|
||||
}
|
||||
.choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button {
|
||||
border-left: none !important;
|
||||
color: white !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.overlay label {
|
||||
font-weight: 500;
|
||||
}
|
||||
.overlay input[type="email"],.overlay input[type="role"],.overlay select,.overlay textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-top: 5px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 14px;
|
||||
}
|
||||
.overlay
|
||||
input[type="email"]:focus,.overlay select:focus,
|
||||
.overlay textarea:focus {
|
||||
outline: none;
|
||||
border-color: #3D0456;
|
||||
box-shadow: 0 0 5px rgba(255,165,0,0.5);
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
margin-top: 25px;
|
||||
padding: 12px;
|
||||
background-color:#3D0456;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
button[type="submit"]:hover {
|
||||
background-color: var(--nintex--color--pink-300);
|
||||
}
|
||||
|
||||
.star-rating {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.star-rating input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.star-rating label {
|
||||
font-size: 50px;
|
||||
color: lightgray;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
width: fit-content;
|
||||
text-align: center;
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rating-text {
|
||||
margin: 0;
|
||||
color: gray;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.star-rating input:checked ~ label,
|
||||
.star-rating label:hover,
|
||||
.star-rating label:hover ~ label {
|
||||
color: gold;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.radio-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.form-input-wrapper {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
.choices__inner, .choices__input {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
input[type='radio'] {
|
||||
accent-color: #000;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
|
||||
|
||||
<script>
|
||||
const multiSelect = new Choices('#product', {
|
||||
removeItemButton: true,
|
||||
searchEnabled: false,
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function openForm() {
|
||||
document.getElementById("form-overlay").style.display = "flex";
|
||||
document.body.classList.add("form-open");
|
||||
}
|
||||
|
||||
function closeForm() {
|
||||
document.getElementById("form-overlay").style.display = "none";
|
||||
document.body.classList.remove("form-open");
|
||||
}
|
||||
|
||||
function triggerForm() {
|
||||
const isFormCompleted = '{{current_person.properties.is_feedback_form_completed}}';
|
||||
|
||||
console.log(isFormCompleted);
|
||||
|
||||
if (isFormCompleted === 'false' || isFormCompleted === '' || isFormCompleted === 'missing property: is_feedback_form_completed') {
|
||||
openForm();
|
||||
}
|
||||
}
|
||||
|
||||
addEventListener("DOMContentLoaded", (event) => {
|
||||
triggerForm();
|
||||
})
|
||||
|
||||
|
||||
const stars = document.querySelectorAll('.star-rating input');
|
||||
const ratingValue = document.getElementById('rating-value');
|
||||
|
||||
stars.forEach(star => {
|
||||
star.addEventListener('change', () => {
|
||||
ratingValue.textContent = star.value;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.getElementById("feedback-form").addEventListener("submit", async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const form = e.target;
|
||||
const formData = new FormData(form);
|
||||
|
||||
|
||||
const rating = formData.get("rating") ? parseInt(formData.get("rating")) : 0;
|
||||
const product = formData.getAll("product[]").join(", ");
|
||||
|
||||
const payload1 = {
|
||||
startData: {
|
||||
se_email: formData.get("email") || "",
|
||||
se_role: formData.get("role") || "",
|
||||
se_nintexproduct: product,
|
||||
se_overallexperience: rating,
|
||||
se_recommendnintex: formData.get("recommend") || "",
|
||||
se_additionalcomments: formData.get("comments") || "",
|
||||
se_id: "{{current_person.id}}"
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const payload2 = {
|
||||
learner_id: "{{current_person.id}}",
|
||||
learner_name: "{{current_person.name}}",
|
||||
learner_email: "{{current_person.email}}",
|
||||
form_completed: true
|
||||
};
|
||||
|
||||
try {
|
||||
|
||||
const response1 = await fetch("https://ninfotech.workflowcloud.com/api/v1/workflow/published/0bb4e2fd-5d7d-40d0-9ab2-385ee8b4fa5a/instances?token=722JxH1yegfjbfEYMstWX2JWUKdK7ueYZB93gPYM6OApZ3Pb2ri94r58xyyO4BPZc3vY3B", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload1)
|
||||
});
|
||||
|
||||
|
||||
|
||||
const response2 = await fetch("https://webhooks.workato.com/webhooks/rest/b60a3546-ce72-457f-bfbb-197803be77b8/mark-form-as-completed", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload2)
|
||||
});
|
||||
|
||||
|
||||
form.reset();
|
||||
closeForm();
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,7 @@
|
||||
{% if date %}
|
||||
{% capture date_format %}{% t date.formats.short_humanized %}{% endcapture %}
|
||||
{% capture formatted_date %}{{ date | date: date_format }}{% endcapture %}
|
||||
<time class="np-product-expiration-date" datetime="{{ date }}">
|
||||
{% t .label, date: formatted_date %}
|
||||
</time>
|
||||
{% endif %}
|
||||
@ -0,0 +1,25 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="np-text-title np-course-outline-title">
|
||||
{% t .header.course %}
|
||||
</div>
|
||||
<div class="np-course-outline-content">
|
||||
<ol class="np-course-outline-content-section">
|
||||
{% for section in course.sections %}
|
||||
<li class="np-course-outline-content-section-list">
|
||||
<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<ol class="np-course-outline-content-activity">
|
||||
{% for activity in section.activities %}
|
||||
<li class="np-course-outline-content-activity-list">
|
||||
<i class="far fa-circle np-course-outline-content-activity-icon"></i>
|
||||
{% include "course_activity_locked" %}
|
||||
<div class="np-course-outline-content-activity-list-bar"></div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,82 @@
|
||||
<div class="np-card-container np-card-padding np-product-outline-container">
|
||||
<div class="np-product-outline-base-container">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ item.name }}"
|
||||
class="np-product-outline-course-image"
|
||||
>
|
||||
<div class="np-product-outline-content">
|
||||
<div class="np-product-outline-name np-top-title">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
|
||||
<p class="np-product-outline-caption">
|
||||
{% if item.instructors.any? %}
|
||||
{{ item.instructor_names }}
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
<div class="np-product-outline-base-bottom">
|
||||
<div class="np-product-badge np-product-badge-catalog np-product-badge-outline">
|
||||
<i class="far fa-graduation-cap np-product-badge-icon np-product-badge-catalog-icon"></i>
|
||||
<h3 class="np-product-badge-name np-product-badge-catalog-name">{% t shared.product_types.course %}</h3>
|
||||
</div>
|
||||
<button
|
||||
class="np-button np-product-outline-details-button"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-expand-{{ id }}"
|
||||
data-toggle-outside
|
||||
>
|
||||
<span class="np-expand-{{ id }}">{% t shared.buttons.expand %}<i class="far fa-chevron-down np-expand-{{ id }}"></i></span>
|
||||
<span class="np-expand-{{ id }} np-hidden">{% t shared.buttons.collapse %} <i class="far fa-chevron-up np-hidden np-expand-{{ id }}"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-expand-{{ id }} np-hidden">
|
||||
<div class="np-card-content-divider np-product-outline-spacer">
|
||||
<h3 class="np-product-outline-section-headline">{% t .about %}</h3>
|
||||
<p class="np-product-outline-section-content">{{ item.full_description }}</p>
|
||||
</div>
|
||||
{% if item.categories.any? %}
|
||||
<div class="np-card-content-divider np-product-outline-spacer">
|
||||
<h3 class="np-product-outline-section-headline">
|
||||
{% t .categories %}
|
||||
</h3>
|
||||
<div class="np-flex">
|
||||
{% for category in item.categories %}
|
||||
<div class="np-content-categories-content-item">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if item.instructors.any? %}
|
||||
<div class="np-card-content-divider np-product-outline-spacer">
|
||||
<h3 class="np-product-outline-section-headline">
|
||||
{% t shared.instructors %}
|
||||
</h3>
|
||||
<div class="np-content-instructors-content row">
|
||||
{% for instructor in item.instructors %}
|
||||
<div class="np-content-instructors-content-item col-xs-12 col-lg">
|
||||
<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>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,49 @@
|
||||
<div class="np-card-container np-card-padding np-product-outline-container">
|
||||
<div class="np-product-outline-content">
|
||||
{% if item.available? %}
|
||||
{% if item.location %}
|
||||
<span class="np-product-location">{{ item.location }} |</span>
|
||||
{% endif %}
|
||||
<span class="np-product-date">{{ item.time }} {{ item.time_zone }}, {{ item.date }}</span>
|
||||
<a class="np-product-outline-name np-top-title" href="{{ item.preview_path }}">{{ item.name }}</a>
|
||||
{% else %}
|
||||
<span class="np-product-outline-name np-top-title">{{ item.name }}</span>
|
||||
{% endif %}
|
||||
<div class="np-learning-path-outline-caption">{{ item.caption }}</div>
|
||||
<div class="np-product-outline-base-bottom np-product-ilt-bottom">
|
||||
<div class="np-product-badge np-product-badge-catalog np-product-badge-outline">
|
||||
<i class="far {{ item.icon }} np-product-badge-icon np-product-badge-catalog-icon"></i>
|
||||
<h3 class="np-product-badge-name np-product-badge-catalog-name">{{ item.formatted_type }}</h3>
|
||||
</div>
|
||||
<button
|
||||
class="np-button np-product-outline-details-button"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-expand-{{ id }}"
|
||||
data-toggle-outside
|
||||
>
|
||||
<span class="np-expand-{{ id }}">{% t shared.buttons.expand %}<i class="far fa-chevron-down np-expand-{{ id }}"></i></span>
|
||||
<span class="np-expand-{{ id }} np-hidden">{% t shared.buttons.collapse %} <i class="far fa-chevron-up np-hidden np-expand-{{ id }}"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="np-expand-{{ id }} np-hidden">
|
||||
<div class="np-card-content-divider np-product-outline-spacer">
|
||||
<h3 class="np-product-outline-section-headline">{% t .about %}</h3>
|
||||
<p class="np-product-outline-section-content">{{ item.description }}</p>
|
||||
</div>
|
||||
{% if item.instructors %}
|
||||
<div class="np-card-content-divider np-product-outline-spacer">
|
||||
<h3 class="np-product-outline-section-headline">
|
||||
{% t shared.instructors %}
|
||||
</h3>
|
||||
<div class="np-content-instructors-content row">
|
||||
<div class="np-content-instructors-content-item col-xs-12 col-lg">
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ item.instructors }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,65 @@
|
||||
<div class="np-card-container np-card-padding np-product-outline-container">
|
||||
<div class="np-product-outline-base-container">
|
||||
<img
|
||||
src="{{ item.image_url }}"
|
||||
alt="{{ item.name }}"
|
||||
class="np-product-outline-course-image"
|
||||
>
|
||||
<div class="np-product-outline-content">
|
||||
<div class="np-product-outline-name np-top-title">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
|
||||
<p class="np-product-outline-caption">
|
||||
{% if item.instructor_names %}
|
||||
{{ item.instructor_names }}
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
<div class="np-product-outline-base-bottom">
|
||||
<div class="np-product-badge np-product-badge-catalog np-product-badge-outline">
|
||||
<i class="far fa-road np-product-badge-icon np-product-badge-catalog-icon"></i>
|
||||
<h3 class="np-product-badge-name np-product-badge-catalog-name">{% t shared.product_types.learning_path %}</h3>
|
||||
</div>
|
||||
<button
|
||||
class="np-button np-product-outline-details-button"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-expand-{{ id }}"
|
||||
data-toggle-outside
|
||||
>
|
||||
<span class="np-expand-{{ id }}">{% t shared.buttons.expand %}<i class="far fa-chevron-down np-expand-{{ id }}"></i></span>
|
||||
<span class="np-expand-{{ id }} np-hidden">{% t shared.buttons.collapse %} <i class="far fa-chevron-up np-hidden np-expand-{{ id }}"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-expand-{{ id }} np-hidden">
|
||||
<div class="np-card-content-divider np-product-outline-spacer">
|
||||
<h3 class="np-product-outline-section-headline">{% t .about %}</h3>
|
||||
{{ item.description }}
|
||||
</div>
|
||||
<h3 class="np-product-outline-section-headline">{% t .content %}</h3>
|
||||
{% for learning_path_item in item.learning_path_items %}
|
||||
<div class="np-product-outline-lp-product-container">
|
||||
<div class="np-product-outline-lp-product-info">
|
||||
{% if learning_path_item.course? %}
|
||||
<h3 class="np-product-outline-name np-top-title">{{learning_path_item.name}}</h3>
|
||||
<p class="np-product-outline-caption">{{learning_path_item.instructor_names}}</p>
|
||||
{% elsif learning_path_item.training_event? %}
|
||||
{% if learning_path_item.available? %}
|
||||
<a class="np-product-outline-name np-top-title" href="{{ learning_path_item.preview_path }}">{{learning_path_item.name}}</a>
|
||||
<span class="np-product-date">{{ learning_path_item.time }} {{ learning_path_item.time_zone }}, {{ learning_path_item.date }}</span>
|
||||
{% else %}
|
||||
<span class="np-product-outline-name np-top-title">{{learning_path_item.name}}</span>
|
||||
<span class="np-product-date">{{ learning_path_item.caption }}</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-product-badge np-product-badge-catalog">
|
||||
<i class="far {{ learning_path_item.icon }} np-product-badge-icon np-product-badge-catalog-icon"></i>
|
||||
<h3 class="np-product-badge-name np-product-badge-catalog-name">{{ learning_path_item.formatted_type }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="np-top-cta-price-content">
|
||||
<div>
|
||||
<span class="np-catalog-card-price np-commerce-outline-description-price">{{ product.formatted_price }}</span>
|
||||
<span class="np-commerce-outline-description-access">
|
||||
{{ product.formatted_access_period}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-top-cta-container">
|
||||
{% commerce_add_to_cart product %}
|
||||
{% commerce_buy_more_access product %}
|
||||
</div>
|
||||
@ -0,0 +1,4 @@
|
||||
<div class="progress-bar-wrapper" style="background-color: {{ progress_background_color }};">
|
||||
<div class="progress-bar-completed" style="background-color: {{ completed_color }}; width: {{ completed | divided_by: total | times: 100 }}%"></div>
|
||||
<div class="progress-bar-in-progress" style="background-color: {{ in_progress_color }}; width: {{ in_progress | divided_by: total | times: 100 }}%; left: {{ completed | divided_by: total | times: 100 }}%"></div>
|
||||
</div>
|
||||
@ -0,0 +1,145 @@
|
||||
<div class="progress-circles-container">
|
||||
<!-- Completed Circle -->
|
||||
<div class="progress-ring-wrapper">
|
||||
<div class="circle-container">
|
||||
<svg
|
||||
class="progress-ring"
|
||||
width="{{ size }}"
|
||||
height="{{ size }}">
|
||||
<circle
|
||||
class="circle circle-bg"
|
||||
stroke="{{ progress_background_color }}"
|
||||
stroke-width="10"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60" />
|
||||
<circle
|
||||
class="circle circle-complete {{ name }}-complete"
|
||||
stroke="{{ completed_color }}"
|
||||
stroke-width="10"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60" />
|
||||
</svg>
|
||||
<div class="circle-number">{{ completed }}</div>
|
||||
</div>
|
||||
<div class="circle-label">
|
||||
<span class="lang-en-US">Completed</span>
|
||||
<span class="lang-es">Completado</span>
|
||||
<span class="lang-fr">Terminé</span>
|
||||
<span class="lang-de">Abgeschlossen</span>
|
||||
<span class="lang-en-GB">Completed</span>
|
||||
<span class="lang-nl">Voltooid</span>
|
||||
<span class="lang-pt-BR">Completo</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- In Progress Circle -->
|
||||
<div class="progress-ring-wrapper">
|
||||
<div class="circle-container">
|
||||
<svg
|
||||
class="progress-ring"
|
||||
width="{{ size }}"
|
||||
height="{{ size }}">
|
||||
<circle
|
||||
class="circle circle-bg"
|
||||
stroke="{{ progress_background_color }}"
|
||||
stroke-width="10"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60" />
|
||||
<circle
|
||||
class="circle circle-in-progress {{ name }}-in-progress"
|
||||
stroke="{{ in_progress_color }}"
|
||||
stroke-width="10"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60" />
|
||||
</svg>
|
||||
<div class="circle-number">{{ in_progress }}</div>
|
||||
</div>
|
||||
<div class="circle-label">
|
||||
<span class="lang-en-US">In Progress</span>
|
||||
<span class="lang-es">En Progreso</span>
|
||||
<span class="lang-fr">En Cours</span>
|
||||
<span class="lang-de">In Bearbeitung</span>
|
||||
<span class="lang-en-GB">In Progress</span>
|
||||
<span class="lang-nl">In Progress</span>
|
||||
<span class="lang-pt-BR">Em Progresso</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.progress-circles-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.progress-ring-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.circle-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.progress-ring {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.circle-number {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: var(--nintex--color--text-primary);
|
||||
z-index: 1;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.circle-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
setCircleProgress(document.querySelector(".{{ name }}-complete"), '{{ completed | divided_by: total }}')
|
||||
setCircleProgress(document.querySelector(".{{ name }}-in-progress"), '{{ in_progress | divided_by: total }}')
|
||||
})
|
||||
|
||||
function setCircleProgress(circle, percent) {
|
||||
let radius = circle.r.baseVal.value;
|
||||
let circumference = radius * 2 * Math.PI;
|
||||
|
||||
circle.style.strokeDasharray = `${circumference} ${circumference}`;
|
||||
circle.style.strokeDashoffset = `${circumference}`;
|
||||
|
||||
function setProgress(percent) {
|
||||
circle.style.strokeDashoffset = circumference - (Number(percent) * circumference);
|
||||
}
|
||||
|
||||
setProgress(percent)
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,69 @@
|
||||
{% assign progress_background_color = 'var(--nintex--color--cyan-bluish-gray)' %}
|
||||
{% assign completed_color = '#3d0456' %}
|
||||
{% assign in_progress_color = '#8249a6' %}
|
||||
|
||||
<div class="progress-indicator-wrapper">
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% if type == "Courses" %}
|
||||
<span class="lang-en-US">Courses Progress</span>
|
||||
<span class="lang-es">Progreso de Cursos</span>
|
||||
<span class="lang-fr">Progression des cours</span>
|
||||
<span class="lang-de">Kurs-Fortschritt</span>
|
||||
<span class="lang-en-GB">Courses Progress</span>
|
||||
<span class="lang-nl">Cursus-voortgang</span>
|
||||
<span class="lang-pt-BR">Progresso de Cursos</span>
|
||||
{% endif %}
|
||||
{% if type == "Learning Paths" %}
|
||||
<span class="lang-en-US">Learning Paths Progress</span>
|
||||
<span class="lang-es">Progreso de Rutas de Aprendizaje</span>
|
||||
<span class="lang-fr">Progression des parcours</span>
|
||||
<span class="lang-de">Lernpfad-Fortschritt</span>
|
||||
<span class="lang-en-GB">Learning Paths Progress</span>
|
||||
<span class="lang-nl">Progressie van leerpaden</span>
|
||||
<span class="lang-pt-BR">Progresso de Rota de Aprendizagem</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="progress-card-wrapper">
|
||||
{% if toCount.any? %}
|
||||
{% assign countComplete = 0 %}
|
||||
{% assign countInProgress = 0 %}
|
||||
{% assign countNotStarted = 0 %}
|
||||
{% assign countTotal = 0 | times: 1.0 %}
|
||||
{% for course in toCount %}
|
||||
{% assign countTotal = countTotal | plus: 1 %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign countComplete = countComplete | plus: 1 %}
|
||||
{% endif %}
|
||||
{% if course.enrolled? and course.progress < 100 %}
|
||||
{% assign countInProgress = countInProgress | plus: 1 %}
|
||||
{% endif %}
|
||||
{% if course.progress == 0 %}
|
||||
{% assign countNotStarted = countNotStarted | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% assign class_name = type | downcase | replace: " ", "-" %}
|
||||
{%
|
||||
include "progress_circle"
|
||||
, completed: countComplete
|
||||
, in_progress: countInProgress
|
||||
, total: countTotal
|
||||
, size: "120"
|
||||
, completed_color: completed_color
|
||||
, in_progress_color: in_progress_color
|
||||
, progress_background_color: progress_background_color
|
||||
, name: class_name
|
||||
%}
|
||||
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state"
|
||||
, message: message %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,36 @@
|
||||
<section class="recommended-courses">
|
||||
<div class="text-wrapper">
|
||||
<div class="heading">Recommended Learning Paths</div>
|
||||
<div class="desc">Follow structured learning paths designed to take you from beginner to expert in your area</div>
|
||||
</div>
|
||||
<div class="np-max-width">
|
||||
<div class="courses-wrapper">
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
{% include 'cards_learning_path' %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
|
||||
.recommended-courses .heading {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
.recommended-courses .desc {
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 40px;
|
||||
color: #555;
|
||||
max-width: 800px;
|
||||
}
|
||||
.courses-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -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">
|
||||
<h2 class="np-search-zero-state-title">
|
||||
{% t .nothing_found %}
|
||||
</h2>
|
||||
<div class="np-search-zero-state-subtitle">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<div class="np-search-zero-state-image"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,105 @@
|
||||
<nav aria-label="subnavigation" class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% if link.label != "Events" %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
{% if link.label == "Home" %}
|
||||
<span class="lang-en-US">
|
||||
{{ link.label }}
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Inicio
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Accueil
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Startseite
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Home
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Startpagina
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Início
|
||||
</span>
|
||||
{% elsif link.label == "Catalog" %}
|
||||
<span class="lang-en-US">
|
||||
{{ link.label }}
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Catálogo
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Catalogue
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Katalog
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Catalog
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Catalogus
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Catálogo
|
||||
</span>
|
||||
{% elsif link.label == "Learning Paths" %}
|
||||
<span class="lang-en-US">
|
||||
{{ link.label }}
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Rutas de aprendizaje
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Chemins d'apprentissage
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Lernpfade
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Learning Paths
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Leerpaden
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Caminhos de aprendizagem
|
||||
</span>
|
||||
{% elsif link.label == "Dashboard" %}
|
||||
<span class="lang-en-US">
|
||||
{{ link.label }}
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Panel de control
|
||||
</span>
|
||||
<span class="lang-fr">
|
||||
Tableau de bord
|
||||
</span>
|
||||
<span class="lang-de">
|
||||
Dashboard
|
||||
</span>
|
||||
<span class="lang-en-GB">
|
||||
Dashboard
|
||||
</span>
|
||||
<span class="lang-nl">
|
||||
Dashboard
|
||||
</span>
|
||||
<span class="lang-pt-BR">
|
||||
Painel de controle
|
||||
</span>
|
||||
{% else %}
|
||||
{{ link.label }}
|
||||
{% endif %}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
@ -0,0 +1,11 @@
|
||||
<div class="team-member-card">
|
||||
<div class="team-member-card-image" style="background-image: url({{ image_url }});"></div>
|
||||
<div class="team-member-card-content">
|
||||
<div class="team-member-card-name">
|
||||
{{ name }}
|
||||
</div>
|
||||
<div class="team-member-card-title">
|
||||
{{ title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,42 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
{% include "training_session_header" %}
|
||||
</div>
|
||||
<div class="row np-training-session-row">
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<div class="np-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" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content-divider"></div>
|
||||
<div class="np-card-padding-large">
|
||||
{% include "training_session_description" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-4 np-grid-spacing">
|
||||
<div class="np-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>
|
||||
@ -0,0 +1,23 @@
|
||||
<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" %}
|
||||
{% 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,42 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
{% include "training_session_header" %}
|
||||
</div>
|
||||
<div class="row np-training-session-row">
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<div class="np-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" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content-divider"></div>
|
||||
<div class="np-card-padding-large">
|
||||
{% include "training_session_description" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-4 np-grid-spacing">
|
||||
<div class="np-training-session-container">
|
||||
<div class="np-training-session-sessions-title">
|
||||
{% t shared.more_sessions %}
|
||||
</div>
|
||||
{% if training_event.sessions.size > 0 %}
|
||||
{% include "training_event_preview_more_sessions" %}
|
||||
{% else %}
|
||||
<div class="np-training-session-zero-state">
|
||||
<img
|
||||
alt="{% t themes.default._training_event_desktop_view.empty %}"
|
||||
class="np-zero-state-training-sessions"
|
||||
/>
|
||||
<div class="np-training-session-zero-state-text">
|
||||
{% t themes.default._training_event_desktop_view.empty %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,23 @@
|
||||
<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" %}
|
||||
{% include "training_session_description" %}
|
||||
</div>
|
||||
|
||||
{% if training_event.sessions.size > 0 %}
|
||||
<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_event_preview_more_sessions" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user