Downloaded WoodMac Learn templates for the first time. Added some tasks for WML. Re-downloaded SPS to reference some code. SPS's app says all templates were last uploaded in April 18 2025. Last local changes (my hunch is downloaded) on my machine is May 13, 2025.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,386 @@
|
||||
{% assign enrolled_events = 0 %}
|
||||
{% for training_event in training_events.enrolled %}
|
||||
{% assign enrolled_events = enrolled_events | plus: 1 %}
|
||||
{% endfor %}
|
||||
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
<div class="np-banner-container ">
|
||||
<div class="banner-wrapper np-max-width">
|
||||
<div class="np-banner-content">
|
||||
<div class="dashboard-heading">Dashboard</div>
|
||||
<div class="dashboard-greeting-text">
|
||||
<p>Hi {{ current_person.first_name }}!</p>
|
||||
<p>Continue where you left off or dive into <br>something new – your learning journey awaits!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-stats">
|
||||
<div class="dashboard-heading">
|
||||
Course progress
|
||||
</div>
|
||||
{% include 'widget_course_progress' %}
|
||||
</div>
|
||||
<div class="dashboard-upcoming-events">
|
||||
<div class="upcoming_events_heading">Upcoming events</div>
|
||||
<div class="event-card" >
|
||||
{% include "training_events_dashboard" %}
|
||||
</div>
|
||||
<div class="see-more-container"></div>
|
||||
<button class="see-more-button" onclick="scrollToRegisteredEvents()">See more</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
{% assign in_progress_flag = false %}
|
||||
{% assign not_started_flag = false %}
|
||||
{% assign completed_flag = false %}
|
||||
|
||||
{% if courses.enrolled.any? %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 0 %}
|
||||
{% assign not_started_flag = true %}
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
{% assign in_progress_flag = true %}
|
||||
{% else %}
|
||||
{% assign completed_flag = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<!-- In Progress Courses -->
|
||||
{% if in_progress_flag %}
|
||||
<div class="in-progress-container" onclick="toggleDropdown(this)" data-expanded="false">
|
||||
<div class="role-quick-link-heading" >In progress courses</div> <span class="dropdown-arrow">â–Ľ</span>
|
||||
</div>
|
||||
<div class="category-courses course-items-container">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
<div class="category-cards-wrapper course-item">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Not Started Courses -->
|
||||
{% if not_started_flag %}
|
||||
<div class="in-progress-container" onclick="toggleDropdown(this)" data-expanded="false">
|
||||
<div class="role-quick-link-heading" >Available courses</div><span class="dropdown-arrow">â–Ľ</span>
|
||||
</div>
|
||||
<div class="category-courses course-items-container" >
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 0 %}
|
||||
<div class="category-cards-wrapper course-item">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Completed Courses -->
|
||||
{% if completed_flag %}
|
||||
<div class="in-progress-container" onclick="toggleDropdown(this)" data-expanded="false">
|
||||
<div class="role-quick-link-heading" >Completed courses</div><span class="dropdown-arrow">â–Ľ</span>
|
||||
</div>
|
||||
<div class="category-courses course-items-container">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
<div class="category-cards-wrapper course-item">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Registered Events -->
|
||||
{% assign enrolled_events = 0 %}
|
||||
{% for training_event in training_events.enrolled %}
|
||||
{% assign enrolled_events = enrolled_events | plus: 1 %}
|
||||
{% endfor %}
|
||||
|
||||
{% if enrolled_events > 0 %}
|
||||
<div id="registered-events-section" class="in-progress-container" onclick="toggleDropdown(this)" data-expanded="false">
|
||||
<div class="role-quick-link-heading">Upcoming events</div><span class="dropdown-arrow">â–Ľ</span>
|
||||
</div>
|
||||
<div class="category-courses course-items-container">
|
||||
{% for training_event in training_events.enrolled %}
|
||||
<div class="category-cards-wrapper course-item">
|
||||
{% include "cards_training_event" %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<script>
|
||||
function scrollToRegisteredEvents() {
|
||||
document.getElementById("registered-events-section").scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
function setCourseItemsVisibility(container) {
|
||||
const items = container.querySelectorAll(".course-item");
|
||||
const isExpanded = container.previousElementSibling.getAttribute("data-expanded") === "true";
|
||||
|
||||
items.forEach((item, index) => {
|
||||
item.style.display = (index < 3 || isExpanded) ? "block" : "none";
|
||||
});
|
||||
}
|
||||
|
||||
window.toggleDropdown = function(element) {
|
||||
const container = element.nextElementSibling;
|
||||
|
||||
if (container && container.classList.contains("course-items-container")) {
|
||||
const isExpanded = element.getAttribute("data-expanded") === "true";
|
||||
element.setAttribute("data-expanded", !isExpanded);
|
||||
|
||||
setCourseItemsVisibility(container);
|
||||
|
||||
element.querySelector(".dropdown-arrow").textContent = isExpanded ? "â–Ľ" : "â–˛";
|
||||
}
|
||||
};
|
||||
|
||||
document.querySelectorAll(".course-items-container").forEach(container => {
|
||||
setCourseItemsVisibility(container);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-banner-container{
|
||||
display: flex;
|
||||
padding: 33px;
|
||||
background-color: #EEEFEF;
|
||||
margin-bottom: 20px;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.np-dashboard-resources{
|
||||
border-radius: 16px;
|
||||
}
|
||||
.category-courses {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.category-courses{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.banner-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
gap: 30px;
|
||||
}
|
||||
.dashboard-heading{
|
||||
font-size: 2.5rem;
|
||||
color: #010063;
|
||||
font-weight: 500;
|
||||
}
|
||||
.upcoming_events_heading {
|
||||
font-size: 2.5rem;
|
||||
color: #010063;
|
||||
font-weight: 500;
|
||||
padding-bottom: 25px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.np-dashboard-resources-title{
|
||||
font-size: 25px;
|
||||
color: #0A23F5;
|
||||
font-weight: bold;
|
||||
padding-bottom: 25px;
|
||||
text-transform: none;
|
||||
}
|
||||
.dashboard-greeting-text{
|
||||
color: #01005F;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.course-items-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.progress-circles {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.progress-circle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #FFFFFF;
|
||||
padding: 20px;
|
||||
border-radius: 50%;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
justify-content: center;
|
||||
border: 8px solid #B0B0B0;
|
||||
|
||||
}
|
||||
|
||||
.progress-count {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
font-size: 14px;
|
||||
color: #01005F;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.progress-card-wrapper {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.section-title{
|
||||
color:#0A23F5;
|
||||
}
|
||||
|
||||
.progress-circles-container{
|
||||
padding: 40px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.progress-circles-container {
|
||||
padding: 40px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
|
||||
.in-progress-container {
|
||||
background-color: #0A23F5;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.role-quick-link-heading {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.dropdown-arrow {
|
||||
font-size: 18px;
|
||||
transition: transform 0.3s;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.course-items {
|
||||
overflow: hidden;
|
||||
height: 500px;
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
|
||||
.course-items.show {
|
||||
height: auto;
|
||||
|
||||
}
|
||||
|
||||
.hidden-course {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.course-items.show .hidden-course {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.see-more-button{
|
||||
color: #fff;
|
||||
background-color: #091ED3;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.banner-wrapper{
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
addEventListener("DOMContentLoaded", (event) => {
|
||||
const timeZones = {
|
||||
'-12': 'Etc/GMT+12',
|
||||
'-11': 'Pacific/Pago_Pago',
|
||||
'-10': 'Pacific/Honolulu',
|
||||
'-09': 'America/Anchorage',
|
||||
'-08': 'America/Los_Angeles',
|
||||
'-07': 'America/Denver',
|
||||
'-06': 'America/Chicago',
|
||||
'-05': 'America/New_York',
|
||||
'-04': 'America/Caracas',
|
||||
'-03': 'America/Argentina/Buenos_Aires',
|
||||
'-02': 'Atlantic/South_Georgia',
|
||||
'-01': 'Atlantic/Azores',
|
||||
'00': 'UTC',
|
||||
'CET': 'CET',
|
||||
'+01': 'Europe/Berlin',
|
||||
'+02': 'Europe/Athens',
|
||||
'+03': 'Europe/Moscow',
|
||||
'+04': 'Asia/Dubai',
|
||||
'+05': 'Asia/Karachi',
|
||||
'+06': 'Asia/Almaty',
|
||||
'+07': 'Asia/Bangkok',
|
||||
'+08': 'Asia/Singapore',
|
||||
'+09': 'Asia/Tokyo',
|
||||
'+10': 'Australia/Sydney',
|
||||
'+11': 'Pacific/Noumea',
|
||||
'+12': 'Pacific/Auckland',
|
||||
'+13': 'Pacific/Tongatapu',
|
||||
'+14': 'Pacific/Kiritimati'
|
||||
};
|
||||
|
||||
function formatTimeZone(offset) {
|
||||
offset = offset.trim();
|
||||
if (timeZones[offset]) {
|
||||
return timeZones[offset];
|
||||
}
|
||||
|
||||
try {
|
||||
const zoneName = luxon.FixedOffsetZone.parseSpecifier(offset).name;
|
||||
return `UTC${zoneName}`;
|
||||
} catch {
|
||||
return offset;
|
||||
}
|
||||
}
|
||||
|
||||
const offset = '+08';
|
||||
const formattedZone = formatTimeZone(offset);
|
||||
console.log(`Offset ${offset} to: ${formattedZone}`);
|
||||
|
||||
document.querySelectorAll('.zone').forEach((timeElement) => {
|
||||
const offset = timeElement.textContent;
|
||||
const formattedZone = formatTimeZone(offset);
|
||||
timeElement.textContent = timeElement.textContent.replace(offset, formattedZone);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user