289 lines
11 KiB
Plaintext
289 lines
11 KiB
Plaintext
<header class="np-header np-header-color">
|
|
<div class="np-header-content">
|
|
{% if current_school.logo_url %}
|
|
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
|
{% if current_person.signed_in? %}
|
|
<button
|
|
data-toggle-class="np-hidden"
|
|
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
|
data-toggle-target=".np-header-mobile-avatar-menu,
|
|
.np-header-mobile-menu-content, .np-main, .np-footer"
|
|
></button>
|
|
<button
|
|
data-test="open-mobile-menu"
|
|
data-toggle-class="np-hidden"
|
|
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
|
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
|
|
>
|
|
<i class="fal fa-bars"></i>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
<div class="header-content">
|
|
<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>
|
|
<div class="hidden-mobile-custom">{% include "sub_navigation" %}</div>
|
|
</div>
|
|
{% else %}
|
|
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
|
{{ current_school.name }}
|
|
</a>
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
{% if current_person.signed_in? %}
|
|
<div class="header-buttons-wrapper np-hidden-mobile">
|
|
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
|
<form action="{% route search %}" method="get" data-test="desktop-search">
|
|
<input
|
|
aria-label="{% t .search %}"
|
|
class="np-header-search-input np-header-font-background-color"
|
|
type="text"
|
|
name="q"
|
|
placeholder="{% t .search %}"
|
|
/>
|
|
<i class="np-header-search-icon far fa-search"></i>
|
|
</form>
|
|
</div>
|
|
<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
|
|
>
|
|
{% comment %} <img
|
|
alt="{{ current_person.name }}"
|
|
class="np-header-avatar-image"
|
|
src="{{ current_person.avatar_url }}"
|
|
> {% endcomment %}
|
|
<svg class="np-header-avatar-image" width="25" height="25" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.39082 0.101913L7.72151 0.562659C8.24033 1.28552 9.0805 1.73185 10 1.73185C10.9195 1.73185 11.7597 1.28552 12.2785 0.562659L12.6092 0.101913L13.1426 0.294579C14.174 0.667115 15.1289 1.2209 15.9647 1.92673L16.3974 2.29213L16.1644 2.8083C15.7985 3.61871 15.8324 4.5687 16.2918 5.36443C16.7514 6.16051 17.5577 6.6649 18.4429 6.75299L19.0077 6.80921L19.107 7.3681C19.2019 7.90226 19.25 8.4467 19.25 8.99701C19.25 9.54733 19.2019 10.0918 19.107 10.6259L19.0077 11.1848L18.4429 11.241C17.5577 11.3291 16.7514 11.8335 16.2918 12.6296C15.8324 13.4253 15.7985 14.3753 16.1644 15.1857L16.3974 15.7019L15.9647 16.0673C15.1289 16.7731 14.174 17.3269 13.1426 17.6994L12.6092 17.8921L12.2785 17.4314C11.7597 16.7085 10.9195 16.2622 10 16.2622C9.0805 16.2622 8.24033 16.7085 7.72151 17.4314L7.39082 17.8921L6.85741 17.6994C5.82603 17.3269 4.8711 16.7731 4.03532 16.0673L3.60265 15.7019L3.83564 15.1857C4.20146 14.3753 4.1676 13.4253 3.70819 12.6296C3.24857 11.8335 2.44228 11.3291 1.55715 11.241L0.992294 11.1848L0.892988 10.6259C0.798076 10.0918 0.75 9.54733 0.75 8.99701C0.75 8.4467 0.798076 7.90226 0.892988 7.3681L0.992294 6.80921L1.55715 6.75299C2.44228 6.6649 3.24857 6.16051 3.70819 5.36443C4.1676 4.5687 4.20146 3.61871 3.83564 2.8083L3.60265 2.29213L4.03532 1.92673C4.8711 1.2209 5.82603 0.667114 6.85741 0.294579L7.39082 0.101913ZM5.41027 2.75149C5.73449 3.85738 5.60882 5.07243 5.00722 6.11443C4.40558 7.15651 3.41606 7.87287 2.29618 8.14499C2.26551 8.42609 2.25 8.71036 2.25 8.99701C2.25 9.28366 2.26551 9.56794 2.29618 9.84903C3.41606 10.1212 4.40558 10.8375 5.00722 11.8796C5.60882 12.9216 5.73449 14.1366 5.41027 15.2425C5.869 15.5803 6.36344 15.8667 6.88487 16.0959C7.68054 15.2614 8.79615 14.7622 10 14.7622C11.2038 14.7622 12.3195 15.2614 13.1151 16.0959C13.6366 15.8667 14.131 15.5803 14.5897 15.2425C14.2655 14.1366 14.3912 12.9216 14.9928 11.8796C15.5944 10.8375 16.5839 10.1212 17.7038 9.84903C17.7345 9.56794 17.75 9.28366 17.75 8.99701C17.75 8.71036 17.7345 8.42609 17.7038 8.14499C16.5839 7.87287 15.5944 7.15651 14.9928 6.11443C14.3912 5.07243 14.2655 3.85738 14.5897 2.75149C14.131 2.41371 13.6366 2.12735 13.1151 1.89815C12.3195 2.73262 11.2038 3.23185 10 3.23185C8.79615 3.23185 7.68054 2.73262 6.88487 1.89816C6.36344 2.12735 5.869 2.41371 5.41027 2.75149Z" fill="#001B38"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 6.75C8.75736 6.75 7.75 7.75736 7.75 9C7.75 10.2426 8.75736 11.25 10 11.25C11.2426 11.25 12.25 10.2426 12.25 9C12.25 7.75736 11.2426 6.75 10 6.75ZM6.25 9C6.25 6.92893 7.92893 5.25 10 5.25C12.0711 5.25 13.75 6.92893 13.75 9C13.75 11.0711 12.0711 12.75 10 12.75C7.92893 12.75 6.25 11.0711 6.25 9Z" fill="#001B38"/>
|
|
</svg>
|
|
</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>
|
|
{% comment %} <a class="login-btn" target="_blank" href="https://app.frontapp.com">Login</a> {% endcomment %}
|
|
</div>
|
|
{% else %}
|
|
{% comment %} <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> {% endcomment %}
|
|
{% endif %}
|
|
</div>
|
|
</header>
|
|
|
|
<div class="np-hidden-desktop">
|
|
<div class="np-header-mobile-menu-content np-hidden">
|
|
{% if current_person.signed_in? %}
|
|
{% comment %} <img
|
|
alt="{{ current_person.name }}"
|
|
class="np-header-mobile-menu-content-avatar"
|
|
src="{{ current_person.avatar_url }}"
|
|
/> {% endcomment %}
|
|
<div class="np-header-mobile-menu-content-name">
|
|
{{ current_person.name }}
|
|
</div>
|
|
{% endif %}
|
|
<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 %}"
|
|
/>
|
|
<svg class="np-header-search-icon" width="40" height="40" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 9.25C3.5 6.07436 6.07436 3.5 9.25 3.5C12.4256 3.5 15 6.07436 15 9.25C15 12.4256 12.4256 15 9.25 15C6.07436 15 3.5 12.4256 3.5 9.25ZM9.25 2C5.24594 2 2 5.24594 2 9.25C2 13.2541 5.24594 16.5 9.25 16.5C10.9819 16.5 12.5719 15.8927 13.8189 14.8795L16.9697 18.0303C17.2626 18.3232 17.7374 18.3232 18.0303 18.0303C18.3232 17.7374 18.3232 17.2626 18.0303 16.9697L14.8795 13.8189C15.8927 12.5719 16.5 10.9819 16.5 9.25C16.5 5.24594 13.2541 2 9.25 2Z" fill="#001B38"/>
|
|
</svg>
|
|
|
|
</form>
|
|
{% 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>
|
|
|
|
{% include "messages" %}
|
|
<style>
|
|
.np-header-content {
|
|
justify-content: space-between;
|
|
max-width: 1440px;
|
|
margin: auto;
|
|
padding: 0 16px;
|
|
|
|
}
|
|
/*@media only screen and (max-width: 1150px) {
|
|
.hidden-mobile-custom {
|
|
display: none;
|
|
}*/
|
|
}
|
|
.hidden-mobile-custom
|
|
.np-header-logo {
|
|
flex-grow:unset;
|
|
}
|
|
.header-buttons-wrapper {
|
|
display: flex;
|
|
}
|
|
|
|
.np-header-mobile-menu-nav-button {
|
|
font-size:25px;
|
|
}
|
|
|
|
.login-btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left: 1rem;
|
|
background: #001B38;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
border-radius: 50px;
|
|
padding: 13px 24px;
|
|
}
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.np-sub-navigation-content-item-link {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: rgb(0, 27, 56);
|
|
}
|
|
.np-sub-navigation {
|
|
background: none;
|
|
}
|
|
.np-header {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
-webkit-transition: all ease-out .5s;
|
|
-moz-transition: all ease-out .5s;
|
|
-o-transition: all ease-out .5s;
|
|
transition: all ease-out .5s;
|
|
top: 0;
|
|
}
|
|
.active {
|
|
background: #fff;
|
|
box-shadow: rgba(0, 27, 56, 0.08) 0px 4px 16px;
|
|
}
|
|
|
|
.np-header-search-input,
|
|
.np-header-search-input:focus {
|
|
border-radius: 50px;
|
|
opacity: 1;
|
|
color: #001b38;
|
|
border-color: #bbbdbf;
|
|
}
|
|
.np-header-font-background-color {
|
|
background: none;
|
|
}
|
|
.np-header-avatar-image {
|
|
height: 46px;
|
|
}
|
|
.np-header-search-icon {
|
|
color: unset;
|
|
}
|
|
|
|
@media (min-width:768px) {
|
|
.np-header {
|
|
height:100px;
|
|
}
|
|
|
|
.header-logo-image {
|
|
height: 42px;
|
|
}
|
|
}
|
|
|
|
@media (min-width:1170px) and (max-width:1200px) {
|
|
.np-sub-navigation-content-item {
|
|
margin: 0px 14px;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
$(function() {
|
|
let link = window.location.href.length;
|
|
|
|
if (window.location.href.split("app")[1].includes("/")) document.getElementsByClassName('np-header')[0].style.background = "#fff";
|
|
$(window).on("scroll", function() {
|
|
if($(window).scrollTop() > 50) {
|
|
$(".np-header").addClass("active");
|
|
} else {
|
|
//remove the background property so it comes transparent again (defined in your css)
|
|
$(".np-header").removeClass("active");
|
|
}
|
|
});
|
|
});
|
|
</script> |