new directory
This commit is contained in:
Norm Rasmussen
65
customer_templates/OpenWallet/_achievements.html.liquid
Normal file
65
customer_templates/OpenWallet/_achievements.html.liquid
Normal file
@ -0,0 +1,65 @@
|
||||
<div class="np-card course-card np-card-container" style="padding-bottom: 1rem;">
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-6">
|
||||
<h3 class="np-card-content-title recent-achievements">
|
||||
Recent<br>Achievements
|
||||
</h3>
|
||||
</div>
|
||||
<div class="col-6 col-md-6" style="text-align: right;">
|
||||
<button class="view-achievements-button" onclick="#" type="button">View all</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="horizontal-separator"></div>
|
||||
</div>
|
||||
<i class="achievement-icon far fa-trophy fa-5x"></i>
|
||||
<div class="np-card-content-title recent-achievements col-12" style="text-align: center;">
|
||||
<p>OpenWallet - Learning the basics</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.view-achievements-button {
|
||||
background-color: #030f3c;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 5px 8px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 30px;
|
||||
margin-top:12px;
|
||||
}
|
||||
|
||||
.recent-achievements {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.achievement-icon {
|
||||
text-align: center;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.horizontal-separator {
|
||||
border-bottom: 1px solid #3998b5;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.recent-achievements {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.view-achievements-button {
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
36
customer_templates/OpenWallet/_cards_course.html.liquid
Normal file
36
customer_templates/OpenWallet/_cards_course.html.liquid
Normal file
@ -0,0 +1,36 @@
|
||||
<div id="{{ course.progress }}" class="{{ class }}">
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,57 @@
|
||||
<div class="np-dashboard-resources">
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="">
|
||||
{% assign countComplete = 0 %}
|
||||
{% assign countInProgress = 0 %}
|
||||
{% assign countNotStarted = 0 %}
|
||||
{% assign countTotal = 0 | times: 1.0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% assign countTotal = countTotal | plus: 1 %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign countComplete = countComplete | plus: 1 %}
|
||||
{% endif %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign countInProgress = countInProgress | plus: 1 %}
|
||||
{% endif %}
|
||||
{% if course.progress == 0 %}
|
||||
{% assign countNotStarted = countNotStarted | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<ul class="circle-list">
|
||||
<li>
|
||||
{% include "progress_circle", name:'Completed' , count: countComplete , total: countTotal %}
|
||||
</li>
|
||||
<li>
|
||||
{% include "progress_circle", name:'In Progress' , count: countInProgress , total: countTotal %}
|
||||
</li>
|
||||
<li>
|
||||
{% include "progress_circle", name:'Not Started' , count: countNotStarted , total: countTotal %}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.circle-list {
|
||||
list-style-type: none !important;
|
||||
}
|
||||
.align-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
.progress-ring__circle {
|
||||
transition: stroke-dashoffset 0.35s;
|
||||
}
|
||||
.progress-ring__circle {
|
||||
transition: stroke-dashoffset 0.35s;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
</style>
|
||||
14
customer_templates/OpenWallet/_courses_index.html.liquid
Normal file
14
customer_templates/OpenWallet/_courses_index.html.liquid
Normal file
@ -0,0 +1,14 @@
|
||||
{% if courses.enrolled.any? %}
|
||||
<div id="dash-sort" class="row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
{% include "cards_course" with course, class: "col-xs-12 col-sm-6 np-stretch-content" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
11
customer_templates/OpenWallet/_enterprise_styles.html.liquid
Normal file
11
customer_templates/OpenWallet/_enterprise_styles.html.liquid
Normal file
@ -0,0 +1,11 @@
|
||||
<style>
|
||||
.np-button, .np-button-background-color {
|
||||
background-color: #061E42;
|
||||
}
|
||||
.np-button-color {
|
||||
color: #ECB953;
|
||||
}
|
||||
.np-header-font-background-color {
|
||||
background: #061E42;
|
||||
}
|
||||
</style>
|
||||
83
customer_templates/OpenWallet/_footer.html.liquid
Normal file
83
customer_templates/OpenWallet/_footer.html.liquid
Normal file
@ -0,0 +1,83 @@
|
||||
<footer class="np-footer">
|
||||
<div class="np-footer-top">
|
||||
{% if website_footer.show_navigation_links? %}
|
||||
<div class="np-footer-navigation">
|
||||
<ul class="np-footer-navigation-list">
|
||||
{% for website_navigation in navigations.footer_navigations %}
|
||||
<li class="np-footer-navigation-item">
|
||||
<a
|
||||
class="np-footer-navigation-link np-button-color"
|
||||
href="{{ website_navigation.path }}"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if current_school.logo_url %}
|
||||
<h2 class="np-footer-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-footer-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h2>
|
||||
{% else %}
|
||||
<div class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="np-footer-bottom">
|
||||
<nav class="np-footer-social-links">
|
||||
{% if website_footer.show_social_media_links? %}
|
||||
<ul class="np-footer-social-links-list">
|
||||
{% for social_media_link in website_footer.social_media_links %}
|
||||
<li class="np-footer-social-links-item">
|
||||
<a
|
||||
class="np-footer-social-links-link np-button-color"
|
||||
href="{{ social_media_link.link }}"
|
||||
target="_blank" title="{{ social_media_link.name }}"
|
||||
>
|
||||
<i class="np-footer-social-links-icon
|
||||
np-button-color
|
||||
fab fa-{{ social_media_link.name }}"
|
||||
></i>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
{% if website_footer.show_customer_service_email? and
|
||||
website_footer.school_customer_service_email
|
||||
%}
|
||||
<div class="np-footer-support">
|
||||
<div class="np-footer-support-item np-footer-support-help">
|
||||
{% t .need_help %}
|
||||
</div>
|
||||
<div class="np-footer-support-item np-footer-support-email">
|
||||
{% t .email %}
|
||||
</div>
|
||||
<a
|
||||
class="np-footer-support-item np-footer-support-link np-button-color"
|
||||
href="mailto:{{ website_footer.school_customer_service_email }}"
|
||||
>
|
||||
{{ website_footer.school_customer_service_email }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.name == "Enterprise" %}
|
||||
{% include "enterprise_styles"%}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</footer>
|
||||
4
customer_templates/OpenWallet/_head.html.liquid
Normal file
4
customer_templates/OpenWallet/_head.html.liquid
Normal file
@ -0,0 +1,4 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
222
customer_templates/OpenWallet/_header.html.liquid
Normal file
222
customer_templates/OpenWallet/_header.html.liquid
Normal file
@ -0,0 +1,222 @@
|
||||
<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>
|
||||
{% if current_person.properties.enterprise == "none"%}
|
||||
<img
|
||||
alt="{{ current_person.properties.enterprise }}"
|
||||
class="np-header-avatar-image"
|
||||
src="https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/VW/1024px-United-states_flag_icon_round.svg.png"
|
||||
/>
|
||||
{% endif %}
|
||||
{% if current_person.properties.enterprise == "oswalt"%}
|
||||
<img
|
||||
alt="{{ current_person.properties.enterprise }}"
|
||||
class="np-header-avatar-image"
|
||||
src="https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/VW/flag-round-250.png"
|
||||
/>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.name == "Enterprise" %}
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/VW/Audi-Logo.png"
|
||||
/>
|
||||
{% elsif group.name == "OpenWallet"%}
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</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>
|
||||
{% if current_person.properties.enterprise == "none"%}
|
||||
<img
|
||||
alt="{{ current_person.properties.enterprise }}"
|
||||
class="np-header-avatar-button"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/demos/OpenWalletUSA_Logo.png"
|
||||
/>
|
||||
{% endif %}
|
||||
{% if current_person.properties.enterprise == "oswalt"%}
|
||||
<img
|
||||
alt="{{ current_person.properties.enterprise }}"
|
||||
class="np-header-avatar-button"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/demos/Openwallet-Oswalt_Law_Logo.png"
|
||||
/>
|
||||
{% endif %}
|
||||
</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 %}"
|
||||
>
|
||||
{% 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>
|
||||
.np-header-avatar-button {
|
||||
height:50px;
|
||||
}
|
||||
</style>
|
||||
37
customer_templates/OpenWallet/_progress_circle.html.liquid
Normal file
37
customer_templates/OpenWallet/_progress_circle.html.liquid
Normal file
@ -0,0 +1,37 @@
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding align-center">
|
||||
<h3 class="np-card-content-title">
|
||||
{{name}}
|
||||
</h3>
|
||||
<svg
|
||||
class="progress-ring"
|
||||
width="120"
|
||||
height="120">
|
||||
<circle
|
||||
class="progress-ring__circle circle-{{name}}"
|
||||
stroke="white"
|
||||
stroke-width="4"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"/>
|
||||
<text x="50%" y="50%" text-anchor="middle" stroke="black" stroke-width="2px" dy=".3em">{{count}}</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
var circle = document.getElementsByClassName("circle-{{name}}")[0];
|
||||
var radius = circle.r.baseVal.value;
|
||||
var circumference = radius * 2 * Math.PI;
|
||||
|
||||
circle.style.strokeDasharray = `${circumference} ${circumference}`;
|
||||
circle.style.strokeDashoffset = `${circumference}`;
|
||||
|
||||
function setProgress(percent) {
|
||||
const offset = circumference - percent * circumference;
|
||||
console.log(offset)
|
||||
circle.style.strokeDashoffset = offset;
|
||||
}
|
||||
setProgress('{{ count | divided_by: total }}')
|
||||
})
|
||||
</script>
|
||||
242
customer_templates/OpenWallet/dashboard.html.liquid
Normal file
242
customer_templates/OpenWallet/dashboard.html.liquid
Normal file
@ -0,0 +1,242 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<div class="mo-search-wrapper">
|
||||
<div class="mo-search-header">Filter by progress : </div>
|
||||
<div class="filter-wrapper mo-filter-btn uk-text-bold mo-active-filter-prog np-button">
|
||||
<select onchange="filterCourse()">
|
||||
<option class="mo-filter-item" selected disabled hidden>All</option>
|
||||
<option class="mo-filter-item" value="a">All</option>
|
||||
<option class="mo-filter-item" value="n">Not Started</option>
|
||||
<option class="mo-filter-item" value="i">In Progress</option>
|
||||
<option class="mo-filter-item" value="c">Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<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 class="np-dashboard-resources-title">
|
||||
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
{% include "courses_index" %}
|
||||
</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" %}
|
||||
{% endif %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
Achievements
|
||||
</div>
|
||||
<div class="">
|
||||
{% include "achievements" %}
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="np-dashboard-resources-title">
|
||||
Course Progress
|
||||
</div>
|
||||
{% include "completion_dashboard" %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
console.log($('#dash-sort').children())
|
||||
function textDisplayCount() {
|
||||
let courseCount = $('#dash-sort').children().length;
|
||||
return courseCount
|
||||
}
|
||||
function selectAll() {
|
||||
$(".select-selected").html("All").change();
|
||||
filterCourse()
|
||||
$(".select-items div").each(function() {
|
||||
if($( this ).text() == $(".select-selected").text()) {
|
||||
$(this).addClass("same-as-selected");
|
||||
} else {
|
||||
$(this).removeClass("same-as-selected");
|
||||
}
|
||||
});
|
||||
$(".missing").hide();
|
||||
}
|
||||
function filterCourse() {
|
||||
let opt = document.getElementsByClassName("select-selected")[0]
|
||||
if (opt.innerText == "All") {
|
||||
$('#dash-sort').children().each(function (i) {
|
||||
$(this).show();
|
||||
});
|
||||
if(textDisplayCount() === 0) {
|
||||
$(".all").show();
|
||||
$(".not-started").hide();
|
||||
$(".in-progress").hide();
|
||||
$(".completed").hide();
|
||||
} else {
|
||||
$(".all").hide();
|
||||
$(".not-started").hide();
|
||||
$(".in-progress").hide();
|
||||
$(".completed").hide();
|
||||
}
|
||||
} else if(opt.innerText == "Not Started") {
|
||||
$('#dash-sort').children().each(function (i) {
|
||||
if($(this).attr("id") == 0) {
|
||||
$(this).show();
|
||||
} else {
|
||||
$(this).hide();
|
||||
}
|
||||
});
|
||||
if(textDisplayCount() === 0) {
|
||||
$(".all").hide();
|
||||
$(".not-started").show();
|
||||
$(".in-progress").hide();
|
||||
$(".completed").hide();
|
||||
} else {
|
||||
$(".all").hide();
|
||||
$(".not-started").hide();
|
||||
$(".in-progress").hide();
|
||||
$(".completed").hide();
|
||||
}
|
||||
} else if (opt.innerText == "In Progress") {
|
||||
$('#dash-sort').children().each(function (i) {
|
||||
if($(this).attr("id") == 0 || $(this).attr("id") == 100) {
|
||||
$(this).hide();
|
||||
} else {
|
||||
$(this).show();
|
||||
}
|
||||
});
|
||||
if(textDisplayCount() === 0) {
|
||||
$(".all").hide();
|
||||
$(".not-started").hide();
|
||||
$(".in-progress").show();
|
||||
$(".completed").hide();
|
||||
} else {
|
||||
$(".all").hide();
|
||||
$(".not-started").hide();
|
||||
$(".in-progress").hide();
|
||||
$(".completed").hide();
|
||||
}
|
||||
} else if(opt.innerText == "Completed") {
|
||||
$('#dash-sort').children().each(function (i) {
|
||||
if($(this).attr("id") == 100) {
|
||||
$(this).show();
|
||||
} else {
|
||||
$(this).hide();
|
||||
}
|
||||
});
|
||||
if(textDisplayCount() === 0) {
|
||||
$(".all").hide();
|
||||
$(".not-started").hide();
|
||||
$(".in-progress").hide();
|
||||
$(".completed").show();
|
||||
} else {
|
||||
$(".all").hide();
|
||||
$(".not-started").hide();
|
||||
$(".in-progress").hide();
|
||||
$(".completed").hide();
|
||||
}
|
||||
}
|
||||
$("#prog-filter").css("background", "#06a6b7")
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
var x, i, j, l, ll, selElmnt, a, b, c;
|
||||
/* Look for any elements with the class "filter-wrapper": */
|
||||
x = document.getElementsByClassName("filter-wrapper");
|
||||
l = x.length;
|
||||
for (i = 0; i < l; i++) {
|
||||
selElmnt = x[i].getElementsByTagName("select")[0];
|
||||
ll = selElmnt.length;
|
||||
/* For each element, create a new DIV that will act as the selected item: */
|
||||
a = document.createElement("DIV");
|
||||
a.setAttribute("class", "select-selected");
|
||||
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
|
||||
x[i].appendChild(a);
|
||||
/* For each element, create a new DIV that will contain the option list: */
|
||||
b = document.createElement("DIV");
|
||||
b.setAttribute("class", "select-items select-hide");
|
||||
for (j = 1; j < ll; j++) {
|
||||
/* For each option in the original select element,
|
||||
create a new DIV that will act as an option item: */
|
||||
c = document.createElement("DIV");
|
||||
c.innerHTML = selElmnt.options[j].innerHTML;
|
||||
c.addEventListener("click", function(e) {
|
||||
/* When an item is clicked, update the original select box,
|
||||
and the selected item: */
|
||||
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;
|
||||
}
|
||||
}
|
||||
filterCourse()
|
||||
h.click();
|
||||
});
|
||||
b.appendChild(c);
|
||||
}
|
||||
x[i].appendChild(b);
|
||||
a.addEventListener("click", function(e) {
|
||||
/* When the select box is clicked, close any other select boxes,
|
||||
and open/close the current select box: */
|
||||
e.stopPropagation();
|
||||
closeAllSelect(this);
|
||||
this.nextSibling.classList.toggle("select-hide");
|
||||
this.classList.toggle("select-arrow-active");
|
||||
});
|
||||
}
|
||||
|
||||
function closeAllSelect(elmnt) {
|
||||
/* A function that will close all select boxes in the document,
|
||||
except the current select box: */
|
||||
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);
|
||||
|
||||
$(document).ready(function () {
|
||||
$(".select-items div").each(function() {
|
||||
if($( this ).text() == $(".select-selected").text()) {
|
||||
$(this).addClass("same-as-selected");
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
225
customer_templates/OpenWallet/styles.css.liquid
Normal file
225
customer_templates/OpenWallet/styles.css.liquid
Normal file
@ -0,0 +1,225 @@
|
||||
/*
|
||||
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 }}
|
||||
*/
|
||||
.mo-filter-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.mo-filter-item {
|
||||
padding: 10px;
|
||||
}
|
||||
@media only screen and (max-width: 960px) {
|
||||
.mo-filter-item {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
#mo-mobile-filter {
|
||||
display: none;
|
||||
margin: 0 25px 25px 25px;
|
||||
background-color: #e8e8e8;
|
||||
|
||||
}
|
||||
|
||||
.mo-mobile-filter-wrapper {
|
||||
padding: 20px 20px 30px 20px;
|
||||
}
|
||||
|
||||
#mo-dropdown {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: 1px solid #c5c5c5;
|
||||
color: #6b7c93;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 806px) {
|
||||
.mo-filter-wrapper {
|
||||
overflow: scroll;
|
||||
justify-content: unset;
|
||||
}
|
||||
#mo-mobile-filter{
|
||||
display: block;
|
||||
}
|
||||
#mo-desktop-filter,
|
||||
.mo-search-header,
|
||||
.mo-search-wrapper{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.mo-filter-btn {
|
||||
width: 150px;
|
||||
border: 1px solid #eceff6;
|
||||
background: #eceff6;
|
||||
color: black;
|
||||
}
|
||||
.mo-active-filter {
|
||||
border: 1px solid #252b33;
|
||||
background: #252b33;
|
||||
color: white !important;
|
||||
}
|
||||
.mo-active-filter-prog {
|
||||
border: 1px solid #252b33;
|
||||
background: white !important;
|
||||
color: #252b33 !important;
|
||||
}
|
||||
.uk-panel-box * {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mo-content-header {
|
||||
padding-bottom: 5px !important;
|
||||
}
|
||||
.mo-content-header h2{
|
||||
color: #00237c;
|
||||
font-weight: bold;
|
||||
}
|
||||
.mo-active-filter:hover {
|
||||
background: #017171 !important;
|
||||
}
|
||||
.mo-filter-btn:hover {
|
||||
background: #7a7a7a;
|
||||
color: #ffffff;
|
||||
|
||||
}
|
||||
.mo-auto-outter-margins {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
.mo-course-duration {
|
||||
color: #0eabdb;
|
||||
}
|
||||
.mo-course-name {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.search {
|
||||
border-radius: 5px;
|
||||
}
|
||||
.mo-description-span {
|
||||
font-size: 12px;
|
||||
color: #00237c;
|
||||
}
|
||||
.mo-search-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.mo-search-header,
|
||||
.mo-filter-btn {
|
||||
color: #252b33;
|
||||
}
|
||||
|
||||
.mo-search-header {
|
||||
padding-right: 7px;
|
||||
}
|
||||
.preview-banner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body, .school-website-header {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.school-website-header .uk-brand img {
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #00237c;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.copyRight-text {
|
||||
opacity: .7;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
margin: 0;
|
||||
letter-spacing: normal;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mo-search-header{
|
||||
font: normal 14px / 20px "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-weight: normal;
|
||||
text-transform: none;
|
||||
margin-top: 10px;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
font-family: "Montserrat", sans-serif !important;
|
||||
color: #252b33;
|
||||
}
|
||||
select {
|
||||
text-align-last:center;
|
||||
}
|
||||
#prog-filter:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.missing {
|
||||
display: none;
|
||||
}
|
||||
.school-website-header {
|
||||
color: #252b33 !important;
|
||||
}
|
||||
.filter-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.filter-wrapper select {
|
||||
display: none;
|
||||
}
|
||||
.select-selected {
|
||||
background-color: ffffff;
|
||||
}
|
||||
|
||||
|
||||
/* style the items (options) */
|
||||
.select-items div{
|
||||
color: #252b33 !important;
|
||||
border: 1px solid transparent;
|
||||
border-color: transparent #252b33 #252b33 #252b33;
|
||||
cursor: pointer;
|
||||
width: 150px;
|
||||
height: 38px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
/* Style items (options): */
|
||||
.select-items {
|
||||
position: absolute;
|
||||
background-color: #ffffff !important;
|
||||
top: 101%;
|
||||
left: -1px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/* Hide the items when the select box is closed: */
|
||||
.select-hide {
|
||||
display: none;
|
||||
}
|
||||
.same-as-selected {
|
||||
display: none;
|
||||
}
|
||||
.select-items div:hover, .same-as-selected {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
Reference in New Issue
Block a user