451 lines
15 KiB
Plaintext
451 lines
15 KiB
Plaintext
{% if current_school.id == '3eed8278-7beb-4918-bca6-73db73e2ec3a' %}
|
|
<script>
|
|
const splitDefaultPageTitle = document.title.split(" | ")
|
|
|
|
if (window.location.pathname == "/app/catalog") {
|
|
document.title = `Academy Courses | ${splitDefaultPageTitle[1]}`
|
|
} else if (window.location.pathname == "/app/video-tutorials") {
|
|
document.title = `CRM Video Tutorials | ${splitDefaultPageTitle[1]}`
|
|
} else if (window.location.pathname == "/app/webinars") {
|
|
document.title = `CRM Webinars | ${splitDefaultPageTitle[1]}`
|
|
}
|
|
</script>
|
|
{% else %}
|
|
<script>
|
|
const defaultPageTitle = document.title
|
|
|
|
if (window.location.pathname == "/app/catalog") {
|
|
document.title = `Academy Courses | ${defaultPageTitle}`
|
|
} else if (window.location.pathname == "/app/video-tutorials") {
|
|
document.title = `CRM Video Tutorials | ${defaultPageTitle}`
|
|
} else if (window.location.pathname == "/app/webinars") {
|
|
document.title = `CRM Webinars | ${defaultPageTitle}`
|
|
}
|
|
</script>
|
|
{% endif %}
|
|
|
|
<header class="main-header width-limit">
|
|
<section class="header-left header-flex">
|
|
<img
|
|
class="header-mobile-menu-button header-mobile"
|
|
src="https://s3.amazonaws.com/static.northpass.com/pipedrive/hamburger.png"
|
|
alt="menu"
|
|
onclick="toggleSideMenu()"
|
|
>
|
|
<a class="header-logo" href="/app">
|
|
<img class="header-logo-image"
|
|
alt="{{ current_school.name }}"
|
|
src="https://s3.amazonaws.com/static.northpass.com/pipedrive/learn_logo.png"
|
|
>
|
|
</a>
|
|
<div class="header-desktop-navigation header-desktop header-flex body-s">
|
|
<a class="header-navigation-item lang-en" href="/app/catalog">Academy Courses</a>
|
|
<a class="header-navigation-item lang-en" href="/app/video-tutorials">Video Tutorials</a>
|
|
<a class="header-navigation-item lang-en" href="https://www.pipedrive.com/en/webinars" target="_blank">Webinars</a>
|
|
|
|
<a class="header-navigation-item lang-es catalog-link" href="/app/es-catalog">Cursos de la Academia</a>
|
|
<a class="header-navigation-item lang-es video-tutorials-link" href="/app/es-video-tutorials">Tutoriales en vídeo</a>
|
|
<a class="header-navigation-item lang-es" href="https://www.pipedrive.com/en/webinars" target="_blank">Seminarios en línea</a>
|
|
|
|
<a class="header-navigation-item lang-de catalog-link" href="/app/de-catalog">Akademie-Kurse</a>
|
|
<a class="header-navigation-item lang-de video-tutorials-link" href="/app/de-video-tutorials">Video-Tutorials</a>
|
|
<a class="header-navigation-item lang-de" href="https://www.pipedrive.com/en/webinars" target="_blank">Webinare</a>
|
|
|
|
<a class="header-navigation-item lang-fr catalog-link" href="/app/fr-catalog">Cours de l'Académie</a>
|
|
<a class="header-navigation-item lang-fr video-tutorials-link" href="/app/fr-video-tutorials">Tutoriels vidéo</a>
|
|
<a class="header-navigation-item lang-fr" href="https://www.pipedrive.com/en/webinars" target="_blank">Webinaires</a>
|
|
|
|
<a class="header-navigation-item lang-br catalog-link" href="/app/br-catalog">Cursos da Academia</a>
|
|
<a class="header-navigation-item lang-br video-tutorials-link" href="/app/br-video-tutorials">Tutoriais em vídeo</a>
|
|
<a class="header-navigation-item lang-br" href="https://www.pipedrive.com/en/webinars" target="_blank">Webinars</a>
|
|
</div>
|
|
</section>
|
|
<section class="header-right header-flex">
|
|
<div class="header-desktop header-flex">
|
|
<a class="header-navigation-item body-s" href="https://www.pipedrive.com">
|
|
<span class="lang-en">go to</span>
|
|
<span class="lang-de">Gehen Sie zu</span>
|
|
<span class="lang-es">ir a</span>
|
|
<span class="lang-fr">aller à</span>
|
|
<span class="lang-br">ir para</span> pipedrive.com
|
|
</a>
|
|
|
|
{% if current_person.signed_in? %}
|
|
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
|
<form action="{% route search %}" method="get" data-test="desktop-search">
|
|
<input
|
|
aria-label="{% t .search %}"
|
|
class="np-header-search-input"
|
|
type="text"
|
|
name="q"
|
|
placeholder="Search Pipedrive"
|
|
/>
|
|
<i class="np-header-search-icon fal fa-search"></i>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
<div class="language-dropdown-wrapper" style="margin-left:20px;">
|
|
<div class="header-language-selection">
|
|
<i class="fal fa-globe"></i>
|
|
<i class="fal fa-angle-down"></i>
|
|
</div>
|
|
<ul class="languages-dropdown">
|
|
<li data-lang="en" class="current-lang" onclick="changeLanguage(this.getAttribute('data-lang')), redirectToLanguageHomepage(this.value)">English</li>
|
|
<li data-lang="de" onclick="changeLanguage(this.getAttribute('data-lang')), redirectToLanguageHomepage(this.value)">Deutsch</li>
|
|
<li data-lang="es" onclick="changeLanguage(this.getAttribute('data-lang')), redirectToLanguageHomepage(this.value)">Español</li>
|
|
<li data-lang="fr" onclick="changeLanguage(this.getAttribute('data-lang')), redirectToLanguageHomepage(this.value)">Français</li>
|
|
<li data-lang="br" onclick="changeLanguage(this.getAttribute('data-lang')), redirectToLanguageHomepage(this.value)">Português (BR)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{% if current_person.signed_in? %}
|
|
{% if current_person.avatar_url contains "https://secure.gravatar.com/avatar" %}
|
|
<img class="header-profile-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/Avatar.png" alt="profile image">
|
|
{% else %}
|
|
<img class="header-profile-image" src="{{ current_person.avatar_url }}" alt="profile image">
|
|
{% endif %}
|
|
<div class="header-profile-menu">
|
|
<div class="header-profile-menu-name body-s strong">
|
|
{{ current_person.name }}
|
|
</div>
|
|
<i class="far fa-chevron-down profile-arrow-down"></i>
|
|
<i class="far fa-chevron-up profile-arrow-up"></i>
|
|
<div class="profile-dropdown">
|
|
<div class="profile-dropdown-name body-s strong">
|
|
{{ current_person.name }}
|
|
</div>
|
|
<div class="profile-dropdown-email body-s">
|
|
{{ current_person.email }}
|
|
</div>
|
|
<a class="profile-dropdown-link body-s"
|
|
{% if current_school.sso_active? %}
|
|
href="/app/profile-settings"
|
|
{% else %}
|
|
href="/app/account"
|
|
{% endif %}
|
|
style="margin-top: 15px;">
|
|
<span class="lang-en">Settings</span>
|
|
<span class="lang-de">Einstellungen</span>
|
|
<span class="lang-es">Ajustes</span>
|
|
<span class="lang-fr">Paramètres</span>
|
|
<span class="lang-br">Configurações</span>
|
|
</a>
|
|
<a class="profile-dropdown-link body-s" href="/learners/sign_out">
|
|
<span class="lang-en">Log out</span>
|
|
<span class="lang-de">Abmelden</span>
|
|
<span class="lang-es">Cerrar sesión</span>
|
|
<span class="lang-fr">Déconnexion</span>
|
|
<span class="lang-br">Sair</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<a class="header-navigation-item body-s" href="#sso-widget">
|
|
<span class="lang-en">Log in</span>
|
|
<span class="lang-de">Einloggen</span>
|
|
<span class="lang-es">Conectarse</span>
|
|
<span class="lang-fr">Connexion</span>
|
|
<span class="lang-br">Entrar</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="header-mobile header-flex">
|
|
{% unless current_person.signed_in? %}
|
|
<a class="header-register-button button-1 button-small" href="#sso-widget">
|
|
<span class="lang-en">Register</span>
|
|
<span class="lang-de">Anmelden</span>
|
|
<span class="lang-es">Regístrese en</span>
|
|
<span class="lang-fr">Inscription</span>
|
|
<span class="lang-br">Cadastrar-se</span>
|
|
</a>
|
|
{% endunless %}
|
|
</div>
|
|
</section>
|
|
</header>
|
|
|
|
{% include "header_mobile_menu" %}
|
|
{% include "messages" %}
|
|
{% include 'new_academy_popup' %}
|
|
<style>
|
|
.header-flex {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.header-right {
|
|
flex: 1;
|
|
}
|
|
.header-right .header-desktop {
|
|
width:100%;
|
|
justify-content: flex-end;
|
|
}
|
|
.header-mobile.header-flex {
|
|
width:100%;
|
|
justify-content:flex-end;
|
|
}
|
|
.header-right .header-register-button {
|
|
width:auto;
|
|
}
|
|
.main-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 72px;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
background: #FFF;
|
|
position: relative;
|
|
}
|
|
.header-mobile-menu-button {
|
|
height: 100%;
|
|
margin-right: 20px;
|
|
}
|
|
.header-logo {
|
|
height: 100%;
|
|
display: flex;
|
|
}
|
|
.header-logo-image {
|
|
height: 32px;
|
|
align-self: center;
|
|
}
|
|
.header-navigation-item {
|
|
padding: 5px 0;
|
|
margin: auto 20px;
|
|
position:relative;
|
|
}
|
|
.header-navigation-item:after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
width: 0;
|
|
bottom: 4px;
|
|
background: #017737;
|
|
height: 2px;
|
|
opacity:0;
|
|
transition:width 0.3s ease-out, opacity 0.3s ease-out;
|
|
}
|
|
.header-navigation-item:hover:after,
|
|
.header-navigation-item:focus:after,
|
|
.header-navigation-item:active:after,
|
|
.header-navigation-item-active:after {
|
|
left: 0;
|
|
right: auto;
|
|
width: 100%;
|
|
opacity:1;
|
|
}
|
|
|
|
/* SEARCH */
|
|
.np-header-search-input {
|
|
border-radius: 50%;
|
|
background-color: #F4F5F6;
|
|
opacity: 1;
|
|
border: 2px solid #F4F5F6;
|
|
color:#192435;
|
|
transition:width 0.2s ease-out;
|
|
}
|
|
.np-header-search-icon {
|
|
color:#192435;
|
|
}
|
|
.np-header-search-input:focus {
|
|
border-radius: 30px;
|
|
border: 2px solid #0e5235;
|
|
padding: 0 40px 0 20px;
|
|
}
|
|
/* END SEARCH */
|
|
|
|
/* LANGUAGE DROPDOWN */
|
|
.language-dropdown-wrapper {
|
|
position:relative;
|
|
}
|
|
.header-language-selection {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding:20px;
|
|
font-size:20px;
|
|
cursor:pointer;
|
|
}
|
|
.header-language-selection .fa-angle-down {
|
|
font-size: 25px;
|
|
position: relative;
|
|
bottom: 3px;
|
|
transition: transform 0.2s;
|
|
}
|
|
.header-language-selection:hover .fa-angle-down,
|
|
.language-dropdown-wrapper:hover .fa-angle-down {
|
|
transform:rotate(180deg)
|
|
}
|
|
.languages-dropdown {
|
|
position:absolute;
|
|
top: 66px;
|
|
left:50%;
|
|
transform: translateX(-50%);
|
|
background-color:#fff;
|
|
margin:0;
|
|
border-radius:4px;
|
|
height:0;
|
|
opacity:0;
|
|
min-width:200px;
|
|
list-style:none;
|
|
transition: opacity 0.2s;
|
|
box-shadow: 0px 3px 5px rgba(0,0,0,.08),0px 0px 4px rgba(0,0,0,.12);
|
|
z-index: 1;
|
|
}
|
|
.languages-dropdown:after {
|
|
content: "";
|
|
position:absolute;
|
|
top:-10px;
|
|
left:50%;
|
|
transform: translate(-50%);
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 10px solid transparent;
|
|
border-right: 10px solid transparent;
|
|
border-bottom: 10px solid #fff;
|
|
}
|
|
.languages-dropdown:not(.show) {
|
|
visibility: hidden;
|
|
}
|
|
.languages-dropdown.show {
|
|
height:auto;
|
|
opacity:1;
|
|
padding:20px 0;
|
|
}
|
|
.languages-dropdown li {
|
|
cursor: pointer;
|
|
width:100%;
|
|
padding:4px 12px;
|
|
font-size:16px;
|
|
}
|
|
.languages-dropdown li:hover {
|
|
text-decoration:underline;
|
|
background-color:#e4e6e9;
|
|
}
|
|
.languages-dropdown li.current-lang {
|
|
background-color:#edeef0;
|
|
}
|
|
/* END LANGUAGE DROPDOWN */
|
|
|
|
.header-profile-image {
|
|
width: 60px;
|
|
aspect-ratio: 1/1;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
margin-left: 10px;
|
|
}
|
|
.header-profile-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
cursor: pointer;
|
|
}
|
|
.profile-arrow-up {
|
|
display: none;
|
|
}
|
|
.header-profile-menu-open .profile-arrow-up {
|
|
display: block;
|
|
}
|
|
.header-profile-menu-open .profile-arrow-down {
|
|
display: none;
|
|
}
|
|
.profile-dropdown {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 0;
|
|
transform: translate(-50%, 100%);
|
|
flex-direction: column;
|
|
background: #FFF;
|
|
padding: 25px 20px;
|
|
border-radius: 4px;
|
|
filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.08)) drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.12));
|
|
width: fit-content;
|
|
z-index: 1;
|
|
}
|
|
.header-profile-menu-open .profile-dropdown {
|
|
display: flex;
|
|
}
|
|
.profile-dropdown-name {
|
|
padding-top: 5px;
|
|
padding-bottom: 10px;
|
|
}
|
|
.profile-dropdown-email {
|
|
color: #656E7A;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #E4E6E9;
|
|
}
|
|
.profile-dropdown-link {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
@media only screen and (min-width: 1151px) {
|
|
.header-mobile {
|
|
display: none !important;
|
|
}
|
|
.main-header {
|
|
height: 84px;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 1150px) {
|
|
.header-desktop {
|
|
display: none !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// profile settings dropdown
|
|
{% if current_person.signed_in? %}
|
|
document.querySelector('body').addEventListener('click', listenerDropdown);
|
|
|
|
function toggleDropdown() {
|
|
let element = document.querySelector('.header-profile-menu');
|
|
element.classList.toggle('header-profile-menu-open');
|
|
}
|
|
|
|
function listenerDropdown(event) {
|
|
let isDropdownOpen = !!document.querySelector('.header-profile-menu-open');
|
|
if (isDropdownOpen) {
|
|
let dropdownElement = document.querySelector('.profile-dropdown');
|
|
if (!dropdownElement.contains(event.target)) {
|
|
toggleDropdown();
|
|
}
|
|
} else {
|
|
let dropdownButton = document.querySelector('.header-profile-menu');
|
|
if (dropdownButton.contains(event.target)) {
|
|
toggleDropdown();
|
|
}
|
|
}
|
|
}
|
|
{% endif %}
|
|
|
|
// setup active subpage indicator on navigations
|
|
addEventListener("DOMContentLoaded", () => {
|
|
if (window.location.pathname === '/app/catalog') {
|
|
document.querySelector('#side-menu-courses')?.classList.add('side-menu-link-active');
|
|
document.querySelector('.header-navigation-item[href="/app/catalog"]')?.classList.add('header-navigation-item-active');
|
|
} else if (window.location.pathname === '/app/video-tutorials') {
|
|
document.querySelector('#side-menu-tutorials')?.classList.add('side-menu-link-active');
|
|
document.querySelector('.header-navigation-item[href="/app/video-tutorials"]')?.classList.add('header-navigation-item-active');
|
|
}
|
|
|
|
changeHeaderImageLink();
|
|
});
|
|
|
|
// Languages dropdown hover effect
|
|
document.querySelector(".header-language-selection").addEventListener('mouseover', () => {
|
|
document.querySelector(".languages-dropdown").classList.add('show');
|
|
})
|
|
document.querySelector(".language-dropdown-wrapper").addEventListener('mouseleave', () => {
|
|
document.querySelector(".languages-dropdown").classList.remove('show');
|
|
})
|
|
|
|
function changeHeaderImageLink() {
|
|
let userStorageLanguage = window.localStorage.getItem('academy-language');
|
|
|
|
if (userStorageLanguage != 'en') {
|
|
document.querySelector(".header-logo").href = `/app/${userStorageLanguage}-homepage`
|
|
} else {
|
|
document.querySelector(".header-logo").href = `/app`
|
|
}
|
|
}
|
|
</script>
|