309 lines
9.1 KiB
Plaintext
309 lines
9.1 KiB
Plaintext
<header class="np-header np-header-color">
|
|
<div class="np-header-content">
|
|
<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">
|
|
<img
|
|
alt="{{ current_person.name }}"
|
|
class="np-header-avatar-image"
|
|
src="{{ current_person.avatar_url }}" />
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
{% 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 }}" />
|
|
<div class="logo-text">Brighton Academy</div>
|
|
</a>
|
|
</h1>
|
|
{% else %}
|
|
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
|
{{ current_school.name }}
|
|
</a>
|
|
{% endif %}
|
|
|
|
<div class="np-hidden-mobile np-header-desktop-nav">
|
|
<ul class="np-header-desktop-nav-list">
|
|
{% for link in navigations.sub_navigation %}
|
|
{% unless link.label == "Dashboard" %}
|
|
<li class="np-header-desktop-nav-item">
|
|
<a href="{% if link.label == 'Catalog' %}/app/courses{% else %}{{ link.url }}{% endif %}" class="np-header-desktop-nav-link np-header-font-color {{ link.active_class }}">
|
|
{% if link.label == "Home" %}
|
|
Dashboard
|
|
{% elsif link.label == "Catalog" %}
|
|
Courses
|
|
{% elsif link.label == "Events" %}
|
|
Upcoming Events
|
|
{% else %}
|
|
{{ link.label }}
|
|
{% endif %}
|
|
</a>
|
|
</li>
|
|
{% endunless %}
|
|
{% endfor %}
|
|
{% 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-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"
|
|
type="text"
|
|
name="q"
|
|
placeholder="{% t .search %}" />
|
|
<i class="np-header-search-icon far fa-search np-header-font-color"></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>
|
|
<div>
|
|
<span class="welcome-text">Welcome back,</span><br>
|
|
<strong class="person-name-text">
|
|
{% if current_person.first_name %}
|
|
{{ current_person.first_name }}{% endif %}
|
|
{% if current_person.last_name %}
|
|
{{ current_person.last_name }}{% endif %}
|
|
</strong>
|
|
</div>
|
|
<svg
|
|
style="margin-left: 13px"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="9"
|
|
viewBox="0 0 21 13"
|
|
fill="none">
|
|
<path
|
|
d="M1.0376 1.23193L10.5188 10.7129L20 1.23193"
|
|
stroke="#0077B8"
|
|
stroke-width="2" />
|
|
</svg>
|
|
</button>
|
|
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
|
<div>
|
|
<span class="welcome-text">Welcome back,</span><br>
|
|
<strong class="person-name-text">
|
|
{% if current_person.first_name %}
|
|
{{ current_person.first_name }}{% endif %}
|
|
{% if current_person.last_name %}
|
|
{{ current_person.last_name }}{% endif %}
|
|
</strong>
|
|
</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" href="/app/profile">
|
|
Your Profile
|
|
</a>
|
|
<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">
|
|
{% 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">
|
|
<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>
|
|
{% for link in navigations.sub_navigation %}
|
|
<a href="{{ link.url }}" class="np-header-mobile-menu-content-button {{ link.active_class }}">
|
|
{% if link.label == "Home" %}
|
|
Dashboard
|
|
{% elsif link.label == "Events" %}
|
|
Upcoming Events
|
|
{% else %}
|
|
{{ link.label }}
|
|
{% endif %}
|
|
</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" href="/app/profile">
|
|
Your Profile
|
|
</a>
|
|
<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-logo a {
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.np-header-logo img {
|
|
border-right: 1px solid #707070;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.np-header-logo .logo-text {
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.4px;
|
|
margin-left: 16px;
|
|
color: #000;
|
|
}
|
|
|
|
.np-sub-navigation-content-item-inactive {
|
|
color: #0077B8;
|
|
font-size: 20px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
|
|
.np-sub-navigation-content-item-active {
|
|
color: #185A7D!important;
|
|
font-size: 20px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
border-bottom: 1px solid #185A7D;
|
|
}
|
|
|
|
.np-header {
|
|
position: relative;
|
|
z-index: 1;
|
|
border-bottom: 1px solid #185A7D;
|
|
padding: 0 4%;
|
|
}
|
|
|
|
.np-header-avatar-button {
|
|
text-align: left;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.np-header-avatar-button i {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.np-header-search-icon {
|
|
color: #0077B8;
|
|
font-size: 23px;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.welcome-text {
|
|
color: #185A7D;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.person-name-text {
|
|
color: #185A7D;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
line-height: normal;
|
|
}
|
|
|
|
.np-header-avatar-tooltip {
|
|
top: 0;
|
|
width: 100%;
|
|
border: 1px solid #F0F0F0;
|
|
background: #fff;
|
|
box-shadow: 2px 1px 1.5px 0 rgba(0, 0, 0, 0.16);
|
|
}
|
|
|
|
.np-header-avatar-tooltip > div {
|
|
padding-left: 20px;
|
|
padding-top: 10px
|
|
}
|
|
|
|
.np-header-avatar-tooltip-navigation-link {
|
|
color: #0077B8;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
line-height: 46px;
|
|
}
|
|
|
|
@media(min-width:768px) {
|
|
.np-header {
|
|
height: 120px;
|
|
}
|
|
|
|
.np-header-logo .logo-text {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
</style> |