Creating a script for Anthology to update all the names of their learner properties based on new subscription model. Downloaded and updated some templates for this same project.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,314 @@
|
||||
{% 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';
|
||||
document.querySelector('.filter-buttons-container').style.visibility = 'visible';
|
||||
|
||||
} 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';
|
||||
document.querySelector('.filter-buttons-container').style.visibility = 'hidden';
|
||||
|
||||
} 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';
|
||||
document.querySelector('.filter-buttons-container').style.visibility = 'visible';
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.course-card-wrapper.col-lg-4,
|
||||
.course-card-wrapper.col-sm-6 {
|
||||
max-width: 100% !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.row.np-stretch-content {
|
||||
display: grid !important;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1100px) {
|
||||
.row.np-stretch-content {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
.row.np-stretch-content {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.row.np-stretch-content {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.row.np-stretch-content {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@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 -%}
|
||||
Reference in New Issue
Block a user