574 lines
18 KiB
Plaintext
574 lines
18 KiB
Plaintext
{% assign redirect = true %}
|
|
{% if current_person.signed_in? %}
|
|
{% for group in current_person.groups %}
|
|
{% if group.id == "29ae12e6-f740-4190-a5c2-a7e12e87926f" or group.id == "aa36069f-e354-4dbe-9972-9ce70ad146d7" or group.id == "8cd6ec9c-101e-4b1a-82c7-77dac583a1f5" %}
|
|
{% assign redirect = false %}
|
|
{% break %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
{% if current_person.signed_in? and redirect %}
|
|
{% unless current_person.email contains '+preview-' %}
|
|
<script>
|
|
if (window.location.pathname != '/app/sign-up-follow-up' && window.location.pathname != '/terms_agreement/new'){
|
|
new_url = '/app/sign-up-follow-up'.concat('?redirect_uri=', encodeURIComponent(window.location.toString().split(window.location.hostname)[1]));
|
|
window.location.replace(new_url);
|
|
}
|
|
</script>
|
|
{% endunless %}
|
|
{% endif %}
|
|
|
|
<header id="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=".np-button-mobile-content, .fa-times, .np-header-mobile-menu-content, .np-main, .np-footer">
|
|
<i style="color: #005CB9;" class="far fa-bars"></i>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
{% if current_person.signed_in? %}
|
|
{% if current_school.logo_url %}
|
|
<div class="logo-container">
|
|
<h1 class="np-header-logo" style="flex-grow: 0.1 !important">
|
|
<a href="{% route home %}">
|
|
<img alt="{{ current_school.name }}" class="np-header-logo-image np-hidden-mobile" src="{{ current_school.logo_url }}" />
|
|
<img alt="{{ current_school.name }}" class="np-header-logo-image np-hidden-desktop" src="https://s3.amazonaws.com/static.northpass.com/Skuid/images/Skuid+Logomark_Primary+1.svg" />
|
|
</a>
|
|
</h1>
|
|
</div>
|
|
{% else %}
|
|
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
|
{{ current_school.name }}
|
|
</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if current_person.signed_in? %}
|
|
<div class="np-hidden-mobile form-group has-search" style="margin-left: 3%;">
|
|
<form action="{% route search %}" method="get" data-test="desktop-search">
|
|
<span class="fa fa-search form-control-feedback"></span>
|
|
<input aria-label="{% t .search %}" class="form-control" type="text" name="q" placeholder="search courses" />
|
|
</form>
|
|
</div>
|
|
|
|
<div class="np-hidden-mobile 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"
|
|
target="_blank">
|
|
{{ website_navigation.name }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
{% if current_person.signed_in? %}
|
|
<div class="np-hidden-mobile np-header-avatar" style="align-items: center;">
|
|
<div class="points-badges-avatar">
|
|
{% if current_person.properties.learner_points contains "missing property" %}
|
|
<p class="points-display"> 0 Points </p>
|
|
{% else %}
|
|
<p class="points-display"> {{ current_person.properties.learner_points }} Points </p>
|
|
{% endif %}
|
|
{% if current_person.properties.learner_badges contains "missing property" %}
|
|
<p class="badges-display"> 0 Badges </p>
|
|
{% else %}
|
|
<p class="badges-display"> {{ current_person.properties.learner_badges }} Badges </p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="points-badges-avatar">
|
|
<button class="np-header-avatar-button avatar-container" data-test="open-desktop-menu"
|
|
data-toggle-class-on-target="np-hidden" data-toggle-target=".np-header-avatar-tooltip" data-toggle-outside>
|
|
<i class="fal fa-angle-down" style="font-size: 20px;"></i>
|
|
<p style="margin-top: revert;"> {{current_person.display_name }} </p>
|
|
<img alt="{{ current_person.name }}" class="np-header-avatar-image avatar-image"
|
|
src="{{ current_person.avatar_url }}">
|
|
</button>
|
|
</div>
|
|
<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.display_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" href="mailto:{{ website_footer.school_customer_service_email }}">
|
|
Need help?
|
|
</a>
|
|
<a class="np-header-avatar-tooltip-navigation-link np-danger" href="{% route logout %}">
|
|
{% t .sign_out %}
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div style="display: flex; align-items: center;">
|
|
<div class="logo-container">
|
|
<h1 class="np-header-logo" style="flex-grow: 0.1 !important">
|
|
<a href="{% route home %}">
|
|
<img alt="{{ current_school.name }}" class="np-header-logo-image np-hidden-mobile" src="{{ current_school.logo_url }}" />
|
|
<img alt="{{ current_school.name }}" class="np-header-logo-image np-hidden-desktop" src="https://s3.amazonaws.com/static.northpass.com/Skuid/images/Skuid+Logomark_Primary+1.svg" />
|
|
</a>
|
|
</h1>
|
|
</div>
|
|
<div class="np-hidden-mobile form-group has-search" style="margin-left: 3%;">
|
|
<form action="{% route search %}" method="get" data-test="desktop-search">
|
|
<span class="fa fa-search form-control-feedback"></span>
|
|
<input aria-label="{% t .search %}" class="form-control" type="text" name="q" />
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; align-items: center;">
|
|
<a class="np-header-sign-in np-header-desktop-nav-link np-header-font-color" style="font-size: 16px;" aria-label="{% t shared.sign_in %}"
|
|
href="{% route login %}">
|
|
Login
|
|
</a>
|
|
<a class="np-header-sign-in np-header-desktop-nav-link np-header-font-color np-button" style="margin-left: 18%; color: white; border-radius: 32px; font-size: 16px;" aria-label="{% t shared.sign_up %}"
|
|
href="{% route sign_up %}">
|
|
Register
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</header>
|
|
|
|
<div class="np-hidden-desktop">
|
|
<div class="np-header-mobile-menu-content np-hidden">
|
|
<div class="mobile-header-dropdown">
|
|
{% if current_school.logo_url %}
|
|
<div>
|
|
<h1 class="np-header-logo" style="flex-grow: 0.1 !important">
|
|
<a href="{% route home %}">
|
|
<img alt="{{ current_school.name }}" class="np-header-logo-image" src="https://s3.amazonaws.com/static.northpass.com/Skuid/images/Skuid+Logomark_Primary+1.svg" />
|
|
</a>
|
|
</h1>
|
|
</div>
|
|
{% endif%}
|
|
<div>
|
|
<button class="np-hidden np-button-mobile-content" id='closing-button' data-test="close-mobile-menu" data-toggle-class="np-hidden" data-toggle-target=".np-header-mobile-avatar-menu, .fa-times, .np-header-mobile-menu-content, .np-main, .np-footer">
|
|
<input type="image" src="https://s3.amazonaws.com/static.northpass.com/Skuid/images/OpenNavIcon.svg" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% if current_person.signed_in? %}
|
|
<div class="user-container-mobile">
|
|
|
|
<a href="{% route account %}" class="np-header-mobile-menu-content-button mobile-header-link" style="border-bottom: none;">
|
|
<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>
|
|
</a>
|
|
|
|
</div>
|
|
{% endif %}
|
|
<div class="np-header-mobile-menu-content-nav">
|
|
<form class="np-header-search" data-test="mobile-search" method="get" action="{% route search %}">
|
|
<i class="np-header-search-icon far fa-search"></i>
|
|
<input aria-label="{% t .search %}" class="np-header-search-input" type="text" name="q"
|
|
placeholder="{% t .search %}" />
|
|
</form>
|
|
{% for link in navigations.sub_navigation %}
|
|
{% if link.label == "Events" or link.label == "Dashboard" %}
|
|
{% elsif link.label == "Catalog" %}
|
|
<a href="{{ link.url }}" class="np-header-mobile-menu-content-button mobile-header-link">
|
|
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon custom-navigation-content-item-icon"></i>
|
|
Courses
|
|
</a>
|
|
{% elsif link.label == "Home" %}
|
|
<a href="{{ link.url }}" class="np-header-mobile-menu-content-button mobile-header-link">
|
|
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon custom-navigation-content-item-icon"></i>
|
|
Home
|
|
</a>
|
|
{% else %}
|
|
<a href="{{ link.url }}" class="np-header-mobile-menu-content-button mobile-header-link">
|
|
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon custom-navigation-content-item-icon"></i>
|
|
{{ link.label }}
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{%comment%}
|
|
<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>
|
|
{%endcomment%}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include "messages" %}
|
|
|
|
{% if current_person.signed_in? %}
|
|
<style>
|
|
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
body {
|
|
transform: scaleX(0.962014);
|
|
background: linear-gradient(90deg, #ebf5ff 230px, #fff 230px);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1025px) and (max-width: 2500px) {
|
|
body {
|
|
transform: scaleX(0.962014);
|
|
background: linear-gradient(90deg, #ebf5ff 293px, #fff 293px);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 2501px) {
|
|
body {
|
|
transform: scaleX(0.962014);
|
|
background: linear-gradient(90deg, #ebf5ff 350px, #fff 350px);
|
|
}
|
|
}
|
|
|
|
.np-main {
|
|
padding-left: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
body {
|
|
background: #fff;
|
|
transform: none;
|
|
}
|
|
|
|
.np-header-content {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.np-header-mobile-menu-nav {
|
|
position: relative !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) and (max-width: 1440px) {
|
|
.np-main {
|
|
margin-left: 9% !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1440px) and (max-width: 2500px) {
|
|
.np-main {
|
|
margin-left: 8% !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) and (max-width: 1900px) {
|
|
.np-card.np-no-horizontal-padding {
|
|
padding-left: 25px;
|
|
padding-right: 25px;
|
|
}
|
|
|
|
.np-learning-paths-main > .np-resource-title,
|
|
.np-learning-paths-main > .np-resource-subtitle,
|
|
.np-catalog-header {
|
|
padding-left: 25px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.np-footer {
|
|
padding-left: 24%;
|
|
}
|
|
}
|
|
</style>
|
|
{% endif %}
|
|
|
|
{% unless current_person.signed_in? %}
|
|
<style>
|
|
@media screen and (min-width: 769px) {
|
|
.np-header {
|
|
background: transparent;
|
|
padding-left: 3%;
|
|
padding-right: 3%;
|
|
height: 85px;
|
|
}
|
|
|
|
.np-card.np-no-horizontal-padding {
|
|
padding-left: 2rem;
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.np-header-content {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.logo-container {
|
|
padding: 0px 50px 0px 5px;
|
|
}
|
|
|
|
.form-control {
|
|
border: 1px solid #005CB9 !important;
|
|
}
|
|
|
|
.np-homepage-hero-image {
|
|
max-height: fit-content;
|
|
}
|
|
|
|
.np-header-logo {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.np-header-content {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.np-header-mobile-menu-nav {
|
|
display: none !important;
|
|
}
|
|
|
|
.np-header-sign-in {
|
|
position: relative;
|
|
}
|
|
|
|
}
|
|
</style>
|
|
{% endunless %}
|
|
|
|
<style>
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
.np-header-logo-image {
|
|
height: 40px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.np-header-search-input:focus {
|
|
color: black;
|
|
}
|
|
|
|
#closing-button {
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.np-header-mobile-menu-content-nav {
|
|
padding: 0 1.25rem;
|
|
}
|
|
|
|
.mobile-header-link {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-top: 15px;
|
|
padding-bottom: 25px;
|
|
margin-top: 1rem;
|
|
border-bottom: 1.08108px solid #BFD6ED;
|
|
padding-left: 6px;
|
|
padding-right: 10px;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
color: black;
|
|
font-family: "F37 Moon";
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: 19.4595px;
|
|
}
|
|
|
|
.np-header {
|
|
background-color: #EBF5FF;
|
|
}
|
|
|
|
.np-header-content {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.np-header-mobile-menu-content {
|
|
background-color: #EBF5FF;
|
|
padding-top: 30px;
|
|
}
|
|
|
|
.np-header-mobile-menu-content-avatar {
|
|
height: 50px;
|
|
width: 50px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.np-header-mobile-menu-content-name {
|
|
font-family: "F37 Moon";
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: 19.4595px;
|
|
color: black;
|
|
}
|
|
|
|
.np-header-search-input {
|
|
font-family: "F37 Moon";
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: 19.4595px;
|
|
color: black;
|
|
border: none;
|
|
padding: 0 0 0 50px;
|
|
background-color: #EBF5FF;
|
|
}
|
|
|
|
.np-header-search-input::placeholder {
|
|
color: black;
|
|
font-family: "F37 Moon";
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: 19.4595px;
|
|
}
|
|
|
|
@media (max-width:425px) {
|
|
.np-header-mobile-menu-content {
|
|
background-color: #EBF5FF;
|
|
padding-top: 30px;
|
|
}
|
|
|
|
.mobile-header-dropdown {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 88%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.user-container-mobile {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 88%;
|
|
justify-content: space-between;
|
|
padding-top: 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1.08108px solid #BFD6ED;
|
|
}
|
|
|
|
.np-header-search {
|
|
background-color: #EBF5FF;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1.08108px solid #BFD6ED;
|
|
}
|
|
|
|
.np-header-search-icon {
|
|
color: black;
|
|
left: 2%;
|
|
top: 2rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 426px) and (max-width: 768px) {
|
|
.np-header-search-input {
|
|
float: none;
|
|
width: 100%;
|
|
opacity: unset;
|
|
|
|
}
|
|
|
|
.np-header-search-input:focus {
|
|
padding: 0;
|
|
margin-left: 50px;
|
|
width: 92%;
|
|
}
|
|
|
|
.np-header-search-input:focus {
|
|
padding: 0;
|
|
margin-left: 50px;
|
|
width: 92%;
|
|
}
|
|
|
|
.np-header-mobile-menu-content {
|
|
background-color: #EBF5FF;
|
|
padding-top: 0;
|
|
margin-top: -55px;
|
|
}
|
|
|
|
.mobile-header-dropdown {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 95%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.user-container-mobile {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 95%;
|
|
justify-content: space-between;
|
|
padding-top: 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1.08108px solid #BFD6ED;
|
|
}
|
|
|
|
.np-header-search {
|
|
background-color: #EBF5FF;
|
|
padding-top: 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1.08108px solid #BFD6ED;
|
|
}
|
|
|
|
.np-header-search-icon {
|
|
color: black;
|
|
left: 1%;
|
|
top: 2rem;
|
|
}
|
|
|
|
.np-header-search-input::placeholder {
|
|
padding-left: 90%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 320px) {
|
|
.np-header-search-input::placeholder {
|
|
padding-left: 72%;
|
|
}
|
|
|
|
.np-header-mobile-menu-content {
|
|
padding-top: 0;
|
|
margin-top: -55px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 321px) and (max-width: 375px) {
|
|
.np-header-search-input::placeholder {
|
|
padding-left: 75%;
|
|
}
|
|
|
|
.np-header-mobile-menu-content {
|
|
padding-top: 0;
|
|
margin-top: -55px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 376px) and (max-width: 425px) {
|
|
.np-header-search-input::placeholder {
|
|
padding-left: 78%;
|
|
}
|
|
|
|
.np-header-mobile-menu-content {
|
|
padding-top: 0;
|
|
margin-top: -55px;
|
|
}
|
|
}
|
|
}
|
|
</style> |