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;
|
||||
}
|
||||
Reference in New Issue
Block a user