277 lines
8.3 KiB
Plaintext
277 lines
8.3 KiB
Plaintext
{% include "header" %}
|
|
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
|
{% include "sub_navigation" %}
|
|
{% comment %} {% if current_person.email contains '+preview' or current_person.email == 'kfelton@anthology.com'%}
|
|
{% assign sub_levels_length = current_person.properties.subscription_levels | size %}
|
|
{% if sub_levels_length > 0 %}
|
|
{% include "product_bar" %}
|
|
{% endif %}
|
|
{% endif %} {% endcomment %}
|
|
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
|
<div class="row np-flex-center">
|
|
{% include "profile_card" %}
|
|
|
|
<div class="col-xs-12 col-sm-7 col-md-8 col-lg-9 dashboard-learning-content">
|
|
<div class="dashboard-main-title">
|
|
Dashboard
|
|
</div>
|
|
<div class="dashboard-subtitle">
|
|
Track Progress and Continue Learning
|
|
</div>
|
|
|
|
<div class='dashboard-control-panel' style="
|
|
">
|
|
{%- comment -%} =============== THIS IS WHERE THE SWAPPER WILL LIVE =============== {%- endcomment -%}
|
|
<div class="view-swapper-container">
|
|
<div id="dashboard-view-button" class="view-swapper-button view-swapper-button-active" onclick="swapView()">
|
|
Resources
|
|
</div>
|
|
<div id="events-view-button" class="view-swapper-button" onclick="swapView()">
|
|
Live Events
|
|
</div>
|
|
{% assign completedCourseFound = false %}
|
|
{% if courses.enrolled.any? %}
|
|
{% for course in courses.enrolled %}
|
|
{% if course.progress == 100 %}
|
|
{% assign completedCourseFound = true %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if completedCourseFound %}
|
|
<div id="completed-view-button" class="view-swapper-button" onclick="swapView()">
|
|
Completed
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{%- comment -%} =============== THIS IS WHERE THE PRODUCT FILTER WILL LIVE =============== {%- endcomment -%}
|
|
<div class="filter-buttons-container">
|
|
<div class="dashboard-filter-label">Filter By: </div>
|
|
{% include "filter_by_product", page: 'Dashboard' %}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="dashboard-resources-pane">
|
|
<div class="np-dashboard-resources-title">
|
|
Your Resources
|
|
</div>
|
|
{% assign ipCourseFound = false %}
|
|
{% if courses.enrolled.any? %}
|
|
{% for course in courses.enrolled %}
|
|
{% if course.progress > 0 and course.progress < 100 %}
|
|
{% assign ipCourseFound = true %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if ipCourseFound %}
|
|
{% include "courses_index_in_prog", outerClass: "dashboard-courses-index" %}
|
|
{% endif %}
|
|
|
|
{%- comment -%} {% if courses.enrolled.any? %}
|
|
{% include "courses_index", outerClass: "dashboard-courses-index" %}
|
|
{% else %}
|
|
{% capture message %}
|
|
{% t shared.zero_state.courses.index,
|
|
key: current_school.course_vocabulary
|
|
%}
|
|
{% endcapture %}
|
|
{% include "courses_zero_state", message: message %}
|
|
{% endif %} {%- endcomment -%}
|
|
</div>
|
|
|
|
<div id="dashboard-events-pane">
|
|
{% include "training_events_index" %}
|
|
</div>
|
|
|
|
<div id="dashboard-completed-pane">
|
|
{% assign completedCourseFound = false %}
|
|
{% if courses.enrolled.any? %}
|
|
{% for course in courses.enrolled %}
|
|
{% if course.progress == 100 %}
|
|
{% assign completedCourseFound = true %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if completedCourseFound %}
|
|
{% include "courses_index_completed", outerClass: "dashboard-courses-index" %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{% include "footer" %}
|
|
|
|
<script>
|
|
let swapView = () => {
|
|
console.log(event.target.classList);
|
|
|
|
if(!event.target.classList.contains('view-swapper-button-active')){
|
|
if(event.target.id == 'dashboard-view-button'){
|
|
|
|
document.getElementById('events-view-button').classList.remove('view-swapper-button-active');
|
|
if(document.getElementById('completed-view-button')){
|
|
document.getElementById('completed-view-button').classList.remove('view-swapper-button-active');
|
|
}
|
|
event.target.classList.add('view-swapper-button-active');
|
|
|
|
document.getElementById('dashboard-events-pane').style.display = 'none';
|
|
document.getElementById('dashboard-completed-pane').style.display = 'none';
|
|
document.getElementById('dashboard-resources-pane').style.display = 'block';
|
|
|
|
} else if(event.target.id == 'events-view-button'){
|
|
document.getElementById('dashboard-view-button').classList.remove('view-swapper-button-active');
|
|
if(document.getElementById('completed-view-button')){
|
|
document.getElementById('completed-view-button').classList.remove('view-swapper-button-active');
|
|
}
|
|
event.target.classList.add('view-swapper-button-active');
|
|
|
|
document.getElementById('dashboard-resources-pane').style.display = 'none';
|
|
document.getElementById('dashboard-completed-pane').style.display = 'none';
|
|
document.getElementById('dashboard-events-pane').style.display = 'block';
|
|
|
|
} else if(event.target.id == 'completed-view-button'){
|
|
document.getElementById('dashboard-view-button').classList.remove('view-swapper-button-active');
|
|
document.getElementById('events-view-button').classList.remove('view-swapper-button-active');
|
|
event.target.classList.add('view-swapper-button-active');
|
|
|
|
document.getElementById('dashboard-resources-pane').style.display = 'none';
|
|
document.getElementById('dashboard-events-pane').style.display = 'none';
|
|
document.getElementById('dashboard-completed-pane').style.display = 'block';
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
{%- comment -%} {% assign swapper_spacer = 0 %}
|
|
{% for course in courses.enrolled %}
|
|
{% unless course.progress == 0 %}
|
|
{% assign swapper_spacer = 1 %}
|
|
{% endunless %}
|
|
{% endfor %} {%- endcomment -%}
|
|
|
|
<style>
|
|
.dashboard-main-title{
|
|
color: #0a0a0a;
|
|
font-size: 2em;
|
|
font-weight: 900;
|
|
line-height: 2.375REM;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.dashboard-subtitle{
|
|
color: #595959;
|
|
font-size: 1.25rem;
|
|
font-weight: 400;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.np-dashboard-resources-title{
|
|
color: #000000;
|
|
font-size: 1.5em;
|
|
font-weight: 600;
|
|
line-height: 25px;
|
|
margin-bottom: 25px;
|
|
text-transform: none;
|
|
}
|
|
|
|
.dashboard-control-panel{
|
|
align-items: center;
|
|
border-bottom: 1px solid #F2F4F5;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
justify-content: center;
|
|
margin-top: 24px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.view-swapper-container{
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 40px;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
.view-swapper-button{
|
|
align-items: center;
|
|
color: #595959;
|
|
display: flex;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
justify-content: center;
|
|
text-align: center;
|
|
width: 125px;
|
|
}
|
|
|
|
.view-swapper-button-active{
|
|
background: #f2f4f5;
|
|
color: #000;
|
|
font-weight: 600;
|
|
/* border-bottom: 2px solid #000000; */
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.view-swapper-button:hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.filter-buttons-container{
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.dashboard-filter-label{
|
|
color: #595959;
|
|
font-size: 1em;
|
|
font-weight: 700;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
#dashboard-events-pane,
|
|
#dashboard-completed-pane{
|
|
display: none;
|
|
}
|
|
|
|
.product-filter-container{
|
|
margin: 0;
|
|
}
|
|
|
|
@media screen and (min-width: 768px){
|
|
.np-dashboard{
|
|
padding: 70px 24px;
|
|
}
|
|
|
|
.dashboard-main-title{
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.dashboard-control-panel{
|
|
align-items: center;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.view-swapper-container{
|
|
margin-bottom: -38px;
|
|
width: unset;
|
|
}
|
|
|
|
.dashboard-learning-content{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.dashboard-courses-index{
|
|
margin: 0;
|
|
margin-left: -10px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
{%- comment -%} {% if swapper_spacer == 0 %}
|
|
<style>
|
|
.view-swapper-container{
|
|
margin-bottom: 0 !important;
|
|
}
|
|
</style>
|
|
{% endif %} {%- endcomment -%} |