quantuvos
This commit is contained in:
Norm Rasmussen
BIN
NP_Custom_Templates/customer_templates/.DS_Store
vendored
BIN
NP_Custom_Templates/customer_templates/.DS_Store
vendored
Binary file not shown.
@ -2,6 +2,10 @@
|
||||
{% include "homepage_recommended" %}
|
||||
{% include 'homepage_courses_list' %}
|
||||
|
||||
{% comment %}<button data-tf-popup="nHcG5W6g" data-tf-open="time" data-tf-open-value="2000" data-tf-auto-close data-tf-iframe-props="title=Academy Brand names" data-tf-medium="snippet" style="all: unset;font-family :Helvetica,Arial,sans-serif; display: none; max-width: 100%; white-space: nowrap; overflow: hidden;text-overflow: ellipsis; background-color: #0445AF; color: #FFFFFF; font-size: 20px; border-radius: 25px;padding: 0 33px; font-weight: bold; height: 50px; cursor: pointer; line-height: 50px; text-align: center;margin: 0; text-decoration: none;">
|
||||
Launch me
|
||||
</button> {% endcomment %}
|
||||
|
||||
<div class="homepage">
|
||||
{% include 'homepage_latest' %}
|
||||
{% include "homepage_beginning" %}
|
||||
@ -28,4 +32,5 @@
|
||||
padding: 0 10%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
<script src="//embed.typeform.com/next/embed.js"></script>
|
||||
|
||||
@ -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,253 @@
|
||||
<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,139 @@
|
||||
<div class="dashboard-categories">
|
||||
<div class="dashboard-categories-header">
|
||||
<div class="dashboard-categories-title">
|
||||
Top Categories
|
||||
</div>
|
||||
<div class="dashboard-categories-subtitle">
|
||||
Lorem ipsum dolor sit amet, consectur.
|
||||
</div>
|
||||
</div>
|
||||
<div class="categories-carousel">
|
||||
{% for category in categories.enrolled %}
|
||||
<div class="category-card-wrapper">
|
||||
<a class="category-card" href="">
|
||||
<div class="category-card-name">
|
||||
{{ category.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">
|
||||
<div class="dashboard-header-left-title">
|
||||
Welcome back, {{ current_person.first_name }}
|
||||
</div>
|
||||
<div class="dashboard-header-left-subtitle">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
||||
</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="">
|
||||
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="">
|
||||
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,50 @@
|
||||
<footer class="footer np-subpage-container">
|
||||
<div class="footer-left">
|
||||
© {{ "now" | date: "%Y" }} Quantuvos Inc. All Right Reserved.
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<a class="footer-element" href="">
|
||||
Help
|
||||
</a>
|
||||
<a class="footer-element" href="">
|
||||
Privacy Policy
|
||||
</a>
|
||||
<a class="footer-element" href="">
|
||||
Cookie Notice
|
||||
</a>
|
||||
<a class="footer-element" href="">
|
||||
Security
|
||||
</a>
|
||||
<a class="footer-element" href="">
|
||||
Terms of Use
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<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,149 @@
|
||||
<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="https://quantuvos.com/">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
<div class="tablet-hidden" id="header-explore-button" onclick="toggleExploreDropdown()">
|
||||
<i class="fal fa-bars"></i> 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>
|
||||
|
||||
{% comment %} <div class="header-blank-space"></div> {% endcomment %}
|
||||
<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" %}
|
||||
{% comment %}{% include "header_desktop_explore" %}{% endcomment %}
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
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;
|
||||
}
|
||||
#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">
|
||||
<li class="header-explore-item" onclick="expandExploreDropdown('architecture')">
|
||||
<span class="header-explore-item-text">
|
||||
Architecture
|
||||
</span>
|
||||
<i class="far fa-angle-right"></i>
|
||||
</li>
|
||||
<li class="header-explore-item" onclick="expandExploreDropdown('business')">
|
||||
<span class="header-explore-item-text">
|
||||
Business
|
||||
</span>
|
||||
<i class="far fa-angle-right"></i>
|
||||
</li>
|
||||
<li class="header-explore-item">
|
||||
<span class="header-explore-item-text">
|
||||
Computer Programming
|
||||
</span>
|
||||
</li>
|
||||
<li class="header-explore-item">
|
||||
<span class="header-explore-item-text">
|
||||
Data Analysis
|
||||
</span>
|
||||
</li>
|
||||
<li class="header-explore-item" onclick="expandExploreDropdown('design')">
|
||||
<span class="header-explore-item-text">
|
||||
Design
|
||||
</span>
|
||||
<i class="far fa-angle-right"></i>
|
||||
</li>
|
||||
<li class="header-explore-item">
|
||||
<span class="header-explore-item-text">
|
||||
Education
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="np-hidden" id="header-explore-extension"></ul>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#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;
|
||||
|
||||
}
|
||||
.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() {
|
||||
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) {
|
||||
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 + 15}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,185 @@
|
||||
<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="https://www.quantuvos.com">
|
||||
Home
|
||||
</li>
|
||||
<li class="header-desktop-menu-item" dropdown-show="courses">
|
||||
<a href="https://www.quantuvos.com">
|
||||
Courses
|
||||
</li>
|
||||
<li class="header-desktop-menu-link">
|
||||
<a href="https://www.quantuvos.com">
|
||||
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="https://www.quantuvos.com/">
|
||||
Home
|
||||
{% comment %}<i class="fal fa-angle-right side-menu-body-arrow"></i>{% endcomment %}
|
||||
</li>
|
||||
<li class="side-menu-body-element-strong"><a href="https://www.quantuvos.com/">
|
||||
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 href="https://www.quantuvos.com/">
|
||||
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 href="">
|
||||
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,78 @@
|
||||
<div class="header-search-popup np-hidden" id="search-popup">
|
||||
<form class="header-search-popup-form">
|
||||
<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">
|
||||
<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>
|
||||
@ -0,0 +1,32 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-max-width np-page-container">
|
||||
<div class="np-hidden-mobile" id="course-desktop">
|
||||
{% include "course_desktop_view" %}
|
||||
</div>
|
||||
<div class="np-hidden-desktop" id="course-mobile">
|
||||
{% include "course_mobile_view" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
|
||||
.np-top-cta {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-page-container {
|
||||
margin: 90px auto 0;
|
||||
}
|
||||
|
||||
.np-page-container .np-card-container {
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
.np-top-vocabulary {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -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>
|
||||
@ -0,0 +1,197 @@
|
||||
@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 #563150;
|
||||
transition: all 0.1s;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.np-button:hover {
|
||||
background: transparent;
|
||||
color: #563150 !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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user