Luminate has fully rebranded as Scintilla and all templates have been updated.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,278 @@
|
||||
{% assign catalog_courses = courses.in_catalog %}
|
||||
|
||||
{% assign survey_courses = "" %}
|
||||
{% assign survey_course_completed = false %}
|
||||
|
||||
{% 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="Home np-homepage-headline">
|
||||
{{ homepage.headline }}
|
||||
</div>
|
||||
<div class="hero-search-wrapper">
|
||||
<div class="Home np-homepage-subheadline">
|
||||
{{ homepage.subheadline }}
|
||||
</div>
|
||||
<form
|
||||
class="np-header-search np-hero-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}">
|
||||
{% if current_person.properties.language == "fr" %}
|
||||
<input
|
||||
aria-label="?"
|
||||
class="hero-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="?" />
|
||||
{% else %}
|
||||
<input
|
||||
aria-label="What are you looking for?"
|
||||
class="hero-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="What are you looking for?" />
|
||||
{% endif %}
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "homepage_ongoing_training", items: catalog_courses %}
|
||||
|
||||
{% comment %} {% include "homepage_topics" %} {% endcomment %}
|
||||
{% 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};
|
||||
}
|
||||
|
||||
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
|
||||
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;
|
||||
padding-bottom: 65px;
|
||||
}
|
||||
|
||||
.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: 12px;
|
||||
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: 380px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.popup-trigger,
|
||||
.survey-popup-trigger {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@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;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:1366px) {
|
||||
|
||||
.np-homepage-hero .np-homepage-headline {
|
||||
font-size: 48px;
|
||||
line-height: 58px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user