backedup cin7 templates. Cloned more courses. Domains to csv for anthology was completed. new GAS script for cin7 courses within a google sheet.

This commit is contained in:
Norm Rasmussen
2024-03-26 17:28:59 -04:00
parent 299fda0696
commit 30f5cfd5e4
30 changed files with 640 additions and 56 deletions

Binary file not shown.

View File

@ -1,4 +1,4 @@
<div class="card" categories="{%for category in course.categories%}{{category.name}},{%endfor%}" duration="{{course.properties.course_duration}}">
<div class="card" categories="{%for category in course.categories%}{{category.name}}[$]{%endfor%}" duration="{{course.properties.course_duration}}">
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
<a class="lp-link" href="{{ course_path }}">
<div class="card-image">
@ -16,7 +16,7 @@
{% endif %}
</div>
<div class="card-content">
<div class="card-type">COURSE <i class="far fa-graduation-cap"></i></div>
<div class="card-type"><i class="far fa-graduation-cap"></i> COURSE </div>
<h3 class="card-content-title course-name">
{{ course.name }}
</h3>
@ -30,10 +30,10 @@
{{course.properties.course_duration}} min
</div>
{% endif %}
{% unless course.properties.audience == 'missing property: audience' %}
{% unless course.properties.recommended_for_group == 'missing property: audience' %}
<div class="recommended">
<i class="far fa-users"></i>
{{course.properties.audience}}
{{course.properties.recommended_for_group}}
</div>
{% endunless %}
</div>

View File

@ -1,11 +1,13 @@
<div class="np-card np-no-horizontal-padding">
<div class="np-card np-no-horizontal-padding lp-card" categories="{%for category in learning_path.categories%}{{category.name}}[$]{%endfor%}">
<div class="np-card-container">
<div class="np-learning-path">
<div class="lp-image-container">
<img
alt="{{ learning_path.name }}"
class="np-card-image np-learning-path-image"
src="{{ learning_path.image_url }}"
/>
</div>
<div class="np-card-text-wrapper">
<div class="np-hidden-desktop np-card-header">
<i class="np-card-header-icon far fa-road"></i>

View File

@ -6,6 +6,7 @@
class="learning-path-card-image"
src="{{ learning_path.image_url }}"
/>
{% if learning_path.name contains "Omni" or learning_path.name contains "Core"%}
<div class="np-card-ribbon" {% if learning_path.name contains "Omni" %} style="background: #0026b2;"{% endif %}>
{% if learning_path.name contains "Omni" %}
Omni
@ -13,9 +14,10 @@
Core
{% endif %}
</div>
{%endif%}
</div>
<div class="card-content">
<div class="card-type">LEARNING PATH <i class="far fa-road"></i></div>
<div class="card-type"><i class="far fa-road"></i> LEARNING PATH</div>
<h3 class="card-content-title">
{{ learning_path.name }}
</h3>

View File

@ -0,0 +1,25 @@
<a class="card category-card" href="/app/learning_paths?category={{category.name}}&category=Deep Dive: Core">
<div class="core-category-wrapper">
<div class="card-category card-category-core">
<img class="badge-card-image card-category-image-core"
{% if category.name == 'Warehouse Operations: Core' %}
src="{{category_images[4]}}" alt=""
{% elsif category.name == 'Admin: Core' %}
src="{{category_images[1]}}" alt=""
{% elsif category.name == 'Product Management: Core' %}
src="{{category_images[2]}}" alt=""
{% elsif category.name == 'Accounting: Core' %}
src="{{category_images[0]}}" alt=""
{% elsif category.name == 'Simple Manufacturing: Core' %}
src="{{category_images[3]}}" alt=""
{% endif %}
>
</div>
<div class="card-content card-content-core">
<h3 class="card-content-title">{{category.name | replace: ": Core", " Deep Dives"}}</h3>
<div class="course-desc course-desc-category-core">Level up your expertise and enhance your operations with {{category.name | replace: ": Core", " Deep Dives"}}.</div>
</div>
</div>
</a>

View File

@ -24,7 +24,7 @@
$('.category-carousel').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 5,
slidesToScroll: 4,
prevArrow: "<i class='control-carousel fas fa-chevron-left left-arrow'></i>",
nextArrow: "<i class='control-carousel fas fa-chevron-right right-arrow'></i>",
responsive: [
@ -58,7 +58,7 @@
padding: 1rem 0;
height: auto;
}
.my-courses-carousel {
.category-carousel {
margin: 0 1rem;
}
</style>

View File

@ -0,0 +1,64 @@
{% assign unique_category = "" %}
{% assign category_images = 'https://s3.amazonaws.com/static.northpass.com/Cin7/categories+images+core+/Accounting+Deep+Dives+-+Thumbnails.png, https://s3.amazonaws.com/static.northpass.com/Cin7/categories+images+core+/Administrative+Deep+Dives+-+Thumbnail.png, https://s3.amazonaws.com/static.northpass.com/Cin7/categories+images+core+/Product+Management+Deep+Dives+-+Thumbnail.png, https://s3.amazonaws.com/static.northpass.com/Cin7/categories+images+core+/Simple+Manufacturing+Deep+Dives+-+Thumbnail.png, https://s3.amazonaws.com/static.northpass.com/Cin7/categories+images+core+/Warehouse+Operations+Deep+Dives+-+Thumbnail.png' | split: ', ' %}
{% assign category_counter = 0 %}
{% assign core_categories = 'Warehouse Operations: Core, Admin: Core, Product Management: Core, Accounting: Core, Simple Manufacturing: Core' | split: ", " %}
<div class="category-carousel-core">
{% for learning_path in learning_paths.available %}
{% for category in learning_path.categories %}
{% if core_categories contains category.name %}
{% unless unique_category contains category.name %}
{% include 'category_cards_core' counter: category_counter %}
{% assign unique_category = unique_category | append: category.name %}
{% assign category_counter = category_counter | plus: 1 %}
{% if category_counter > 3 %}
{% assign category_counter = 0 %}
{% endif %}
{% endunless %}
{% endif %}
{% endfor %}
{% endfor %}
</div>
<script>
$('.category-carousel-core').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
prevArrow: "<i class='control-carousel fas fa-chevron-left left-arrow'></i>",
nextArrow: "<i class='control-carousel fas fa-chevron-right right-arrow'></i>",
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</script>
<style>
.slick-track {
display: flex;
}
.card {
height: 100%;;
}
.card-wrapper {
padding: 1rem 0;
height: auto;
}
.category-carousel-core {
margin: 0 1rem;
}
</style>

View File

@ -1,3 +1,27 @@
{% assign omni = false %}
{% assign core = false %}
{% assign redirect = false %}
{% if current_person.signed_in? %}
{% for group in current_person.groups %}
{% if group.name contains 'Core' %}
{% assign core = true %}
{% elsif group.name contains 'Omni' %}
{% assign omni = true %}
{% endif %}
{% endfor %}
{% endif %}
{% if core and course.name contains 'Omni' %}
{% assign redirect = true %}
{% elsif omni and course.name contains 'Core' %}
{% assign redirect = true %}
{% endif %}
{% if redirect %}
<script>window.location.replace('/app')</script>
{% endif %}
<div class="np-card-container">
<div class="lp-header-container">
<div class="lp-heading lora course-name"> {{ course.name }}</div>

View File

@ -23,6 +23,13 @@
{% t .retake, key: current_school.course_vocabulary %}
</button>
</form>
{% else %}
{% if current_person.signed_in? == false%}
<a
class="lp-button" href="/learners/sign_in"
>
Sign In
</a>
{% else %}
<a
class="lp-button"
@ -43,4 +50,5 @@
{% endif %}
</a>
{% endif %}
{% endif %}

View File

@ -44,7 +44,7 @@
$('.feature-courses-carousel').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 5,
slidesToScroll: 4,
prevArrow: "<i class='control-carousel fas fa-chevron-left left-arrow'></i>",
nextArrow: "<i class='control-carousel fas fa-chevron-right right-arrow'></i>",
responsive: [
@ -78,7 +78,7 @@
padding: 1rem 0;
height: auto;
}
.my-courses-carousel {
.feature-courses-carousel {
margin: 0 1rem;
}
</style>

View File

@ -150,15 +150,17 @@ document.addEventListener("DOMContentLoaded", function() {
});
var urlParams = new URLSearchParams(window.location.search);
var categoryFromUrl = urlParams.get('category');
var categoriesFromUrl = urlParams.getAll('category');
var durationFromUrl = urlParams.get('duration');
if (categoryFromUrl) {
var categoryCheckbox = document.getElementById(categoryFromUrl);
if (categoriesFromUrl.length > 0) {
categoriesFromUrl.forEach(function(category) {
var categoryCheckbox = document.getElementById(category);
if (categoryCheckbox) {
categoryCheckbox.click();
}
}
});
}
if (durationFromUrl) {
var durationCheckbox = document.getElementById(durationFromUrl);
@ -210,7 +212,7 @@ function getSelectedDurations() {
}
function matchesCategories(courseCategories, selectedCategories) {
var courseCategoriesArray = courseCategories.split(',').map(function (category) {
var courseCategoriesArray = courseCategories.split('[$]').map(function (category) {
return category.trim();
});

View File

@ -154,7 +154,6 @@
</div>
</div>
{% else %}
{% unless log_out %}
<a
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
aria-label="{% t shared.sign_in %}"
@ -162,7 +161,6 @@
>
{% t shared.sign_in %}
</a>
{% endunless %}
{% endif %}
</div>
</header>

View File

@ -25,26 +25,26 @@
</div>
</div>
</div>
{% elsif core %}
{% elsif core or log_out%}
<div class="heading lora info-section-heading">Transformative education for Connected Inventory Performance</div>
<div class="section-content section-content-info">
<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="">
<img class="info-icon" src="https://s3.amazonaws.com/static.northpass.com/Cin7/icons/Dynamic+Courses.png" alt="">
<div class="info-content">
<div class="info-heading">Dynamic courses</div>
<div class="info-desc">Developed by our product education professionals</div>
</div>
</div>
<div class="info">
<img class="info-icon" src="https://s3.amazonaws.com/static.northpass.com/Cin7/icons/Always+available.png" alt="">
<img class="info-icon" src="https://s3.amazonaws.com/static.northpass.com/Cin7/icons/Results+Driven.png" alt="">
<div class="info-content">
<div class="info-heading">Results-driven education</div>
<div class="info-desc">Designed for you to meet your business goals</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="">
<img class="info-icon" src="https://s3.amazonaws.com/static.northpass.com/Cin7/icons/Customer+Centered.png" alt="">
<div class="info-content">
<div class="info-heading">Customer-centered</div>
<div class="info-desc">Supporting you through all stages of your journey</div>

View File

@ -0,0 +1,49 @@
{% assign counter = 0 %}
{% assign learning_paths_core = '50e59300-af4f-40c5-8731-ee88284d8f0d, 3793a1a2-3efa-4cea-afa9-077585520476, a67a07df-f153-4dce-ae93-90f3d76e77df, cdb26bc8-cd06-48dc-b5c4-57349c27b03d, d7d7ff88-3419-4999-b209-13faea260939' | split: ', ' %}
<div class="carousel-wrapper">
<div class="learning-path-carousel-core">
{% for learning_path in learning_paths.available %}
{% if learning_paths_core contains learning_path.id%}
<div class="card-wrapper">
{% include "cards_learning_path_homepage" with learning_path %}
</div>
{% assign counter = counter | plus: 1 %}
{% endif %}
{% endfor %}
</div>
{% if counter == 0 %}
<div class="zero-state-wrapper">
<img class="zero-img" src="https://s3.amazonaws.com/static.northpass.com/Cin7/zero+state/no+courses+or+lps+(no+button).png" alt="">
<div class="zero-button-wrapper">
<a class="lp-button" href="/app/catalog">Continue learning now!</a>
</div>
</div>
{% endif %}
</div>
<script>
$('.learning-path-carousel-core').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
prevArrow: "<i class='control-carousel fas fa-chevron-left left-arrow'></i>",
nextArrow: "<i class='control-carousel fas fa-chevron-right right-arrow'></i>"
});
</script>
<style>
.slick-track {
display: flex;
}
.card {
height: 100%;;
}
.card-wrapper {
padding: 1rem 0;
height: auto;
}
.learning-path-carousel-core {
margin: 0 1rem;
}
</style>

View File

@ -1,3 +1,27 @@
{% assign omni = false %}
{% assign core = false %}
{% assign redirect = false %}
{% if current_person.signed_in? %}
{% for group in current_person.groups %}
{% if group.name contains 'Core' %}
{% assign core = true %}
{% elsif group.name contains 'Omni' %}
{% assign omni = true %}
{% endif %}
{% endfor %}
{% endif %}
{% if core and learning_path.name contains 'Omni' %}
{% assign redirect = true %}
{% elsif omni and learning_path.name contains 'Core' %}
{% assign redirect = true %}
{% endif %}
{% if redirect %}
<script>window.location.replace('/app')</script>
{% endif %}
<div class="lp-desktop-wrapper">
<div class="row">
<div class="col-xs-12 col-sm-6">

View File

@ -7,5 +7,10 @@
</div>
</div>
{% endif %}
{% learning_path_next_step_button learning_path, class: "lp-button" %}
{% if current_person.signed_in? == false %}
<a class="lp-button" href="/learners/sign_in">
Sign In
</a>
{% else %}
{% learning_path_next_step_button learning_path, class: "lp-button" %}
{% endif %}

View File

@ -1,21 +1,50 @@
{% if result.type == 'course' %}
<div class="np-card np-search-result">
<div class="np-card-container">
<div class="np-card-content">
<img
class="np-search-result-image"
alt="{{ result.name }}"
src="{{ result.image_url }}"
/>
<div class="np-search-result-content">
<div>
<a class="np-search-result-title" href="{{ result.path }}">
{{ result.name }}
</a>
{% if omni %}
{% if result.name contains 'Omni' %}
<div class="np-card np-search-result">
<div class="np-card-container">
<div class="np-card-content">
<img
class="np-search-result-image"
alt="{{ result.name }}"
src="{{ result.image_url }}"
/>
<div class="np-search-result-content">
<div>
<a class="np-search-result-title" href="{{ result.path }}">
{{ result.name }}
</a>
</div>
<div class="np-search-result-snippet">{{ result.description }}</div>
</div>
<div class="np-search-result-snippet">{{ result.description }}</div>
</div>
</div>
</div>
</div>
{% endif %}
{% elsif core %}
{% if result.name contains 'Core' %}
<div class="np-card np-search-result">
<div class="np-card-container">
<div class="np-card-content">
<img
class="np-search-result-image"
alt="{{ result.name }}"
src="{{ result.image_url }}"
/>
<div class="np-search-result-content">
<div>
<a class="np-search-result-title" href="{{ result.path }}">
{{ result.name }}
</a>
</div>
<div class="np-search-result-snippet">{{ result.description }}</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endif %}
{%endif%}

View File

@ -35,21 +35,29 @@
<div class="page-content">
<div class="section np-max-width">
{% if core %}
<div class="heading lora">New to Cin7 Core? Start learning here!</div>
<div class="heading lora">Learn Cin7 Core by your function with Learning Paths</div>
<div class="section-content">
{% include 'learning_path_carousel' %}
</div>
{% include 'learning_path_carousel_core' %}
</div>
<div class="heading lora">Grow and broaden your Cin7 Core expertise with Deep Dives</div>
<div class="section-content">
{% include "category_carousel_core"%}
</div>
{% elsif omni %}
<div class="heading lora">New to Cin7 Omni? Start learning here!</div>
<div class="section-content">
{% include "category_carousel"%}
</div>
{% elsif log_out %}
<div class="heading lora">New to Cin7 Core? Start learning here!</div>
<div class="heading lora">Learn Cin7 Core by your function with Learning Paths</div>
<div class="section-content">
{% include 'learning_path_carousel' %}
{% include 'learning_path_carousel_core' %}
</div>
<div class="heading lora">New to Cin7 Omni? Start learning here!</div>
<div class="heading lora">Grow and broaden your Cin7 Core expertise with Deep Dives</div>
<div class="section-content">
{% include "category_carousel_core"%}
</div>
<div class="heading lora">Learn Omni by module and features</div>
<div class="section-content">
{% include "category_carousel"%}
</div>

View File

@ -13,6 +13,12 @@
{% endfor %}
{% endif %}
{% if log_out %}
<script>
window.location.replace('https://academy.cin7.com/learners/sign_in');
</script>
{% endif %}
{% include "header" %}
<div class="hero-homepage">
<div class="np-max-width">
@ -30,3 +36,33 @@
</div>
</main>
{% include "footer" %}
<script>
document.addEventListener('DOMContentLoaded', function() {
const urlParams = new URLSearchParams(window.location.search);
const categoriesFromURL = urlParams.getAll('category');
if (categoriesFromURL.length === 0) {
return;
}
const cards = document.querySelectorAll('.lp-card');
const cardMatchesCategories = (card, categories) => {
const cardCategories = card.getAttribute('categories').split('[$]');
return categories.every(category => cardCategories.includes(category));
};
const filterCards = () => {
cards.forEach(card => {
if (cardMatchesCategories(card, categoriesFromURL)) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
};
filterCards();
});
</script>

View File

@ -34,9 +34,9 @@
{% t .forgot_password %}
</a>
{% if features.account_creation? %}
<a class="np-form-link np-button-color" href="{% route sign_up %}">
{% comment %} <a class="np-form-link np-button-color" href="{% route sign_up %}">
{% t shared.sign_up %}
</a>
</a> {% endcomment %}
{% endif %}
{% if features.request_access? %}
<a

View File

@ -13,7 +13,7 @@
{% form_authenticity_token %}
<div class="np-form-field">
<label class="np-input-label" for="learner_password">
{% t .new_password %}
{% t .new_password %} * <br> Password must be a minimum of 8 characters, with at least 1 capital letter, 1 number, and 1 special character.
</label>
<input
class="np-input"

View File

@ -1,3 +1,19 @@
{% assign omni = false %}
{% assign core = false %}
{% assign log_out = true %}
{% if current_person.signed_in? %}
{% assign log_out = false %}
{% for group in current_person.groups %}
{% if group.name contains 'Core' %}
{% assign core = true %}
{% elsif group.name contains 'Omni' %}
{% assign omni = true %}
{% endif %}
{% endfor %}
{% endif %}
{% include "header" %}
<main class="np-main np-search np-subpage-container np-max-width">
<div class="np-resource-title">
@ -6,13 +22,13 @@
<div class="np-search-header">
<div class="np-resource-subtitle">
{% t .showing %}
<span class="np-resource-subtitle-number">{{ results.count }}</span>
{% comment %} <span class="np-resource-subtitle-number">{{ results.count }}</span> {% endcomment %}
{% t .results_for %}
<span class="np-button-color">"{{ results.term }}"</span>
</div>
</div>
{% if results.items.any? %}
{% render "search_result" for results.items as result %}
{% render "search_result" for results.items as result, core: core , omni: omni %}
{% else %}
{% include "search_zero_state" %}
{% endif %}

View File

@ -134,7 +134,11 @@ body {
.card-image {
position: relative;
}
.np-optional-ribbon {
background: #05CBBF;
color: #fff;
}
.np-card-ribbon {
top: 0;
right: 0;
@ -143,6 +147,7 @@ body {
font-size: 0.85rem;
font-weight: 600;
padding: 5px 12.5px;
background: #05CBBF;
}
.lp-progress-text {
@ -302,6 +307,8 @@ body {
.np-learning-path-image {
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
width: 100% !important;
height: 100%;
}
.card-content {
background: #fff;
@ -528,6 +535,15 @@ body {
transform: translateY(-0.125rem);
}
.card-category-core {
background: none;
padding: 0;
}
.card-category-image-core {
width: 100%;
border-radius: 20px 20px 0 0;
}
@media only screen and (max-width: 768px) {
.hero-text {
font-size: 2.5rem;
@ -561,3 +577,21 @@ body {
margin-bottom: 20px;
}
}
.core-category-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.course-desc-category-core {
margin-top: 15px;
color: #002f6f;
height: 100%;
display: flex;
align-items: end;
}
.card-content-core {
display: flex;
flex-direction: column;
justify-content: space-between;
}