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

Added the new templates for Learning Paths. Some small script changes.

Browse Source
This commit is contained in:
Norm Rasmussen
2023-06-30 16:05:43 -04:00
parent f314daed98
commit 94dc876345
97 changed files with 2634 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
Custom_Templates/customer_templates/Scenario/_cards_featured_course.html.liquid
View File

@ -1,36 +1,36 @@
<div class="np-card np-no-horizontal-padding">
<div class="np-card-container">
<div class="np-learning-path np-featured-course">
<div class="np-featured-course-img-container">
<div class="np-card-image-content-top">
{% include "course_details" %}
<div class='np-card np-no-horizontal-padding'>
<div class='np-card-container'>
<div class='np-learning-path np-featured-course'>
<div class='np-featured-course-img-container'>
<div class='np-card-image-content-top'>
{% include 'course_details' %}
</div>
<img
class="np-card-image"
alt="{{ course.name }}"
src="{{ course.image_url }}"
style="width: 100%;"
class='np-card-image'
alt='{{ course.name }}'
src='{{ course.image_url }}'
style='width: 100%;'
>
</div>
<div class="np-card-text-wrapper" style="border: none !important;">
<div class='np-card-text-wrapper' style='border: none !important;'>
<div class="np-card-content np-card-padding np-card-content-vertical" style="border: none !important; background: #F2F2F2">
<h3 class="np-card-content-title" style="border: none;">
<div class='np-card-content np-card-padding np-card-content-vertical' style='border: none !important; background: #F2F2F2'>
<h3 class='np-card-content-title' style='border: none;'>
{{ course.name }}
</h3>
<div class="np-card-content-description" style='font-size: 16px !important; line-height: 24px !important; color: #2c4265 !important; font-family: Lexend !important;'>
<div class='np-card-content-description' style='font-size: 16px !important; line-height: 24px !important; color: #2c4265 !important; font-family: Lexend !important;'>
{{ course.full_description }}
</div>
<div class="np-card-content-footer" style='display: flex; justify-content: space-between;'>
<div class='np-card-content-footer' style='display: flex; justify-content: space-between;'>
<div class='np-card-content-footer-left'style='display: flex; justify-content: left;'>
{% comment %}<a
class="np-top-button np-button-font-color np-button" href="{% route course_enrollment, code: course.enrollment_code %}" style='background: linear-gradient(90deg, #089FB7 0%, #15824B 100%); font-weight: 800;
class='np-top-button np-button-font-color np-button' href='{% route course_enrollment, code: course.enrollment_code %}' style='background: linear-gradient(90deg, #089FB7 0%, #15824B 100%); font-weight: 800;
border-radius: 8px; margin-right: 24px;'
>{% endcomment %}
<a
class="np-top-button np-button-font-color np-button" href="{% route course_enrollment, code: course.enrollment_code %}" style='background: linear-gradient(45deg, #2c4265 0%, #34abe2 100%); font-weight: 800;
class='np-top-button np-button-font-color np-button' href='{% route course_enrollment, code: course.enrollment_code %}' style='background: linear-gradient(45deg, #2c4265 0%, #34abe2 100%); font-weight: 800;
border-radius: 8px; margin-right: 24px;'
>
{% if course.enrolled? == false %}
@ -43,7 +43,7 @@
{% t shared.continue %}
{% endif %}
</a>
<div class="np-card-progress np-button-color" style='font-weight: 700; font-size: 12px; align-self: center; text-transform: uppercase;'>
<div class='np-card-progress np-button-color' style='font-weight: 700; font-size: 12px; align-self: center; text-transform: uppercase;'>
{% t shared.progress, count: course.progress %}
</div>
</div>
@ -51,17 +51,17 @@
<div class='course-detail-rating-stars'>
{% for i in (1..5) %}
{% if course.properties.course_rating >= i %}
<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 0L12.5863 6.44033L19.5106 6.90983L14.1846 11.3597L15.8779 18.0902L10 14.4L4.12215 18.0902L5.81535 11.3597L0.489435 6.90983L7.41374 6.44033L10 0Z" fill="#089FB7"/>
<svg width='20' height='19' viewBox='0 0 20 19' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M10 0L12.5863 6.44033L19.5106 6.90983L14.1846 11.3597L15.8779 18.0902L10 14.4L4.12215 18.0902L5.81535 11.3597L0.489435 6.90983L7.41374 6.44033L10 0Z' fill='#089FB7'/>
</svg>
{% else %}
<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.25" d="M10 0L12.5863 6.44033L19.5106 6.90983L14.1846 11.3597L15.8779 18.0902L10 14.4L4.12215 18.0902L5.81535 11.3597L0.489435 6.90983L7.41374 6.44033L10 0Z" fill="#089FB7"/>
<svg width='20' height='19' viewBox='0 0 20 19' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path opacity='0.25' d='M10 0L12.5863 6.44033L19.5106 6.90983L14.1846 11.3597L15.8779 18.0902L10 14.4L4.12215 18.0902L5.81535 11.3597L0.489435 6.90983L7.41374 6.44033L10 0Z' fill='#089FB7'/>
</svg>
{% endif %}
{% endfor %}
</div>
<span class="np-details-label" style= 'display: flex; color: #2c4265;'>
<span class='np-details-label' style= 'display: flex; color: #2c4265;'>
{{course.properties.course_rating}} <div style='font-weight: 500; padding-left: 5px; color: #2c4265;'>({{course.properties.course_rating_count}}) </div>
</span>
</div>{% endcomment %}
@ -96,7 +96,7 @@
</style>
<script>
$(".np-card-content-description").css('font-size','16px !important')
$(".np-card-content-description").css('color','white !important')
$(".np-card-content-description").css('font-family', 'Lexend !important')
$('.np-card-content-description').css('font-size','16px !important')
$('.np-card-content-description').css('color','white !important')
$('.np-card-content-description').css('font-family', 'Lexend !important')
</script>

9
Custom_Templates/customer_templates/Scenario/_course_sorter.html.liquid Normal file
View File

@ -0,0 +1,9 @@
<script type="text/javascript">
var sortedCourses = $("[data-course='true']").sort(function(a, b) {
var positionA = parseInt($(a).attr("data-sort"));
var positionB = parseInt($(b).attr("data-sort"));
return (positionA < positionB) ? -1 : (positionA > positionB) ? 1 : 0;
});
$("#sorted-courses").html(sortedCourses);
</script>

261
Custom_Templates/customer_templates/Scenario/homepage.html.liquid
View File

@ -1,173 +1,88 @@
{% include "header" %}
{% include "messages" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
<div class="np-homepage-hero">
<img class="np-homepage-hero-image"
src="{{ homepage.artwork_url }}"
alt="{{ homepage.headline }}"
/>
<div class="np-homepage-hero-content">
<div class="np-homepage-headline np-header-font-color">
{{ homepage.headline }}
</div>
<div class="np-homepage-subheadline np-header-font-color">
{{ homepage.subheadline }}
</div>
</div>
</div>
<main class="np-main np-homepage">
{% include "sub_navigation" %}
<div class="np-homepage-featured np-max-width">
<div class="np-homepage-featured-text">
<div class="np-homepage-headline">
{{ homepage.featured_courses_headline }}
</div>
<div class="np-homepage-subheadline" style='opacity: 50%'>
{{ homepage.featured_courses_subheadline }}
</div>
</div>
{% if courses.in_catalog.any? %}
<div class="np-homepage-featured-courses row">
{% for course in courses.in_catalog %}
{% if course.name == 'Scenario Basics' or course.name == 'Core Concepts' %}
<div class="col-xs-12 coul-sm-8 col-md-12" style="margin:auto;">
{% include "cards_featured_course" with course %}
</div>
{% endif %}
{% 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>
{% include "section_popular_topics" %}
{% comment %}{% include "section_tips_tricks" %}{% endcomment %}
{% comment %}{% include "section_faqs" %}{% endcomment %}
</main>
{% include "footer" %}
<style>
.np-homepage-hero{
background: #34abe2;
margin-bottom: -2rem;
margin-top: -3rem;
padding-top: 1rem;
z-index: -1;
}
@media screen and (min-width: 420px) {
.np-homepage-hero-content {
padding-bottom: 5rem;
}
}
</style>
{% comment %}<style>
@media screen and (min-width: 350px) {
.np-homepage-hero {
height: 14rem;
}
}
@media screen and (min-width: 450px) {
.np-homepage-hero {
height: 11rem;
}
}
@media screen and (min-width: 768px) {
.np-homepage-hero {
height: 9rem;
}
.np-homepage-featured-text {
padding: 0 4rem 2rem;
}
.np-homepage-hero-image {
height: auto;
/* min-height: 350px; */
}
.np-homepage-hero-content {
padding: 5rem 4rem 2.25rem;
bottom: 0;
}
.np-homepage-hero-cta,
.np-button.np-homepage-hero-cta {
margin-top: 2.25rem;
height: 50px;
}
.np-homepage-hero .np-homepage-headline {
font-size: 36px;
line-height: 45px;
}
.np-homepage-hero .np-homepage-subheadline {
font-size: 18px;
line-height: 24px;
}
.np-button {
font-size: 0.875rem;
height: 40px;
}
.np-topics-list {
margin: 0 4.5%;
}
.np-topics-list .np-button-secondary {
margin: 6px;
flex: 0 1 calc(33.33% - 12px);
height: 52px;
}
}
@media screen and (min-width: 992px) {
.np-homepage-hero-content {
bottom: auto;
}
.np-homepage-hero .np-homepage-headline {
font-size: 40px;
line-height: 15px;
}
.np-homepage-hero .np-homepage-subheadline {
font-size: 20px;
line-height: 30px;
}
.np-topics-list .np-button-secondary {
flex: 0 1 calc(25% - 12px);
}
.np-homepage-featured {
margin-top: 6.25rem;
}
}
@media screen and (min-width: 1200px) {
.np-topics-list .np-button-secondary {
flex: 0 1 calc(20% - 12px);
}
.np-homepage-hero {
height: 7rem;
}
}
</style>{% endcomment %}
<script>
$(".np-sub-navigation-content-item-link:contains('Home')").parent().addClass("np-sub-navigation-content-item-active")
</script>
<script>
console.log(window.location.href);
</script>
{% include "header" %}
{% include "messages" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
<div class="np-homepage-hero">
<img class="np-homepage-hero-image"
src="{{ homepage.artwork_url }}"
alt="{{ homepage.headline }}"
/>
<div class="np-homepage-hero-content">
<div class="np-homepage-headline np-header-font-color">
{{ homepage.headline }}
</div>
<div class="np-homepage-subheadline np-header-font-color">
{{ homepage.subheadline }}
</div>
</div>
</div>
<main class="np-main np-homepage">
{% include "sub_navigation" %}
<div class="np-homepage-featured np-max-width">
<div class="np-homepage-featured-text">
<div class="np-homepage-headline">
{{ homepage.featured_courses_headline }}
</div>
<div class="np-homepage-subheadline" style='opacity: 50%'>
{{ homepage.featured_courses_subheadline }}
</div>
</div>
{% if courses.in_catalog.any? %}
<div class="np-homepage-featured-courses row" id="sorted-courses">
{% for course in courses.in_catalog %}
<div class="col-xs-12 coul-sm-8 col-md-12" data-course="true" data-sort="{{ course.properties.course_order }}" style="margin:auto;">
{% include "cards_featured_course" with course %}
</div>
{% endfor %}
</div>
{%- comment -%} {% if courses.featured.any? %} {% endif %}
<div class="np-homepage-featured-courses row">
{% for course in courses.featured %}
<div class="col-xs-12 coul-sm-8 col-md-12" style="margin:auto;">
{% include "cards_featured_course" with course %}
</div>
{% endfor %}
</div> {%- endcomment -%}
{% 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>
{% include "section_popular_topics" %}
{% comment %}{% include "section_tips_tricks" %}{% endcomment %}
{% comment %}{% include "section_faqs" %}{% endcomment %}
</main>
{% include "footer" %}
<style>
.np-homepage-hero{
background: #34abe2;
margin-bottom: -2rem;
margin-top: -3rem;
padding-top: 1rem;
z-index: -1;
}
@media screen and (min-width: 420px) {
.np-homepage-hero-content {
padding-bottom: 5rem;
}
}
</style>
<script>
$(".np-sub-navigation-content-item-link:contains('Home')").parent().addClass("np-sub-navigation-content-item-active")
</script>
{% include "course_sorter" %}

40
Custom_Templates/customer_templates/Scenario/scripttest.js
View File

@ -1,40 +0,0 @@
function checkIfInputsExist (){
window.setTimeout(function(){
// Regular expression to check if string is email
const regexExp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
// Grabs Email Address Value
const learnerEmail = $("#learner_email")[0].value;
// List of Emails to Block
const blockedEmails = [
"gmail.com", "yahoo.com", "hotmail.com", "aol.com", "outlook.com",
"icloud.com", "me.com", "mac.com"
]
if ($("#learner_email")[0].value.length > 0){
if(regexExp.test(learnerEmail) == true){
var slicedEmail = learnerEmail.split('@');
if (blockedEmails.indexOf(slicedEmail[1]) > -1) {
$("#learner_email").css("background", "salmon");
$("#bad_email_alert").css("color", "#f2f4f5");
$("#bad_email_alert").css("display", "block");
$("#submit_button").css("pointer-events","none");
}
else {
$("#learner_email").css("background", "#f2f4f5");
$("#bad_email_alert").css("display", "none");
$("#submit_button").css("pointer-events", "auto");
}
} else {
$("#learner_email").css("background", "#f2f4f5");
$("#bad_email_alert").css("display", "none");
$("#submit_button").css("pointer-events", "auto");
}
}
}, 500);
}
document.addEventListener('keyup', checkIfInputsExist);
console.log(123213213);