Hubert just completed a project for Pipedrive, so downloaded those templates. I kept the old ones as the Pipedrive team noticed some things were overwritten. So until they are fully in production and working correctly, I'm keeping two copies. Will update with the correct files once Hubert investigates.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,575 @@
|
||||
{% 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.us-east-1.amazonaws.com/static.northpass.com/pipedrive/Logo.png"
|
||||
>
|
||||
</a>
|
||||
<div class="header-desktop-navigation header-desktop header-flex body-s">
|
||||
<a class="header-navigation-item lang-en" href="/app/catalog">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</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">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</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</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" id="headerSearch">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search" class="header-search-form">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Search Pipedrive"
|
||||
id="headerSearchInput"
|
||||
/>
|
||||
<i class="np-header-search-icon fal fa-search" id="headerSearchIcon"></i>
|
||||
|
||||
<button type="button" class="header-clear-btn" aria-label="Clear input" id="headerClearBtn">
|
||||
<img class="header-close-icon" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/pipedrive/close.svg" alt="">
|
||||
</button>
|
||||
</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>
|
||||
<a href="/learners/sign_in" class="header-navigation-sign-in">
|
||||
<span class="lang-en">Try for free</span>
|
||||
<span class="lang-de">Kostenlos testen</span>
|
||||
<span class="lang-es">Prueba gratis</span>
|
||||
<span class="lang-fr">Essai gratuit</span>
|
||||
<span class="lang-br">Teste grátis</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-clear-btn {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
height: 100%;
|
||||
}
|
||||
.np-header-search:not(.is-open) .np-header-search-input {
|
||||
width: 44px;
|
||||
color: transparent;
|
||||
text-indent: 9999px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
.np-header-search-input::placeholder {
|
||||
color: #656E7A;
|
||||
}
|
||||
|
||||
.np-header-search:not(.is-open) .np-header-search-input {
|
||||
width: 44px;
|
||||
color: transparent;
|
||||
padding: 0;
|
||||
text-indent: 9999px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.np-header-search:not(.is-open) .header-clear-btn {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-open .np-header-search-icon {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.np-header-search.is-open.with-value .np-header-search-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.header-navigation-sign-in {
|
||||
background: #6861F2;
|
||||
border-radius: 4px;
|
||||
padding: 7.5px 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
@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>
|
||||
<script>
|
||||
addEventListener("DOMContentLoaded", () => {
|
||||
const searchContainer = document.getElementById('headerSearch');
|
||||
const input = document.getElementById('headerSearchInput');
|
||||
const clearBtn = document.getElementById('headerClearBtn');
|
||||
const icon = document.getElementById('headerSearchIcon');
|
||||
|
||||
function openSearch() {
|
||||
searchContainer.classList.add('is-open');
|
||||
input.focus();
|
||||
updateState();
|
||||
}
|
||||
|
||||
|
||||
function closeSearch() {
|
||||
searchContainer.classList.remove('is-open');
|
||||
updateState();
|
||||
}
|
||||
|
||||
|
||||
function updateState() {
|
||||
const hasValue = input.value.trim().length > 0;
|
||||
clearBtn.style.display = hasValue ? 'block' : 'none';
|
||||
|
||||
if (hasValue) {
|
||||
searchContainer.classList.add('with-value');
|
||||
} else {
|
||||
searchContainer.classList.remove('with-value');
|
||||
}
|
||||
}
|
||||
|
||||
input.addEventListener('click', () => {
|
||||
if (!searchContainer.classList.contains('is-open')) {
|
||||
openSearch();
|
||||
}
|
||||
});
|
||||
|
||||
input.addEventListener('input', updateState);
|
||||
|
||||
|
||||
clearBtn.addEventListener('click', () => {
|
||||
input.value = '';
|
||||
input.focus();
|
||||
updateState();
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!searchContainer.contains(e.target)) {
|
||||
closeSearch();
|
||||
}
|
||||
});
|
||||
|
||||
updateState();
|
||||
});
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user