293 lines
7.9 KiB
Plaintext
293 lines
7.9 KiB
Plaintext
<header class="header-desktop np-hidden-mobile">
|
|
<div class="header-container">
|
|
<div class="header-logo">
|
|
<a href="/app">
|
|
<img src="{{ current_school.logo_url }}" alt="{{ current_school.name }}">
|
|
</a>
|
|
</div>
|
|
<nav class="header-nav">
|
|
<ul class="header-nav-list">
|
|
<li class="header-nav-item">
|
|
<form class="header-search" action="{% route search %}" method="get" data-test="desktop-search">
|
|
<input
|
|
aria-label="{% t .search %}"
|
|
class="header-search-input"
|
|
type="text"
|
|
name="q"
|
|
placeholder="Search"
|
|
/>
|
|
<i class="header-search-button far fa-search"></i>
|
|
</form>
|
|
</li>
|
|
<li class="header-nav-item">
|
|
<a href="/app/dashboard" class="header-nav-link">
|
|
My Courses
|
|
</a>
|
|
</li>
|
|
<li class="header-nav-item">
|
|
<a href="/app" class="header-nav-link">
|
|
Home
|
|
</a>
|
|
</li>
|
|
<li class="header-nav-item">
|
|
<a href="/app/catalog" class="header-nav-link">
|
|
All Courses
|
|
</a>
|
|
</li>
|
|
<li class="header-nav-item">
|
|
<a href="/app/training_events" class="header-nav-link">
|
|
Live Training
|
|
</a>
|
|
</li>
|
|
<li class="header-nav-item">
|
|
<a href="/app/learning_paths" class="header-nav-link">
|
|
Learning Paths
|
|
</a>
|
|
</li>
|
|
<li class="header-nav-item learner-profile-button">
|
|
<div class="np-hidden-mobile np-header-avatar">
|
|
<button
|
|
style="margin-left: 0;"
|
|
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 class="header-nav-item learner-profile-button">
|
|
{{ current_person.name }}
|
|
</div>
|
|
</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 %}"
|
|
>
|
|
Sign Out
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<header class="header-mobile np-hidden-desktop">
|
|
<div class="header-mobile-top">
|
|
<div class="header-mobile-logo">
|
|
<a href="/app">
|
|
<img src="{{ current_school.logo_url }}" alt="{{ current_school.name }}">
|
|
</a>
|
|
</div>
|
|
<div class="header-mobile-top-right">
|
|
<form class="header-search" action="{% route search %}" method="get" data-test="desktop-search">
|
|
<input
|
|
aria-label="{% t .search %}"
|
|
class="header-search-input"
|
|
type="text"
|
|
name="q"
|
|
placeholder="Search"
|
|
/>
|
|
<i class="header-search-button far fa-search"></i>
|
|
</form>
|
|
<div class="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 class="header-nav-item learner-profile-button">
|
|
{{ current_person.name }}
|
|
</div>
|
|
</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 %}"
|
|
>
|
|
Settings
|
|
</a>
|
|
{% endunless %}
|
|
<a
|
|
class="np-header-avatar-tooltip-navigation-link np-danger"
|
|
href="{% route logout %}"
|
|
>
|
|
Sign out
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul class="header-mobile-bottom">
|
|
<li class="header-nav-item">
|
|
<a href="/app/dashboard" class="header-nav-link">
|
|
My Courses
|
|
</a>
|
|
</li>
|
|
<li class="header-nav-item">
|
|
<a href="/app" class="header-nav-link">
|
|
Home
|
|
</a>
|
|
</li>
|
|
<li class="header-nav-item">
|
|
<a href="/app/catalog" class="header-nav-link">
|
|
All courses
|
|
</a>
|
|
</li>
|
|
<li class="header-nav-item">
|
|
<a href="/app/training_events" class="header-nav-link">
|
|
Live Training
|
|
</a>
|
|
</li>
|
|
<li class="header-nav-item">
|
|
<a href="/app/learning_paths" class="header-nav-link">
|
|
Learning Paths
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</header>
|
|
|
|
<style>
|
|
.header-search-input {
|
|
color: white;
|
|
border: 1px solid white;
|
|
}
|
|
.header-container {
|
|
position: absolute;
|
|
}
|
|
header {
|
|
color: white;
|
|
}
|
|
header > *a {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
.header-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 30px 5%;
|
|
z-index: 1;
|
|
width: 100%;
|
|
}
|
|
.header-logo {
|
|
align-self: center;
|
|
}
|
|
.header-nav {
|
|
width: 70%;
|
|
max-width: 750px;
|
|
}
|
|
.header-nav-list {
|
|
display: flex;
|
|
margin: auto;
|
|
list-style: none;
|
|
}
|
|
.header-nav-item {
|
|
margin: auto;
|
|
align-self: center;
|
|
}
|
|
.header-nav-item:first-child {
|
|
margin-left: 0;
|
|
}
|
|
.header-nav-item:last-child {
|
|
margin-right: 0;
|
|
}
|
|
.header-nav-item:not(.learner-profile-button):hover {
|
|
font-weight: 700;
|
|
}
|
|
.header-search {
|
|
position: relative;
|
|
}
|
|
.header-search-input {
|
|
background: none;
|
|
padding: 8px 30px 8px 10px;
|
|
max-width: 120px;
|
|
}
|
|
.header-search-input::placeholder {
|
|
opacity: 100%;
|
|
color: white;
|
|
}
|
|
.header-search-button {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
right: 0%;
|
|
}
|
|
.np-header-avatar-tooltip-navigation > * {
|
|
color: black !important;
|
|
}
|
|
.np-header-avatar-tooltip-navigation > *:hover {
|
|
color: black !important;
|
|
}
|
|
|
|
@media screen and (max-width: 920px) {
|
|
.header-container {
|
|
padding: 30px 3%;
|
|
}
|
|
}
|
|
|
|
.header-mobile {
|
|
position: absolute;
|
|
z-index: 2;
|
|
width: 100vw;
|
|
padding: 20px 5%;
|
|
}
|
|
.header-mobile-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.header-mobile-top-right {
|
|
display: flex;
|
|
}
|
|
.header-mobile-bottom {
|
|
display: flex;
|
|
list-style: none;
|
|
padding-left: 0;
|
|
margin-top: 15px;
|
|
}
|
|
@media screen and (max-width: 450px) {
|
|
.header-mobile-top {
|
|
flex-direction: column;
|
|
}
|
|
.header-mobile-logo {
|
|
margin: 0 auto 20px
|
|
}
|
|
.header-mobile-top-right {
|
|
justify-content: space-evenly;
|
|
margin: 0;
|
|
}
|
|
}
|
|
</style> |