Added two of Christie's academies for mini-migration project.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,293 @@
|
||||
<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 %}"
|
||||
>
|
||||
{% t .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 {
|
||||
border: 1px solid black;
|
||||
color: #231F20;
|
||||
}
|
||||
.header-search-input::placeholder {
|
||||
color: #231F20;
|
||||
}
|
||||
header {
|
||||
color: #231F20;
|
||||
}
|
||||
header > *a {
|
||||
text-decoration: none;
|
||||
color: #231F20;
|
||||
}
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30px 5%;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
}
|
||||
.header-logo {
|
||||
align-self: center;
|
||||
filter: invert(1);
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
.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 {
|
||||
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: 768px) {
|
||||
.header-mobile-top {
|
||||
flex-direction: column;
|
||||
}
|
||||
.header-mobile-logo {
|
||||
margin: 0 auto 20px;
|
||||
filter: invert(1);
|
||||
}
|
||||
.header-mobile-top-right {
|
||||
justify-content: space-evenly;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user