307 lines
9.0 KiB
Plaintext
307 lines
9.0 KiB
Plaintext
<header class="np-header np-header-color">
|
|
<div class="np-header-content">
|
|
{% if current_person.signed_in? %}
|
|
<div
|
|
class="np-hidden-desktop custom-hamburger-btn-container"
|
|
id="nav-profile-btn"
|
|
onclick="toggleSidemenu('nav-profile')">
|
|
<button class="closed-btn">
|
|
<img alt="{{ current_person.name }}" src="{{ current_person.avatar_url }}" />
|
|
</button>
|
|
<button class="fas fa-times np-hidden open-btn"></button>
|
|
</div>
|
|
{% endif %}
|
|
{% if current_school.logo_url %}
|
|
<h1 class="np-header-logo">
|
|
<a href="{% route home %}">
|
|
<img
|
|
alt="{{ current_school.name }}"
|
|
class="np-header-logo-image"
|
|
src="{{ current_school.logo_url }}" />
|
|
</a>
|
|
</h1>
|
|
{% else %}
|
|
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
|
{{ current_school.name }}
|
|
</a>
|
|
{% endif %}
|
|
<div
|
|
class="np-hidden-desktop custom-hamburger-btn-container"
|
|
id="nav-hamburger-btn"
|
|
onclick="toggleSidemenu('nav-hamburger')">
|
|
<button class="closed-btn fas fa-bars"></button>
|
|
<button class="fas fa-times np-hidden open-btn"></button>
|
|
</div>
|
|
|
|
|
|
<div class="np-hidden-mobile np-header-desktop-nav">
|
|
<ul class="np-header-desktop-nav-list">
|
|
{% for website_navigation in navigations.header_navigations_external %}
|
|
<li class="np-header-desktop-nav-item">
|
|
<a
|
|
href="{{ website_navigation.path }}"
|
|
class="np-header-desktop-nav-link np-header-font-color"
|
|
target="_blank">
|
|
{{ website_navigation.name }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
{% if current_person.signed_in? %}
|
|
<div class="np-hidden-mobile np-header-avatar">
|
|
<button
|
|
class="np-header-avatar-button"
|
|
data-test="open-desktop-menu"
|
|
data-toggle-class-on-target="np-hidden"
|
|
data-toggle-target=".np-header-avatar-tooltip"
|
|
data-toggle-outside>
|
|
<img
|
|
alt="{{ current_person.name }}"
|
|
class="np-header-avatar-image"
|
|
src="{{ current_person.avatar_url }}">
|
|
</button>
|
|
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
|
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
|
<div class="np-header-avatar-tooltip-learner">
|
|
<div class="np-header-avatar-tooltip-learner-name">
|
|
{{ current_person.name }}
|
|
</div>
|
|
<div class="np-header-avatar-tooltip-learner-email">
|
|
{{ current_person.email }}
|
|
</div>
|
|
</div>
|
|
<nav class="np-header-avatar-tooltip-navigation">
|
|
{% unless current_school.sso_active? %}
|
|
<a class="np-header-avatar-tooltip-navigation-link" href="{% route account %}">
|
|
{% t.profile_settings %}
|
|
</a>
|
|
{% endunless %}
|
|
{% if current_person.signed_in? %}
|
|
<a class="np-header-avatar-tooltip-navigation-link" href="{% route transcript %}">
|
|
{% t.transcript %}
|
|
</a>
|
|
{% endif %}
|
|
<a class="np-header-avatar-tooltip-navigation-link np-danger" href="{% route logout %}">
|
|
{% t.sign_out %}
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<a
|
|
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
|
aria-label="{% t shared.sign_in %}"
|
|
href="{% route login %}">
|
|
{% t shared.sign_in %}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<div class="np-hidden-desktop">
|
|
<div class="np-header-mobile-menu-content np-hidden" id="nav-profile">
|
|
{% if current_person.signed_in? %}
|
|
<img
|
|
alt="{{ current_person.name }}"
|
|
class="np-header-mobile-menu-content-avatar"
|
|
src="{{ current_person.avatar_url }}" />
|
|
<div class="np-header-mobile-menu-content-name">
|
|
{{ current_person.name }}
|
|
</div>
|
|
{% endif %}
|
|
<div class="np-header-mobile-menu-content-nav">
|
|
<a
|
|
class="np-header-mobile-menu-content-button"
|
|
href="#"
|
|
">
|
|
<span class="lang-en">Certificates</span>
|
|
<span class="lang-es">Certificados</span>
|
|
</a>
|
|
{% include "language_selector" %}
|
|
<a
|
|
class="np-header-mobile-menu-content-button"
|
|
href="#"
|
|
">
|
|
<span class="lang-en">Profile settings</span>
|
|
<span class="lang-es">Configuración del perfil</span>
|
|
</a>
|
|
{% unless current_school.sso_active? %}
|
|
<a class="np-header-mobile-menu-content-button" href="{% route account %}">
|
|
{% t.profile_settings %}
|
|
</a>
|
|
{% endunless %}
|
|
<div class="np-header-mobile-menu-content-line"></div>
|
|
<a class="np-header-mobile-menu-content-button np-danger" href="{% route logout %}">
|
|
<span class="lang-en">Sign out</span>
|
|
<span class="lang-es">Cerrar sesión</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="np-hidden-desktop">
|
|
<div class="np-header-mobile-menu-content np-hidden" id="nav-hamburger">
|
|
<div class="np-header-mobile-menu-content-nav">
|
|
<form
|
|
class="np-header-search"
|
|
data-test="mobile-search"
|
|
method="get"
|
|
action="{% route search %}">
|
|
<input
|
|
aria-label="Search"
|
|
class="np-header-search-input lang-en"
|
|
type="text"
|
|
name="q"
|
|
placeholder="Search" />
|
|
<input
|
|
aria-label="Buscar"
|
|
class="np-header-search-input lang-es"
|
|
type="text"
|
|
name="q"
|
|
placeholder="Buscar" />
|
|
<i class="np-header-search-icon far fa-search"></i>
|
|
</form>
|
|
<a href="/app/dashboard" class="np-header-mobile-menu-content-button">
|
|
<span class="lang-en">For You</span>
|
|
<span class="lang-es">Para Ti</span>
|
|
</a>
|
|
<a href="/app" class="np-header-mobile-menu-content-button">
|
|
<span class="lang-en">In Progress</span>
|
|
<span class="lang-es">En Progreso</span>
|
|
</a>
|
|
<a href="/app/catalog" class="np-header-mobile-menu-content-button">
|
|
<span class="lang-en">All Lessons</span>
|
|
<span class="lang-es">Todas las Lecciones</span>
|
|
</a>
|
|
<a href="/app/learning_paths" class="np-header-mobile-menu-content-button">
|
|
<span class="lang-en">All Paths</span>
|
|
<span class="lang-es">Todas las Rutas</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="np-hidden-mobile">
|
|
{% include "sub_navigation" %}
|
|
</div>
|
|
|
|
|
|
{% include "messages" %}
|
|
<style>
|
|
@media (min-width: 768px) {
|
|
.np-header-search-mobile-always {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.np-header-search-mobile-always {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100vw;
|
|
max-width: 100vw;
|
|
padding: 18px 0 12px;
|
|
|
|
background: {
|
|
{
|
|
color_palette.header_color
|
|
}
|
|
};
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.np-header-search-mobile-always form {
|
|
width: 90vw;
|
|
max-width: 350px;
|
|
position: relative;
|
|
}
|
|
|
|
.np-header-search-mobile-always .np-header-search-input {
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
border: 2px solid #d3d3d3;
|
|
background: #fff;
|
|
color: #1a3c2c;
|
|
font-size: 18px;
|
|
padding: 10px 40px 10px 16px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.np-header-search-mobile-always .np-header-search-icon {
|
|
position: absolute;
|
|
right: 16px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #b0b0b0;
|
|
font-size: 22px;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.custom-hamburger-btn-container {
|
|
position: absolute;
|
|
}
|
|
|
|
.custom-hamburger-btn-container > button {
|
|
width: 32px;
|
|
height: 32px;
|
|
color: white;
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
font-size: 26px;
|
|
}
|
|
.custom-hamburger-btn-container > button > img {
|
|
width: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.np-header-content {
|
|
position: relative;
|
|
}
|
|
|
|
#nav-hamburger-btn {
|
|
left: 0;
|
|
}
|
|
|
|
.np-header-search {
|
|
margin-top: 24px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function toggleSidemenu(id){
|
|
const button = document.getElementById(`${id}-btn`);
|
|
const menu = document.getElementById(id);
|
|
const hiddenClass = 'np-hidden';
|
|
const menuClosed = menu.classList.contains(hiddenClass);
|
|
closeMenus(hiddenClass)
|
|
if(menuClosed){
|
|
menu.classList.toggle(hiddenClass);
|
|
Array.from(button.children).forEach(element => {
|
|
element.classList.toggle(hiddenClass)
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
function closeMenus(hiddenClassName){
|
|
for(const buttons of document.getElementsByClassName('custom-hamburger-btn-container')){
|
|
const menuOpenedBtn = buttons.querySelector('.open-btn');
|
|
if(!menuOpenedBtn.classList.contains(hiddenClassName)){
|
|
menuOpenedBtn.classList.add(hiddenClassName);
|
|
buttons.querySelector('.closed-btn').classList.remove(hiddenClassName);
|
|
}
|
|
}
|
|
for(const menu of document.getElementsByClassName('np-header-mobile-menu-content')){
|
|
if(!menu.classList.contains(hiddenClassName)){
|
|
menu.classList.add(hiddenClassName)
|
|
}
|
|
}
|
|
}
|
|
</script> |