Walmart Luminate, Other company notes
This commit is contained in:
Norm Rasmussen
BIN
Custom_Templates/customer_templates/.DS_Store
vendored
BIN
Custom_Templates/customer_templates/.DS_Store
vendored
Binary file not shown.
@ -0,0 +1,48 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-dashboard np-subpage-container">
|
||||
<div class="np-flex-center">
|
||||
<div class="main-courses">
|
||||
<div class="main-courses-headline">
|
||||
<div class="main-courses-headline-title">
|
||||
Our Most Popular Courses
|
||||
</div>
|
||||
<div class="main-courses-headline-subtitle">
|
||||
10,000+ unique online course list designs
|
||||
</div>
|
||||
</div>
|
||||
{% include 'dashboard_filter' %}
|
||||
<div class="container">
|
||||
<div class="main-courses-list row">
|
||||
{% for course in courses.enrolled %}
|
||||
{% include 'cards_course_dashboard' with course %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
|
||||
<style>
|
||||
.np-main.np-dashboard {
|
||||
background: white;
|
||||
}
|
||||
.main-courses-headline {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.main-courses-headline-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
color: rgb(86, 49, 80);
|
||||
}
|
||||
.main-courses-headline-subtitle {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 10px;
|
||||
font-weight: 400;
|
||||
color: rgb(79, 84, 123);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,271 @@
|
||||
<footer class="footer-wrapper">
|
||||
<div class="footer">
|
||||
<div class="footer-top">
|
||||
<div class="footer-top-top">
|
||||
<div class="footer-top-top-left">
|
||||
Join more than <span style="color: #D4D85D;">8 million<br>learners</span> worldwide
|
||||
</div>
|
||||
<div class="footer-top-top-right">
|
||||
Start Learning For Free
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-top-bottom">
|
||||
<img class="footer-top-bottom-left" src="{{ current_school.logo_url }}">
|
||||
<div class="footer-top-bottom-right">
|
||||
<span>Follow us on social media</span>
|
||||
{% for social in website_footer.social_media_links %}
|
||||
<a class="footer-social" href="{{ social.link }}">
|
||||
<i class="fab fa-{{ social.name }}"></i>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-mid container">
|
||||
<div class="row" style="width: 100%; justify-content: space-between;">
|
||||
<div class="footer-mid-left col-7 row">
|
||||
<div class="footer-mid-column col">
|
||||
<div class="footer-mid-column-title">
|
||||
About
|
||||
</div>
|
||||
<a class="footer-item" href="">
|
||||
About Us
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Learner Stories
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Careers
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Press
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Leadership
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Contact Us
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-mid-column col">
|
||||
<div class="footer-mid-column-title">
|
||||
Categories
|
||||
</div>
|
||||
<a class="footer-item" href="">
|
||||
Development
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Business
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Finance & Accounting
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
IT & Software
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Office Productivity
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Design
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Marketing
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-mid-column col">
|
||||
<div class="footer-mid-column-title"></div>
|
||||
<a class="footer-item" href="">
|
||||
Lifestyle
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Photography & Video
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Health & Fitness
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Music
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
UX Design
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Seo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-mid-right col-5 row">
|
||||
<div class="footer-mid-column col">
|
||||
<div class="footer-mid-column-title">
|
||||
Support
|
||||
</div>
|
||||
<a class="footer-item" href="">
|
||||
Documentation
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
FAQS
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Dashboard
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Contact
|
||||
</a>
|
||||
</div>
|
||||
<div class="footer-mid-column col">
|
||||
<div class="footer-mid-column-title">
|
||||
Get in touch
|
||||
</div>
|
||||
<div class="footer-item">
|
||||
We don’t send spam so don’t worry.
|
||||
</div>
|
||||
<form class="footer-form">
|
||||
<input class="footer-input" placeholder="Email...">
|
||||
<button class="footer-form-button">
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<div class="footer-bottom-left">
|
||||
© {{ "now" | date: "%Y" }} Educrat. All Right Reserved.
|
||||
</div>
|
||||
<div class="footer-bottom-right">
|
||||
<a class="footer-item" href="">
|
||||
Help
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Privacy Policy
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Cookie Notice
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Security
|
||||
</a>
|
||||
<a class="footer-item" href="">
|
||||
Terms of Use
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer-wrapper {
|
||||
background: #563150;
|
||||
padding: 30px 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 92%;
|
||||
max-width: 1400px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.footer > * {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.footer-top-top, .footer-top-bottom, .footer-mid, .footer-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.footer-top, .footer-mid {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .15);
|
||||
}
|
||||
|
||||
.footer-top-top-left {
|
||||
margin: auto 0;
|
||||
font-weight: 700;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.footer-top-top-right {
|
||||
color: #563150;
|
||||
background: #D4D85D;
|
||||
border: 2px solid #D4D85D;
|
||||
border-radius: 8px;
|
||||
padding: 12px 20px;
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
.footer-top-top-right:hover {
|
||||
background: none;
|
||||
color: #D4D85D;
|
||||
}
|
||||
|
||||
.footer-top-bottom-right {
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.footer-top-bottom-right > * {
|
||||
margin: auto 10px;
|
||||
}
|
||||
|
||||
.footer-mid {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.footer-mid-right.col-5.row, .footer-mid-right.col-5.row > .footer-mid-column.col:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.footer-mid-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footer-mid-column .footer-item {
|
||||
line-height: 1.6rem;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.footer-mid-column-title {
|
||||
height: 50px;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.footer-form {
|
||||
background: white;
|
||||
border-radius: 100px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
margin-top: 15px;
|
||||
justify-content: space-between;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.footer-input {
|
||||
border: none;
|
||||
padding-left: 22px;
|
||||
background: none;
|
||||
outline: none;
|
||||
max-width: 180px;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.footer-form-button {
|
||||
border-radius: 100px;
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
background: #6440fb;
|
||||
color: #fff;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.footer-bottom-right > .footer-item {
|
||||
margin: auto 6px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,74 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% assign activites_count = 0 %}
|
||||
{% for section in course.sections %}
|
||||
{% assign activites_count = activites_count | plus: section.activities.size %}
|
||||
{% endfor %}
|
||||
<a class="dashboard-course" categories="{{ course.categories | map: 'id' | join: ' ' }}" href="{{ course_path }}">
|
||||
<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">
|
||||
<div class="dashboard-course-rating">
|
||||
<div class="dashboard-course-rating-value">
|
||||
{{ course.properties.np_course_rating }}
|
||||
</div>
|
||||
<div class="dashboard-course-rating-stars">
|
||||
{% for i in (1..5) %}
|
||||
{% if course.properties.np_course_rating >= i %}
|
||||
<i class="fas fa-star"></i>
|
||||
{% else %}
|
||||
<i class="fal fa-star"></i>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="dashboard-course-rating-count">
|
||||
({{ course.properties.np_course_rating_count }})
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="dashboard-course-info-section">
|
||||
<div class="dashboard-course-info">
|
||||
<i class="fal fa-file-alt"></i>
|
||||
{% if activites_count > 1 %}
|
||||
{{ activites_count }} lessons
|
||||
{% else %}
|
||||
{{ activites_count }} lesson
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<div class="dashboard-course-info">
|
||||
<i class="fal fa-clock"></i>
|
||||
{{ course.properties.course_time | divided_by: 60 }}h {{ course.properties.course_time | modulo: 60 }}m
|
||||
</div>
|
||||
<div class="dashboard-course-info">
|
||||
<i class="fal fa-signal-3"></i>
|
||||
{{ course.properties.course_difficulty }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dashboard-course-footer">
|
||||
{% if course.instructors.size != 0 %}
|
||||
<div class="dashboard-course-instructor">
|
||||
<img class="dashboard-course-instructor-image" src="{{ course.instructors.first.avatar_url }}">
|
||||
<div class="dashboard-course-instructor-name">
|
||||
{{ course.instructors.first.name }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@ -0,0 +1,42 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% assign activites_count = 0 %}
|
||||
{% for section in course.sections %}
|
||||
{% assign activites_count = activites_count | plus: section.activities.size %}
|
||||
{% endfor %}
|
||||
|
||||
<a class="recent-course-card" href="{{ course_path }}">
|
||||
<img class="recent-course-image" src="{{ course.image_url }}">
|
||||
<div class="recent-course-content">
|
||||
<div class="recent-course-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="recent-course-footer">
|
||||
{% if course.instructors and course.instructors.size > 0 %}
|
||||
<div class="recent-course-info">
|
||||
<div class="recent-course-info-icon">
|
||||
<img src="{{ course.instructors.first.avatar_url }}" />
|
||||
</div>
|
||||
<div class="recent-course-info-value">
|
||||
{{ course.instructors.first.name }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="recent-course-info">
|
||||
<div class="recent-course-info-icon">
|
||||
<i class="fal fa-file-alt"></i>
|
||||
</div>
|
||||
<div class="recent-course-info-value">
|
||||
{{ activites_count }} lessons
|
||||
</div>
|
||||
</div>
|
||||
<div class="recent-course-info">
|
||||
<div class="recent-course-info-icon">
|
||||
<i class="fal fa-clock"></i>
|
||||
</div>
|
||||
<div class="recent-course-info-value">
|
||||
{{ course.properties.course_time | divided_by: 60 }}h {{ course.properties.course_time | modulo: 60 }}m
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@ -0,0 +1,16 @@
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for course in courses.enrolled limit: 12 %}
|
||||
<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,136 @@
|
||||
<div class="dashboard-categories">
|
||||
<div class="dashboard-categories-header">
|
||||
<div class="dashboard-categories-title">
|
||||
Top Learning Paths
|
||||
</div>
|
||||
</div>
|
||||
<div class="categories-carousel">
|
||||
{% for learning_path in learning_paths.available %}
|
||||
<div class="category-card-wrapper">
|
||||
<a class="category-card" href="{% route learning_path, id: learning_path.id %}">
|
||||
<div class="category-card-name">
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="categories-carousel-control"></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.dashboard-categories {
|
||||
padding: 60px 16px;
|
||||
max-width: 1320px;
|
||||
margin: auto;
|
||||
}
|
||||
.dashboard-categories-header {
|
||||
margin: 0 auto 32px;
|
||||
text-align: center;
|
||||
}
|
||||
.dashboard-categories-title {
|
||||
font-size: 1.9rem;
|
||||
font-weight: 700;
|
||||
color: #563150;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.dashboard-categories-subtitle {
|
||||
|
||||
}
|
||||
|
||||
.categories-carousel.tns-slider {
|
||||
display:flex;
|
||||
}
|
||||
.category-card-wrapper {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.category-card {
|
||||
background: #EEF2F6;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 26px 24px;
|
||||
border-radius: 8px;
|
||||
text-align:center;
|
||||
transition: all 0.1s;
|
||||
/*min-height: 104px; */
|
||||
}
|
||||
.category-card:hover {
|
||||
background: #563150;
|
||||
}
|
||||
.category-card:hover .category-card-name {
|
||||
color: #fff;
|
||||
}
|
||||
.category-card-name {
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
line-height: 26px;
|
||||
color: #563150;
|
||||
}
|
||||
|
||||
.dashboard-categories .tns-nav {
|
||||
text-align: center;
|
||||
max-width: 230px;
|
||||
margin: 20px auto 0;
|
||||
}
|
||||
|
||||
.dashboard-categories .tns-nav button {
|
||||
border-radius: 50%;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.dashboard-categories .tns-controls {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: 275px;
|
||||
margin: auto;
|
||||
margin-top:-30px;
|
||||
}
|
||||
|
||||
.dashboard-categories .tns-controls button {
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.dashboard-categories .tns-controls button.tns-nav-active {
|
||||
background: #563150;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
var filtersSlider = tns({
|
||||
container: '.categories-carousel',
|
||||
controls: true,
|
||||
controlsText: ['<i class="fal fa-long-arrow-left"></i>','<i class="fal fa-long-arrow-right"></i>'],
|
||||
mouseDrag: true,
|
||||
swipeAngle: false,
|
||||
items: 6,
|
||||
controlsPosition:'bottom',
|
||||
navPosition: 'bottom,',
|
||||
slideBy: 1,
|
||||
responsive: {
|
||||
640: {
|
||||
items: 2
|
||||
},
|
||||
768: {
|
||||
items: 3
|
||||
},
|
||||
992: {
|
||||
items: 4
|
||||
},
|
||||
1200: {
|
||||
items: 6
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,104 @@
|
||||
<div class="main-courses-filter-wrapper">
|
||||
<div class="main-courses-filters" id="filters-carousel">
|
||||
<div class="main-courses-filter-item main-courses-filter-item-active" onclick="switchCategory('ALL', this)">
|
||||
All Categories
|
||||
</div>
|
||||
{% for category in categories.enrolled %}
|
||||
<div class="main-courses-filter-item" onclick="switchCategory('{{ category.id }}', this)">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.main-courses-filter-wrapper {
|
||||
width: 90%;
|
||||
margin: 0 auto 30px;
|
||||
position: relative;
|
||||
}
|
||||
.main-courses-filters {
|
||||
display: flex;
|
||||
margin-top: 0;
|
||||
width: fit-content;
|
||||
}
|
||||
.main-courses-filter-item {
|
||||
margin: auto 8px;
|
||||
padding: 5px 8px;
|
||||
text-align: center;
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Old versions of Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none;
|
||||
}
|
||||
.main-courses-filter-item-active {
|
||||
background: #F4F1FE;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.tns-controls {
|
||||
position: absolute;
|
||||
width: 110%;
|
||||
top: -10%;
|
||||
z-index: 10;
|
||||
height: 120%;
|
||||
left: -5%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
pointer-events: none;
|
||||
}
|
||||
.tns-controls > * {
|
||||
visibility: hidden;
|
||||
width: 15%;
|
||||
position: relative;
|
||||
}
|
||||
.tns-controls > *:after {
|
||||
visibility: visible;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
border: none;
|
||||
content: '';
|
||||
width: 100% ;
|
||||
background: linear-gradient(to right, rgba(255,255,255, 0), rgba(255, 255, 255, 0.8) 50% );
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.tns-controls > *:first-child:after {
|
||||
transform: rotate(180deg);
|
||||
left: 0;
|
||||
}
|
||||
.tns-controls > *:disabled:after {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
.hidden-course {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function switchCategory(categoryID, buttonElement) {
|
||||
document.querySelector('.main-courses-filter-item-active').classList.remove('main-courses-filter-item-active');
|
||||
buttonElement.classList.add('main-courses-filter-item-active');
|
||||
document.querySelectorAll('.dashboard-course.hidden-course').forEach(element => {
|
||||
element.classList.remove('hidden-course');
|
||||
})
|
||||
if (categoryID != 'ALL') {
|
||||
document.querySelectorAll(`.dashboard-course:not([categories*="${categoryID}"])`).forEach(element => {
|
||||
element.classList.add('hidden-course');
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
var filtersSlider = tns({
|
||||
container: '#filters-carousel',
|
||||
controls: true,
|
||||
loop: false,
|
||||
mouseDrag: true,
|
||||
swipeAngle: false,
|
||||
items: 5,
|
||||
nav: false
|
||||
});
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,192 @@
|
||||
{% assign courses_completed = 0 %}
|
||||
{% assign hourses_completed = 0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.completed? %}
|
||||
{% assign courses_completed = courses_completed | plus: 1 %}
|
||||
{% assign hourses_completed = hourses_completed | plus: course.properties.course_time %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% assign hourses_completed = hourses_completed | divided_by: 60 %}
|
||||
<div class="dashboard-header container">
|
||||
<div class="row">
|
||||
<div class="dashboard-header-left col">
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="dashboard-header-left-title">
|
||||
Welcome back {{ current_person.first_name }},
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="dashboard-header-left-subtitle">
|
||||
Network Q is Quantuvos’ professional development platform that provides a wide range of top-quality resources to everyone in your organization. Network Q content is carefully curated to deliver the right topics in the right way at the right time based on individual needs and preferences. These resources assist individuals in achieving their professional development goals.
|
||||
</div>
|
||||
<div class="dashboard-header-left-widgets row">
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="dashboard-header-left-widget">
|
||||
<div class="dashboard-header-left-widget-left">
|
||||
<div class="dashboard-header-left-widget-title">
|
||||
Courses Completed
|
||||
</div>
|
||||
<div class="dashboard-header-left-widget-value">
|
||||
{{ courses_completed }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-header-left-widget-icon">
|
||||
<i class="far fa-tags"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="dashboard-header-left-widget">
|
||||
<div class="dashboard-header-left-widget-left">
|
||||
<div class="dashboard-header-left-widget-title">
|
||||
Hours of Learning
|
||||
</div>
|
||||
<div class="dashboard-header-left-widget-value">
|
||||
{{ hourses_completed }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-header-left-widget-icon">
|
||||
<i class="far fa-tags"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-header-right col-12 col-sm-6">
|
||||
<div class="dashboard-header-right-header">
|
||||
<div class="dashboard-header-right-header-title">
|
||||
Recent Courses
|
||||
</div>
|
||||
<a class="dashboard-header-right-header-link" href="{% route courses %}">
|
||||
View All
|
||||
</a>
|
||||
</div>
|
||||
{% assign recent_course_count = 0 %}
|
||||
<div class="dashboard-header-right-courses">
|
||||
{% for course in courses.enrolled limit: 2 %}
|
||||
{% assign recent_course_count = recent_course_count | plus: 1 %}
|
||||
{% include 'cards_course_recent' %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if recent_course_count == 0 %}
|
||||
<style>
|
||||
.dashboard-header-right-courses {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
.dashboard-header {
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
max-width: none;
|
||||
}
|
||||
.dashboard-header-left-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: rgb(86, 49, 80);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.dashboard-header-left-subtitle {
|
||||
margin-bottom: 1rem;
|
||||
color: #3d4371;
|
||||
}
|
||||
.dashboard-header-left-widgets {
|
||||
display: flex;
|
||||
}
|
||||
.dashboard-header-left-widget {
|
||||
display: flex;
|
||||
padding: 30px;
|
||||
justify-content: space-between;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow:0 1px 4px 0 #14034212;
|
||||
}
|
||||
.dashboard-header-left-widget-title {
|
||||
color: #3d4371;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.dashboard-header-left-widget-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
color: rgb(86, 49, 80);
|
||||
}
|
||||
.dashboard-header-left-widget-icon {
|
||||
align-self: center;
|
||||
font-size: 2rem;
|
||||
color: rgb(86, 49, 80);
|
||||
}
|
||||
.dashboard-header-right {
|
||||
padding: 20px;
|
||||
margin-left: 15px;
|
||||
border-radius: 12px;
|
||||
background: white;
|
||||
box-shadow:0 1px 4px 0 #14034212;
|
||||
}
|
||||
.dashboard-header-right-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid lightgray;
|
||||
}
|
||||
.dashboard-header-right-courses {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.dashboard-header-right-header-title {
|
||||
color: rgb(86, 49, 80);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.dashboard-header-right-header-link {
|
||||
text-decoration: underline !important;
|
||||
color: rgb(86, 49, 80) !important;
|
||||
text-decoration-color: rgb(86, 49, 80) !important;
|
||||
}
|
||||
|
||||
|
||||
/* recent course card styles */
|
||||
.recent-course-card {
|
||||
display: flex;
|
||||
padding: 15px 0;
|
||||
}
|
||||
.recent-course-card:last-child:not(.recent-course-card:first-child) {
|
||||
border-top: 1px solid lightgray;
|
||||
}
|
||||
.recent-course-image {
|
||||
width: auto;
|
||||
height: 70px;
|
||||
margin: auto 20px auto 0;
|
||||
}
|
||||
.recent-course-title {
|
||||
color: rgb(86, 49, 80);
|
||||
font-weight: 500;
|
||||
}
|
||||
.recent-course-footer {
|
||||
display: flex;
|
||||
color: #3d4371;
|
||||
}
|
||||
.recent-course-info {
|
||||
display: flex;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.recent-course-info-icon {
|
||||
margin-right: 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.recent-course-info-icon img {
|
||||
max-width:100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,175 @@
|
||||
<div class="top-courses">
|
||||
<div class="top-courses-header">
|
||||
<div class="top-courses-header-left">
|
||||
<div class="top-courses-header-left-title">
|
||||
Top courses
|
||||
</div>
|
||||
<div class="top-courses-header-left-subtitle">
|
||||
10,000+ unique online course list designs
|
||||
</div>
|
||||
</div>
|
||||
<a class="top-courses-header-button" href="{% route courses %}">
|
||||
All Courses <i class="fal fa-arrow-up" style="transform: rotate(45deg); margin-left: 8px;"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="top-courses-carousel-wrapper">
|
||||
<div class="top-courses-carousel">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.properties.top_course %}
|
||||
{% include 'cards_course_dashboard' %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.top-courses {
|
||||
max-width:1320px;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.top-courses-carousel.tns-slider {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.top-courses-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 50px 0;
|
||||
}
|
||||
|
||||
.top-courses-header-left-title {
|
||||
font-size: 2rem;
|
||||
color: rgb(86, 49, 80);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.top-courses-header-left-subtitle {
|
||||
color: #3d4371;
|
||||
}
|
||||
|
||||
.top-courses-header-left {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.top-courses-header-button {
|
||||
padding: 16px 32px;
|
||||
background: #ebeaff;
|
||||
color: #724b6b !important;
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.top-courses-carousel-wrapper {
|
||||
position: relative;
|
||||
margin:0 32px;
|
||||
}
|
||||
|
||||
.top-courses .tns-controls {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
.top-courses .tns-controls button {
|
||||
background: none;
|
||||
border: 1px solid #563150;
|
||||
border-radius:50px;
|
||||
font-size: 20px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
position:relative;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.top-courses .tns-controls button:hover {
|
||||
background: #563150;
|
||||
border: 1px solid #563150;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.top-courses .tns-controls button[data-controls='next'] {
|
||||
left:43px;
|
||||
}
|
||||
|
||||
.top-courses .tns-controls button[data-controls='prev'] {
|
||||
right:43px;
|
||||
}
|
||||
|
||||
.top-courses .tns-controls button:disabled {
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
.top-courses .tns-controls button i {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media (min-width:850px) {
|
||||
.top-courses .tns-controls button {
|
||||
font-size: 22px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.top-courses .tns-controls button[data-controls='next'] {
|
||||
left:55px;
|
||||
}
|
||||
|
||||
.top-courses .tns-controls button[data-controls='prev'] {
|
||||
right:55px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
.top-courses .tns-controls button {
|
||||
font-size: 27px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.top-courses .tns-controls button[data-controls='next'] {
|
||||
left:70px;
|
||||
}
|
||||
|
||||
.top-courses .tns-controls button[data-controls='prev'] {
|
||||
right:70px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
var filtersSlider = tns({
|
||||
container: '.top-courses-carousel',
|
||||
controls: true,
|
||||
controlsText: ['<i class="fal fa-long-arrow-left"></i>','<i class="fal fa-long-arrow-right"></i>'],
|
||||
loop: false,
|
||||
mouseDrag: true,
|
||||
swipeAngle: false,
|
||||
items: 1,
|
||||
nav: false,
|
||||
gutter: 30,
|
||||
responsive: {
|
||||
640: {
|
||||
items: 2
|
||||
},
|
||||
850: {
|
||||
items: 3
|
||||
},
|
||||
1200: {
|
||||
items: 4
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,41 @@
|
||||
{% comment %}<footer class="footer np-subpage-container">{% endcomment %}
|
||||
{% comment %}<div class="footer-left">{% endcomment %}
|
||||
{% comment %}© {{ "now" | date: "%Y" }} Quantuvos Inc. All Right Reserved.{% endcomment %}
|
||||
{% comment %}</div>{% endcomment %}
|
||||
{% comment %}<div class="footer-right">{% endcomment %}
|
||||
{% comment %}<a class="footer-element" href="https://www.quantuvos.com/privacy-policy">{% endcomment %}
|
||||
{% comment %}Privacy Policy{% endcomment %}
|
||||
{% comment %}</a>{% endcomment %}
|
||||
{% comment %}<a class="footer-element" href="https://www.quantuvos.com/privacy-policy">{% endcomment %}
|
||||
{% comment %}Terms of Use{% endcomment %}
|
||||
{% comment %}</a>{% endcomment %}
|
||||
{% comment %}</div>{% endcomment %}
|
||||
{% comment %}</footer>{% endcomment %}
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
justify-content: space-between;
|
||||
background: #f2f4f5;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
text-align:center;
|
||||
}
|
||||
.footer-right {
|
||||
display: flex;
|
||||
flex-wrap:wrap;
|
||||
margin-top:16px;
|
||||
}
|
||||
|
||||
.footer-element {
|
||||
padding: 4px;
|
||||
margin: auto 8px 8px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.footer {
|
||||
display: flex;
|
||||
text-align:left;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,8 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<script src="https://kit.fontawesome.com/41a3aee3ad.js" crossorigin="anonymous"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
||||
@ -0,0 +1,154 @@
|
||||
<header class="np-header np-header-color">
|
||||
<div class="np-header-content">
|
||||
<div class="header-left">
|
||||
{% 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 id="header-explore-button" class="cursor_pointer" onclick="toggleExploreDropdown()">
|
||||
Explore
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-middle tablet-hidden">
|
||||
{% include 'header_desktop_top_menu' %}
|
||||
</div>
|
||||
<div class="header-right">
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="header-search-button" onclick="toggleSearch()">
|
||||
<i class="far fa-search"></i>
|
||||
</div>
|
||||
<div class="np-header-font-color tablet-visible" onclick="toggleSideMenu()" id="side-menu-open-button">
|
||||
<i class="far fa-bars" style="pointer-events: none;"></i>
|
||||
</div>
|
||||
|
||||
<div class="tablet-hidden 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 %}
|
||||
<div class="header-desktop-login tablet-hidden">
|
||||
<a href="{% route login %}">
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
<div class="header-desktop-signup tablet-hidden">
|
||||
<a href="">
|
||||
Sign up
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="header-blank-space"></div>
|
||||
<div class="np-hidden" id="gray-background"></div>
|
||||
<div id="header-desktop-dropdown" class="np-hidden"></div>
|
||||
|
||||
{% include "header_mobile_side_menu" %}
|
||||
{% include "header_search" %}
|
||||
{% include "header_desktop_explore" %}
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
.cursor_pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
header.np-header {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
height: 90px;
|
||||
}
|
||||
.header-left, .header-middle, .header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header-blank-space {
|
||||
height: 120px;
|
||||
}
|
||||
.header-right {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
#header-explore-button {
|
||||
display: none !important;
|
||||
color: rgb(212, 216, 93);
|
||||
margin-left: 50px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#header-explore-button:hover {
|
||||
background: rgba(255,255,255,.15);
|
||||
}
|
||||
.header-search-button .fa-search {
|
||||
color: white;
|
||||
margin-right: 16px;
|
||||
}
|
||||
#header-explore-button .fa-bars {
|
||||
margin-right: 8px;
|
||||
}
|
||||
header.np-header, .header-blank-space {
|
||||
height: 90px;
|
||||
}
|
||||
.np-header-logo {
|
||||
flex-grow: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.np-header-content {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#gray-background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
background-color: rgba(24,24,26,.7);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,222 @@
|
||||
<div class="np-hidden" id="header-explore-dropdown">
|
||||
<ul class="header-explore-list">
|
||||
{% for learning_path in learning_paths.available limit:15 %}
|
||||
<li class="header-explore-item">
|
||||
<a class="header-explore-item-text cursor_pointer" href="{% route learning_path, id: learning_path.id %}">
|
||||
{{ learning_path.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<ul class="header-explore-list">
|
||||
{% for learning_path in learning_paths.available offset:15 limit:15 %}
|
||||
<li class="header-explore-item">
|
||||
<a class="header-explore-item-text cursor_pointer" href="{% route learning_path, id: learning_path.id %}">
|
||||
{{ learning_path.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<ul class="header-explore-list">
|
||||
{% for learning_path in learning_paths.available offset:30 limit:15 %}
|
||||
<li class="header-explore-item">
|
||||
<a class="header-explore-item-text cursor_pointer" href="{% route learning_path, id: learning_path.id %}">
|
||||
{{ learning_path.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<ul class="np-hidden" id="header-explore-extension"></ul>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cursor_pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
#header-explore-dropdown {
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: rgba(1, 33, 58, 0.07) 0px 25px 70px 0px;
|
||||
padding: 20px 0;
|
||||
top: 90px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
.header-explore-list {
|
||||
list-style: none;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#header-explore-extension {
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.header-explore-item, .header-explore-extension-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: rgb(86, 49, 80);
|
||||
font-weight: 400;
|
||||
padding: 2px 0;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.header-explore-item .fa-angle-right {
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
margin: auto 0;
|
||||
}
|
||||
.header-explore-item-text {
|
||||
margin-right: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var exploreDropdownOpen = false
|
||||
var openExploreExtension = ''
|
||||
function toggleExploreDropdown() {
|
||||
console.log('explore clicked')
|
||||
let dropdownElement = document.getElementById('header-explore-dropdown');
|
||||
let dropdownExtension = document.getElementById('header-explore-extension');
|
||||
if (exploreDropdownOpen) {
|
||||
dropdownElement.classList.add('np-hidden');
|
||||
dropdownExtension.classList.add('np-hidden');
|
||||
openExploreExtension = '';
|
||||
exploreDropdownOpen = false;
|
||||
}
|
||||
else {
|
||||
repositionExplore()
|
||||
exploreDropdownOpen = true;
|
||||
document.getElementById('header-explore-dropdown').classList.remove('np-hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function expandExploreDropdown(name) {
|
||||
console.log('explore clicked')
|
||||
let dropdownExtension = document.getElementById('header-explore-extension');
|
||||
if (openExploreExtension == '') {
|
||||
dropdownExtension.classList.remove('np-hidden');
|
||||
}
|
||||
if (name != openExploreExtension) {
|
||||
dropdownExtension.innerHTML = exploreDropdowns[name];
|
||||
openExploreExtension = name;
|
||||
}
|
||||
}
|
||||
|
||||
function repositionExplore() {
|
||||
let dropdown = document.getElementById('header-explore-dropdown');
|
||||
let parentButton = document.getElementById('header-explore-button')
|
||||
let buttonPosition = parentButton.getBoundingClientRect();
|
||||
dropdown.style.top = `${buttonPosition.bottom + 75}px`;
|
||||
dropdown.style.left = `${buttonPosition.left}px`;
|
||||
}
|
||||
|
||||
addEventListener('resize', function() {
|
||||
if (exploreDropdownOpen) {
|
||||
if (window.innerWidth <= 1200 ) {
|
||||
document.getElementById('header-explore-dropdown').classList.add('np-hidden');
|
||||
exploreDropdownOpen = '';
|
||||
}
|
||||
else {
|
||||
repositionExplore();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// document.addEventListener('click', function(event) {
|
||||
// if (exploreDropdownOpen &&
|
||||
// !document.getElementById('header-explore-dropdown').contains(event.target) &&
|
||||
// !document.getElementById('header-explore-button').contains(event.target)
|
||||
// ) {
|
||||
// toggleExploreDropdown()
|
||||
// }
|
||||
// })
|
||||
|
||||
exploreDropdowns = {};
|
||||
exploreDropdowns.architecture = `
|
||||
<li class="header-explore-extension-item">
|
||||
<a href="">
|
||||
Architecture
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-explore-extension-item">
|
||||
<a href="">
|
||||
Graphic Design
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-explore-extension-item">
|
||||
<a href="">
|
||||
Design Tool
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-explore-extension-item">
|
||||
<a href="">
|
||||
User Experience Design
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-explore-extension-item">
|
||||
<a href="">
|
||||
Game Design
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-explore-extension-item">
|
||||
<a href="">
|
||||
3D & Animation
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-explore-extension-item">
|
||||
<a href="">
|
||||
Fashion Design
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-explore-extension-item">
|
||||
<a href="">
|
||||
Interior Design
|
||||
</a>
|
||||
</li>`
|
||||
exploreDropdowns.business = `
|
||||
<li class="header-explore-extension-item">
|
||||
<a href="">
|
||||
Architecture 2
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-explore-extension-item">
|
||||
<a href="">
|
||||
Graphic Design 2
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-explore-extension-item">
|
||||
<a href="">
|
||||
Design Tool 2
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-explore-extension-item">
|
||||
<a href="">
|
||||
User Experience Design 2
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-explore-extension-item">
|
||||
<a href="">
|
||||
Game Design 2
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-explore-extension-item">
|
||||
<a href="">
|
||||
3D & Animation 2
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-explore-extension-item">
|
||||
<a href="">
|
||||
Fashion Design 2
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-explore-extension-item">
|
||||
<a href="">
|
||||
Interior Design 2
|
||||
</a>
|
||||
</li>`
|
||||
exploreDropdowns.design = exploreDropdowns.architecture;
|
||||
</script>
|
||||
@ -0,0 +1,192 @@
|
||||
<div class="header-desktop-menu tablet-hidden">
|
||||
<ul class="header-desktop-menu-list">
|
||||
|
||||
{% comment %}
|
||||
-- Comment from Norm:
|
||||
This was the original menu layout with dropdowns as per their styling needs.
|
||||
Last minute there were changes, so I edited the block below and saved this
|
||||
for when they revert. Be sure to uncomment the script at the bottom too.
|
||||
|
||||
<li class="header-desktop-menu-item" dropdown-show="home">
|
||||
Home <i class="far fa-angle-down"></i>
|
||||
</li>
|
||||
<li class="header-desktop-menu-item" dropdown-show="home">
|
||||
Home <i class="far fa-angle-down"></i>
|
||||
</li>
|
||||
<li class="header-desktop-menu-item" dropdown-show="courses">
|
||||
Courses <i class="far fa-angle-down"></i>
|
||||
</li>
|
||||
<li class="header-desktop-menu-item" dropdown-show="events">
|
||||
Events <i class="far fa-angle-down"></i>
|
||||
</li>
|
||||
<li class="header-desktop-menu-item" dropdown-show="blog">
|
||||
Blog <i class="far fa-angle-down"></i>
|
||||
</li>
|
||||
<li class="header-desktop-menu-item" dropdown-show="pages">
|
||||
Pages <i class="far fa-angle-down"></i>
|
||||
</li>
|
||||
<li class="header-desktop-menu-link">
|
||||
<a href="">
|
||||
Contact
|
||||
</a>
|
||||
</li>
|
||||
{% endcomment %}
|
||||
|
||||
<li class="header-desktop-menu-item">
|
||||
<a href="{% route home %}">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-desktop-menu-item" dropdown-show="courses">
|
||||
<a href="{% route courses %}">
|
||||
Courses
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-desktop-menu-item cursor_pointer" >
|
||||
<a onclick="toggleExploreDropdown()" class="cursor_pointer" >
|
||||
Explore
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-desktop-menu-link">
|
||||
<a href="https://www.quantuvos.com/contact" target="_blank">
|
||||
Contact
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.header-desktop-menu-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
margin: auto;
|
||||
}
|
||||
.header-desktop-menu-item, .header-desktop-menu-link {
|
||||
display: flex;
|
||||
margin: 0 10px;
|
||||
color: white;
|
||||
}
|
||||
.header-desktop-menu-item .fa-angle-down {
|
||||
margin: auto 0 auto 5px;
|
||||
}
|
||||
#header-desktop-dropdown {
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
}
|
||||
.header-desktop-dropdown-list {
|
||||
list-style: none;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 25px 70px 0 #01213a12;
|
||||
margin-bottom: 0;
|
||||
min-width: 230px;
|
||||
}
|
||||
.header-desktop-dropdown-item {
|
||||
padding: 3px 0;
|
||||
margin: 3px auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% comment %}
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
document.querySelectorAll('.header-desktop-menu-item[dropdown-show]').forEach(element => {
|
||||
element.addEventListener('click', function() {
|
||||
toggleMenuDropdown(element.getAttribute('dropdown-show'))
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
var openMenuDropdown = '';
|
||||
|
||||
function toggleMenuDropdown(name) {
|
||||
let dropdown = document.getElementById('header-desktop-dropdown');
|
||||
if (openMenuDropdown == name || !name) {
|
||||
dropdown.classList.add('np-hidden');
|
||||
openMenuDropdown = '';
|
||||
}
|
||||
else {
|
||||
openMenuDropdown = name;
|
||||
dropdown.innerHTML = menuDropdowns[name];
|
||||
if (openMenuDropdown) {
|
||||
dropdown.classList.remove('np-hidden');
|
||||
}
|
||||
repositionMenuDropdown();
|
||||
}
|
||||
}
|
||||
|
||||
function repositionMenuDropdown() {
|
||||
let dropdown = document.getElementById('header-desktop-dropdown');
|
||||
let parentButton = document.querySelector(`.header-desktop-menu-item[dropdown-show="${openMenuDropdown}"]`)
|
||||
let buttonPosition = parentButton.getBoundingClientRect();
|
||||
dropdown.style.top = `${buttonPosition.bottom + 15}px`;
|
||||
dropdown.style.left = `${buttonPosition.left}px`;
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(event) {
|
||||
if (openMenuDropdown &&
|
||||
!document.querySelector('.header-desktop-menu').contains(event.target) &&
|
||||
!document.getElementById('header-desktop-dropdown').contains(event.target)
|
||||
) {
|
||||
toggleMenuDropdown()
|
||||
}
|
||||
})
|
||||
|
||||
addEventListener('resize', function() {
|
||||
if (openMenuDropdown) {
|
||||
if (window.innerWidth <= 1200 ) {
|
||||
document.getElementById('header-desktop-dropdown').classList.add('np-hidden');
|
||||
openMenuDropdown = '';
|
||||
}
|
||||
else {
|
||||
repositionMenuDropdown();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
menuDropdowns = {};
|
||||
menuDropdowns.home = `
|
||||
<ul class="header-desktop-dropdown-list">
|
||||
<li class="header-desktop-dropdown-item">
|
||||
Home 1
|
||||
</li>
|
||||
<li class="header-desktop-dropdown-item">
|
||||
Home 2
|
||||
</li>
|
||||
<li class="header-desktop-dropdown-item">
|
||||
Home 3
|
||||
</li>
|
||||
<li class="header-desktop-dropdown-item">
|
||||
Home 4
|
||||
</li>
|
||||
<li class="header-desktop-dropdown-item">
|
||||
Home 5
|
||||
</li>
|
||||
<li class="header-desktop-dropdown-item">
|
||||
Home 6
|
||||
</li>
|
||||
</ul>`
|
||||
menuDropdowns.courses = `
|
||||
<ul class="header-desktop-dropdown-list">
|
||||
<li class="header-desktop-dropdown-item">
|
||||
Course 1
|
||||
</li>
|
||||
<li class="header-desktop-dropdown-item">
|
||||
Course 2
|
||||
</li>
|
||||
<li class="header-desktop-dropdown-item">
|
||||
Course 3
|
||||
</li>
|
||||
<li class="header-desktop-dropdown-item">
|
||||
Course 4
|
||||
</li>
|
||||
<li class="header-desktop-dropdown-item">
|
||||
Course 5
|
||||
</li>
|
||||
<li class="header-desktop-dropdown-item">
|
||||
Course 6
|
||||
</li>
|
||||
</ul>`
|
||||
</script>
|
||||
{% endcomment %}
|
||||
@ -0,0 +1,362 @@
|
||||
<div class="side-menu-wrapper np-hidden tablet-visible" id="side-menu">
|
||||
<div class="side-menu">
|
||||
<div class="side-menu-header">
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="side-menu-header-logged">
|
||||
<a class="side-menu-header-name" href="">
|
||||
{{ current_person.name }}
|
||||
</a>
|
||||
<img class="side-menu-header-image" src="{{current_person.avatar_url}}">
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="side-menu-header-not-logged">
|
||||
<a class="side-menu-login" href="">
|
||||
Log in
|
||||
</a>
|
||||
<a class="side-menu-login" href="">
|
||||
Sign up
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="side-menu-body-wrapper" id="side-menu-body">
|
||||
<ul class="side-menu-body">
|
||||
<li class="side-menu-body-element-strong"><a href="{% route home %}">
|
||||
Home
|
||||
{% comment %}<i class="fal fa-angle-right side-menu-body-arrow"></i>{% endcomment %}
|
||||
</li>
|
||||
<li class="side-menu-body-element-strong"><a href="{% route courses %}">
|
||||
Courses
|
||||
{% comment %}<i class="fal fa-angle-right side-menu-body-arrow"></i>{% endcomment %}
|
||||
</li>
|
||||
{% comment %} <li class="side-menu-body-element-strong">
|
||||
Events
|
||||
<i class="fal fa-angle-right side-menu-body-arrow"></i>
|
||||
</li>
|
||||
<li class="side-menu-body-element-strong">
|
||||
Blog
|
||||
<i class="fal fa-angle-right side-menu-body-arrow"></i>
|
||||
</li>
|
||||
<li class="side-menu-body-element-strong">
|
||||
Pages
|
||||
<i class="fal fa-angle-right side-menu-body-arrow"></i>
|
||||
</li>{% endcomment %}
|
||||
<li class="side-menu-body-element-strong">
|
||||
<a target="_blank" href="https://www.quantuvos.com/contact">
|
||||
Contact
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="side-menu-footer">
|
||||
<div class="side-menu-footer-top">
|
||||
Call Us<br>800 388 80 90
|
||||
</div>
|
||||
<div class="side-menu-footer-mid">
|
||||
info@quantuvos.com
|
||||
</div>
|
||||
<div class="side-menu-footer-bottom">
|
||||
{% for social in website_footer.social_media_links %}
|
||||
<a class="side-menu-footer-social" href="{{ social.link }}">
|
||||
<i class="fab fa-{{ social.name }}"></i>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-hidden" id="side-menu-close-button" onclick="toggleSideMenu()">
|
||||
<i class="fal fa-times" style="margin: auto;"></i>
|
||||
</div>
|
||||
<style>
|
||||
.side-menu-wrapper {
|
||||
width: 50%;
|
||||
max-width: 700px;
|
||||
background: white;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
height: 100vh;
|
||||
}
|
||||
.side-menu {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.side-menu-header {
|
||||
border-bottom: 1px solid #ededed;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.side-menu-header-logged {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
color: rgb(86, 49, 80);
|
||||
}
|
||||
.side-menu-header-image {
|
||||
height: 42px;
|
||||
width: auto;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.side-menu-header-name {
|
||||
align-self: center;
|
||||
margin-right: 32px;
|
||||
color: #563150;
|
||||
}
|
||||
.side-menu-body-wrapper {
|
||||
overflow-y: scroll;
|
||||
flex: 1;
|
||||
}
|
||||
.side-menu-body {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.side-menu-body-element, .side-menu-body-element-strong {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: rgb(86, 49, 80);
|
||||
}
|
||||
.side-menu-body-element-strong {
|
||||
margin: 20px;
|
||||
}
|
||||
.side-menu-body-arrow {
|
||||
margin: auto 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.side-menu-body-return {
|
||||
color: rgb(86, 49, 80);
|
||||
padding: 12px 20px 12px 0;
|
||||
border-radius: 8px;
|
||||
background: rgb(244, 241, 254);
|
||||
margin-top: 10px;
|
||||
}
|
||||
.side-menu-body-return .fa-chevron-left {
|
||||
margin-left: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.side-menu-body-element {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 400;
|
||||
margin: 10px 20px;
|
||||
}
|
||||
|
||||
.side-menu-footer {
|
||||
border-top: 1px solid #ededed;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.side-menu-footer-top {
|
||||
font-size: 1.1rem;
|
||||
color: rgb(86, 49, 80);
|
||||
font-weight: 500;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.side-menu-footer-mid {
|
||||
color: rgb(79, 84, 123);
|
||||
font-size: 0.9rem;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.side-menu-footer-bottom {
|
||||
color: rgb(79, 84, 123);
|
||||
font-weight: 400;
|
||||
}
|
||||
.side-menu-footer-social {
|
||||
margin: auto 10px;
|
||||
}
|
||||
.side-menu-footer-social:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.side-menu-footer-social:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
#side-menu-close-button {
|
||||
color: black;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
top: 2%;
|
||||
z-index: 101;
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.side-menu {
|
||||
min-width: 360px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 450px) {
|
||||
.side-menu {
|
||||
width: calc(100vw - 50px) !important;
|
||||
min-width: 0;
|
||||
}
|
||||
#side-menu-close-button {
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
addEventListener('resize', function() {
|
||||
if (window.innerWidth > 1200 && menuOpen) {
|
||||
toggleSideMenu()
|
||||
}
|
||||
})
|
||||
var menuOpen = false
|
||||
|
||||
function toggleSideMenu() {
|
||||
document.getElementById('side-menu').classList.toggle('np-hidden');
|
||||
document.getElementById('gray-background').classList.toggle('np-hidden');
|
||||
document.getElementById('side-menu-close-button').classList.toggle('np-hidden');
|
||||
if (menuOpen) {
|
||||
window.onscroll = function() {}
|
||||
} else {
|
||||
window.onscroll = function () { window.scrollTo(0, 0); };
|
||||
}
|
||||
menuOpen = !menuOpen
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function changeSideMenuBody(name) {
|
||||
document.getElementById('side-menu-body').innerHTML = sideMenuBodies[name]
|
||||
}
|
||||
let sideMenuBodies = {};
|
||||
sideMenuBodies.main = `
|
||||
<ul class="side-menu-body">
|
||||
<li class="side-menu-body-element-strong" onclick="changeSideMenuBody('home')">
|
||||
Home
|
||||
<i class="fal fa-angle-right side-menu-body-arrow"></i>
|
||||
</li>
|
||||
<li class="side-menu-body-element-strong" onclick="changeSideMenuBody('courses')">
|
||||
Courses
|
||||
<i class="fal fa-angle-right side-menu-body-arrow"></i>
|
||||
</li>
|
||||
<li class="side-menu-body-element-strong">
|
||||
Events
|
||||
<i class="fal fa-angle-right side-menu-body-arrow"></i>
|
||||
</li>
|
||||
<li class="side-menu-body-element-strong">
|
||||
Blog
|
||||
<i class="fal fa-angle-right side-menu-body-arrow"></i>
|
||||
</li>
|
||||
<li class="side-menu-body-element-strong">
|
||||
Pages
|
||||
<i class="fal fa-angle-right side-menu-body-arrow"></i>
|
||||
</li>
|
||||
<li class="side-menu-body-element-strong">
|
||||
<a target="_blank" href="https://www.quantuvos.com/contact">
|
||||
Contact
|
||||
</a>
|
||||
</li>
|
||||
</ul>`
|
||||
sideMenuBodies.home = `
|
||||
<ul class="side-menu-body">
|
||||
<li class="side-menu-body-return" onclick="changeSideMenuBody('main')">
|
||||
<i class="far fa-chevron-left"></i> Home
|
||||
</li>
|
||||
<li class="side-menu-body-element">
|
||||
<a href="">
|
||||
Home 1
|
||||
</a>
|
||||
</li>
|
||||
<li class="side-menu-body-element">
|
||||
<a href="">
|
||||
Home 2
|
||||
</a>
|
||||
</li>
|
||||
<li class="side-menu-body-element">
|
||||
<a href="">
|
||||
Home 3
|
||||
</a>
|
||||
</li>
|
||||
<li class="side-menu-body-element">
|
||||
<a href="">
|
||||
Home 4
|
||||
</a>
|
||||
</li>
|
||||
<li class="side-menu-body-element">
|
||||
<a href="">
|
||||
Home 5
|
||||
</a>
|
||||
</li>
|
||||
<li class="side-menu-body-element">
|
||||
<a href="">
|
||||
Home 6
|
||||
</a>
|
||||
</li>
|
||||
<li class="side-menu-body-element">
|
||||
<a href="">
|
||||
Home 7
|
||||
</a>
|
||||
</li>
|
||||
<li class="side-menu-body-element">
|
||||
<a href="">
|
||||
Home 8
|
||||
</a>
|
||||
</li>
|
||||
<li class="side-menu-body-element">
|
||||
<a href="">
|
||||
Home 9
|
||||
</a>
|
||||
</li>
|
||||
<li class="side-menu-body-element">
|
||||
<a href="">
|
||||
Home 10
|
||||
</a>
|
||||
</li>
|
||||
</ul>`
|
||||
sideMenuBodies.courses = `
|
||||
<ul class="side-menu-body">
|
||||
<li class="side-menu-body-return" onclick="changeSideMenuBody('main')">
|
||||
<i class="far fa-chevron-left"></i> Courses
|
||||
</li>
|
||||
<li class="side-menu-body-element" onclick="changeSideMenuBody('courses1')">
|
||||
Course List Layouts
|
||||
<i class="fal fa-angle-right side-menu-body-arrow"></i>
|
||||
</li>
|
||||
<li class="side-menu-body-element" onclick="changeSideMenuBody('courses2')">
|
||||
Course Single Layouts
|
||||
<i class="fal fa-angle-right side-menu-body-arrow"></i>
|
||||
</li>
|
||||
</ul>`
|
||||
sideMenuBodies.courses1 = `
|
||||
<ul class="side-menu-body">
|
||||
<li class="side-menu-body-return" onclick="changeSideMenuBody('courses')">
|
||||
<i class="far fa-chevron-left"></i> Course List Layouts
|
||||
</li>
|
||||
<li class="side-menu-body-element">
|
||||
<a href="">
|
||||
Course List v1
|
||||
</a>
|
||||
</li>
|
||||
<li class="side-menu-body-element">
|
||||
<a href="">
|
||||
Course List v2
|
||||
</a>
|
||||
</li>
|
||||
</ul>`
|
||||
sideMenuBodies.courses2 = `
|
||||
<ul class="side-menu-body">
|
||||
<li class="side-menu-body-return" onclick="changeSideMenuBody('courses')">
|
||||
<i class="far fa-chevron-left"></i> Course Single Layouts
|
||||
</li>
|
||||
<li class="side-menu-body-element">
|
||||
<a href="">
|
||||
Course Single v1
|
||||
</a>
|
||||
</li>
|
||||
<li class="side-menu-body-element">
|
||||
<a href="">
|
||||
Course Single v2
|
||||
</a>
|
||||
</li>
|
||||
</ul>`
|
||||
</script>
|
||||
@ -0,0 +1,84 @@
|
||||
<div class="header-search-popup np-hidden" id="search-popup">
|
||||
<form class="header-search-popup-form" action="{% route search %}" method="get">
|
||||
<button class="header-search-popup-form-button">
|
||||
<i class="far fa-search"></i>
|
||||
</button>
|
||||
<input class="header-search-popup-form-input"
|
||||
placeholder="What do you want to learn?"
|
||||
autocomplete="off"
|
||||
aria-label="{% t .search %}"
|
||||
type="text"
|
||||
name="q"
|
||||
>
|
||||
<div class="header-search-popup-close" onclick="toggleSearch()">
|
||||
<i class="fal fa-times" style="margin: auto;"></i>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.header-search-popup {
|
||||
background: white;
|
||||
padding: 100px 50px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
min-height: 400px;
|
||||
}
|
||||
.header-search-popup-form {
|
||||
display: flex;
|
||||
border-bottom: 1px solid rgb(237, 237, 237);
|
||||
margin: auto;
|
||||
width: 70%;
|
||||
max-width: 1000px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.header-search-popup-form-button {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.header-search-popup-close {
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
background: #F4F1FE;
|
||||
color: blue;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.header-search-popup-close .fa-times {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
.header-search-popup-form-input::placeholder {
|
||||
color: #563150;
|
||||
opacity: 1;
|
||||
}
|
||||
.header-search-popup-form-input {
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
color: #563150;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var searchShowed = false
|
||||
function toggleSearch() {
|
||||
document.getElementById('search-popup').classList.toggle('np-hidden');
|
||||
document.getElementById('gray-background').classList.toggle('np-hidden');
|
||||
if (searchShowed) {
|
||||
window.onscroll = function() {}
|
||||
} else {
|
||||
window.onscroll = function () { window.scrollTo(0, 0); };
|
||||
}
|
||||
searchShowed = !searchShowed
|
||||
}
|
||||
|
||||
</script>
|
||||
508
Custom_Templates/customer_templates/Network Q/course.html.liquid
Normal file
508
Custom_Templates/customer_templates/Network Q/course.html.liquid
Normal file
@ -0,0 +1,508 @@
|
||||
{% include "header" %}
|
||||
<div class="course-top-bar-wrapper">
|
||||
<div class="course-top-bar np-page-container np-max-width">
|
||||
<a class="breadcrumb-element" href="/app">
|
||||
Home
|
||||
</a>
|
||||
<i class="fas fa-circle"></i>
|
||||
<div class="breadcrumb-element">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-wrapper">
|
||||
<div class="course-header-wrapper">
|
||||
<div class="course-header np-max-width container">
|
||||
<div class="course-categories">
|
||||
{% for category in course.categories %}
|
||||
<div class="course-categories-label">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="course-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="course-info">
|
||||
<div class="course-info-part">
|
||||
<div class="course-rating-value">
|
||||
{{ course.properties.np_course_rating }}
|
||||
</div>
|
||||
<div class="course-rating-stars">
|
||||
{% for i in (1..5) %}
|
||||
{% if course.properties.np_course_rating >= i %}
|
||||
<i class="fas fa-star"></i>
|
||||
{% else %}
|
||||
<i class="fal fa-star"></i>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="course-rating-count">
|
||||
({{ course.properties.np_course_rating_count }})
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-info-part" style="margin-left: 25px;">
|
||||
<i class="fal fa-clock" style="margin-right: 10px; align-self: center;"></i> Last updated {{ course.updated_at |date: "%m/%y" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="np-main np-max-width np-page-container container">
|
||||
<div class="course-main row">
|
||||
<div class="course-main-body col-9">
|
||||
<div class="course-bookmarks">
|
||||
<div class="course-bookmark course-bookmark-selected">
|
||||
Overview
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="course-description-wrapper">
|
||||
<div class="course-description-title">
|
||||
Description
|
||||
</div>
|
||||
<div class="course-description">
|
||||
<div class="course-description-text">
|
||||
{{course.full_description}}
|
||||
</div>
|
||||
<div class="course-description-fog np-hidden"></div>
|
||||
</div>
|
||||
<div class="course-description-button np-hidden" onclick="toggleDescription()">
|
||||
Show more
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="course-content-wrapper">
|
||||
<div class="course-description-title">
|
||||
Course Content
|
||||
</div>
|
||||
<div class="course-content-top">
|
||||
<div class="course-content-top-section-count">
|
||||
{{ course.sections.size }} section{% if course.sections.size > 1 %}s{% endif %}
|
||||
</div>
|
||||
<div class="course-content-expand" onclick="toggleAllSections()">
|
||||
<span class="course-conent-expand-text">Expand All Sections</span>
|
||||
<span class="course-conent-hide-text">Hide All Sections</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-content-body">
|
||||
{% for section in course.sections %}
|
||||
<div class="course-content-section">
|
||||
<div class="course-content-section-header" onclick="toggleSection(this)">
|
||||
<div class="course-content-section-header-left">
|
||||
<i class="far fa-angle-down section-expand-icon"></i>
|
||||
<i class="far fa-angle-up section-hide-icon"></i>
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<div class="course-content-section-header-right">
|
||||
{{ section.activities.size }} lecture{% if section.activities.size > 1 %}s{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-content-section-activities">
|
||||
{% for activity in section.activities %}
|
||||
{% if activity.locked? %}
|
||||
<div class="course-content-section-activity course-content-section-activity-locked">
|
||||
<div class="course-content-section-activity-title">
|
||||
{{ activity.title }}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="course-content-section-activity course-content-section-activity-unlocked">
|
||||
<div class="course-content-section-activity-title">
|
||||
{{ activity.title }}
|
||||
</div>
|
||||
<a class="course-content-section-activity-preview"
|
||||
href="
|
||||
{% route activity_viewer,
|
||||
id: activity.id,
|
||||
course_id: params.course_id,
|
||||
learning_path_id: params.learning_path_id
|
||||
%}"
|
||||
>
|
||||
Preview
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div class="course-widget-wrapper">
|
||||
<div class="course-widget">
|
||||
<img class="course-widget-image" src="{{ course.image_url }}">
|
||||
<div class="course-widget-content">
|
||||
<a class="course-widget-button np-button"
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
Start Course
|
||||
</a>
|
||||
<div class="course-widget-button np-button transparent-button">
|
||||
Save Course
|
||||
</div>
|
||||
<div class="course-widget-info-wrapper">
|
||||
<div class="course-widget-info">
|
||||
<div class="course-widget-info-left">
|
||||
<i class="fal fa-file-alt"></i>
|
||||
Lessons
|
||||
</div>
|
||||
<div class="course-widget-info-right">
|
||||
{{ course.sections.size }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-widget-info">
|
||||
<div class="course-widget-info-left">
|
||||
<i class="fal fa-clock"></i>
|
||||
Duration
|
||||
</div>
|
||||
<div class="course-widget-info-right">
|
||||
{{ course.properties.course_time | divided_by: 60 }}h {{ course.properties.course_time | modulo: 60 }}m
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-widget-info">
|
||||
<div class="course-widget-info-left">
|
||||
<i class="fal fa-signal-3 course-widget-info-icon"></i>
|
||||
Skill level
|
||||
</div>
|
||||
<div class="course-widget-info-right">
|
||||
{{ course.properties.course_difficulty }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-widget-social">
|
||||
<a class="course-widget-social-button">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a class="course-widget-social-button">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a class="course-widget-social-button">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a class="course-widget-social-button">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.course-top-bar-wrapper {
|
||||
background: #f5f7fe;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
padding: 0 30px;
|
||||
}
|
||||
.breadcrumb-element {
|
||||
color: #563150;
|
||||
}
|
||||
.course-top-bar.np-page-container.np-max-width {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
margin-top: 1.3rem;
|
||||
margin-bottom: 1.3rem;
|
||||
}
|
||||
.course-top-bar .fas.fa-circle {
|
||||
align-self: center;
|
||||
margin: auto 10px;
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
.course-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.course-main {
|
||||
position: relative;
|
||||
}
|
||||
.course-main-body {
|
||||
max-width: 75%;
|
||||
}
|
||||
.course-header-wrapper {
|
||||
background: #f7f8fb;
|
||||
}
|
||||
.course-header {
|
||||
padding: 90px 0;
|
||||
}
|
||||
.course-categories {
|
||||
display: flex;
|
||||
}
|
||||
.course-categories-label {
|
||||
background: #563150;
|
||||
color: #fff;
|
||||
padding: 8px 15px;
|
||||
border-radius: 40px;
|
||||
margin: auto 10px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.course-categories-label:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.course-categories-label:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.course-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
padding: 20px 0 30px;
|
||||
}
|
||||
.course-info {
|
||||
display: flex;
|
||||
}
|
||||
.course-info-part {
|
||||
display: flex;
|
||||
}
|
||||
.course-rating-value {
|
||||
color: #e59819;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.course-rating-stars {
|
||||
margin: auto 6px auto 0;
|
||||
}
|
||||
.course-rating-stars > * {
|
||||
color: #e59819;
|
||||
margin: auto;
|
||||
}
|
||||
.course-rating-count {
|
||||
color: rgb(79, 85, 123);
|
||||
}
|
||||
.course-bookmarks {
|
||||
margin-top: 120px;
|
||||
border-bottom: 2px solid rgb(237, 237, 237);
|
||||
}
|
||||
.course-bookmark {
|
||||
padding: 15px 5px;
|
||||
margin: auto 20px;
|
||||
width: fit-content;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.course-bookmark:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.course-bookmark:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.course-bookmark.course-bookmark-selected {
|
||||
color: rgb(86, 49, 80);
|
||||
border-bottom: 2px solid rgb(86, 49, 80);
|
||||
}
|
||||
.course-description-title {
|
||||
font-weight: 500;
|
||||
font-size: 1.15rem;
|
||||
margin: 30px auto;
|
||||
}
|
||||
.course-description {
|
||||
position: relative;
|
||||
}
|
||||
.description-height-restraint {
|
||||
max-height: 0.2hv;
|
||||
overflow-y: clip;
|
||||
}
|
||||
.course-description-fog {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(0deg, rgba(250,254,249,1) 35%, rgba(250,254,249,0) 100%);
|
||||
}
|
||||
.course-content-section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.course-content-section-header-left {
|
||||
display: flex;
|
||||
}
|
||||
.course-content-section .course-content-section-activities {
|
||||
display: none;
|
||||
}
|
||||
.course-content-section.section-expanded .course-content-section-activities {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.course-content-section .section-hide-icon {
|
||||
display: none;
|
||||
}
|
||||
.course-content-section.section-expanded .section-hide-icon {
|
||||
display: block;
|
||||
}
|
||||
.course-content-section.section-expanded .section-expand-icon {
|
||||
display: none;
|
||||
}
|
||||
.section-hide-icon, .section-expand-icon {
|
||||
align-self: center;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.course-content-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.course-content-top-section-count {
|
||||
color: rgb(89, 98, 88);
|
||||
}
|
||||
.course-content-expand {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.course-content-expand:not(.all-sections-expanded) .course-conent-hide-text {
|
||||
display: none;
|
||||
}
|
||||
.course-content-expand.all-sections-expanded .course-conent-expand-text {
|
||||
display: none;
|
||||
}
|
||||
.course-content-section {
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgb(237,237, 237);
|
||||
margin: 18px auto;
|
||||
}
|
||||
.course-content-section-activities {
|
||||
padding: 20px 30px;
|
||||
}
|
||||
.course-content-section-header {
|
||||
padding: 20px 30px;
|
||||
background: #f7f8fb;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.course-content-section-header-left {
|
||||
color: #563150;
|
||||
}
|
||||
|
||||
.course-content-section-activity {
|
||||
padding: 3px 0;
|
||||
margin: 6px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.course-widget-wrapper {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
}
|
||||
.course-widget {
|
||||
width: 100%;
|
||||
position: sticky;
|
||||
right: 60px;
|
||||
top: 230px;
|
||||
background: white;
|
||||
padding: 10px;
|
||||
border: 1px solid #ededed;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 25px 70px 0 #01213a12;
|
||||
}
|
||||
.course-widget-image {
|
||||
width: 100%;
|
||||
}
|
||||
.course-widget-content {
|
||||
padding: 12px;
|
||||
}
|
||||
.course-widget-button.np-button.transparent-button {
|
||||
background: transparent;
|
||||
color: #2e3634 !important;
|
||||
}
|
||||
.course-widget-button.np-button.transparent-button:hover {
|
||||
background: #2e3634;
|
||||
color: white !important;
|
||||
}
|
||||
.course-widget-button {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.course-widget-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid aliceblue;
|
||||
padding: 12px 0;
|
||||
}
|
||||
.course-widget-info-left > i {
|
||||
padding-right: 26px;
|
||||
margin: auto;
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
width: 20px;
|
||||
}
|
||||
.course-widget-social {
|
||||
margin: 30px auto;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
width: 90%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
toggleShowingDescriptionButton();
|
||||
});
|
||||
|
||||
function toggleShowingDescriptionButton() {
|
||||
let descriptionElement = document.querySelector('.course-description');
|
||||
let descriptionHeight = document.offsetHeight;
|
||||
let windowHeight = window.innerHeight;
|
||||
let buttonElement = document.getElementsByClassName('course-description-button')[0]
|
||||
if (descriptionHeight * 3 > windowHeight) {
|
||||
if (buttonElement.classList.contains('np-hidden')) {
|
||||
document.getElementsByClassName('course-description-fog')[0].classlist.remove('np-hidden');
|
||||
buttonElement.classList.remove('np-hidden');
|
||||
descriptionElement.classList.add('description-height-restraint');
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (!buttonElement.classList.contains('np-hidden')) {
|
||||
document.getElementsByClassName('course-description-fog')[0].classlist.add('np-hidden');
|
||||
buttonElement.classList.add('np-hidden');
|
||||
descriptionElement.classList.remove('description-height-restraint');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleDescription() {
|
||||
|
||||
}
|
||||
|
||||
function toggleSection(element) {
|
||||
//redo to show 'hide all' only on all extended
|
||||
element.parentNode.classList.toggle('section-expanded');
|
||||
if (document.querySelector('all-sections-expanded')) {
|
||||
if (document.querySelector('.course-content-section:not(.section-expanded)')) {
|
||||
document.getElementsByClassName('course-content-expand')[0].classList.remove('all-sections-expanded')
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (document.querySelector('.course-content-section.section-expanded')) {
|
||||
document.getElementsByClassName('course-content-expand')[0].classList.add('all-sections-expanded')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAllSections() {
|
||||
let button = document.getElementsByClassName('course-content-expand')[0]
|
||||
if (button.classList.contains('all-sections-expanded')) {
|
||||
Array.from(document.getElementsByClassName('section-expanded')).forEach((element) => {
|
||||
element.classList.remove('section-expanded')
|
||||
})
|
||||
}
|
||||
else {
|
||||
Array.from(document.getElementsByClassName('course-content-section')).forEach((element) => {
|
||||
element.classList.add('section-expanded')
|
||||
})
|
||||
}
|
||||
button.classList.toggle('all-sections-expanded')
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,17 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-dashboard np-subpage-container">
|
||||
{% include 'dashboard_header' %}
|
||||
{% include 'dashboard_top_courses' %}
|
||||
{% include 'dashboard_recommended_courses' %}
|
||||
</main>
|
||||
{% include 'dashboard_categories' %}
|
||||
{% include "footer" %}
|
||||
|
||||
|
||||
<style>
|
||||
.np-main.np-dashboard {
|
||||
background-color:#F7F8FB;
|
||||
}
|
||||
</style>
|
||||
213
Custom_Templates/customer_templates/Network Q/styles.css.liquid
Normal file
213
Custom_Templates/customer_templates/Network Q/styles.css.liquid
Normal file
@ -0,0 +1,213 @@
|
||||
@font-face {
|
||||
font-family: GT Walsheim Pro;
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/Qauntuvos/GTWalsheimPro-Thin.ttf");
|
||||
font-weight: 100;
|
||||
}
|
||||
@font-face {
|
||||
font-family: GT Walsheim Pro;
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/Qauntuvos/GTWalsheimPro-ThinOblique.ttf");
|
||||
font-style: italic;
|
||||
font-weight: 100;
|
||||
}
|
||||
@font-face {
|
||||
font-family: GT Walsheim Pro;
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/Qauntuvos/GTWalsheimPro-Light.ttf");
|
||||
font-weight: 300;
|
||||
}
|
||||
@font-face {
|
||||
font-family: GT Walsheim Pro;
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/Qauntuvos/GTWalsheimPro-LightOblique.ttf");
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
}
|
||||
@font-face {
|
||||
font-family: GT Walsheim Pro;
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/Qauntuvos/GTWalsheimPro-Regular.ttf");
|
||||
font-weight: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: GT Walsheim Pro;
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/Qauntuvos/GTWalsheimPro-RegularOblique.ttf");
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: GT Walsheim Pro;
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/Qauntuvos/GTWalsheimPro-Medium.ttf");
|
||||
font-weight: 500;
|
||||
}
|
||||
@font-face {
|
||||
font-family: GT Walsheim Pro;
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/Qauntuvos/GTWalsheimPro-MediumOblique.ttf");
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: GT Walsheim Pro;
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/Qauntuvos/GT-Walsheim-Pro-Bold.woff2");
|
||||
font-weight: 700;
|
||||
}
|
||||
@font-face {
|
||||
font-family: GT Walsheim Pro;
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/Qauntuvos/GT-Walsheim-Pro-Bold-Oblique.woff2");
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: GT Walsheim Pro;
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/Qauntuvos/GTWalsheimPro-UltraBold.ttf");
|
||||
font-weight: 800;
|
||||
}
|
||||
@font-face {
|
||||
font-family: GT Walsheim Pro;
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/Qauntuvos/GTWalsheimPro-UltraBoldOblique.ttf");
|
||||
font-style: italic;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
html > body {
|
||||
font-family: "GT Walsheim Pro", sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
a:hover {
|
||||
color: inherit !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.tablet-hidden {
|
||||
display: block;
|
||||
}
|
||||
.tablet-visible {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.tablet-hidden {
|
||||
display: none;
|
||||
}
|
||||
.tablet-visible {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.np-subpage-container {
|
||||
padding: 60px 1.25rem 60px;
|
||||
}
|
||||
|
||||
.np-button {
|
||||
height: 60px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
padding: 12px 55px;
|
||||
border: 2px solid #2e3634;
|
||||
transition: all 0.1s;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.np-button:hover {
|
||||
background: transparent;
|
||||
color: #2e3634 !important;
|
||||
}
|
||||
|
||||
/* course cards */
|
||||
|
||||
.dashboard-course .np-card-image {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.dashboard-course .np-card-container {
|
||||
box-shadow: none;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgb(237, 237, 237);
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.dashboard-course .np-card-content {
|
||||
padding: 8px;
|
||||
flex: 0 1;
|
||||
}
|
||||
.dashboard-course-rating {
|
||||
display: flex;
|
||||
}
|
||||
.dashboard-course-rating-value {
|
||||
color: #e59819;
|
||||
margin-right: 6px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.dashboard-course-rating-stars {
|
||||
margin: auto 6px auto 0;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
.dashboard-course-rating-stars > * {
|
||||
color: #e59819;
|
||||
margin: auto;
|
||||
}
|
||||
.dashboard-course-rating-count {
|
||||
font-size: 0.75rem;
|
||||
color: rgb(79, 85, 123);
|
||||
}
|
||||
.dashboard-course .np-card-content-title {
|
||||
font-weight: 500;
|
||||
color: rgb(86, 49, 80);
|
||||
font-size: 17px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.dashboard-course-info {
|
||||
margin: auto 6px;
|
||||
color: rgb(79, 84, 123);
|
||||
font-size: 14px;
|
||||
}
|
||||
.dashboard-course-info i {
|
||||
font-size: 16px;
|
||||
}
|
||||
.dashboard-course-info:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.dashboard-course-info:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.dashboard-course-info-section {
|
||||
display: flex;
|
||||
}
|
||||
.dashboard-course-instructor-image {
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.dashboard-course-instructor {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
border-top: 1px solid #ededed;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.dashboard-course-instructor-name {
|
||||
margin: auto 12px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-subpage-container {
|
||||
padding: 150px 5% 90px;
|
||||
}
|
||||
}
|
||||
/* search */
|
||||
.dropdown-menu.is-open {
|
||||
display: block !important;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
.np-button.dropdown-button-apply {
|
||||
padding: 8px 12px;
|
||||
height: auto;
|
||||
}
|
||||
.np-button.dropdown-button {
|
||||
background: #2e3634 !important;
|
||||
}
|
||||
.np-button.dropdown-button:hover {
|
||||
color: white !important;
|
||||
background: none !important;
|
||||
}
|
||||
43
CustomerNotes/Anthology.md
Normal file
43
CustomerNotes/Anthology.md
Normal file
@ -0,0 +1,43 @@
|
||||
# Anthology
|
||||
|
||||
## 01/26/2023
|
||||
|
||||
### Content Intro
|
||||
|
||||
Microsoft Shop - Teams, Word, etc.
|
||||
|
||||
All are Global Ed Services
|
||||
Katie is one team
|
||||
KC is another team - this is one of many projects in Global Ed Services
|
||||
|
||||
KC - Main person
|
||||
Mike Highfield - Solutions Architect, Solutions, Learning Ed team
|
||||
Aaron Odden - LX architect, works with content creators, Learning Ed team
|
||||
Katie Felton - Director for the academies, oversee all content creators & the teams. Ultimately responsible for the strategic direction
|
||||
Nicole Melander - Exec Sponsor
|
||||
|
||||
Met with Patrcyja and got an overview. They still have a lot of questions.
|
||||
|
||||
* KC is responsible for project plan & the entirety of launch and running. She needs to understand what their team has to deliver.
|
||||
* Needs to better understand what is in their subscription model, data tagging, extracts, etc.
|
||||
* They have 1558 courses built.
|
||||
* Nicole, "as we build courses now, are there things they should be doing differently on Northpass?"
|
||||
|
||||
Where to start: when they think about their structure of learning, what is the nomenclature and hierarchy of content?
|
||||
Content types:
|
||||
|
||||
* Passive
|
||||
* Playlist
|
||||
* Videos
|
||||
* Active
|
||||
* Course (milestones, etc)
|
||||
* ILTs and Live Events - both synchronous and asynchronous
|
||||
|
||||
They don't want to move people from Blackboard learning to Northpass - it doesn't make sense for them to move.
|
||||
There is cohort (8-12 weeks) and non-cohort learning.
|
||||
MVP Launch, but unsure of what the users and products would be.
|
||||
Each product has various
|
||||
|
||||
This will be a one-stop shop for all knowledge and data.
|
||||
|
||||
Seven tags per object, course, person, etc.
|
||||
@ -34,8 +34,7 @@ By adding people ahead of time, this covers Artera's butt by adding and enrollin
|
||||
FEAT: Auto Admin Message when a group is created and who created the group.
|
||||
FEAT: Also, they want to see Logs for User Activity - namely around group creation.
|
||||
Voice of the customer request: Managers can't reset passwords?
|
||||
TODO: If a Manager in an academy with SSO turned on, does it not know how to reset password?
|
||||
|
||||
DONE: If a Manager in an academy with SSO turned on, does it not know how to reset password?
|
||||
|
||||
## 01/12/2023
|
||||
|
||||
@ -45,4 +44,21 @@ Course progress stats, but week over week
|
||||
70% average course completion is her standard
|
||||
She wants a week over week course
|
||||
|
||||
TODO: Setup custom report with WoW of course progress.
|
||||
DONE: Setup custom report with WoW of course progress.
|
||||
|
||||
## 01/26/2023
|
||||
|
||||
### Certs, Custom Reports, etc
|
||||
|
||||
TODO: Learning Path. If they are enrolled, it shows the courses below ALONG with in the learning. path. ]
|
||||
Jackie: if you're assigned a learning path and you've self-enrolled in a course that exists in the learning path, the courses shouldn't show underneath.
|
||||
Follow up: Show her how someone could be assigned in a course and learning path.
|
||||
Call the Dashboard "My Courses".
|
||||
Dashboard Order:
|
||||
|
||||
1. In Progress
|
||||
2. Enrolled
|
||||
3. Completed
|
||||
|
||||
Jackie already attached the certs to all the courses.
|
||||
Custom cert can anyone do it? Or Enterprise only.
|
||||
|
||||
@ -25,11 +25,11 @@ Northpass is limiting her KPIs and ROI.
|
||||
She wants to know what our renewal options are. She was not specific about what she wants.
|
||||
She would like a new order form for the renewal.
|
||||
TODO: Give Joey & Miguel an updated order form with the new terms, they need it for their records.
|
||||
TODO: Send different pricing models - unlimited MAL, etc?
|
||||
DONE: Send different pricing models - unlimited MAL, etc?
|
||||
|
||||
They would like a discount in some way. Joey's KPI is cost per employee and said it is a "hard" KPI. I asked if this has to be a certain price for her to hit her KPI - she said she's not entirely sure how this price would factor into the price per employee. She mentioned something about a 20% discount, ideally.
|
||||
|
||||
Miguel, re: contract - There was some discussion regarding a Zapier license? He said Kiwi paid for Zapier and then invoiced Northpass for that cost? It was a discussion with Paula, apparently.
|
||||
|
||||
TODO: Turn on Workato
|
||||
TODO: Send Miguel webhook info, workato, what's available, snowflake/looker, and the custom extract.
|
||||
DONE: Send Miguel webhook info, workato, what's available, snowflake/looker, and the custom extract.
|
||||
|
||||
@ -96,6 +96,7 @@ It is a sticking point to be in control of teacher's emails and contacts
|
||||
## 10/20/2022
|
||||
|
||||
*New Product Launch*
|
||||
|
||||
* Big sales training on this product happened
|
||||
* They have recordings and bi-weekly follow up documents of all this new product knowledge
|
||||
* She was hoping to put it into Northpass, but her VP said there is "information overload" and they need to simplify everything.
|
||||
@ -104,13 +105,14 @@ It is a sticking point to be in control of teacher's emails and contacts
|
||||
* So putting it in Sharepoint makes it "a resource" for employees to access on-demand.
|
||||
* One of the challenges that Sophia is facing is the registration process for customers.
|
||||
* Two things she wants to focus on next:
|
||||
* Short term: Registration process is really messy. Authentication isn't clean for learner
|
||||
* Short term: Registration process is really messy. Authentication isn't clean for learner
|
||||
|
||||
## 11/17/2022
|
||||
|
||||
### Weekly Sync
|
||||
|
||||
Recreating the partner training, and redoing it again next month. Sophia is hopeful to get to use Northpass for this new product training. Any chance for her teams to utilize Northpass would be beneficial. They have a tool that they can use!
|
||||
|
||||
* Recreating this training is all delivered via Webinar & Live
|
||||
* Bi-weekly Webinar Updates
|
||||
* Partners decided to opt out of the bi-weekly webinars. Instead, they would much prefer the on-site.
|
||||
@ -177,6 +179,13 @@ The new platform (Ada) is not yet integrated into Salesforce.
|
||||
|
||||
Next Steps: Discuss segmentation & group provisioning.
|
||||
|
||||
TODO: Send Chris Information regarding embedding, authentication, groups & people, properties, and what design changes are available on enterprise vs premium.
|
||||
DONE: Send Chris Information regarding embedding, authentication, groups & people, properties, and what design changes are available on enterprise vs premium.
|
||||
|
||||
Last Question: Can our authoring tool output into SCORM or other formats (what they call a "learning object").
|
||||
|
||||
## 01/26/2023
|
||||
|
||||
### Embed Next Steps
|
||||
|
||||
Work with Chris in 4-5 weeks (end of February-ish)
|
||||
The team wants a proof of concept to see what an embed looks like.
|
||||
|
||||
@ -9,23 +9,25 @@
|
||||
- Design - Chris' team
|
||||
|
||||
### 8/22/2022
|
||||
|
||||
Chris Burns is a fractional CEO and will be leaving Quantuvos at the end of the month
|
||||
Folks are sick (Lukemia) in NJ and he can't manage both
|
||||
Launching quickly is not realistic, moved back to November
|
||||
* Financial Situation: *
|
||||
- Certain old accounts recievable and not paying
|
||||
- Don't have cash to pay the bill right now for Northpass
|
||||
- Lots of small issues in paying, banks not paying, clients not paying either
|
||||
- Were selling 250/month up until a month ago, now sales are not happening.
|
||||
- Chris asked for longer flexibility - Travis asked how much?
|
||||
- Gregg said November, Chris says ASAP, or change to a monthly payment.
|
||||
-
|
||||
|
||||
*Financial Situation:*
|
||||
|
||||
* Certain old accounts recievable and not paying
|
||||
* Don't have cash to pay the bill right now for Northpass
|
||||
* Lots of small issues in paying, banks not paying, clients not paying either
|
||||
* Were selling 250/month up until a month ago, now sales are not happening.
|
||||
* Chris asked for longer flexibility - Travis asked how much?
|
||||
* Gregg said November, Chris says ASAP, or change to a monthly payment.
|
||||
|
||||
## Tasks
|
||||
|
||||
* [X] Create Implementation Plan
|
||||
* [X] End of August Launch
|
||||
* [X] Help Asia create course
|
||||
* [X] Help Asia create course
|
||||
* [X] Every Week Implementation, Wednesday @ 12:30pm (Tuesdays at 12:30 after next week)
|
||||
* [X] SSO - Reach out to Chris ASAP
|
||||
* [ ] Provide Burns with a deck on competitive analysis of why NP is superior
|
||||
@ -34,7 +36,6 @@ Launching quickly is not realistic, moved back to November
|
||||
|
||||
Asia off week of August 28th
|
||||
|
||||
|
||||
## Notes from Kick off
|
||||
|
||||
See Nick's implementation Plan
|
||||
@ -44,39 +45,40 @@ Wants to understand the roles and needs, hours needed
|
||||
Needs help understanding the structure of content etc
|
||||
Something about buckets being empty and fish being found
|
||||
OpenSesame
|
||||
Chris' team uses Figma pretty heavily
|
||||
Chris' team uses Figma pretty heavily
|
||||
Launch is August 29th (week of)
|
||||
Vegas Conference - 1st week of September - September 13th
|
||||
Vegas Conference - 1st week of September - September 13th
|
||||
|
||||
## Meeting with Chris Campbell
|
||||
|
||||
Full embed Ideally
|
||||
Either via API or embed
|
||||
Open either way to the various options
|
||||
- [X] Requested an overview deck
|
||||
- [X] Has reviewed Developer Docs
|
||||
Quantuvos app, video session and can join to take it
|
||||
DONE: Requested an overview deck
|
||||
DONE: Has reviewed Developer Docs
|
||||
Quantuvos app, video session and can join to take it
|
||||
|
||||
* SSO *
|
||||
Auth0 -
|
||||
They need to provide us with designs and he will reference other apps that have and he has been built
|
||||
Wants to align nomenclature and definitions between our company and theirs
|
||||
Auth0 -
|
||||
They need to provide us with designs and he will reference other apps that have and he has been built
|
||||
Wants to align nomenclature and definitions between our company and theirs
|
||||
For Quantuvos, a program is a coaching application
|
||||
They work with company A, and they want all mid-level managers to be upper level by theend of the year
|
||||
Then 3 groups - IT, sales, and HR managers, those are each different programs and should have access to different types of content in Northpass
|
||||
- [X] Create a draw.io diagram for their programs and how it would map to groups.
|
||||
Then 3 groups - IT, sales, and HR managers, those are each different programs and should have access to different types of content in Northpass
|
||||
DONE: Create a draw.io diagram for their programs and how it would map to groups.
|
||||
|
||||
Will they piece meal or full embed?
|
||||
Full embed out of the gate and then add elements later on
|
||||
API to show assignments or courses based on the learner in their app
|
||||
"Customer Admin" = A quantuvos rep that manages their program
|
||||
Can a manager access the media library? How do they "edit" courses?
|
||||
Full embed out of the gate and then add elements later on
|
||||
API to show assignments or courses based on the learner in their app
|
||||
"Customer Admin" = A quantuvos rep that manages their program
|
||||
Can a manager access the media library? How do they "edit" courses?
|
||||
How about limited access to media library stuff?
|
||||
|
||||
What are coaches responsibility?
|
||||
What are coaches responsibility?
|
||||
Is a 1:1 assignment? There are no rules, 1 coach to many
|
||||
And multiple coaches to multiple clients
|
||||
Sounds like they are similar to CSM
|
||||
And 2 coaches on 5 clients who are managing the same account but their subsets will be different.
|
||||
And multiple coaches to multiple clients
|
||||
Sounds like they are similar to CSM
|
||||
And 2 coaches on 5 clients who are managing the same account but their subsets will be different.
|
||||
|
||||
### Where is content?
|
||||
|
||||
@ -86,19 +88,36 @@ From their own coaches - Proprietary Content
|
||||
The rest comes from Experts - experts in certain fields (time management, podcasts, have published a book, etc)
|
||||
|
||||
## Meeting with Group + CEO
|
||||
|
||||
* one group per customer
|
||||
* A program is a subset within a customer
|
||||
* Subscribers are the whole group
|
||||
* A program is a subset within a customer
|
||||
* Subscribers are the whole group
|
||||
* all courses for that customer will be in that group
|
||||
|
||||
* There are also "subscribers" and "coachees"
|
||||
* Center for Coaching Effectiveness (CCE) Content
|
||||
* Center for Coaching Effectiveness (CCE) Content
|
||||
* Can we share a specific activity and have the learner go straight there?
|
||||
* Course per coach? Or Course per topic?
|
||||
* Can Auth0 use Groups? Why not?
|
||||
|
||||
- Asia and Sources of Content -
|
||||
- Right after coaching session, coach wants to send their own content to the client
|
||||
- But send it within Network-Q
|
||||
- 1st marker for sending content - coaching path and client sends survey and what they want to be coached on
|
||||
- 2nd marker
|
||||
* Asia and Sources of Content -
|
||||
* Right after coaching session, coach wants to send their own content to the client
|
||||
* But send it within Network-Q
|
||||
* 1st marker for sending content - coaching path and client sends survey and what they want to be coached on
|
||||
* 2nd marker
|
||||
|
||||
## 01/26/2023
|
||||
|
||||
### Asia, concerns with account
|
||||
|
||||
Claims that things are taking a long time or responses are very slow.
|
||||
Gregg is making this claim, but he hasn't communicated with us at all.
|
||||
There seems to be some miscommunication - is Chris in charge of design or Northpass?
|
||||
What is left for launch? They need to communicate with us when things need to be changed.
|
||||
|
||||
Question about freelancer inquiry:
|
||||
|
||||
* Asia is trying to understand everyone's point of view.
|
||||
* Imagine everyone is expecting something to be done. But it's not done yet.
|
||||
* To speed things up and get it done, they might want to use a freelancer who is a little more "connected" to them.
|
||||
* This goes into the original need for the meeting - Quantuvos feeling that we're not replying actively enough or getting their stuff done.
|
||||
|
||||
Binary file not shown.
Reference in New Issue
Block a user