New talkspace script. Added a bunch of templates as backup.
This commit is contained in:
Norm Rasmussen
@ -18,7 +18,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if external_course_url != '' %}
|
||||
{% if external_course_url != '' and external_course_url != null %}
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
href="{{external_course_url}}"
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
{%- comment -%} Catalog is not used in this school. The "catalog" is the set of unstarted enrolled courses shown at the homepage {%- endcomment -%}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
{% unless course.progress > 0 %}
|
||||
<div class="col-xs-12 col-sm-6 col-lg-3 np-stretch-content course-card-wrapper" data-product="{{ course.properties.product_names_for_course_cards}}">
|
||||
{%- comment -%} {% include "cards_course" with course, flag: 'catalog' %} {%- endcomment -%}
|
||||
{% include "cards_course" with course, flag: 'null' %}
|
||||
</div>
|
||||
{% endunless %}
|
||||
{%- comment -%} {% unless course.progress > 0 %}
|
||||
{% endunless %} {%- endcomment -%}
|
||||
<div class="col-xs-12 col-sm-6 col-lg-3 np-stretch-content course-card-wrapper" data-product="{{ course.properties.product_names_for_course_cards}}">
|
||||
{%- comment -%} {% include "cards_course" with course, flag: 'catalog' %} {%- endcomment -%}
|
||||
{% include "cards_course" with course, flag: 'null' %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@ -60,48 +60,46 @@
|
||||
}
|
||||
|
||||
let filterByProduct = () => {
|
||||
let filter = event.target.value.toLowerCase();
|
||||
filter = filter.replaceAll(' ', '+');
|
||||
filter = filter.replaceAll('&', '%26');
|
||||
console.log(filter);
|
||||
//let filter = event.target.value.toLowerCase();
|
||||
//filter = filter.replaceAll(' ', '+');
|
||||
//filter = filter.replaceAll('&', '%26');
|
||||
//console.log(filter);
|
||||
|
||||
//window.location.assign(`https://newacademy.anthology.com/app/search/23777883-6b85-449d-8d25-2e548c6e9ecc?q=${filter}`);
|
||||
|
||||
window.location.assign(`https://newacademy.anthology.com/app/search/23777883-6b85-449d-8d25-2e548c6e9ecc?q=${filter}`);
|
||||
let allLearning = document.querySelector('.np-catalog-courses').children;
|
||||
|
||||
//let allLearning = document.querySelector('.np-catalog-courses').children;
|
||||
for(let i = 0; i < allLearning.length; i++){
|
||||
if(event.target.value == 'Default'){
|
||||
|
||||
//for(let i = 0; i < allLearning.length; i++){
|
||||
// if(event.target.value == 'Default'){
|
||||
if(!allLearning[i].classList.contains('hidden-by-search')){
|
||||
allLearning[i].style.display = 'block';
|
||||
}
|
||||
allLearning[i].classList.remove('filtered')
|
||||
} else {
|
||||
if(allLearning[i].dataset.product != event.target.value){
|
||||
allLearning[i].style.display = 'none';
|
||||
allLearning[i].classList.add('filtered');
|
||||
} else {
|
||||
if(!allLearning[i].classList.contains('hidden-by-search')){
|
||||
allLearning[i].style.display = 'block';
|
||||
}
|
||||
allLearning[i].classList.remove('filtered');
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
// if(!allLearning[i].classList.contains('hidden-by-search')){
|
||||
// allLearning[i].style.display = 'block';
|
||||
// }
|
||||
// allLearning[i].classList.remove('filtered')
|
||||
// } else {
|
||||
|
||||
// if(allLearning[i].dataset.product != event.target.value){
|
||||
// allLearning[i].style.display = 'none';
|
||||
// allLearning[i].classList.add('filtered');
|
||||
// } else {
|
||||
// if(!allLearning[i].classList.contains('hidden-by-search')){
|
||||
// allLearning[i].style.display = 'block';
|
||||
// }
|
||||
// allLearning[i].classList.remove('filtered');
|
||||
// };
|
||||
// };
|
||||
//};
|
||||
|
||||
//for(let i = 0; i < popular.length; i++){
|
||||
// if(event.target.value == 'Default'){
|
||||
// popular[i].style.display = 'block';
|
||||
// } else {
|
||||
// if(popular[i].dataset.product != event.target.value){
|
||||
// popular[i].style.display = 'none';
|
||||
// } else {
|
||||
// popular[i].style.display = 'block';
|
||||
// };
|
||||
// };
|
||||
//};
|
||||
for(let i = 0; i < popular.length; i++){
|
||||
if(event.target.value == 'Default'){
|
||||
popular[i].style.display = 'block';
|
||||
} else {
|
||||
if(popular[i].dataset.product != event.target.value){
|
||||
popular[i].style.display = 'none';
|
||||
} else {
|
||||
popular[i].style.display = 'block';
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
{% elsif page == 'Dashboard' %}
|
||||
if(allProductTypesDash.length > 1){
|
||||
|
||||
@ -136,9 +136,9 @@
|
||||
|
||||
{%- comment -%} Desktop Profile Button {%- endcomment -%}
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<a class="header-survey-link" href="https://baseline.campuslabs.com/htu/beta" target="_blank">
|
||||
{%- comment -%} <a class="header-survey-link" href="https://baseline.campuslabs.com/htu/beta" target="_blank">
|
||||
Tell Us What You Think!
|
||||
</a>
|
||||
</a> {%- endcomment -%}
|
||||
|
||||
<button
|
||||
class="np-header-avatar-button desktop-avatar-button"
|
||||
|
||||
@ -63,9 +63,8 @@
|
||||
|
||||
<div class="search-and-filter-component">
|
||||
<div class="catalog-search-component">
|
||||
{%- comment -%} <span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Search: </span> {%- endcomment -%}
|
||||
{%- comment -%} {% if current_person.email contains "+preview" %}
|
||||
<form data-test="desktop-search" class="catalog-search-wrapper">
|
||||
<span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Search: </span>
|
||||
<form data-test="desktop-search" class="catalog-search-wrapper">
|
||||
<input
|
||||
aria-label="search_topics"
|
||||
class="np-header-font-background-color catalog-search"
|
||||
@ -76,29 +75,6 @@
|
||||
/>
|
||||
<i class="far fa-search search-icon"></i>
|
||||
</form>
|
||||
{% else %}
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search" class="catalog-search-wrapper">
|
||||
<input
|
||||
aria-label="search_topics"
|
||||
class="np-header-font-background-color catalog-search"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder=""
|
||||
/>
|
||||
<i class="far fa-search search-icon"></i>
|
||||
</form>
|
||||
{% endif %} {%- endcomment -%}
|
||||
{%- comment -%} <form data-test="desktop-search" class="catalog-search-wrapper">
|
||||
<input
|
||||
aria-label="search_topics"
|
||||
class="np-header-font-background-color catalog-search"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder=""
|
||||
onkeyup="searchCourses()"
|
||||
/>
|
||||
<i class="far fa-search search-icon"></i>
|
||||
</form> {%- endcomment -%}
|
||||
</div>
|
||||
{%- comment -%} {% if current_person.email contains "+preview" %}
|
||||
<div class="catalog-filter-component">
|
||||
@ -275,6 +251,7 @@
|
||||
}
|
||||
|
||||
.catalog-search-wrapper{
|
||||
max-width: 600px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -291,7 +268,7 @@
|
||||
|
||||
.catalog-search{
|
||||
background-color: #fefefe;
|
||||
border: 1px solid #ce9dc7;
|
||||
border: 1px solid #aa7fb9;
|
||||
border-radius: 30px;
|
||||
font-weight: 400;
|
||||
height: 60px;
|
||||
|
||||
@ -0,0 +1,61 @@
|
||||
<main class="np-main np-box-container">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div role="alert" class="np-alert np-alert-global np-alert-info" style="background: #CCE9EE; line-height: 1.5;">
|
||||
<div class="np-alert-container uk-container uk-container-center" style="color: #066D84; font-size: 15px; font-weight: 700;">
|
||||
First Time Here? Sign Up for Your New Account!
|
||||
</div>
|
||||
<div class="np-alert-container uk-container uk-container-center" style="color: #066D84; font-size: 15px;">
|
||||
If you’ve had an account on our previous platforms, a new account must be created to join the updated Anthology Academy site. Click the 'Sign Up' link below to get started.
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-box-content-container">
|
||||
<form class="np-form np-box-content" action="{% route login %}" method="post" novalidate>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_email">
|
||||
{% t shared.email_address %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="email"
|
||||
name="learner[email]"
|
||||
id="learner_email"
|
||||
>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_password">
|
||||
{% t shared.password %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="password"
|
||||
name="learner[password]"
|
||||
id="learner_password"
|
||||
>
|
||||
</div>
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
{% t shared.sign_in %}
|
||||
</button>
|
||||
<a class="np-form-link np-button-color" href="{% route forgot_password_new %}">
|
||||
{% t .forgot_password %}
|
||||
</a>
|
||||
{% if features.account_creation? %}
|
||||
<a class="np-form-link np-button-color" href="{% route sign_up %}">
|
||||
{% t shared.sign_up %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if features.request_access? %}
|
||||
<a
|
||||
class="np-form-link np-button-color"
|
||||
target="_blank"
|
||||
href="{{ current_school.request_access_link }}"
|
||||
>
|
||||
{{ current_school.request_access_label }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -32,7 +32,7 @@
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_email">
|
||||
{% t shared.email_address %}
|
||||
Campus or Work Email
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
@ -98,13 +98,13 @@
|
||||
} else {
|
||||
if(!document.querySelector('.invalid-domain-error')){
|
||||
let errorMessage = document.createElement('span');
|
||||
errorMessage.textContent = 'Please enter your work email'
|
||||
errorMessage.textContent = 'Please enter your Campus or Work email'
|
||||
errorMessage.classList.add('np-form-terms');
|
||||
errorMessage.classList.add('invalid-domain-error')
|
||||
|
||||
document.getElementById('sign-up-form').children[3].appendChild(errorMessage);
|
||||
document.getElementById('sign-up-button').classList.add('disabled');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -121,4 +121,4 @@
|
||||
margin-bottom: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
<div class="np-card np-no-horizontal-padding lp-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="np-hidden-desktop np-card-header">
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<div class="np-hidden-desktop np-card-header-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-card-header">
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-description">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-hidden-desktop np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
<a class="np-button" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
<i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i>
|
||||
<span class="np-learning-path-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,16 @@
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="row row-with-thumbnails courses-index">
|
||||
{% for course in courses.enrolled %}
|
||||
<div class="{{ class }}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,192 @@
|
||||
<header class="header np-header-color">
|
||||
<div class="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 %}
|
||||
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<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
|
||||
>
|
||||
<div class="header-user">Welcome, {{current_person.name}}
|
||||
<span class="header-user-arrow">
|
||||
<i class="fas fa-angle-down down-user-arrow"></i>
|
||||
</span>
|
||||
</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>
|
||||
{% 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" %}
|
||||
|
||||
|
||||
<style>
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 4%;
|
||||
}
|
||||
.header {
|
||||
background: #f2f6fa;
|
||||
}
|
||||
.np-header-logo {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.np-header-avatar {
|
||||
display: flex;
|
||||
position: relative;
|
||||
border-left: 1px solid #00000075;
|
||||
border-right: 1px solid #00000075;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.np-header-avatar-button {
|
||||
margin: 0;
|
||||
}
|
||||
.header-user {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: #212f57;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header-user-arrow {
|
||||
padding-left: 2rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.np-header-avatar-button {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,14 @@
|
||||
{% if items.any? %}
|
||||
{% for learning_path in items %}
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,118 @@
|
||||
<nav class="sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
<div class="np-sub-navigation-content-item">
|
||||
<a class="np-sub-navigation-content-item-link" id="home" href="/app">
|
||||
<span class="sub-nav-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="40" viewBox="0 0 50 40">
|
||||
<defs>
|
||||
<clipPath id="clip-Dashboard">
|
||||
<rect width="50" height="40"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="Dashboard" clip-path="url(#clip-Dashboard)">
|
||||
<g id="Group_6184" data-name="Group 6184" transform="translate(-106.996 -67)">
|
||||
<rect id="Rectangle_5152" data-name="Rectangle 5152" width="50" height="40" transform="translate(106.996 67)" fill="none"/>
|
||||
<path id="home" d="M16.778,34.5V22.955h6.788V34.5h8.485V20.8h3.18v-3.48L20.172,4.5,5.228,17.321V20.8H8.293V34.5Z" transform="translate(111.769 67.5)" fill="none" stroke="#4b91aa" stroke-linecap="square" stroke-linejoin="round" stroke-width="2"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
Home
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-sub-navigation-content-item">
|
||||
<a class="np-sub-navigation-content-item-link" id='courses' href="/app/courses">
|
||||
<span class="sub-nav-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="40" viewBox="0 0 50 40">
|
||||
<defs>
|
||||
<clipPath id="clip-Resources">
|
||||
<rect width="50" height="40"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="Resources" clip-path="url(#clip-Resources)">
|
||||
<g id="Group_6186" data-name="Group 6186" transform="translate(-611.996 -58)">
|
||||
<rect id="Rectangle_5153" data-name="Rectangle 5153" width="50" height="40" transform="translate(611.996 58)" fill="none"/>
|
||||
<g id="Group_2" data-name="Group 2" transform="translate(612 62)">
|
||||
<path id="Shape" d="M14.451,32h0L0,25.334V6.666L14.451,0,28.9,6.666V25.334L14.451,32ZM26.274,9.343,15.765,14.191V28.464l10.509-4.847Zm-23.647,0V23.617l10.51,4.847V14.191ZM14.451,2.93h0L4.759,7.4l9.692,4.47L24.139,7.4,14.451,2.93Z" transform="translate(0 0)" fill="#4b91aa"/>
|
||||
<path id="Shape-2" data-name="Shape" d="M9.084,20.115h0L0,15.924V4.19L9.084,0l9.083,4.19V15.924L9.084,20.115Zm7.2-13.829L10.137,9.124v8.354l6.151-2.837Zm-14.409,0v8.354L8.03,17.478V9.124Zm7.2-4.3L3.3,4.652,9.084,7.321l5.785-2.669L9.084,1.983Z" transform="translate(31.833 0)" fill="#4b91aa"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
Courses
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-sub-navigation-content-item">
|
||||
<a class="np-sub-navigation-content-item-link" id='learning_paths' href="/app/learning_paths">
|
||||
<span class="sub-nav-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="40" viewBox="0 0 50 40">
|
||||
<defs>
|
||||
<clipPath id="clip-Dynamic_Classroom">
|
||||
<rect width="50" height="40"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="Dynamic_Classroom" data-name="Dynamic Classroom" clip-path="url(#clip-Dynamic_Classroom)">
|
||||
<g id="Group_6183" data-name="Group 6183" transform="translate(-168.996 -58)">
|
||||
<rect id="Rectangle_5151" data-name="Rectangle 5151" width="50" height="40" transform="translate(168.996 58)" fill="none"/>
|
||||
<g id="dynamic-classroom-blue-icon" transform="translate(173.615 8.285)">
|
||||
<path id="Shape" d="M2.057,11.066a.7.7,0,0,0,.326-.571L2.256.813C2.251.365,1.746,0,1.122,0,.545,0,0,.39,0,.8l.127,9.683a.719.719,0,0,0,.335.573,1.468,1.468,0,0,0,1.595.006" transform="translate(10.912 69.293) rotate(49)" fill="#4b91aa"/>
|
||||
<path id="Shape-2" data-name="Shape" d="M2.057,18.726a1.5,1.5,0,0,0,.326-.966L2.256,1.375A1.284,1.284,0,0,0,1.122,0,1.321,1.321,0,0,0,0,1.361L.127,17.747a1.529,1.529,0,0,0,.335.97,1,1,0,0,0,1.595.01" transform="translate(17.733 71.222) rotate(48)" fill="#4b91aa"/>
|
||||
<path id="Shape-3" data-name="Shape" d="M11.859,26.789a1.2,1.2,0,0,1-.187-.015,1.186,1.186,0,0,1-.947-.822l-2.4-7.578L.829,15.947a1.2,1.2,0,0,1-.814-.961A1.21,1.21,0,0,1,.5,13.818L6.879,9.169l-.03-7.954A1.2,1.2,0,0,1,7.5.133a1.171,1.171,0,0,1,1.248.1l6.345,4.7,7.474-2.488a1.184,1.184,0,0,1,1.216.292,1.2,1.2,0,0,1,.291,1.232l-2.462,7.556,4.651,6.417a1.21,1.21,0,0,1,.1,1.262,1.229,1.229,0,0,1-1.041.657l-7.9-.03-4.6,6.454A1.191,1.191,0,0,1,11.859,26.789ZM9.244,3.6l.024,6.183a1.218,1.218,0,0,1-.5.984L3.81,14.378l5.825,1.888a1.206,1.206,0,0,1,.771.782l1.869,5.89,3.574-5.018a1.214,1.214,0,0,1,.91-.5l6.18.022-3.614-4.989a1.22,1.22,0,0,1-.171-1.091l1.912-5.872L15.257,7.423a1.184,1.184,0,0,1-1.079-.172L9.245,3.6Z" transform="translate(12.475 51.715)" fill="#4b91aa"/>
|
||||
<path id="Shape-4" data-name="Shape" d="M2.057,11.066a.7.7,0,0,0,.326-.571L2.256.813C2.251.365,1.746,0,1.122,0,.545,0,0,.39,0,.8l.127,9.683a.719.719,0,0,0,.335.573,1.468,1.468,0,0,0,1.595.006" transform="translate(19.954 78.504) rotate(49)" fill="#4b91aa"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
Learning Paths
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<style>
|
||||
.white-icon {
|
||||
filter: invert(82%) sepia(100%) saturate(10%) hue-rotate(87deg) brightness(149%) contrast(119%);
|
||||
}
|
||||
.sub-navigation {
|
||||
background: #fff;
|
||||
padding: 0.8rem;
|
||||
border-bottom: 3px solid rgb(0 0 0 / 20%);
|
||||
}
|
||||
.np-sub-navigation-content-item-link {
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
color: #515478;
|
||||
padding: 25px 15px;
|
||||
}
|
||||
|
||||
.active-link {
|
||||
color: #fff;
|
||||
background: #61759e;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
let url = window.location.href.split('/')[4];
|
||||
|
||||
switch(url) {
|
||||
case 'learning_paths':
|
||||
document.getElementById('learning_paths').classList.add('active-link');
|
||||
document.getElementsByClassName("sub-nav-icon")[2].classList.add("white-icon");
|
||||
break;
|
||||
case 'courses':
|
||||
document.getElementById('courses').classList.add('active-link')
|
||||
document.getElementsByClassName("sub-nav-icon")[1].classList.add("white-icon");
|
||||
break;
|
||||
default:
|
||||
document.getElementById('home').classList.add('active-link');
|
||||
document.getElementsByClassName("sub-nav-icon")[0].classList.add("white-icon");
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,21 @@
|
||||
<div class="np-sub-navigation-content-item
|
||||
{% comment %} {% if url contains current_page %}
|
||||
np-sub-navigation-content-item-active
|
||||
{% else %}
|
||||
np-sub-navigation-content-item-inactive
|
||||
{% endif %}{% endcomment %}
|
||||
">
|
||||
<a class="np-sub-navigation-content-item-link subnav-item" href="{{ url }}">
|
||||
<i class="{{ icon }} np-button-color np-sub-navigation-content-item-icon" aria-hidden="true"></i>
|
||||
<div class="oa-sub-navigation-content-item-label">
|
||||
{{ label }}
|
||||
</div>
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.subnav-item:hover{
|
||||
color: #ba37d6
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,31 @@
|
||||
{% 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="np-resource-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
<div class="row row-with-thumbnails lp-row mb-3">
|
||||
{% if features.learning_paths? %}
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="np-resource-title">
|
||||
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="row row-with-thumbnails lp-row">
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 col-lg-4 np-stretch-content" %}
|
||||
</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 %}
|
||||
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,10 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-max-width np-page-container">
|
||||
<div class="np-hidden-mobile" id="learning-path-desktop">
|
||||
{% include "learning_path_desktop_view" %}
|
||||
</div>
|
||||
<div class="np-hidden-desktop" id="learning-path-mobile">
|
||||
{% include "learning_path_mobile_view" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,16 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-learning-paths np-subpage-container np-max-width">
|
||||
<div class="np-learning-paths-main">
|
||||
<div class="np-resource-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .subtitle %}
|
||||
</div>
|
||||
<div class="row row-with-thumbnails lp-row">
|
||||
{% include "learning_paths_index", items: learning_paths.available%}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,60 @@
|
||||
/*
|
||||
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 }}
|
||||
*/
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-resource-title {
|
||||
margin-bottom: 0px;
|
||||
background: #62769e;
|
||||
color: #fff;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
.np-resource-subtitle {
|
||||
padding: 0;
|
||||
background: #62769e;
|
||||
color: #fff;
|
||||
padding: 0.5rem 1.5rem;
|
||||
}
|
||||
.np-learning-paths-main {
|
||||
background: #fff;
|
||||
}
|
||||
.np-learning-path {
|
||||
display: initial;
|
||||
}
|
||||
.np-learning-path-image {
|
||||
width: 100% !important;
|
||||
min-height: unset !important;
|
||||
}
|
||||
.lp-row, .courses-index {
|
||||
margin-right: 0!important;
|
||||
margin-left: 0!important;
|
||||
}
|
||||
.lp-card {
|
||||
padding: 1.5rem !important;
|
||||
}
|
||||
.courses-index {
|
||||
background: #fff;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
.np-resource-subtitle {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.lp-row {
|
||||
background: #fff;
|
||||
}
|
||||
.mb-3 {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user