157 lines
4.7 KiB
Plaintext
157 lines
4.7 KiB
Plaintext
{% comment %}--------------------------------------- MOBILE HEADER ---------------------------------------{% endcomment %}
|
|
<header class="np-header np-header-color">
|
|
<div class="np-header-content">
|
|
{% comment %}--------------------------------------- SCHOOL LOGO AND ROUTE ---------------------------------------{% endcomment %}
|
|
{% 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 %}
|
|
{% comment %}--------------------------------------- DESKTOP HEADER ITEMS ---------------------------------------{% endcomment %}
|
|
{% comment %} NAV LINKS {% endcomment %}
|
|
{% include "sub_navigation" %}
|
|
{%- comment -%} <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? %}
|
|
<a class="np-button np-hidden-mobile header-catalog-button" href="/catalog">
|
|
COURSE CATALOG
|
|
</a>
|
|
{% 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 %}
|
|
</div>
|
|
{% endif %}
|
|
</div> {%- endcomment -%}
|
|
</header>
|
|
|
|
{% comment %}--------------------------------------- MOBILE HEADER ---------------------------------------{% endcomment %}
|
|
<div class="np-hidden-desktop">
|
|
<div class="np-header-mobile-menu-content np-hidden">
|
|
{% comment %} AVATAR BUTTON {% endcomment %}
|
|
{% 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 %}
|
|
{% comment %} SEARCH FORM {% endcomment %}
|
|
<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="{% t .search %}"
|
|
class="np-header-search-input"
|
|
type="text"
|
|
name="q"
|
|
placeholder="{% t .search %}"
|
|
/>
|
|
<i class="np-header-search-icon far fa-search"></i>
|
|
</form>
|
|
{% comment %} MOBILE NAV LINKS IN HIDDEN MENU {% endcomment %}
|
|
{% for website_navigation in navigations.header_navigations %}
|
|
<a
|
|
href="{{ website_navigation.path }}"
|
|
class="np-header-mobile-menu-content-button"
|
|
{% if website_navigation.external? %} target="_blank" {% endif %}
|
|
>
|
|
{{ website_navigation.name }}
|
|
</a>
|
|
{% endfor %}
|
|
<div class="np-header-mobile-menu-content-line"></div>
|
|
{% unless current_school.sso_active? %}
|
|
<a
|
|
class="np-header-mobile-menu-content-button"
|
|
href="{% route account %}"
|
|
>
|
|
{% t .profile_settings %}
|
|
</a>
|
|
{% endunless %}
|
|
<a
|
|
class="np-header-mobile-menu-content-button np-danger"
|
|
href="{% route logout %}"
|
|
>
|
|
{% t .sign_out %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="empty-space"></div>
|
|
{% include "messages" %}
|
|
|
|
<style>
|
|
.np-header{
|
|
background-size: cover;
|
|
background-position: bottom;
|
|
position: fixed;
|
|
max-height: 75px;
|
|
{%- comment -%} background: #211579; {%- endcomment -%}
|
|
background: #FFFFFF;
|
|
transition: background .5s ease, padding .5s ease;
|
|
top: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.header-catalog-button{
|
|
border: 1px solid #307fe2;
|
|
Background: transparent;
|
|
Color: #ffffff;
|
|
width: 250px;
|
|
height: 35px;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
font-family: Jost,sans-serif;
|
|
}
|
|
|
|
.np-header-logo-image{
|
|
height: 75px;
|
|
filter: invert(1);
|
|
}
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
.np-sub-navigation-content {
|
|
gap: 10px;
|
|
}
|
|
.np-sub-navigation {
|
|
background: none;
|
|
}
|
|
.empty-space {
|
|
height: 75px;
|
|
}
|
|
}
|
|
</style> |