Updated Pipedrive's templates, mostly.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,450 @@
|
||||
{% 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>
|
||||
Reference in New Issue
Block a user