Files
Gainsight/Custom_Templates/customer_templates/BuilderTrend External/homepage.html.liquid
2025-03-06 19:27:45 -05:00

417 lines
13 KiB
Plaintext

{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.featured %}
{% assign strquizCategories = current_person.properties.qiuz_answers | strip %}
{% assign quizCategories = current_person.properties.qiuz_answers | split: "_" %}
{% assign coursesToDisplay = "" %}
{% assign lpsToDisplay = "" %}
{% for course in courses.in_catalog %}
{% for cats in course.categories %}
{% if cats.name contains "[Quiz]" %}
{% assign catname = cats.name | remove: "[Quiz] " %}
{% for qc in quizCategories %}
{% if catname == qc %}
{% assign coursesToDisplay = coursesToDisplay | append: course.id | append: ";" %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
{% endfor %}
{% assign coursesToDisplayArr = coursesToDisplay | split: ";" %}
{% assign uniqcoursesToDisplayArr = coursesToDisplayArr | uniq %}
{% for learningpath in learning_paths.available %}
{% for lpcats in learningpath.categories %}
{% if lpcats.name contains "[Quiz]" %}
{% assign catname = lpcats.name | remove: "[Quiz] " %}
{% for qc in quizCategories %}
{% if catname == qc %}
{% assign lpsToDisplay = lpsToDisplay | append: learningpath.id | append: ";" %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
{% endfor %}
{% assign lpsToDisplayArr = lpsToDisplay | split: ";" %}
{% assign uniqlpsToDisplayArr = lpsToDisplayArr | uniq %}
<main class="np-main np-homepage">
{% include "main_hero_masthead" %}
{% include "sub_navigation" %}
{% if strquizCategories == "" %}
<div class="np-homepage-featured np-max-width">
<div class="np-homepage-featured-courses row">
{% assign isProgressHeaderOutput = false %}
{% assign isCoursesInprogress = false %}
{% for course in courses.in_catalog %}
{% if course.progress > 0 and course.progress < 100 %}
{% if isProgressHeaderOutput == false %}
<div class="np-resource-title addWidthMargin" style="margin-top: 32px;">Pick up where you left off</div>
{% assign isProgressHeaderOutput = true %}
{% endif %}
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% assign isCoursesInprogress = true %}
{% endif %}
{% endfor %}
</div>
</div>
<section class="np-main np-learning-paths np-subpage-container np-max-width">
<div class="np-learning-paths-main">
<div class="np-learning-paths-resources">
{% assign isLPInprogress = false %}
{% for learning_path in learning_paths.enrolled %}
{% if learning_path.progress > 0 and learning_path.progress < 100 %}
{% assign isLPInprogress = true %}
<div class="np-learning-paths-resources-container-home">
{% include "cards_learning_path" with learning_path %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</section>
<div class="np-homepage-featured np-max-width">
<div class="np-homepage-featured-text">
<div class="np-homepage-headline">
Start with these courses
</div>
</div>
{% if courses.featured.any? %}
<div class="np-homepage-featured-courses row">
{% for course in courses.featured %}
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% endfor %}
</div>
{% else %}
<div class="np-homepage-featured-empty">
<div class="np-zero-state-text">
{% t .empty, key: current_school.course_vocabulary %}
</div>
<img
class="np-zero-state-courses"
alt="{% t .empty, key: current_school.course_vocabulary %}"
/>
</div>
{% endif %}
</div>
<div class="np-dashboard-resources np-max-width">
<div class="np-homepage-featured-text">
<div class="np-homepage-headline">
Upcoming Live Group Trainings
</div>
</div>
{% if training_events.available.any? %}
<div class="row row-with-thumbnails">
{% for training_event in training_events.available limit:3 %}
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
{% include "cards_training_event" with training_event %}
</div>
{% endfor %}
</div>
{% else %}
{% include "training_events_zero_state" %}
{% endif %}
</div>
<section class="np-main np-learning-paths np-subpage-container np-max-width">
<div class="np-homepage-featured-text">
<div class="np-homepage-headline">
Start with this Learning Path
</div>
</div>
<div class="np-learning-paths-main">
<div class="np-learning-paths-resources">
{% assign startwithlearning_path = learning_paths.available | where: "id", "04575709-6d99-41bb-9014-6e7def46a320" %}
{% for learning_path in startwithlearning_path %}
<div class="np-learning-paths-resources-container-home">
{% include "cards_learning_path" with learning_path %}
</div>
{% endfor %}
</div>
</div>
</section>
{% else %}
<div class="np-homepage-featured np-max-width">
<div class="np-homepage-featured-courses row">
{% assign isProgressHeaderOutput = false %}
{% assign isCoursesInprogress = false %}
{% for course in courses.in_catalog %}
{% if course.progress > 0 and course.progress < 100 %}
{% if isProgressHeaderOutput == false %}
<div class="np-resource-title addWidthMargin" style="margin-top: 32px;">Pick up where you left off</div>
{% assign isProgressHeaderOutput = true %}
{% endif %}
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% assign isCoursesInprogress = true %}
{% endif %}
{% endfor %}
</div>
</div>
<section class="np-main np-learning-paths np-subpage-container np-max-width">
<div class="np-learning-paths-main">
<div class="np-learning-paths-resources">
{% assign isLPInprogress = false %}
{% for learning_path in learning_paths.enrolled %}
{% if learning_path.progress > 0 and learning_path.progress < 100 %}
{% assign isLPInprogress = true %}
<div class="np-learning-paths-resources-container-home">
{% include "cards_learning_path" with learning_path %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</section>
<div class="np-dashboard-resources np-max-width">
<div class="np-homepage-featured-text">
<div class="np-homepage-headline">
Upcoming Live Group Trainings
</div>
</div>
{% if training_events.available.any? %}
<div class="row row-with-thumbnails">
{% for training_event in training_events.available limit:3 %}
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
{% include "cards_training_event" with training_event %}
</div>
{% endfor %}
</div>
{% else %}
{% include "training_events_zero_state" %}
{% endif %}
</div>
<div class="np-homepage-featured np-max-width">
<div class="np-resource-title" style="margin-top:40px;">
Recommended Courses for you
</div>
<div class="np-catalog-courses row row-with-thumbnails" style="margin-top: 0;">
{% for courseid in uniqcoursesToDisplayArr limit: 9%}
{% assign displayCourses = courses.in_catalog | where: "id", courseid %}
{% for course in displayCourses %}
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% endfor %}
{% endfor %}
</div>
</div>
<section class="np-main np-learning-paths np-subpage-container np-max-width">
<div class="np-homepage-featured-text">
<div class="np-homepage-headline">
Recommended Learning Paths for you
</div>
</div>
<div class="np-learning-paths-main">
<div class="np-learning-paths-resources">
<div class="np-learning-paths-resources">
{% for lpsid in uniqlpsToDisplayArr %}
{% assign displayLps = learning_paths.available | where: "id", lpsid %}
{% for learning_path in displayLps %}
<div class="np-learning-paths-resources-container-home">
{% include "cards_learning_path" with learning_path %}
</div>
{% endfor %}
{% endfor %}
</div>
</div>
</div>
</section>
{% endif %}
<div class="popular_topic_wrapper np-max-width">
<div class="np-resource-title">
Popular Topics
</div>
<div class="popular-topic-cointainer">
<a class="popolar_topic" href="/app/ptestimates">
Estimates
</a>
<a class="popolar_topic" href="/app/ptowner-invoices">
Owner Invoices
</a>
<a class="popolar_topic" href="/app/ptschedule">
Schedule
</a>
<a class="popolar_topic" href="/app/ptdaily-logs">
Daily Logs
</a>
</div>
</div>
</main>
{% include "footer" %}
<style>
.yellow-banner{
background-color: #FFE2BE;
padding: 24px;
text-align: center;
font-size: 14px;
font-weight: 500;
}
.yellow-banner a{
color: #202227;
}
.popular-topic-cointainer {
display: flex;
justify-content: space-between;
margin: 0;
gap: 32px;
}
.popular_topic_wrapper {
display: flex;
flex-direction: column;
}
.popolar_topic {
border: 2px solid #001a43;
border-radius: 5px;
padding: 10px;
width: 100%;
text-align: center;
font-family: 'GT Walsheim', sans-serif;
font-size: 20px;
font-weight: 500;
cursor: pointer;
text-decoration: unset;
color: #011a43;
}
.np-subpage-container {
padding: 24px 20px 32px 20px;
}
.np-learning-paths-resources-container-home {
border-radius: 4px;
padding: 0;
margin: 0 -12px;
}
.np-homepage-featured-courses {
justify-content: flex-start;
margin: 0 -16px;
}
.np-learning-paths {
background: unset;
}
.np-homepage-hero {
background: #001A43;
}
.np-homepage-hero-image{
flex-grow: 1;
flex-basis: 0;
}
.np-homepage-hero-content {
flex-basis: 60%;
flex-grow: 0;
position: relative;
text-align: left;
}
.np-homepage-featured{
margin-top: 0;
}
.np-homepage-featured-text {
align-items: flex-start;
display: flex;
padding: 0px;
text-align: left;
margin: 0;
}
.np-homepage-subheadline {
font-size: 16px!important;
line-height: 24px;
margin-top: 12px;
color: #FFFFFF;
opacity: 1;
}
.np-homepage-hero .np-homepage-headline {
font-family: 'GT Walsheim', sans-serif;
font-size: 2.65rem;
line-height: 3.35rem;
font-weight: 700;
}
.np-max-width{
max-width: 1148px;
padding: 0 24px;
}
.np-homepage-headline{
margin: 40px 0;
}
@media screen and (min-width: 768px) {
.np-max-width{
max-width: 1148px;
padding: 0 24px;
}
.np-homepage-headline, .np-homepage-featured .np-homepage-headline{
font-size: 1.85rem;
font-weight: 500;
font-family: 'GT Walsheim', sans-serif;
line-height: 2.35rem;
color: #202227;
}
}
/* Media query to stack hero content and image on smaller screens */
@media (max-width: 900px) {
.np-homepage-hero {
display: flex;
flex-direction: column;
/* Stack elements vertically */
align-items: center;
/* Center align */
}
.np-homepage-hero-content {
width: 100%;
/* Take full width */
margin-right: 0;
/* Reset margin */
order: 1;
/* Ensure this comes first */
margin: auto
}
.np-homepage-hero-image {
width: 50% !important;
/* Take full width */
order: 2;
/* Ensure this comes second */
height: 300px;
/* Keep height or adjust if necessary */
background-size: cover;
/* Cover to maintain aspect ratio */
margin: 0;
/* Prevent additional margin */
}
}
</style>
<script>
window.onload = function(){
const registered_label = document.querySelectorAll('.success');
registered_label.forEach( registered_label => {
if (registered_label.textContent.includes('registered')){
registered_label.classList.add('success_green');
}
})
};
</script>