Instacart, while still in implementation, came to their AE (J.Jones) with some access issues. Some of these templates don't work yet (internal server errors) but backing them up just in case
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,307 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user