Updated Pipedrive's templates, mostly.

This commit is contained in:
Norm Rasmussen
2024-09-12 18:25:34 -04:00
parent 70b5d04b26
commit e78efae8aa
353 changed files with 5405 additions and 1769 deletions

Binary file not shown.

View File

@ -0,0 +1,17 @@
<form class="np-form" action="{{ form.options.action }}" method="post" id="mobile_edit_learner" novalidate>
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
{% form_authenticity_token %}
<div class="np-card np-account-form">
<div class="np-card-container np-card-padding">
{% render "account_form", form: form, version: "mobile" %}
</div>
</div>
<div class="np-card np-account-avatar">
<div class="np-card-container np-card-padding">
{% include "account_avatar", version: "mobile" %}
</div>
</div>
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
{% t shared.account.save %}
</button>
</form>

View File

@ -0,0 +1,70 @@
<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">
<h3 class="np-card-content-title">
{{ learning_path.name }}
</h3>
<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-button-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-button-background-color np-card-progress-bar">
</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>

View File

@ -0,0 +1,45 @@
<div class="np-card">
<div class="np-card-container">
<div class="np-card-content-training-event">
<h3 class="np-card-content-title">
{{ training_event.title }}
</h3>
<div class="np-card-content-subtitle">
{% t shared.event_types, key: training_event.event_type %}
</div>
<div class="np-card-training-session">
<span class="np-card-content-label">
{% t .next_session %}
</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-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 class="np-card-content np-card-content-vertical np-card-padding">
<div class="np-card-training-sessions">
<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>
<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>

View File

@ -1,12 +1,14 @@
{% assign categories_uuids = "" %}
{% assign categories_names = "" %}
{% for course in courses.in_catalog %}
{% if course.categories.size > 0 and course.ribbon != "VIDEO" and course.properties.featured == false %}
{% assign course_categories_ids = course.categories | map: 'id' | join: "|||" %}
{% assign course_categories_names = course.categories | map: 'name' | join: "|||" %}
{% assign categories_uuids = categories_uuids | append: course_categories_ids | append: "|||" %}
{% assign categories_names = categories_names | append: course_categories_names | append: "|||" %}
{% endif %}
{% if course.properties.course_language == lang %}
{% if course.categories.size > 0 and course.ribbon != "VIDEO" and course.properties.featured == false %}
{% assign course_categories_ids = course.categories | map: 'id' | join: "|||" %}
{% assign course_categories_names = course.categories | map: 'name' | join: "|||" %}
{% assign categories_uuids = categories_uuids | append: course_categories_ids | append: "|||" %}
{% assign categories_names = categories_names | append: course_categories_names | append: "|||" %}
{% endif %}
{%endif%}
{% endfor %}
{% assign categories_uuids = categories_uuids | split: "|||" | uniq %}
{% assign categories_names = categories_names | split: "|||" | uniq %}
@ -174,10 +176,12 @@
{% assign course_categories = course.categories | map: 'id' %}
{% if course.ribbon != "VIDEO" and course.properties.featured == false %}
{% for cat in course_categories %}
{% if course.properties.course_language == lang%}
{% if category_uuid contains cat %}
{% assign number_of_videos = number_of_videos | plus: 1 %}
{% include "cards_course" %}
{% endif %}
{%endif%}
{% endfor %}
{% endif %}
{% endfor %}
@ -221,10 +225,12 @@
{% assign any_course = false %}
<div class="courses-list row">
{% for course in courses.in_catalog %}
{% if course.properties.course_language == lang%}
{% if course.ribbon != "VIDEO" and course.properties.featured %}
{% include "cards_course" %}
{% assign any_course = true %}
{% endif %}
{%endif%}
{% endfor %}
</div>
</section>

View File

@ -0,0 +1,4 @@
<div class="col-xs-12 col-md-4 spacing-clear">
{% include "certificates_verification" %}
{% include "certificates_metadata" %}
</div>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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 %}

View File

@ -0,0 +1,10 @@
<h3 class="np-card-heading">
{% t .header %}
</h3>
<div class="np-flex">
{% for category in course.categories %}
<div class="np-content-categories-content-item">
{{ category.name }}
</div>
{% endfor %}
</div>

View File

@ -0,0 +1,6 @@
<h3 class="np-card-heading">
{% t .header, key: current_school.course_vocabulary %}
</h3>
<div class="np-card-text">
{{ course.full_description }}
</div>

View File

@ -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>

View File

@ -0,0 +1,28 @@
<h3 class="np-card-heading">
{% t .header %}
</h3>
<div class="np-flex-column">
{% for event in course.events %}
<div class="np-course-events-content-item">
<div class="np-course-events-content-date np-button-background-color">
<div class="np-course-events-content-month">
{{ event.sessions.first.abbreviated_month }}
</div>
<div class="np-course-events-content-day">
{{ event.sessions.first.day }}
</div>
</div>
<div class="np-course-events-content-details">
<div class="np-course-events-content-name">
{{ event.title }}
</div>
<div class="np-course-events-content-type np-text-light">
{% t shared.event_types, key: event.event_type %}
</div>
<div class="np-course-events-content-time np-button-color">
{{ event.sessions.first.time_period }} {{ event.sessions.first.time_zone }}
</div>
</div>
</div>
{% endfor %}
</div>

View File

@ -0,0 +1,16 @@
<div class="np-top-vocabulary np-text-title np-text-muted">
{{ current_school.course_vocabulary }}
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
</i>
</div>
<div class="np-top-title">
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
</a>
{{ course.name }}
</div>
<img
src="{{ course.image_url }}"
class="np-top-image np-hidden-desktop"
alt="{{ course.name }}"
/>

View File

@ -0,0 +1,22 @@
<h3 class="np-card-heading">
{% t .header %}
</h3>
<div class="np-flex">
{% for instructor in course.instructors %}
<div class="np-content-instructors-content-item">
<img
src="{{ instructor.avatar_url }}"
class="np-content-instructors-content-image"
alt="{{ instructor.name }}"
/>
<div class="np-content-instructors-content-description">
<div class="np-content-instructors-content-name">
{{ instructor.name }}
</div>
<div class="np-content-instructors-content-info np-text-light">
{{ instructor.title }}
</div>
</div>
</div>
{% endfor %}
</div>

View File

@ -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 %}

View File

@ -0,0 +1,46 @@
<div class="np-top-cta-progress-content">
<div class="np-top-cta-progress-title np-text-title">
{% t .header %}
</div>
<div class="np-progress-bar-container">
<div
style="width: {{ course.progress }}%"
class="np-button-background-color np-card-progress-bar">
</div>
</div>
<div class="np-top-cta-progress-text
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
">
{% t shared.progress, count: course.progress %}
</div>
</div>
{% if course.learner_can_retake? %}
<form action="{% route course_retake, id: course.id %}" method="POST">
{% form_authenticity_token %}
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
{% t .retake, key: current_school.course_vocabulary %}
</button>
</form>
{% else %}
<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 %}
{% t shared.enroll %}
{% elsif course.started? == false %}
{% t shared.course.start, key: current_school.course_vocabulary %}
{% elsif course.completed? %}
{% t shared.course.view, key: current_school.course_vocabulary %}
{% else %}
{% t shared.continue %}
{% endif %}
</a>
{% endif %}

View File

@ -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 %}

View File

@ -0,0 +1,33 @@
<div class="np-course-version-outdated-popup np-popup">
<div class="np-popup-positioner">
<i
class="np-course-version-outdated-popup-trigger fas fa-exclamation-circle"
data-toggle-class-on-target="np-popup-tooltip--visible"
data-toggle-target-parent=".np-popup-tooltip"
data-toggle-outside
></i>
<div
class="np-popup-tooltip"
role="tooltip"
aria-hidden="true"
>
<header class="np-popup-header">
<i class="np-popup-header-icon fas fa-exclamation-circle"></i>
<h3 class="np-popup-header-title">
{% t .title %}
</h3>
</header>
<div class="np-popup-body">
<h4>{% t .body.header %}</h4>
<p>{% t .body.content %}</p>
<a
class="np-popup-body-button"
href="{{ path }}"
>
{% t .body.button %}
</a>
</div>
<div class="np-popup-tail"></div>
</div>
</div>
</div>

View File

@ -0,0 +1,16 @@
{% if courses.in_catalog.any? %}
<div class="np-catalog-courses row row-with-thumbnails">
{% for course in courses.in_catalog %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% endfor %}
</div>
{% else %}
{% capture message %}
{% t shared.zero_state.courses.catalog,
key: current_school.course_vocabulary
%}
{% endcapture %}
{% include "courses_zero_state", message: message %}
{% endif %}

View File

@ -0,0 +1,16 @@
{% if courses.enrolled.any? %}
<div class="row row-with-thumbnails">
{% for course in courses.enrolled %}
<div class="{{ class }}">
{% include "cards_course" with course %}
</div>
{% endfor %}
</div>
{% else %}
{% capture message %}
{% t shared.zero_state.courses.index,
key: current_school.course_vocabulary
%}
{% endcapture %}
{% include "courses_zero_state", message: message %}
{% endif %}

View File

@ -0,0 +1,6 @@
<div class="np-dashboard-resources-container">
<div class="np-zero-state-text">
{{ message }}
</div>
<img class="np-zero-state-courses" alt="{{ message }}" />
</div>

View File

@ -0,0 +1,10 @@
<input
id={{value}}
name={{ name }}
value={{ value }}
type="checkbox"
{% if selected %} checked="checked" {% endif %}
/>
<label for={{value}}>
{{label}}
</label>

View File

@ -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>

View File

@ -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>

View File

@ -34,7 +34,7 @@
<a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/newsroom">Newsroom</a>
<a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/en/newsroom">Newsroom</a>
</div>
<div class="footer-links-section">
<p class="footer-links-section-title">
<span class="lang-en">Product</span>
@ -79,7 +79,7 @@
<a class="footer-links-section-item lang-fr" href="https://developers.pipedrive.com/">API</a>
<a class="footer-links-section-item lang-br" href="https://developers.pipedrive.com/">API</a>
</div>
<div class="footer-links-section">
<p class="footer-links-section-title">
<span class="lang-en">Discover</span>
@ -112,7 +112,7 @@
<a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/resources">Ressources</a>
<a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/resources">Ferramentas</a>
</div>
<div class="footer-links-section">
<p class="footer-links-section-title">
<span class="lang-en">Help Center</span>
@ -146,7 +146,7 @@
<a class="footer-links-section-item lang-br" href="https://support.pipedrive.com/pt/contact-us">Suporte</a>
</div>
</section>
<section class="footer-bottom">
<div class="footer-bottom-row">
<div class="footer-language-wrapper np-hidden-mobile">
@ -184,7 +184,7 @@
{% endif %}
</div>
</div>
<div class="footer-bottom-row body-s">
<div class="footer-bottom-links">
<p class="footer-bottom-link-text">
@ -211,7 +211,7 @@
<span class="lang-br">Política de privacidade</span>
</a>
</div>
<div class="footer-bottom-text">
<span class="lang-en">Pipedrive is a Web-based Sales CRM.</span>
<span class="lang-de">Pipedrive ist ein webbasiertes Vertriebs-CRM.</span>

View File

@ -21,12 +21,7 @@
<script>
// changing language
function changeLanguage(newLanguage, sendRequest=true) {
console.log(document.querySelector(".languages-dropdown"));
if(document.querySelector(".languages-dropdown")){
document.querySelector(".languages-dropdown").classList.remove('show');
}
document.querySelector(".languages-dropdown").classList.remove('show');
if (!window.current_language || window.current_language !== newLanguage) {
window.current_language = newLanguage
} else {
@ -64,56 +59,42 @@
// setup body class based on property or cookies
function setupInitialLanguage() {
let userStorageLanguage = window.localStorage.getItem('academy-language');
{% if current_person.signed_in? and current_person.properties.user_language contains 'missing property' %}
{% assign property_missing = true %}
{% else %}
{% assign property_missing = false %}
{% endif %}
{% if current_person.signed_in? and current_person.properties.user_language != 'NULL' and property_missing == false %}
var selectedLanguage = "{{ current_person.properties.user_language }}";
{% else %}
var selectedLanguage = userStorageLanguage || "en";
{% endif %}
var selectedLanguage = userStorageLanguage || "en";
if (['en', 'de', 'es', 'fr', 'br'].includes(selectedLanguage)) {
changeLanguage(selectedLanguage, false);
} else {
changeLanguage('en', false);
console.log('wrong language initialized', selectedLanguage);
window.current_language = 'en';
}
if (
window.location.pathname.includes('/de-homepage') ||
window.location.pathname.includes('/de-video-tutorials') ||
window.location.pathname.includes('/de-catalog')
) {
selectedLanguage = 'de';
} else if (
window.location.pathname.includes('/es-homepage') ||
window.location.pathname.includes('/es-video-tutorials') ||
window.location.pathname.includes('/es-catalog')
) {
selectedLanguage = 'es';
} else if (
window.location.pathname.includes('/fr-homepage') ||
window.location.pathname.includes('/fr-video-tutorials') ||
window.location.pathname.includes('/fr-catalog')
) {
selectedLanguage = 'fr';
} else if (
window.location.pathname.includes('/br-homepage') ||
window.location.pathname.includes('/br-video-tutorials') ||
window.location.pathname.includes('/br-catalog')
) {
selectedLanguage = 'br';
} else {
selectedLanguage = 'en';
}
const pathParts = window.location.pathname.split('/').slice(1);
if (
window.location.pathname.includes('/de-homepage') ||
window.location.pathname.includes('/de-video-tutorials') ||
window.location.pathname.includes('/de-catalog')
) {
selectedLanguage = 'de';
} else if (
window.location.pathname.includes('/es-homepage') ||
window.location.pathname.includes('/es-video-tutorials') ||
window.location.pathname.includes('/es-catalog')
) {
selectedLanguage = 'es';
} else if (
window.location.pathname.includes('/fr-homepage') ||
window.location.pathname.includes('/fr-video-tutorials') ||
window.location.pathname.includes('/fr-catalog')
) {
selectedLanguage = 'fr';
} else if (
window.location.pathname.includes('/br-homepage') ||
window.location.pathname.includes('/br-video-tutorials') ||
window.location.pathname.includes('/br-catalog')
) {
selectedLanguage = 'br';
} else {
selectedLanguage = 'en';
changeLanguage(selectedLanguage, false);
}
changeLanguage(selectedLanguage, false);
}
addEventListener('DOMContentLoaded', () => {
@ -121,28 +102,49 @@
});
function redirectToLanguageHomepage(language) {
let homepageUrl = '';
switch (window.current_language) {
case 'de':
homepageUrl = '/app/de-homepage';
break;
case 'es':
homepageUrl = '/app/es-homepage';
break;
case 'fr':
homepageUrl = '/app/fr-homepage';
break;
case 'br':
homepageUrl = '/app/br-homepage';
break;
default:
homepageUrl = '/app';
break;
const languageMappings = {
de: {
homepage: '/app/de-homepage',
catalog: '/app/de-catalog',
videoTutorials: '/app/de-video-tutorials'
},
es: {
homepage: '/app/es-homepage',
catalog: '/app/es-catalog',
videoTutorials: '/app/es-video-tutorials'
},
fr: {
homepage: '/app/fr-homepage',
catalog: '/app/fr-catalog',
videoTutorials: '/app/fr-video-tutorials'
},
br: {
homepage: '/app/br-homepage',
catalog: '/app/br-catalog',
videoTutorials: '/app/br-video-tutorials'
},
en: {
homepage: '/app',
catalog: '/app/catalog',
videoTutorials: '/app/video-tutorials'
}
};
const currentUrl = window.location.pathname;
const currentLang = window.current_language || 'en';
let category = 'homepage';
if (currentUrl.includes('catalog')) {
category = 'catalog';
} else if (currentUrl.includes('video-tutorials')) {
category = 'videoTutorials';
}
window.location.href = homepageUrl;
const newUrl = languageMappings[currentLang][category] || '/app';
window.location.href = newUrl;
}
const academyLanguage = window.localStorage.getItem('academy-language');
console.log(academyLanguage);

View File

@ -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" %}

View File

@ -0,0 +1,5 @@
{% if learning_path.new_content_available? %}
{% include "learning_path_new_content_banner" %}
{% else %}
{% include "learning_path_completed_banner" %}
{% endif %}

View File

@ -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 %}

View File

@ -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>

View File

@ -0,0 +1,13 @@
<div class="np-learning-path-completed-banner np-learning-path-banner">
<img class="np-learning-path-banner-image" src="https://s3.amazonaws.com/static.northpass.com/images/stars-completed.svg"/>
<div class="np-learning-path-banner-content">
<h3 class="np-learning-path-banner-headline">{% t .headline %}</h3>
<p class="np-learning-path-banner-description">{% t .description %}</p>
<div class="np-learning-path-banner-actions">
{% if learning_path.certificate_link %}
<a href="{{ learning_path.certificate_link }}" class="np-learning-path-banner-action np-learning-path-banner-action--primary">{% t .actions.certificate %}</a>
{% endif %}
<a href="/app/courses" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">{% t .actions.more_courses %}</a>
</div>
</div>
</div>

View File

@ -0,0 +1,56 @@
{% 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-button-color {% endif %}
">
{% t shared.progress, count: course.progress %}
</div>
</div>
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
{% if course.optional? %}
<div class="np-optional-ribbon">
{% t shared.optional %}
</div>
{% endif %}
</div>
</a>
{% else %}
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
<div class="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 %}

View File

@ -0,0 +1,6 @@
<h3 class="np-card-heading">
{% t .about %}
</h3>
<div class="np-card-text">
{{ learning_path.description }}
</div>

View File

@ -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>

View File

@ -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.learning_path.title %}
<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>

View File

@ -0,0 +1,2 @@
{% include "learning_path_desktop_header" %}
{% include "learning_path_desktop_content" %}

View File

@ -0,0 +1,26 @@
{% if learning_path.instructors.any? %}
<div class="np-card-content-divider">
<h3 class="np-card-heading">
{% t shared.instructors %}
</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 %}

View File

@ -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 %}

View File

@ -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>

View File

@ -0,0 +1,2 @@
{% include "learning_path_mobile_header" %}
{% include "learning_path_mobile_content" %}

View File

@ -0,0 +1,12 @@
<div class="np-learning-path-new-content-banner np-learning-path-banner">
<div class="np-learning-path-banner-content">
<h3 class="np-learning-path-banner-headline">{% t .headline %}</h3>
<p class="np-learning-path-banner-description">{% t .description %}</p>
<div class="np-learning-path-banner-actions">
{% learning_path_next_step_button learning_path, class: "np-learning-path-banner-action np-learning-path-banner-action--primary" %}
{% if learning_path.certificate_link %}
<a href="{{ learning_path.certificate_link }}" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">{% t .actions.view_certificate %}</a>
{% endif %}
</div>
</div>
</div>

View File

@ -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>

View File

@ -0,0 +1,20 @@
{% if learning_path.enrolled? %}
<div class="np-top-cta-progress-content">
<div class="np-top-cta-progress-title np-text-title">
{% t .progress %}
</div>
<div class="np-progress-bar-container">
<div
style="width: {{ learning_path.progress }}%"
class="np-button-background-color np-card-progress-bar">
</div>
</div>
<div class="np-top-cta-progress-text
{% if learning_path.completed? %} np-color-success {% else %} np-button-color {% endif %}
">
{% t shared.progress, count: learning_path.progress %}
</div>
</div>
{% endif %}
{% learning_path_next_step_button learning_path, class: "np-top-button np-button-font-color np-button np-button-big" %}

View File

@ -0,0 +1,3 @@
{% include "learning_path_desktop_header" %}
{% include "learning_path_banners" %}
{% include "learning_path_desktop_content" %}

View File

@ -0,0 +1,5 @@
<div class="np-card-padding">
{% include "learning_path_banners" %}
</div>
{% include "learning_path_mobile_header" %}
{% include "learning_path_mobile_content" %}

View File

@ -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 %}

View File

@ -0,0 +1,14 @@
<div class="np-learning-paths-resources">
{% if items.any? %}
{% for learning_path in items %}
{% include "cards_learning_path" with learning_path %}
{% endfor %}
{% else %}
<div class="np-learning-paths-resources-container">
<div class="np-zero-state-text">
{% t .empty %}
</div>
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
</div>
{% endif %}
</div>

View File

@ -0,0 +1,13 @@
<div class="np-card np-search-zero-state">
<div class="np-card-container">
<div class="np-card-content np-card-content-vertical np-search-zero-state-card">
<h3 class="np-search-zero-state-title">
{% t .nothing_found %}
</h3>
<div class="np-search-zero-state-subtitle">
{% t .empty %}
</div>
<div class="np-search-zero-state-image"></div>
</div>
</div>
</div>

View File

@ -4,37 +4,37 @@
<div class="login-widget">
<h3 class="login-widget-title">
<span class="lang-en">Learn for free</span>
<span class="lang-de"></span>
<span class="lang-es"></span>
<span class="lang-fr"></span>
<span class="lang-br"></span>
<span class="lang-de">Kostenloses Lernen</span>
<span class="lang-es">Aprender gratis</span>
<span class="lang-fr">Apprendre gratuitement</span>
<span class="lang-br">Aprenda de graça</span>
</h3>
<div style="display: flex; margin-bottom: 40px;">
<a class="button-1 button-large" href="/learners/sign_in">
<span class="lang-en">Log in with Pipedrive</span>
<span class="lang-de"></span>
<span class="lang-es"></span>
<span class="lang-fr"></span>
<span class="lang-br"></span>
<span class="lang-de">Mit Pipedrive anmelden</span>
<span class="lang-es">Iniciar sesión con Pipedrive</span>
<span class="lang-fr">Se connecter avec Pipedrive</span>
<span class="lang-br">Faça login com o Pipedrive</span>
</a>
</div>
<div class="login-text-wrapper">
<div class="login-text-strike"></div>
<div class="login-text body-s">
<span class="lang-en">Not a Pipedrive user?<br>Create a free account to access courses</span>
<span class="lang-de"></span>
<span class="lang-es"></span>
<span class="lang-fr"></span>
<span class="lang-br"></span>
<span class="lang-de">Sie sind kein Pipedrive-Benutzer?<br>Erstellen Sie ein kostenloses Konto für den Zugriff auf Kurse</span>
<span class="lang-es">¿No es usuario de Pipedrive?<br>Cree una cuenta gratuita para acceder a los cursos</span>
<span class="lang-fr">Vous n'êtes pas un utilisateur de Pipedrive ? Créez un compte gratuit pour accéder aux cours.</span>
<span class="lang-br">Não é um usuário do Pipedrive? <br>Crie uma conta gratuita para acessar os cursos</span>
</div>
</div>
<div style="display: flex">
<a class="button-2 button-large" id="redirect-between-academies" href="https://user-learn.pipedrive.com/learners/sign_in">
<span class="lang-en">Log in or register</span>
<span class="lang-de"></span>
<span class="lang-es"></span>
<span class="lang-fr"></span>
<span class="lang-br"></span>
<span class="lang-de">Anmelden oder registrieren</span>
<span class="lang-es">Conectarse o registrarse</span>
<span class="lang-fr">Se connecter ou s'inscrire</span>
<span class="lang-br">Faça login ou registre-se</span>
</a>
</div>
</div>

View File

@ -0,0 +1,9 @@
<div class="np-dashboard-resources">
{% if training_events.enrolled.any? %}
{% for training_event in training_events.enrolled %}
{% include "cards_training_event" with training_event %}
{% endfor %}
{% else %}
{% include "training_events_zero_state" %}
{% endif %}
</div>

View File

@ -0,0 +1,53 @@
<div class="np-filter">
<div class="dropdown">
<button
class="np-button dropdown-button"
data-toggle-class="is-open"
data-toggle-escape
data-toggle-outside
data-toggle-target-next
type="button"
>
{% t shared.filters.filter %}
</button>
<div class="dropdown-menu" data-test="modal">
<form method="get">
<span class="dropdown-label">
{% t shared.filters.by_event_type %}
</span>
<ul class="dropdown-checkboxes">
{% for event_type in training_events.filters.event_types %}
{% capture label %}
{% t shared.event_types, key: event_type.value %}
{% endcapture %}
<li>
{% include "filter_checkbox",
label: label,
name: event_type.name,
value: event_type.value
selected: event_type.selected?
%}
</li>
{% endfor %}
</ul>
{% capture label %}{% t shared.filters.by_course %}{% endcapture %}
{%
include "filter_select",
filters: training_events.filters.courses,
key: "courses_uuid",
label: label
%}
<button
class="np-button dropdown-button-apply"
data-toggle-trigger-off
type="submit"
>
{% t shared.filters.apply %}
</button>
</form>
</div>
</div>
</div>

View File

@ -0,0 +1,13 @@
<div class="np-dashboard-resources">
{% if training_events.available.any? %}
<div class="row row-with-thumbnails">
{% for training_event in training_events.available %}
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
{% include "cards_training_event" with training_event %}
</div>
{% endfor %}
</div>
{% else %}
{% include "training_events_zero_state" %}
{% endif %}
</div>

View File

@ -0,0 +1,9 @@
<div class="np-dashboard-resources-container">
<div class="np-zero-state-text">
{% t .empty %}
</div>
<img
class="np-zero-state-training-events"
alt="{% t .empty %}"
/>
</div>

View File

@ -0,0 +1,52 @@
<div class="dropdown dropdown-calendar">
<button
class="np-top-button np-button-font-color np-button np-button-big dropdown-calendar-button"
data-toggle-class="is-open"
data-toggle-escape
data-toggle-outside
data-toggle-target-next
type="button"
>
{% t .add_to_calendar %}
<i class="fas fa-chevron-down dropdown-calendar-button-chevron"></i>
</button>
<ul class="dropdown-calendar-menu">
<li class="dropdown-calendar-item">
<a
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
href="{{ training_session.google_calendar_url }}"
target="_blank"
>
{% t .google_calendar %}
</a>
</li>
<li class="dropdown-calendar-item">
<a
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
href="{{ training_session.outlook_calendar_url }}"
target="_blank"
>
{% t .outlook_calendar %}
</a>
</li>
<li class="dropdown-calendar-item">
<a
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
href="{{ training_session.outlook_office_calendar_url }}"
target="_blank"
>
{% t .office_calendar %}
</a>
</li>
<li class="dropdown-calendar-item">
<a
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
href="{{ training_session.ical_calendar_url }}"
target="_blank"
>
{% t .ical_calendar %}
</a>
</li>
</ul>
</div>

View File

@ -0,0 +1,53 @@
{% if training_session.approved? %}
<div class="np-training-session-cta-note">
<i class="far fa-check np-training-session-icon"></i>
{% t .registered %}
</div>
{% elsif training_session.pending? %}
<div class="np-training-session-cta-note np-training-session-cta-note-error">
{% t .pending %}
</div>
{% elsif training_session.denied? %}
<div class="np-training-session-cta-note np-training-session-cta-note-error">
{% t .denied %}
</div>
{% elsif training_session.too_late? %}
<div class="np-training-session-cta-note np-training-session-cta-note-error">
{% t .too_late %}
</div>
{% elsif training_session.no_seats? %}
<div class="np-training-session-cta-note np-training-session-cta-note-error">
{% t .no_seats %}
</div>
{% endif %}
<div class="np-training-session-cta">
<div class="np-training-session-cta-buttons">
<form
action="{% route training_session_registration, id: training_session.id %}"
method="post"
>
{% form_authenticity_token %}
{% if training_session.internal? and training_session.approved? %}
{% if features.training_events_google_calendar? %}
{% include "training_session_calendars" %}
<button type="submit" class="np-top-button np-button np-button-big np-button-secondary">
{% t .unregister %}
</button>
{% else %}
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
{% t .unregister %}
</button>
{% endif %}
<input type="hidden" name="_method" value="delete" />
{% endif %}
{% if training_session.not_registered? %}
<button type="submit" class="np-top-button np-button np-button-big">
{% t .register %}
</button>
{% endif %}
</form>
</div>
</div>

Some files were not shown because too many files have changed in this diff Show More