444 lines
14 KiB
Plaintext
444 lines
14 KiB
Plaintext
<header class="np-header np-header-color" style="background: #fafafa; border: none; height: 3.5rem;">
|
|
<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">
|
|
<a class="np-header-avatar-tooltip-navigation-link" onclick="buildURL(window.location.pathname)" style="cursor:pointer">
|
|
Default
|
|
</a>
|
|
{% unless current_school.sso_active? %}
|
|
<a
|
|
class="np-header-avatar-tooltip-navigation-link"
|
|
href="{% route account %}"
|
|
>
|
|
Profile Settings
|
|
</a>
|
|
{% endunless %}
|
|
<a
|
|
class="np-header-avatar-tooltip-navigation-link np-danger"
|
|
href="{% route logout %}"
|
|
>
|
|
Sign Out
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<a
|
|
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
|
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 %}"
|
|
>
|
|
Profile Settings
|
|
</a>
|
|
{% endunless %}
|
|
<a
|
|
class="np-header-mobile-menu-content-button np-danger"
|
|
href="{% route logout %}"
|
|
>
|
|
Sign Out
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include "messages" %}
|
|
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
|
|
|
<div class="np-homepage-hero" style="background: #34abe2; z-index: -1; margin-top: -8rem; padding-top: 0.5rem;">
|
|
<img class="np-homepage-hero-image"
|
|
src="{{ homepage.artwork_url }}"
|
|
alt="{{ homepage.headline }}"
|
|
/>
|
|
<div class="np-homepage-hero-content">
|
|
<div class="np-homepage-headline np-header-font-color">
|
|
{{ homepage.headline }}
|
|
</div>
|
|
<div class="np-homepage-subheadline np-header-font-color">
|
|
{{ homepage.subheadline }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include "sub_navigation" %}
|
|
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
|
<div class="np-dashboard-header">
|
|
<div class="np-resource-title">Hi {{current_person.first_name}}! 👋</div>
|
|
<div class="np-resource-subtitle">This is what's relevant to you right now in Northpass Academy.</div>
|
|
</div>
|
|
{% comment %}<div class="row np-flex-center">
|
|
<div class="col-xs-12 col-md-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>
|
|
<div class="np-grid-spacing col-xs-12 col-md-4 progress-section">
|
|
<div class="np-dashboard-resources-title">Course Progress</div>
|
|
{% include "widget_course_progress" %}
|
|
</div>
|
|
</div>{%endcomment%}
|
|
|
|
<div class="row dashboard-section-courses">
|
|
<div class="col-xs-12">
|
|
{% if courses.enrolled.any? %}
|
|
{% if categories.enrolled.any? %}
|
|
{% assign all_categories = categories.enrolled | map: "name" %}
|
|
{% for enrolled_category in all_categories %}
|
|
<div class="np-md-flex-wrapper">
|
|
<div>
|
|
<div class="np-dashboard-resources-title">
|
|
Topic
|
|
</div>
|
|
<div class="np-dashboard-resources-category">
|
|
{{ enrolled_category }}
|
|
</div>
|
|
</div>
|
|
{%
|
|
include "filter_by_progress",
|
|
label: "Filter by Progress:",
|
|
default_option: "All Courses",
|
|
topic: enrolled_category,
|
|
%}
|
|
</div>
|
|
{%
|
|
include "carousel_courses",
|
|
items: courses.enrolled,
|
|
topic: enrolled_category,
|
|
%}
|
|
{% endfor %}
|
|
{% else %}
|
|
{% assign enrolled_category = "Not Categorized" %}
|
|
<div class="np-md-flex-wrapper">
|
|
<div>
|
|
<div class="np-dashboard-resources-title">
|
|
Topic
|
|
</div>
|
|
<div class="np-dashboard-resources-category">
|
|
{{ enrolled_category }}
|
|
</div>
|
|
</div>
|
|
{%
|
|
include "filter_by_progress",
|
|
label: "Filter by Progress:",
|
|
default_option: "All Courses",
|
|
topic: enrolled_category,
|
|
%}
|
|
</div>
|
|
{%
|
|
include "carousel_courses",
|
|
items: courses.enrolled,
|
|
topic: enrolled_category,
|
|
%}
|
|
{% endif %}
|
|
{% else %}
|
|
<div class="np-dashboard-resources-title" style="margin-bottom:19px;">
|
|
Courses
|
|
</div>
|
|
{% capture message %}
|
|
{% t shared.zero_state.courses.index,
|
|
key: current_school.course_vocabulary
|
|
%}
|
|
{% endcapture %}
|
|
<div style="margin-bottom:3rem;">
|
|
{% include "courses_zero_state", message: message %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{% include "footer" %}
|
|
|
|
{% comment %}<style>
|
|
@media screen and (min-width: 300px) {
|
|
.np-homepage-hero{
|
|
background: #34abe2;
|
|
height: 7rem;
|
|
}
|
|
|
|
.np-homepage-hero-content{
|
|
padding: 2.25rem 2.75em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 365px) {
|
|
.np-homepage-hero-content{
|
|
padding: 2.25rem 3.2rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 550px) {
|
|
.np-homepage-hero{
|
|
height: 4rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.np-header{
|
|
height: 130px;
|
|
}
|
|
|
|
.np-homepage-hero{
|
|
background: transparent;
|
|
margin-top: -3rem;
|
|
margin-bottom: -1rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 992px) {
|
|
.np-homepage-hero{
|
|
margin-top: -6rem;
|
|
margin-bottom: 0;
|
|
height: 6rem
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
.progress-section {
|
|
padding-left: 0.5rem
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1200px) {
|
|
.np-homepage-hero{
|
|
margin-top: -7rem;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
</style>{% endcomment %}
|
|
<script>
|
|
// Creates the custom dropdown and dropdown functionality
|
|
var x, i, j, l, ll, selElmnt, a, b, c;
|
|
/* Look for any elements with the class “select-wrapper”: */
|
|
x = document.getElementsByClassName("progress-filter");
|
|
l = x.length;
|
|
for (i = 0; i < l; i++) {
|
|
selElmnt = x[i].getElementsByTagName("select")[0];
|
|
ll = selElmnt.length;
|
|
a = document.createElement("DIV");
|
|
a.setAttribute("class", "select-selected");
|
|
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
|
|
x[i].appendChild(a);
|
|
b = document.createElement("DIV");
|
|
b.setAttribute("class", "select-items select-hide");
|
|
for (j = 1; j < ll; j++) {
|
|
c = document.createElement("DIV");
|
|
c.innerHTML = selElmnt.options[j].innerHTML;
|
|
c.addEventListener("click", function(e) {
|
|
var y, i, k, s, h, sl, yl;
|
|
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
|
|
sl = s.length;
|
|
h = this.parentNode.previousSibling;
|
|
for (i = 0; i < sl; i++) {
|
|
if (s.options[i].innerHTML == this.innerHTML) {
|
|
s.selectedIndex = i;
|
|
h.innerHTML = this.innerHTML;
|
|
y = this.parentNode.getElementsByClassName("same-as-selected");
|
|
yl = y.length;
|
|
for (k = 0; k < yl; k++) {
|
|
y[k].removeAttribute("class");
|
|
}
|
|
this.setAttribute("class", "same-as-selected");
|
|
break;
|
|
}
|
|
}
|
|
|
|
filterCourses(this);
|
|
|
|
h.click();
|
|
});
|
|
b.appendChild(c);
|
|
}
|
|
x[i].appendChild(b);
|
|
a.addEventListener("click", function(e) {
|
|
e.stopPropagation();
|
|
closeAllSelect(this);
|
|
this.nextSibling.classList.toggle("select-hide");
|
|
this.classList.toggle("select-arrow-active");
|
|
});
|
|
}
|
|
|
|
function closeAllSelect(elmnt) {
|
|
var x, y, i, xl, yl, arrNo = [];
|
|
x = document.getElementsByClassName("select-items");
|
|
y = document.getElementsByClassName("select-selected");
|
|
xl = x.length;
|
|
yl = y.length;
|
|
for (i = 0; i < yl; i++) {
|
|
if (elmnt == y[i]) {
|
|
arrNo.push(i)
|
|
} else {
|
|
y[i].classList.remove("select-arrow-active");
|
|
}
|
|
}
|
|
for (i = 0; i < xl; i++) {
|
|
if (arrNo.indexOf(i)) {
|
|
x[i].classList.add("select-hide");
|
|
}
|
|
}
|
|
}
|
|
|
|
/* If the user clicks anywhere outside the select box,
|
|
then close all select boxes: */
|
|
document.addEventListener("click", closeAllSelect);
|
|
$(".select-items div").each(function() {
|
|
if($( this ).text() == $(".select-selected").text()) {
|
|
$(this).addClass("same-as-selected");
|
|
}
|
|
});
|
|
|
|
function filterCourses(selectedItem) {
|
|
|
|
let filterGroup = $(selectedItem).closest(".progress-filter").data("topic");
|
|
let selectedFilter = $(selectedItem).text().replace(" ", "-").toLowerCase();
|
|
let carouselGroup = $('.courses-carousel[data-topic="' + filterGroup + '"]');
|
|
|
|
carouselGroup.slick('slickUnfilter');
|
|
|
|
if (selectedFilter != "all-courses") {
|
|
carouselGroup.slick('slickFilter', `.${selectedFilter}`);
|
|
}
|
|
|
|
}
|
|
$(".np-sub-navigation-content-item-link:contains('Dashboard')").parent().addClass("np-sub-navigation-content-item-active")
|
|
</script>
|