This commit is contained in:
Norm Rasmussen
2022-08-04 21:16:13 -04:00
parent 4d205d7699
commit f95a314ef4
5 changed files with 305 additions and 0 deletions

Binary file not shown.

View File

@ -0,0 +1,119 @@
<link rel="stylesheet" href="https://use.typekit.net/ghp1udi.css">
<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 }}" />
</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 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 np-header-font-background-color" type="text"
name="q" placeholder="{% t .search %}" />
<i class="np-header-search-icon far fa-search"></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>
<img alt="{{ current_person.name }}" class="np-header-avatar-image" src="{{ current_person.avatar_url }}">
</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 %}
</div>
{% 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 website_navigation in navigations.header_navigations %}
<a href="{{ website_navigation.path }}" class="np-header-mobile-menu-content-button"
{% if website_navigation.external? %} target="_blank" {% endif %}>
{{ website_navigation.name }}
</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 np-danger" href="{% route logout %}">
{% t .sign_out %}
</a>
</div>
</div>
</div>
{% include "messages" %}

View File

@ -0,0 +1,85 @@
<div id="path-banner" class="np-resource-header np-resource-header-card np-card-padding-large">
<div id="path-text-title" class="np-top-vocabulary np-text-title">
{% t shared.learning_path.title %}
<i id="path-icon-lp" class="far fa-road np-button-color np-learning-path-icon"></i>
</div>
<div id="path-banner-title" class="np-top-title">
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
<i id="path-arrow" class="far fa-arrow-left np-icon-back"></i>
</a>
{{ learning_path.name }}
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="np-card-container">
<img src="{{ learning_path.image_url }}" class="np-top-image" alt="{{ learning_path.name }}" />
<div class="np-card-padding-dynamic">
{% include "learning_path_description" %}
{% include "learning_path_instructors" %}
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 np-grid-spacing">
<div class="np-top-cta">
{% include "learning_path_progress_and_cta" %}
</div>
{% include "learning_path_outline" %}
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
var url = window.location.pathname;
if (url.indexOf('/app/learning_paths/283ab1f9-5bd5-4e64-b6e5-4a3a5e0cde5a') > -1) {
$("#path-banner").attr("class", "path-banner-y1 np-resource-header np-resource-header-card np-card-padding-large");
$("#path-banner-title").attr("class", "path-top-title");
$("#path-arrow").attr("class", "far fa-arrow-left path-icon-arrow");
$("#path-icon-lp").attr("class", "far fa-road path-icon-lp");
$("#path-text-title").attr("class", "np-top-vocabulary path-text-title");
} else if (url.indexOf('/app/learning_paths/577d28e6-b581-44fe-90bf-aff269c8394d') > -1) {
$("#path-banner").attr("class", "path-banner-y1 np-resource-header np-resource-header-card np-card-padding-large");
$("#path-banner-title").attr("class", "path-top-title");
$("#path-arrow").attr("class", "far fa-arrow-left path-icon-arrow");
$("#path-icon-lp").attr("class", "far fa-road path-icon-lp");
$("#path-text-title").attr("class", "np-top-vocabulary path-text-title");
} else if (url.indexOf('/app/learning_paths/b56514cf-6bfc-44f0-b213-089aed603961') > -1) {
$("#path-banner").attr("class", "path-banner-y2 np-resource-header np-resource-header-card np-card-padding-large");
$("#path-banner-title").attr("class", "path-top-title");
$("#path-arrow").attr("class", "far fa-arrow-left path-icon-arrow");
$("#path-icon-lp").attr("class", "far fa-road path-icon-lp");
$("#path-text-title").attr("class", "np-top-vocabulary path-text-title");
} else if (url.indexOf('/app/learning_paths/93c7eb64-c9b6-4028-ab58-1ef5eeffb37e') > -1) {
$("#path-banner").attr("class", "path-banner-y2 np-resource-header np-resource-header-card np-card-padding-large");
$("#path-banner-title").attr("class", "path-top-title");
$("#path-arrow").attr("class", "far fa-arrow-left path-icon-arrow");
$("#path-icon-lp").attr("class", "far fa-road path-icon-lp");
$("#path-text-title").attr("class", "np-top-vocabulary path-text-title");
} else if (url.indexOf('/app/learning_paths/3266a89f-8aa2-4f2e-9039-db5500e2d4ab') > -1) {
$("#path-banner").attr("class", "path-banner-y3 np-resource-header np-resource-header-card np-card-padding-large");
$("#path-banner-title").attr("class", "path-top-title");
$("#path-arrow").attr("class", "far fa-arrow-left path-icon-arrow");
$("#path-icon-lp").attr("class", "far fa-road path-icon-lp");
$("#path-text-title").attr("class", "np-top-vocabulary path-text-title");
} else if (url.indexOf('/app/learning_paths/7f43d5da-1275-45bc-8618-29cb20c0a179') > -1) {
$("#path-banner").attr("class", "path-banner-y4 np-resource-header np-resource-header-card np-card-padding-large");
$("#path-banner-title").attr("class", "path-top-title");
$("#path-arrow").attr("class", "far fa-arrow-left path-icon-arrow");
$("#path-icon-lp").attr("class", "far fa-road path-icon-lp");
$("#path-text-title").attr("class", "np-top-vocabulary path-text-title");
} else {
$("#path-banner").attr("class", "np-resource-header np-resource-header-card np-card-padding-large");
$("#path-banner-title").attr("class", "np-top-title");
$("#path-arrow").attr("class", "far fa-arrow-left np-icon-back");
$("#path-icon-lp").attr("class", "far fa-road np-button-color np-learning-path-icon");
$("#path-text-title").attr("class", "np-top-vocabulary np-text-title");
}
</script>

View File

@ -0,0 +1,32 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
{% include "sub_navigation" %}
<main class="np-main np-dashboard np-subpage-container np-max-width">
<div class="row np-flex-center">
<div class="col-xs-12 col-sm-8">
{% if features.learning_paths? %}
<div class="np-dashboard-resources-title">
{% t shared.learning_paths %}
</div>
{% include "learning_paths_index", items: learning_paths.enrolled %}
{% endif %}
</div>
{% if features.training_events? %}
<div class="np-grid-spacing col-xs-12 col-sm-4">
<div class="np-dashboard-resources-title">
{% t .upcoming_events %}
</div>
{% include "training_events_dashboard" %}
</div>
{% endif %}
</div>
<div class="row np-flex-center">
<div class="col-xs-12 col-sm-12">
<div class="np-dashboard-resources-title">
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
</div>
{% include "courses_index", class: "col-xs-12 col-sm-4 np-stretch-content" %}
</div>
</div>
</main>
{% include "footer" %}

View File

@ -0,0 +1,69 @@
/*
Put your custom overlay styles in here
You can use your northpass color palette in this file
{{ color_palette.button_font_color }}
{{ color_palette.button_color }}
{{ color_palette.button_hover_color }}
{{ color_palette.header_font_color }}
{{ color_palette.header_font_hover_color }}
{{ color_palette.header_color }}
*/
body {
font-family: Soleil, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
}
@media screen and (min-width: 768px) {
.np-header {
height: 65px !important;
}
.np-header-logo {
justify-content: flex-end !important;
}
.np-header-avatar-image,
.np-header-logo-image {
height: 38px !important;
}
.np-header-desktop-nav {
width: 0%;
}
}
.np-header-font-background-color {
background: #1d1d1b;
}
.np-footer {
background: #1d1d1b;
}
.np-footer-logo-image {
filter: grayscale(0) contrast(1) !important;
height: 40px !important;
opacity: 1 !important;
}
.np-footer-support-help {
color: #fff !important;
font-weight: 700;
}
.np-footer-support-item {
color: #fff !important;
font-size: 14px;
text-align: center;
}
.np-footer+.np-powered-by {
background: #1d1d1b !important;
}
.np-powered-by-link {
color: #fff !important;
font-size: 13px;
text-decoration: none;
}