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

what? I just pushed

Browse Source
This commit is contained in:
Norm Rasmussen
2022-04-20 09:26:58 -04:00
parent 567c134943
commit fdb9739d2c
14 changed files with 329 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
NP_Custom_Templates/customer_templates/JnJVision/_cards_categories.html.liquid
View File

@ -1,101 +1,127 @@
<div class="row row-with-thumbnails">
<div class="{{ class }}">
<div class="np-card" >
<div class="np-card-container">
<div class="np-categories-image-content-top"> </div>
<div class="row categories-row">
<div class="{{ class }}">
<a class="np-card" href="/app/catalog?filter%5Bcategories_name%5D=professional+webinars">
<div class="category-card-container">
<img
class="np-categories-image"
alt="Podcasts"
src="https://s3.amazonaws.com/static.northpass.com/J%26J/conference-audience.jpg"
>
</div>
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
<p class="course-title-vision">
Professional Events
</p>
<div class="np-categories-content-footer">
</div>
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
<p class="course-title-vision">Professional Events</p>
<div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
</div>
</a>
</div>
</div>
<div class="np-card" >
<div class="np-card-container">
<div class="np-categories-image-content-top"> </div>
<div class="{{ class }}">
<a class="np-card" href="/app/catalog?filter%5Bcategories_name%5D=johnson+johnson+product+education">
<div class="category-card-container">
<img
class="np-categories-image"
alt="Product"
src="https://s3.amazonaws.com/static.northpass.com/J%26J/JNJ4.png"
>
</div>
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
<p class="course-title-vision">
Johnson & Johnson Product Education
</p>
<div class="np-categories-content-footer">
</div>
</div>
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
<p class="course-title-vision">Johnson & Johnson Product Education</p>
<div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
</div>
</a>
</div>
</div>
</div>
<div class="{{ class }}">
<div class="np-card" >
<div class="np-card-container">
<div class="np-categories-image-content-top"> </div>
<img
class="np-categories-image"
alt="Product"
src="https://s3.amazonaws.com/static.northpass.com/J%26J/couple_ipad_podcast.jpg"
>
</div>
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
<p class="course-title-vision">
Fine-Tuned Podcast Series
</p>
<div class="np-categories-content-footer">
</div>
</div>
</div>
<div class="np-card" >
<div class="np-card-container">
<div class="np-categories-image-content-top"> </div>
<img
class="np-categories-image"
alt="Product"
src="https://s3.amazonaws.com/static.northpass.com/J%26J/white_beard_eye_exam.jpg"
>
</div>
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
<p class="course-title-vision">
Challenging Cases Video Series
</p>
<div class="np-categories-content-footer">
</div>
</div>
<div class="{{ class }}" >
<a class="np-card" href="/app/catalog?filter%5Bcategories_name%5D=fine-tuned+podcast+series">
<div class="category-card-container">
<img
class="np-categories-image"
alt="Product"
src="https://s3.amazonaws.com/static.northpass.com/J%26J/couple_ipad_podcast.jpg"
>
</div>
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
<p class="course-title-vision">Fine-Tuned Podcast Series</p>
<div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
</div>
</a>
</div>
<div class="{{ class }}">
<a class="np-card" href="/app/catalog?filter%5Bcategories_name%5D=challenging+cases+video+series" >
<div class="category-card-container">
<img
class="np-categories-image"
alt="Product"
src="https://s3.amazonaws.com/static.northpass.com/J%26J/white_beard_eye_exam.jpg"
>
</div>
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
<p class="course-title-vision">Challenging Cases Video Series</p>
<div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
</div>
</a>
</div>
</div>
</div>
<style>
.col-xs-12.col-sm-6 {
height: 450px;
.col-lg-4 {
width: 25%;
}
.np-categories-image {
.categories-row {
padding-top:64px;
}
.categories-row .np-card {
padding:0;
display: flex;
flex-direction: column;
text-decoration:none;
cursor:pointer;
}
.category-card-container {
position: relative;
overflow: hidden;
height: 200px;
}
.category-card-container img {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
align: center;
width:250px;
height:230px;
}
.np-categories-content {
width: 250px;
height: 125px;
color: black;
opacity: 50%;
background: #F4F4F4;
color: #212121;
background: #fafafa;
font-size: 18px;
flex:2;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.np-categories-content p {
margin:0;
}
.np-categories-content .arrow-icon {
text-align:right;
margin-top:12px;
}
.np-categories-content .arrow-icon i {
color: #009999;
font-size: 32px;
}
.course-title-vision {
color: black;
color: #212121;
}
</style>

7
NP_Custom_Templates/customer_templates/JnJVision/_cards_course.html.liquid
View File

@ -54,6 +54,10 @@ the client wants to revert back. My categories boxes are below. {% endcomment %}
{{ course.name }}
</p>
<div class="np-card-content-footer">
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
{% if course.has_to_restart? %}
{% include "course_version_outdated_popup", path: course_path %}
{% endif %}
</div>
</div>
</a>
@ -146,6 +150,7 @@ the client wants to revert back. My categories boxes are below. {% endcomment %}
}
.course-title-vision {
font-family: "PlusJakartaSans-Regular" !important;
font-family: "PlusJakartaSans-Bold", !important;
font-weight: 700;
}
</style>

6
NP_Custom_Templates/customer_templates/JnJVision/_cards_featured_course.html.liquid
View File

@ -17,7 +17,7 @@
{{ course.name }}
</h3>
<div class="np-card-content-description" style='font-size: 16px !important; line-height: 24px !important; color: black !important; font-family: PlusJakartaSans-Regular !important;'>
<div class="np-card-content-description" style='font-size: 16px !important; line-height: 24px !important; color: black !important; font-family: Lexend !important;'>
{{ course.short_description }}
</div>
@ -40,7 +40,7 @@
{% t shared.progress, count: course.progress %}
</div>
</div>
<div class= "np-card-course-details">
<div class= "np-card-course-details" style='float: right; align-text: center; color: #cc0033; font-weight: 700; font-size: 10px;'>
{% include "course_details" %}
</div>
</div>
@ -65,5 +65,5 @@
<script>
$(".np-card-content-description").css('font-size','16px !important')
$(".np-card-content-description").css('color','black !important')
$(".np-card-content-description").css('font-family', 'PlusJakartaSans-Regular !important')
$(".np-card-content-description").css('font-family', 'Lexend !important')
</script>

2
NP_Custom_Templates/customer_templates/JnJVision/_cards_training_event.html.liquid
View File

@ -21,7 +21,7 @@
</div>
</div>
<div class="np-card-training-session-date-day">
{% if training_event.sessions.first.day < 10 %}0{% endif %}{{ training_event.sessions.first.day }}
{% if training_event.sessions.first.day < 10 %}0{% endif %}{{ training_event.sessions.first.day }}
</div>
<div class="np-button-background-color np-card-training-session-date-bar" style='border-right: 16px solid #006161;'></div>
</div>

56
NP_Custom_Templates/customer_templates/JnJVision/_catalog_courses.html.liquid Normal file
View File

@ -0,0 +1,56 @@
<div class="vision-catalog-card" href="{% route course_enrollment, code: course.enrollment_code %}" >
<div class="np-card-container">
<div class="np-card-image-content-top"> </div>
<img
class="np-card-image"
alt="{{ course.name }}"
src="{{ course.image_url }}"
>
</div>
<div class="np-card-content np-card-content-vertical np-card-padding course-card-content" style="background: #fafafa; color: black !important; height: 190px;">
<div class="course-title-vision">
{{ course.name }}
</div>
<div class="np-card-content-footer">
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
<a class="np-button np-button-wide" href="{{ course_path }}">
{% t shared.view %}
</a>
{% if course.has_to_restart? %}
{% include "course_version_outdated_popup", path: course_path %}
{% endif %}
</div>
</div>
</div>
<style>
.col-lg-4 {
width: 25%;
}
.vision-catalog-card {
background: #fafafa;
width: 300px;
height: 300px;
margin-bottom: 120px;
font-family: "PlusJakartaSans";
font-weight: 700;
}
.course-title-vision {
text-decoration: none !important;
}
.np-button.np-button-wide {
background-color: #cc0033;
color: white;
display: inline-flex;
width: auto;
height: 40px;
padding-left: 2rem;
padding-right: 2rem;
border-radius: 4px;
margin-left: 150px;
}
</style>

2
NP_Custom_Templates/customer_templates/JnJVision/_course_details.html.liquid
View File

@ -34,7 +34,7 @@
text-shadow: none;
float: right;
align: center;
color: #cc0033;
color: white;
font-weight: 700;
font-size: 10px;'
}

4
NP_Custom_Templates/customer_templates/JnJVision/_course_progress_and_cta.html.liquid
View File

@ -1,4 +1,4 @@
w<div class="np-top-cta-progress-content">
{% comment %}<div class="np-top-cta-progress-content">
<div class="np-top-cta-progress-title np-text-title">
{% t .header %}
</div>
@ -43,4 +43,4 @@ w<div class="np-top-cta-progress-content">
{% t shared.continue %}
{% endif %}
</a>
{% endif %}
{% endif %}{% endcomment %}

16
NP_Custom_Templates/customer_templates/JnJVision/_courses_catalog.html.liquid Normal file
View File

@ -0,0 +1,16 @@
{% if courses.in_catalog.any? %}
<div class="np-catalog-courses row row-with-thumbnails">
{% for course in courses.in_catalog %}
<div class="col-xs-12 col-md-6 col-lg-4 col-sm-2 np-stretch-content">
{% include "catalog_courses" %}
</div>
{% endfor %}
</div>
{% else %}
{% capture message %}
{% t shared.zero_state.courses.catalog,
key: current_school.course_vocabulary
%}
{% endcapture %}
{% include "courses_zero_state", message: message %}
{% endif %}

33
NP_Custom_Templates/customer_templates/JnJVision/_filter_dropdown.html.liquid Normal file
View File

@ -0,0 +1,33 @@
<div class="np-filter">
<div class="dropdown">
<button
class="np-button dropdown-button"
data-toggle-class="is-open"
data-toggle-escape
data-toggle-outside
data-toggle-target-next
type="button"
>
{% t shared.filters.filter %}
</button>
<div class="dropdown-menu" data-test="modal">
<form method="get">
{%
include "filter_select",
filters: filters,
key: key,
label: label
%}
<button
class="np-button dropdown-button-apply"
data-toggle-trigger-off
type="submit"
>
{% t shared.filters.apply %}
</button>
</form>
</div>
</div>
</div>

1
NP_Custom_Templates/customer_templates/JnJVision/_head.html.liquid
View File

@ -5,7 +5,6 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://s3.amazonaws.com/static.northpass.com/fonts/PlusJakartaSans-Regular.woff" rel="stylesheet">
<link href="https://s3.amazonaws.com/static.northpass.com/fonts/PlusJakartaSans-Bold.woff" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

2
NP_Custom_Templates/customer_templates/JnJVision/_homepage_events.html.liquid
View File

@ -254,7 +254,7 @@
margin: 40px auto 0;
}
.events-event {
.events-event {
padding: 50px 60px;
display: flex;
}

22
NP_Custom_Templates/customer_templates/JnJVision/catalog.html.liquid Normal file
View File

@ -0,0 +1,22 @@
{% include "header" %}
{% include "sub_navigation" %}
<main class="np-main np-catalog np-subpage-container np-max-width">
<div class="np-catalog-header-wrapper">
<div class="np-catalog-header">
<div class="np-resource-title">{{ catalog.headline }}</div>
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
</div>
{% capture label %}{% t shared.filters.by_category %}{% endcapture %}
{% if courses.in_catalog.any? %}
{%
include "filter_dropdown",
filters: courses.filters,
key: "category_uuid",
label: label
%}
{% endif %}
</div>
{% include "courses_catalog" %}
</main>
{% include "footer" %}

88
NP_Custom_Templates/customer_templates/JnJVision/homepage.html.liquid
View File

@ -4,11 +4,30 @@
{% include "homepage_hero_carousel" %}
{% comment %} {% include "sub_navigation" %} {% endcomment %}
<div class="np-subpage-container" id="featured">
<div class="row">
<div class="col-12 col-lg-4 courses-left-small">
{% include "cards_categories", class: "col-xs-12 col-sm-6" %}
<div class="row intro-row" style="margin-top:64px;">
<div class="col-12 col-md-6 col-lg-7">
<div class="homepage-intro">
<div class="homepage-intro-headline np-header-font-color">
{{ homepage.featured_courses_headline }}
</div>
<div class="homepage-intro-subheadline">
{{ homepage.featured_courses_subheadline }}
</div>
</div>
</div>
<div class="col-12 col-lg-8">
<div class="col-0 col-lg-1"></div>
<div class="col-12 col-md-6 col-lg-4">
<a href="{% route catalog %}" class="catalog-card">
<p class="catalog-card-header">Course Library</p>
<p class="catalog-card-subhead">Click here to explore our catalog of courses&nbsp;<i class="fa fa-arrow-right"></i></p>
</a>
</div>
</div>
{% include "cards_categories", class: "col-xs-12 col-sm-6 col-md-4 col-lg-3" %}
<div class="row">
{% comment %} <div class="col-12 col-lg-8">
<div class="np-homepage-featured np-max-width">
<div class="np-homepage-featured-text">
<div class="np-homepage-headline">
@ -38,7 +57,7 @@
</div>
{% endif %}
</div>
</div>
</div> {% endcomment %}
</div>
</div>
@ -51,21 +70,66 @@
</main>
{% include "footer" %}
<script>
$(".np-sub-navigation-content-item-link:contains('Home')").parent().addClass("np-sub-navigation-content-item-active")
</script>
<style>
.homepage-intro {
margin-bottom:64px;
}
.homepage-intro-headline {
font-size: 36px;
font-weight: bold;
margin-bottom:16px;
}
.homepage-intro-subheadline {
font-size: 18px;
line-height: 26px;
}
.np-homepage .np-subpage-container {
padding: 0 22px 50px;
max-width: 1920px;
padding: 0 24px 50px;
max-width: 1400px;
margin:auto;
}
.np-homepage .np-subpage-container > .row {
margin:0;
.catalog-card {
background: #fafafa;
padding: 32px;
color: #212121;
text-decoration: none;
display: flex;
height: 100%;
flex-direction: column;
justify-content: space-between;
cursor:pointer;
}
.catalog-card:hover {
color: #212121;
}
.catalog-card:hover .catalog-card-subhead {
color: #009999;
}
.catalog-card-header {
font-size: 24px;
font-weight: bold;
}
.catalog-card-subhead {
font-size:18px;
line-height:22px;
color:#009999;
display:inline-flex;
align-items: center;
}
.np-card-content {
background: #f4f4f4!important;
}

24
NP_Custom_Templates/customer_templates/JnJVision/styles.css.liquid
View File

@ -49,19 +49,20 @@
*/
@font-face {
font-family: "PlusJakartaSans-Regular";
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/PlusJakartaSans-Regular.woff);
font-family: "PlusJakartaSans";
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/PlusJakartaSans-Regular.woff) format('woff');
font-weight: normal;
}
@font-face {
font-family: "PlusJakartaSans-Bold";
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/PlusJakartaSans-Bold.woff);
font-family: "PlusJakartaSans";
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/PlusJakartaSans-Bold.woff) format('woff');
font-weight: bold;
}
body {
background: white;
font-family: "PlusJakartaSans-Regular", sans-serif;
font-family: "PlusJakartaSans", sans-serif;
}
/* div {
@ -80,7 +81,7 @@ body {
.np-training-session-sessions-title,
.np-content-instructors-content-name,
.np-content-instructors-content-info {
color: #fff;
color: black;
}
.np-main .np-resource-subtitle,
@ -612,11 +613,10 @@ body {
.np-top-button.np-button.np-button-secondary,
.np-button.dropdown-button {
background-color: transparent !important;
background-image: none;
border: 1px solid rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, 0.5);
background-color: #fafafa;
padding: 0 1.25rem;
font-weight: 600;
border: 2px solid #fafafa;
}
.np-button.np-background-color,
@ -1035,7 +1035,7 @@ button.jryxug {
.np-course-detail {
font-size: 1.125rem;
color: #00000;
color: #000000;
flex: 0 1 calc(33.33%);
}
@ -1156,7 +1156,7 @@ button.jryxug {
.np-button.dropdown-button:after {
content: "\f078";
font-family: "PlusJakartaSans-Bold";
font-family: "PlusJakartaSans";
position: absolute;
width: 20px;
height: 100%;