norm/Gainsight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Notes for Larson Texts/Big ideas, added the ghost notes templates. Updated luminate's templates

Browse Source
This commit is contained in:
Norm Rasmussen
2023-08-24 17:06:08 -04:00
parent 63c33b5f17
commit 332b99d3ec
57 changed files with 560 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

308
Custom_Templates/customer_templates/Walmart Luminate Prod/homepage.html.liquid Normal file
View File

@ -0,0 +1,308 @@
{% assign catalog_courses = courses.in_catalog %}
{% include "header" %}
<main class="np-main np-homepage">
<div class="np-homepage-hero">
<div class="np-homepage-hero-container">
<div class="np-homepage-hero-content">
<div class="np-homepage-headline">
{{ homepage.headline }}
</div>
<div class="hero-search-wrapper">
<div class="np-homepage-subheadline">
{{ homepage.subheadline }}
</div>
<form
class="np-header-search np-hero-search"
data-test="mobile-search"
method="get"
action="{% route search %}"
>
<input
aria-label="What are you looking for?"
class="hero-search-input"
type="text"
name="q"
placeholder="What are you looking for?"
/>
<i class="np-header-search-icon hero-search-icon far fa-search"></i>
</form>
</div>
</div>
<img class="np-homepage-hero-image"
src="{{ homepage.artwork_url }}"
alt="{{ homepage.headline }}"
/>
</div>
</div>
{% include "sub_navigation" %}
{% include "homepage_featured", items: catalog_courses %}
<div class="np-max-width np-homepage-row-wrapper">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12" style="display:flex; flex-direction:column;">
<div class="np-section-header">Progress Tracker</div>
<div class="learning-path-progress-container">
<div class="row">
{% assign lps_in_progress = 0 %}
{% assign enrolled_learning_paths = learning_paths.enrolled | sort: "progress" | reverse %}
{% for learning_path in enrolled_learning_paths %}
{% if learning_path.progress > 0 %}
{% assign lps_in_progress = lps_in_progress | plus: 1 %}
{% if lps_in_progress < 4 %}
<div class="col-xs-12 col-md-4">
{% include "cards_learning_path_progress" %}
</div>
{% endif %}
{% endif %}
{% endfor %}
{% if lps_in_progress > 0 %}
<div class="see-more-wrapper">
<a href="/app/dashboard" style="margin-top:24px;">See more</a>
</div>
{% endif %}
{% if lps_in_progress == 0 %}
<div class="col-xs-12">
<div class="np-learning-paths-resources-container">
<div class="np-zero-state-text">
Yikes! You don't have any learning Paths in progress.
</div>
<img class="np-zero-state-learning-paths" alt="" />
</div>
</div>
{% endif %}
</div>
</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 "homepage_ongoing_training", items: catalog_courses %}
{% include "homepage_topics" %}
</main>
{% include "footer" %}
<script>
if (window.location.pathname == "/app") {
document.querySelector(".np-sub-navigation").classList.add("homepage-nav")
document.querySelector(".np-header").classList.add("homepage-nav")
}
document.querySelector(".np-hidden-desktop .dropdown-arrow").addEventListener("click", function(e) {
if (e.target.parentElement.classList.contains("open")) {
e.target.parentElement.classList.remove("open")
} else {
e.target.parentElement.classList.add("open")
}
})
window.onload = function () {
var stickySubNav = document.querySelector('.np-sub-navigation');
var headerOffset = findOffset(stickySubNav);
window.onscroll = function() {
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (bodyScrollTop > (headerOffset.top - 24)) {
stickySubNav.classList.add('fixed');
} else {
stickySubNav.classList.remove('fixed');
}
};
};
function findOffset(element) {
var top = 0, left = 0;
do {
top += element.offsetTop || 0;
left += element.offsetLeft || 0;
element = element.offsetParent;
} while(element);
return {
top: top,
left: left
};
}
</script>
<script>
window.addEventListener("load", function() {
var progressCards = document.querySelectorAll(".np-card-learning-path-progress");
for (var i = 0; i < progressCards.length; i++ ) {
var lpProgressCard = progressCards[i]
var progressRing = lpProgressCard.querySelector(".progress-ring")
let circle = progressRing.querySelector(".circle-progress")
let total = progressRing.getAttribute("data-total")
let numCompleted = lpProgressCard.querySelector(".lp-completed-items span > div").getAttribute("data-completed")
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;
const percent = numCompleted / total
console.log("percent: ", percent)
setProgress(percent, circle)
}
function setProgress(percent, circle) {
const offset = circumference - percent * circumference;
circle.style.strokeDashoffset = offset;
}
})
</script>
<style>
.np-homepage-hero {
background-color:#3C228A;
padding: 40px 24px 24px;
flex-direction: column;
}
.np-homepage-hero-image {
object-fit: unset;
width: 115px;
height: auto;
min-height: unset;
margin-top:24px;
}
.np-homepage-hero-content {
position:relative;
padding:0;
color:#fff;
}
.np-homepage-hero .np-homepage-headline {
font-weight: 700;
font-size: 24px;
line-height: 33px;
margin-bottom:24px;
}
.np-homepage-subheadline {
font-size: 20px;
line-height: 24px;
margin-bottom:8px;
opacity:1;
}
.np-hero-search {
width:100%;
}
.hero-search-input {
background-color:#F1F3F4;
border-radius:4px;
padding: 14px 19px 14px 44px;
border:none;
font-size:14px;
line-height:19px;
width: 100%;
background:#fff;
}
.hero-search-icon {
right:unset;
left:16px;
color:#6C6C6C;
}
.np-homepage-row-wrapper {
padding: 0 16px;
margin-bottom:56px;
}
.np-homepage-featured-empty {
margin: 0;
border: 2px solid #dadce0;
border-radius: 8px;
padding: 60px 32px;
}
.learning-path-progress-container,
.learning-path-progress-container > .row {
height:100%;
}
@media (min-width:768px) {
.np-homepage-hero-container {
display:flex;
align-items:center;
}
.np-homepage-hero .np-homepage-headline {
font-size: 40px;
line-height: 50px;
margin-bottom:20px;
text-align:left;
}
.np-homepage-hero-image {
width: 200px;
height: auto;
margin: 0 0 0 64px;
}
.hero-search-wrapper {
display:flex;
}
.np-hero-search {
margin-left:32px;
flex:2;
}
}
@media (min-width:768px) and (max-width:1365px) {
.np-homepage-hero .np-homepage-headline {
font-size: 3.516vw;
line-height: 4.249vw;
}
}
@media (min-width:1200px) {
.np-homepage-hero-image {
width: 300px;
margin: 0 0 0 100px;
}
}
@media (min-width:1366px) {
.np-homepage-hero .np-homepage-headline {
font-size: 48px;
line-height: 58px;
}
}
</style>