150 lines
4.3 KiB
Plaintext
150 lines
4.3 KiB
Plaintext
<header class="np-header np-header-color">
|
|
<div class="np-header-content">
|
|
<div class="header-left">
|
|
{% if current_school.logo_url %}
|
|
<h1 class="np-header-logo">
|
|
<a href="https://quantuvos.com/">
|
|
<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="tablet-hidden" id="header-explore-button" onclick="toggleExploreDropdown()">
|
|
<i class="fal fa-bars"></i> Explore
|
|
</div>
|
|
</div>
|
|
<div class="header-middle tablet-hidden">
|
|
{% include 'header_desktop_top_menu' %}
|
|
</div>
|
|
<div class="header-right">
|
|
{% if current_person.signed_in? %}
|
|
<div class="header-search-button" onclick="toggleSearch()">
|
|
<i class="far fa-search"></i>
|
|
</div>
|
|
<div class="np-header-font-color tablet-visible" onclick="toggleSideMenu()" id="side-menu-open-button">
|
|
<i class="far fa-bars" style="pointer-events: none;"></i>
|
|
</div>
|
|
|
|
<div class="tablet-hidden 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 %}
|
|
<a class="np-header-avatar-tooltip-navigation-link np-danger" href="{% route logout %}">
|
|
{% t .sign_out %}
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="header-desktop-login tablet-hidden">
|
|
<a href="{% route login %}">
|
|
Log in
|
|
</a>
|
|
</div>
|
|
<div class="header-desktop-signup tablet-hidden">
|
|
<a href="">
|
|
Sign up
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{% comment %} <div class="header-blank-space"></div> {% endcomment %}
|
|
<div class="np-hidden" id="gray-background"></div>
|
|
<div id="header-desktop-dropdown" class="np-hidden"></div>
|
|
|
|
{% include "header_mobile_side_menu" %}
|
|
{% include "header_search" %}
|
|
{% comment %}{% include "header_desktop_explore" %}{% endcomment %}
|
|
{% include "messages" %}
|
|
|
|
<style>
|
|
header.np-header {
|
|
position: fixed;
|
|
top: 0px;
|
|
height: 90px;
|
|
}
|
|
.header-left, .header-middle, .header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.header-blank-space {
|
|
height: 120px;
|
|
}
|
|
.header-right {
|
|
font-size: 1.3rem;
|
|
}
|
|
#header-explore-button {
|
|
display: none !important;
|
|
color: rgb(212, 216, 93);
|
|
margin-left: 50px;
|
|
padding: 4px 12px;
|
|
border-radius: 8px;
|
|
}
|
|
#header-explore-button:hover {
|
|
background: rgba(255,255,255,.15);
|
|
}
|
|
.header-search-button .fa-search {
|
|
color: white;
|
|
margin-right: 16px;
|
|
}
|
|
#header-explore-button .fa-bars {
|
|
margin-right: 8px;
|
|
}
|
|
header.np-header, .header-blank-space {
|
|
height: 90px;
|
|
}
|
|
.np-header-logo {
|
|
flex-grow: 0;
|
|
margin: 0;
|
|
}
|
|
.np-header-content {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
#gray-background {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
background-color: rgba(24,24,26,.7);
|
|
}
|
|
</style>
|