Added the Basic group templates for Walmart Luminate-Scintilla. Mizuno Monthly.

This commit is contained in:
Norm Rasmussen
2025-05-01 18:43:01 -04:00
parent 72eb7ddc59
commit 48d9a88181
6 changed files with 683 additions and 100 deletions

View File

@ -2,58 +2,136 @@
{% comment %}
This is where "include homepage_featured" is usually inserted in the regular homepage.
{% endcomment %}
<div class="np-homepage-featured np-max-width">
<div class="row">
<div class="col-xs-12">
<div class="np-homepage-featured-text">
<div class="np-homepage-headline">
Continue Courses
</div>
<div class="featured-carousel-controls np-hidden-mobile">
<div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
<div class="next-arrow carousel-control"><i class="far fa-chevron-right"></i></div>
</div>
</div>
<div class="featured-courses-wrapper">
<div class="featured-courses-slider">
{% assign course_count = 0 %}
{% for course in courses.enrolled %}
{% assign course_count = course_count | plus: 1 %}
{% include "cards_article" with course %}
{% endfor %}
</div>
</div>
</div>
{% assign enrolled_items = courses.enrolled %}
{% if course_count == 0 %}
<div class="np-homepage-featured-empty">
<div class="np-zero-state-text">
Yikes! You're not enrolled in any courses at the moment. Be sure to check back here later.
</div>
<img
class="np-zero-state-courses"
alt="Yikes! You're not enrolled in any courses at the moment. Be sure to check back here later."
/>
</div>
{% endif %}
{% else %}
<div class="np-homepage-featured-empty">
<div class="np-zero-state-text">
Yikes! There is no content at the moment. Be sure to check back here later.
</div>
<img
class="np-zero-state-courses"
alt="Yikes! There is no content at the moment. Be sure to check back here later."
/>
</div>
{% endif %}
<div class="np-homepage-new np-max-width">
<div class="np-homepage-new-text">
<div class="np-homepage-headline">
Courses
</div>
<div class="ongoing-carousel-controls np-hidden-mobile">
<div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
<div class="next-arrow carousel-control"><i class="far fa-chevron-right"></i></div>
</div>
</div>
</div>
{% endcomment %}
{% if enrolled_items.size > 0 %}
{% assign new_courses_count = 0 %}
<div class="ongoing-courses-wrapper">
<div class="ongoing-courses-slider">
{% for course in enrolled_items %}
{% if course.properties.is_article_course == false %}
{% if course.started? == false %}
{% assign new_courses_count = new_courses_count | plus: 1 %}
<div class="ongoing-course-slide">
{% include "cards_course_onging" with course %}
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
{% if new_courses_count > 0 %}
{% comment %} <div class="onging-see-more-wrapper"> {% endcomment %}
{% comment %} <a href="/app/dashboard">See more</a> {% endcomment %}
{% comment %} </div> {% endcomment %}
{% else %}
<script>console.log("{{new_courses_count}}")</script>
<div class="np-homepage-featured-empty">
<div class="np-zero-state-text">
Yikes! You don't have any new training at this moment.
</div>
<img
class="np-zero-state-courses"
alt="Yikes! You don't have any new training at this moment."
/>
{% comment %} <div class="zero-state-cta" style="margin-top:32px;"> {% endcomment %}
{% comment %} <a href="/app/catalog" class="np-button">Explore Catalog</a> {% endcomment %}
{% comment %} </div> {% endcomment %}
</div>
{% endif %}
{% else %}
<div class="np-homepage-featured-empty">
<div class="np-zero-state-text">
Yikes! You don't have any new training at this moment.
</div>
<img
class="np-zero-state-courses"
alt="Yikes! You don't have any new training at this moment."
/>
{% comment %} <div class="zero-state-cta" style="margin-top:32px;"> {% endcomment %}
{% comment %} <a href="/app/catalog" class="np-button">Explore Catalog</a> {% endcomment %}
{% comment %} </div> {% endcomment %}
</div>
{% endif %}
</div>
<div class="np-homepage-ongoing np-max-width">
<div class="np-homepage-ongoing-text">
<div class="np-homepage-headline">
Ongoing Training
</div>
<div class="ongoing-carousel-controls np-hidden-mobile">
<div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
<div class="next-arrow carousel-control"><i class="far fa-chevron-right"></i></div>
</div>
</div>
{% if enrolled_items.size > 0 %}
{% assign ongoing_courses_count = 0 %}
<div class="ongoing-courses-wrapper">
<div class="ongoing-courses-slider">
{% for course in enrolled_items %}
{% if course.properties.is_article_course == false %}
{% if course.progress > 0 and course.progress < 100 %}
{% assign ongoing_courses_count = ongoing_courses_count | plus: 1 %}
<div class="ongoing-course-slide">
{% include "cards_course_ongoing" with course %}
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
{% if ongoing_courses_count > 0 %}
{% comment %} <div class="ongoing-see-more-wrapper"> {% endcomment %}
{% comment %} <a href="/app/dashboard">See more</a> {% endcomment %}
{% comment %} </div> {% endcomment %}
{% else %}
<script>console.log("{{ongoing_courses_count}}")</script>
<div class="np-homepage-featured-empty">
<div class="np-zero-state-text">
Yikes! You don't have any ongoing training at this moment.
</div>
<img
class="np-zero-state-courses"
alt="Yikes! You don't have any ongoing training at this moment."
/>
{% comment %} <div class="zero-state-cta" style="margin-top:32px;"> {% endcomment %}
{% comment %} <a href="/app/catalog" class="np-button">Explore Catalog</a> {% endcomment %}
{% comment %} </div> {% endcomment %}
</div>
{% endif %}
{% else %}
<div class="np-homepage-featured-empty">
<div class="np-zero-state-text">
Yikes! You don't have any ongoing training at this moment.
</div>
<img
class="np-zero-state-courses"
alt="Yikes! You don't have any ongoing training at this moment."
/>
{% comment %} <div class="zero-state-cta" style="margin-top:32px;"> {% endcomment %}
{% comment %} <a href="/app/catalog" class="np-button">Explore Catalog</a> {% endcomment %}
{% comment %} </div> {% endcomment %}
</div>
{% endif %}
</div>
{% comment %} {% include "ongoing_training", items: courses.enrolled %} {% endcomment %}
<div class="np-max-width np-homepage-row-wrapper">
<div class="row">
@ -78,7 +156,7 @@
{% if lps_in_progress > 0 %}
<div class="see-more-wrapper">
<a href="/app/learning_paths" style="margin-top:24px;">See more</a>
<a href="/app/dashboard" style="margin-top:24px;">See more</a>
</div>
{% endif %}
{% if lps_in_progress == 0 %}
@ -96,54 +174,42 @@
</div>
</div>
{% comment %} {% if features.training_events? %}
<div class="col-xs-12 col-sm-5 col-md-4">
<div class="homepage-events">
<div class="np-section-header">Upcoming Courses</div>
<div class="upcoming events">
{% if training_events.available.any? %}
{% for training_event in training_events.available limit:1 %}
{% include "cards_training_event" with training_event %}
{% endfor %}
<div class="see-more-wrapper">
<a href="/app/training_events" style="margin-top:24px;">See more</a>
</div>
{% else %}
{% include "training_events_zero_state" %}
{% endif %}
</div>
</div>
</div>
{% endif %} {% endcomment %}
</div>
</div>
{% include "ongoing_training", items: courses.enrolled %}
{%- comment -%}
<button
type="button"
class="popup-trigger"
data-toggle-class-on-target
data-toggle-target="#firstTimeUsers"
data-toggle-escape
data-toggle-modal>
Click
</button>
<button
type="button"
class="survey-popup-trigger"
data-toggle-class-on-target
data-toggle-target="#surveyPopup"
data-toggle-escape
data-toggle-modal>
Click
</button>
</main>
{%- endcomment -%}
{% include "footer" %}
{% if current_person.signed_in? %}
{% unless current_person.email contains "+preview" %}
{% if current_person.properties.first_time_user_popup_seen == false %}
<script>
console.log('property is false, check local storage')
if (localStorage.getItem('modal_clicked') != null) {
console.log("rerun workflow to set property")
RerunWorkato()
} else {
showPopup()
}
</script>
{% elsif current_person.properties.first_time_user_popup_seen == true %}
<script>
console.log("property is set, deleting local storage, don't initialize first modal")
localStorage.removeItem("modal_clicked")
</script>
{% else %}
<script>
console.log('custom prop doesnt yet exist')
if (localStorage.getItem('modal_clicked') != null) {
console.log("rerun workflow to set property")
RerunWorkato()
} else {
showPopup()
}
</script>
{% endif %}
{% endunless %}
{% endif %}
<script>
if (window.location.pathname == "/app") {
document
@ -263,6 +329,56 @@
})
function setPopupSeenProperty(redirectUrl) {
localStorage.setItem("modal_clicked", true);
const today = new Date();
const formattedDate = formatDate(today);
const data = {
person_uuid: '{{current_person.id}}',
date: formattedDate
}
const schoolID = '{{current_school.id}}'
let webhookUrl
if (schoolID == "804edb32-c300-42f3-82b7-e5d55fcbc2a6") {
webhookUrl = "https://webhooks.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/user-interacted-with-popup"
} else if (schoolID == "10183441-2254-4b1e-a9f7-9549ca773257") { // live school
webhookUrl = "https://webhooks.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/user-interacted-with-popup-live"
}
if (webhookUrl) {
fetch(webhookUrl, {
method: 'post',
body: JSON.stringify(data)
}).then(function(response) {
return response.json();
}).then(function(data) {
console.log(res)
setTimeout(function() {
window.location.href = redirectUrl;
}, 250)
}).catch(error => {
console.log(error)
setTimeout(function() {
window.location.href = redirectUrl;
}, 250)
});
}
}
function setSurveyPopupSeen(redirectUrl) {
const today = new Date();
const formattedDate = formatDate(today);
localStorage.setItem("survey_modal_clicked", formattedDate);
setTimeout(function() {
window.location.href = redirectUrl;
}, 250)
}
</script>
<style>
@ -396,4 +512,100 @@
line-height: 58px;
}
}
.ongoing-courses-wrapper {
margin: 0 -8px;
}
.np-homepage-ongoing {
padding: 0 16px;
margin-bottom:56px;
}
.np-homepage-ongoing-text {
padding: 0 0 32px;
text-align:left;
display:flex;
}
.np-homepage-ongoing-text .np-homepage-headline {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color:#333;
align-self: flex-start;
}
.ongoing-carousel-controls {
align-self:flex-end;
display:flex;
}
.ongoing-carousel-controls .carousel-control {
margin: 0 8px;
background-color: #ebe8f3;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: #3c228a;
cursor: pointer;
transition:opacity 0.2s;
}
.ongoing-carousel-controls .carousel-control[aria-disabled='true'] {
opacity: 0.3;
cursor:default;
}
.ongoing-carousel-controls .carousel-control.next-arrow {
margin-right:0;
}
.ongoing-courses-slider {
display:flex;
}
.ongoing-course-slide {
margin-bottom: 12px;
}
.ongoing-course-slide .np-card {
margin:0 auto;
padding: 0;
height:100%;
}
.ongoing-course-slide .np-card-container {
height: 100%;
margin: 0 8px;
}
.ongoing-see-more-wrapper {
display:flex;
justify-content:flex-end;
margin-top:8px;
}
.ongoing-see-more-wrapper a {
color:#3C228A;
}
@media (min-width:768px){
.np-homepage-ongoing-text {
flex-direction:row;
justify-content:space-between;
}
.np-homepage-ongoing-text .np-homepage-headline {
font-size: 32px;
line-height: 40px;
}
.ongoing-see-more-wrapper {
margin-top:12px;
}
}
</style>