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

Changed up some cin7 templates.

Browse Source
This commit is contained in:
Norm Rasmussen
2024-01-29 17:03:30 -05:00
parent e01aee1612
commit 8b29b4b425
5 changed files with 269 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
Custom_Templates/customer_templates/Cin7 Customers/_header.html.liquid
View File

@ -86,7 +86,7 @@
{% if current_person.signed_in? %}
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
<form action="{% route search %}" method="get" data-test="desktop-search">
<i class="header-search-icon far fa-search np-header-font-color"></i>
<i id="search-icon" class="header-search-icon far fa-search np-header-font-color"></i>
<input
aria-label="{% t .search %}"
class="header-search-input"
@ -171,7 +171,7 @@
>
<input
aria-label="{% t .search %}"
class="np-header-search-input"
class="np-header-search-input header-search-input"
type="text"
name="q"
placeholder="{% t .search %}"
@ -206,4 +206,42 @@
</div>
</div>
{% include "messages" %}
<style>
.header-search-input {
display: none;
}
[data-test="desktop-search"] {
display: flex;
align-items: center;
gap: 20px;
}
.np-header-desktop-nav-list {
width: 100%;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var searchIcon = document.getElementById("search-icon");
var searchInput = document.querySelector(".header-search-input");
searchIcon.addEventListener("click", function(event) {
event.stopPropagation();
if (searchInput.style.display === "block") {
searchInput.style.display = "none";
} else {
searchInput.style.display = "block";
}
});
document.addEventListener("click", function(event) {
if (event.target !== searchIcon && event.target !== searchInput) {
searchInput.style.display = "none";
}
});
});
</script>

57
Custom_Templates/customer_templates/Cin7 Customers/catalog.html.liquid
View File

@ -1,22 +1,29 @@
{% assign omni = false %}
{% assign core = false %}
{% if current_person.signed_in? %}
{% for group in current_person.groups %}
{% if group.id == '9daeef1e-bd6c-47da-a343-ef772ba88300' %}
{% assign core = true %}
{% elsif group.id == 'afa31e2d-646e-4b7e-b65e-c426dc30ec5c' %}
{% assign omni = true %}
{% endif %}
{% endfor %}
{% endif %}
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
<div class="hero-homepage">
<div class="np-max-width">
<div class="hero-text">Course courses</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 class="hero-text">Course Catalog</div>
<div class="hero-subheading">Get the skills and knowledge you need at the moment you need them. Explore our full course catalog.</div>
</div>
</div>
<main class="np-main np-catalog np-subpage-container np-max-width">
<main class="np-main np-catalog np-subpage-container np-max-width catalog-container">
<div class="filter-container">
{% include 'filters_catalog' %}
</div>
<div class="catalog-content-wrapper">
<div class="catalog-courses-container">
{% include "courses_catalog" %}
@ -26,9 +33,19 @@
{% include "footer" %}
<style>
.catalog-container {
display: flex;
gap: 20px;
}
.filter-container {
width: 25%;
margin: 10px;
}
.catalog-content-wrapper {
display: flex;
gap: 20px;
width: 75%;
}
.filters-container {
width: 20%;
@ -38,4 +55,18 @@
.catalog-courses-container {
width: 100%;
}
</style>
@media only screen and (max-width: 768px) {
.catalog-container {
flex-direction: column;
align-items: center;
}
.filter-container {
width: 100%;
}
.catalog-content-wrapper {
width: 100%;
}
}
</style>

46
Custom_Templates/customer_templates/Cin7 Customers/homepage.html.liquid
View File

@ -10,9 +10,7 @@
{% endif %}
{% endfor %}
{% endif %}
<div>core {{core}}</div>
<div>omni {{omni}}</div>
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.featured %}
@ -33,12 +31,12 @@
{% if core %}
<div class="heading lora">New to Cin7 Core? Start learning here!</div>
<div class="section-content">
{% include "category_carousel"%}
</div>
{% elsif omni %}
<div class="heading lora">New to Cin7 Omni? Start learning here!</div>
<div class="section-content">
{% include 'my_learning_paths_carousel' %}
{% include 'learning_path_carousel' %}
</div>
{% elsif omni %}
<div class="heading lora">New to Cin7 Omni? Start learning here!</div>
<div class="section-content">
{% include "category_carousel"%}
</div>
{% endif %}
</div>
@ -51,34 +49,12 @@
<div class="button-wrapper">
<a class="catalog-btn" href="/app/catalog">Browse All Courses</a>
</div>
<div class="section section-info np-max-width">
<div class="heading lora">Empowering education for Connected Inventory Performance</div>
<div class="section-content">
<div class="info-wrapper">
<div class="info">
<img class="info-icon" src="https://s3.amazonaws.com/static.northpass.com/Cin7/icons/in+depth+learning.png" alt="">
<div class="info-content">
<div class="info-heading">In-depth learning</div>
<div class="info-desc">Created by our subject matter experts</div>
</div>
</div>
<div class="info">
<img class="info-icon" src="https://s3.amazonaws.com/static.northpass.com/Cin7/icons/Always+available.png" alt="">
<div class="info-content">
<div class="info-heading">Always available</div>
<div class="info-desc">Choose when and what to learn at your own pace</div>
</div>
</div>
<div class="info">
<img class="info-icon" src="https://s3.amazonaws.com/static.northpass.com/Cin7/icons/Designed+for+everyone.png" alt="">
<div class="info-content">
<div class="info-heading">Designed for everyone</div>
<div class="info-desc">From basic to advanced, courses for your whole team</div>
</div>
</div>
</div>
<div class="section section-info">
<div class="np-max-width info-section-padding">
{% include 'homepage_testimonials' %}
</div>
</div>
</div>
</div>
</main>
{% include "footer" %}

168
Custom_Templates/customer_templates/Cin7 Customers/styles.css.liquid
View File

@ -20,6 +20,11 @@ body {
.hero-text {
font-family: 'Lora';
}
.np-header-desktop-nav {
display: flex;
flex-direction: row-reverse;
flex-grow: 0;
}
.np-header-desktop-nav-link {
font-weight: 700;
}
@ -28,6 +33,9 @@ body {
border-radius: 8px;
max-width: 150px;
}
.header-search-icon {
font-weight: 800;
}
.note-desc {
font-size: 1vw
}
@ -36,7 +44,7 @@ body {
font-weight: 400;
}
.hero-homepage {
background: url('https://s3.amazonaws.com/static.northpass.com/Cin7/Hero+banner.png');
background: url('https://s3.amazonaws.com/static.northpass.com/Cin7/Hero+image+swirl+1020x300+-+all+instances.png');
background-position: center;
background-size: cover;
padding: 5%;
@ -44,6 +52,7 @@ body {
}
.hero-subheading {
margin-top: 2%;
font-size: 1.25rem;
}
.np-sub-navigation-content-item-active {
background: #002f6f !important;
@ -108,10 +117,10 @@ body {
font-size: 2.5rem;
color: #002f6f;
padding: 2rem 0;
font-weight: 400;
font-weight: 600;
}
.section {
padding-bottom: 3rem;
padding: 1rem 0;
}
.section-featured {
background: #fff;
@ -126,6 +135,20 @@ body {
align-items: center;
}
.card-image {
position: relative;
}
.np-card-ribbon {
top: 0;
right: 0;
border-radius: 0 20px;
text-transform: none;
font-size: 0.85rem;
font-weight: 600;
padding: 5px 12.5px;
}
.lp-progress-text {
font-weight: 700;
font-size: 1.5rem;
@ -138,6 +161,12 @@ body {
text-decoration: none;
font-weight: 700;
white-space: nowrap;
border: 1px solid #002f6f;
}
.lp-button:hover {
background: none;
border: 1px solid #002f6f;
color: #002f6f;
}
.lp-course-card {
margin: 30px 0;
@ -165,7 +194,7 @@ body {
margin-top: 20px;
}
.card {
margin: 10px;
margin: 10px;
}
.right-arrow {
@ -190,7 +219,7 @@ body {
font-size: 2.5rem;
color: #002f6f;
padding: 2rem 0;
font-weight: 400;
font-weight: 600;
margin-left: 2rem;
}
@ -290,15 +319,18 @@ body {
border-radius: 25px;
text-decoration: none;
font-weight: 700;
border: 1px solid #002f6f;
}
.button-wrapper {
display: flex;
justify-content: center;
padding: 2.5% 0;
}
.info {
display: flex;
align-items: center;
max-width: 350px;
gap: 5%;
}
.info-wrapper {
display: flex;
@ -322,23 +354,63 @@ body {
opacity: 1;
}
.section-info {
background: #f5f1ed;
}
.np-footer {
background: url('https://s3.amazonaws.com/static.northpass.com/Cin7/Footer+background.png');
background-size: cover;
background-repeat: round;
height: 25%;
}
.footer-heading {
font-size: 1.25rem;
color: #fff;
font-weight: 700;
border-bottom: 1px solid #fff;
padding: 10px 0;
width: 150px;
}
.np-footer-navigation-link {
color: #fff;
font-weight: 500;
}
.info-section-heading {
padding: 5% 0;
font-weight: 400;
}
.section-content-info {
padding-bottom: 5%;
}
.info-content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.np-footer-top {
display: flex;
flex-direction: row;
align-items:flex-start;
}
.np-footer-navigation-list {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.np-footer-navigation-link {
padding: 10px 0;
}
.np-footer-navigation {
min-height: 52px;
display: flex;
width: 100%;
justify-content: end;
padding: 0 5%;
}
.np-learning-path-outline-name {
font-weight: 600;
@ -369,7 +441,7 @@ body {
font-size: 2.5rem;
color: #002f6f;
padding: 3rem 2rem;
font-weight: 700;
font-weight: 500;
}
.category-card {
text-decoration: none;
@ -377,4 +449,86 @@ body {
.page-content {
margin: 20px;
}
}
.catalog-btn:hover {
background: #05CBBF;
border: 1px solid #002f6f;
color: #002f6f;
}
.info-section-padding {
padding: 0 20px;
}
.zero-state-wrapper {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.zero-button-wrapper {
display: flex;
}
.zero-img {
max-width: 400px;
}
.badge-card-image {
width: 60%;
}
.card-badge {
background: #f8f5f2;
display: flex;
justify-content: center;
padding: 2rem;
border-radius: 20px 20px 0 0;
}
.card-category {
background: #002f6f;
display: flex;
justify-content: center;
padding: 2rem;
border-radius: 20px 20px 0 0;
}
.card-content-badge {
text-align: center;
}
.completed-courses {
margin-top: 10px;
font-weight: 500;
color: #002f6f;
}
@media only screen and (max-width: 768px) {
.hero-text {
font-size: 2.5rem;
}
.hero-subheading {
font-size: 1rem;
}
.heading, .heading-dashboard {
font-size: 2rem;
}
.info-section-heading {
text-align: center;
}
.info-wrapper {
justify-content: center;
}
.np-footer-navigation {
justify-content: flex-start;
}
.np-footer-navigation-link {
padding: 0;
margin: 10px;
}
.catalog-container {
flex-direction: column;
align-items: center;
}
.filter-container {
width: 100%;
}
.catalog-content-wrapper {
width: 100%;
}
}

13
CustomerNotes/G2/G2.md
View File

@ -492,3 +492,16 @@ Currently at: 35
Going to do a big push the week of the 23rd. "Continue your year of professional growth"
Influenced $6.1m in prospects and customers - retention, revenue, new revenue.
## 01/29/2024
Erin to have new course up by February 19th
Themed emails every quarter
Emails not currently segmented by new and exisiting G2U learners. Metrics to observe:
* Average Progress
* Num of Completed
* Num of Enrolled
* Num of Started