429 lines
11 KiB
Plaintext
429 lines
11 KiB
Plaintext
<header class="np-header np-header-color" style='height: 50px;'>
|
|
<div class="np-header-content">
|
|
<div class='header-desktop-left'>
|
|
{% if current_school.logo_url %}
|
|
<h1 class="np-header-logo">
|
|
<a href="{% route home %}">
|
|
<img src="https://schoolkeep-production.s3.amazonaws.com/wysiwyg/c4231bd9-2caa-4eca-bdaa-92cd69c0a35f/20180105100241_logo_1.png" alt="{{ current_school.name }}" style='display: flex;' class='logo-image'>
|
|
</a>
|
|
</h1>
|
|
{% else %}
|
|
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
|
{{ current_school.name }}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
<div class='header-desktop-right np-hidden-mobile-new'>
|
|
<div class="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"
|
|
style='font-weight: 700;'
|
|
>
|
|
{{ website_navigation.name }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% if current_person.signed_in? %}
|
|
<form action="{% route search %}" method="get" data-test="desktop-search" style="background: white; border-radius: 4px;" class='header-search-form' id='header-search-form'>
|
|
<input
|
|
aria-label="{% t .search %}"
|
|
class="header-search-input"
|
|
type="text"
|
|
name="q"
|
|
placeholder="Search by keyword"
|
|
/>
|
|
<button class="far fa-search header-search-button" type="submit" form='header-search-form'></button>
|
|
</form>
|
|
<div class="np-hidden-mobile-new 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
|
|
style='color: white; font-weight: 700;'
|
|
>
|
|
{{ current_person.name }}
|
|
</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 %}
|
|
<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>
|
|
<div class='np-header-right-mobile np-hidden-desktop-new'>
|
|
<i class="mobile-search-button far fa-search" id='mobile-search-button'></i>
|
|
<i class="mobile-menu-button fas fa-bars" id='mobile-menu-button'></i>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class='bottom-header-search np-hidden np-hidden-desktop-new' id='menu-mobile-search-menu'>
|
|
<form action="{% route search %}" method="get" data-test="desktop-search" style="background: white; border-radius: 4px;" class='menu-mobile-search-form' id='menu-mobile-search-form'>
|
|
<input
|
|
aria-label="{% t .search %}"
|
|
class="menu-mobile-search-input"
|
|
type="text"
|
|
name="q"
|
|
placeholder="Search by keyword"
|
|
/>
|
|
<button class="far fa-search menu-mobile-search-button" type="submit" form='menu-mobile-search-form'></button>
|
|
</form>
|
|
<i class="menu-mobile-close fas fa-times"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="np-hidden-desktop-new np-hidden" id='mobile-menu-menu'>
|
|
<i class="mobile-menu-close fas fa-times" id='mobile-menu-close'></i>
|
|
<ul class="mobile-menu-list">
|
|
{% for website_navigation in navigations.header_navigations_external %}
|
|
<li class='mobile-menu-list-li'>
|
|
<a href="{{ website_navigation.path }}" class='mobile-menu-list-element'>
|
|
{{ website_navigation.name }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
<li class='mobile-menu-list-li'><a href="/app/account" class='mobile-menu-list-element'>My Profile</a></li>
|
|
<li style='border-bottom: 1px solid #1a1a1a;'></li>
|
|
<li class='mobile-menu-list-li'><a href="{% route logout %}" data-method="delete" rel="nofollow" class='mobile-menu-list-element'>Log Out</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
{% include "messages" %}
|
|
<div class="main_site">
|
|
|
|
<style>
|
|
.np-header-content {
|
|
justify-content: space-between;
|
|
}
|
|
.header-desktop-right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.np-header-search {
|
|
align-self: center;
|
|
}
|
|
.np-header-right-mobile {
|
|
display: flex;
|
|
}
|
|
.np-header-search-icon:before {
|
|
font-weight: 700;
|
|
color: gray;
|
|
}
|
|
|
|
.mobile-menu-button {
|
|
font-size: 1.5rem;
|
|
color: white;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
}
|
|
.mobile-search-button {
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
}
|
|
.mobile-search-button:before {
|
|
color: white;
|
|
font-weight: 700;
|
|
font-size: 1.25rem;
|
|
align-self: center;
|
|
}
|
|
.bottom-header-search {
|
|
background: #00aae5;
|
|
height: 50px;
|
|
display: flex;
|
|
}
|
|
|
|
.header-search-form {
|
|
height: 40px;
|
|
display: flex;
|
|
width: 20%;
|
|
margin: auto;
|
|
}
|
|
.header-search-input {
|
|
padding-left: 15px;
|
|
border: none;
|
|
width: 100%;
|
|
background: none;
|
|
}
|
|
.header-search-input:focus-visible {
|
|
outline: none;
|
|
}
|
|
.header-search-icon {
|
|
right: .75rem;
|
|
top: 0.6rem;
|
|
|
|
}
|
|
.header-search-icon:before {
|
|
color: darkgray;
|
|
}
|
|
.header-search-button {
|
|
width: 60px;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: gray;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.menu-mobile-search-form {
|
|
height: 40px;
|
|
display: flex;
|
|
width: 70%;
|
|
margin: auto;
|
|
}
|
|
.menu-mobile-search-input {
|
|
padding-left: 15px;
|
|
border: none;
|
|
width: 100%;
|
|
background: none;
|
|
}
|
|
.menu-mobile-search-input:focus-visible {
|
|
outline: none;
|
|
}
|
|
.menu-mobile-search-icon {
|
|
right: .75rem;
|
|
top: 0.6rem;
|
|
}
|
|
.menu-mobile-search-icon:before {
|
|
color: darkgray;
|
|
}
|
|
.menu-mobile-search-button {
|
|
width: 60px;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: gray;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
.menu-mobile-close {
|
|
z-index: 100;
|
|
position: absolute;
|
|
padding: 15px;
|
|
font-size: 20px;
|
|
padding: auto;
|
|
align-items: center;
|
|
align-self: center;
|
|
right: 5px;
|
|
cursor: pointer;
|
|
}
|
|
#mobile-menu-menu {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -256px;
|
|
width: 256px;
|
|
background: #3b3f3d;
|
|
z-index: 10000;
|
|
height: 100%;
|
|
pointer-events: all;
|
|
}
|
|
.mobile-menu-close {
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
top: 13px;
|
|
position: absolute;
|
|
left: 15px;
|
|
}
|
|
.mobile-menu-list {
|
|
list-style-type: none;
|
|
margin-top: 40px;
|
|
padding-left: 10px;
|
|
}
|
|
.mobile-menu-list-element {
|
|
color: #ccc;
|
|
font-weight: 400;
|
|
text-decoration: none;
|
|
|
|
}
|
|
.mobile-menu-list-li:hover * {
|
|
color: #ffffff;
|
|
text-shadow: none;
|
|
cursor: pointer;
|
|
}
|
|
.mobile-menu-list-li:hover {
|
|
background: #9b4b87;
|
|
}
|
|
.mobile-menu-list-li {
|
|
padding: 8px 16px;
|
|
}
|
|
.np-header-desktop-nav-list {
|
|
flex-wrap: nowrap;
|
|
}
|
|
@media screen and (min-width: 1056px) {
|
|
.np-hidden-desktop-new {
|
|
display: none !important;
|
|
}
|
|
.np-header-search-input {
|
|
background:#fff;
|
|
border:2px solid #bac4ca;
|
|
border-radius:4px;
|
|
color:#486776;
|
|
font-size:15px;
|
|
opacity:1;
|
|
outline:none;
|
|
padding:0 1.5rem 0 1rem;
|
|
width:90%;
|
|
height: 2.5rem;
|
|
}
|
|
.np-header-search-input::placeholder {
|
|
color: black;
|
|
}
|
|
.np-header-search-input:focus {
|
|
width: 90%;
|
|
padding:0 1.5rem 0 1rem;
|
|
}
|
|
}
|
|
@media (min-width:1643px) and (max-width:1738px) {
|
|
.header-search-form {
|
|
width: 14%;
|
|
}
|
|
}
|
|
@media (min-width:1472px) and (max-width:1610px) {
|
|
.header-search-form {
|
|
width: 14%;
|
|
}
|
|
}
|
|
@media (min-width:0px) and (max-width:1311px) {
|
|
.header-search-form {
|
|
width: 14%;
|
|
}
|
|
.header-search-input::placeholder {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
@media (min-width:1472px) and (max-width:1643px) {
|
|
.np-header-desktop-nav-item {
|
|
padding: 1rem 0.5rem;
|
|
}
|
|
.np-header-avatar-button {
|
|
margin: 0 0 0 0.5rem;
|
|
}
|
|
}
|
|
@media (min-width:1472px) and (max-width:1550px) {
|
|
.np-header-desktop-nav-link {
|
|
font-size: 14px;
|
|
}
|
|
.np-header-avatar-button {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
@media (min-width:1056px) and (max-width:1472px) {
|
|
.np-header-content {
|
|
flex-direction: column;
|
|
align-items: unset;
|
|
}
|
|
.np-header {
|
|
height: 100px !important;
|
|
}
|
|
.np-header-logo {
|
|
margin-bottom: 0;
|
|
}
|
|
.header-desktop-left {
|
|
margin-top: 1.5rem;
|
|
}
|
|
.header-desktop-right {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.np-header-desktop-nav-list {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
@media (min-width:1056px) and (max-width:1220px) {
|
|
.np-header-desktop-nav-item {
|
|
padding: 1rem 0.5rem;
|
|
}
|
|
.np-header-avatar-button {
|
|
margin: 0 0 0 0.5rem;
|
|
}
|
|
}
|
|
@media (min-width:1056px) and (max-width:1118px) {
|
|
.np-header-desktop-nav-link {
|
|
font-size: 14px;
|
|
}
|
|
.np-header-avatar-button {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 1055px) {
|
|
.np-hidden-mobile-new {
|
|
display: none !important;
|
|
}
|
|
.np-header-content {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
@media screen and (max-width: 445px) {
|
|
.logo-image {
|
|
width: 250px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 400px) {
|
|
.menu-mobile-search-form {
|
|
width: 85%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
var a = $("#mobile-menu-menu").children()
|
|
var a = a.add($("#mobile-menu-menu"))
|
|
$("#mobile-search-button").click(function() {
|
|
$("#menu-mobile-search-menu").toggleClass('np-hidden');
|
|
});
|
|
$(".menu-mobile-close").click(function() {
|
|
$("#menu-mobile-search-menu").toggleClass('np-hidden');
|
|
});
|
|
$("#mobile-menu-button").click(function() {
|
|
$("#mobile-menu-menu").toggleClass('np-hidden');
|
|
window.onscroll = function () { window.scrollTo(0, 0); };
|
|
$('body').css({position: 'relative', left: '-256px'});
|
|
$("#mobile-menu-menu")
|
|
$('body:not(a)').css({pointerEvents: 'none', filter: 'grayscale(40%)'});
|
|
})
|
|
$('#mobile-menu-close').click(function(){
|
|
$('body').css({position: '', left: '', filter: ''});
|
|
$('body:not(a)').css({pointerEvents: ''});
|
|
window.onscroll = function() {}
|
|
$("#mobile-menu-menu").toggleClass('np-hidden');
|
|
})
|
|
</script> |