Finalized WALMART screenshots! Maybe It can be productized.

This commit is contained in:
Norm Rasmussen
2023-02-02 17:16:44 -05:00
parent 3fd15aee52
commit b9a39a8164
78 changed files with 1237 additions and 33 deletions

Binary file not shown.

View File

@ -0,0 +1,38 @@
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
<div class="np-card course-card">
<a class="np-card-container" href="{{ course_path }}">
{% if course.ribbon %}
<div class="np-card-ribbon">
{{ course.ribbon }}
</div>
{% endif %}
<img
class="np-card-image"
alt="{{ course.name }}"
src="{{ course.image_url }}"
>
<div class="np-card-content np-card-content-vertical np-card-padding">
<div class="np-card-content-subtitle">
{{ course.instructor_names }} {% unless course.instructor_names == "" and course.properties.course_length == "none" %}|{% endunless %} {% unless course.properties.course_length == "none" %} 30 Minutes{% endunless %}
</div>
<h3 class="np-card-content-title">
{{ course.name }}
</h3>
<div class="np-card-content-subtitle card-description">
{{course.full_description}}
</div>
<div class="np-card-content-footer">
{% comment %} <div class="np-card-content-progress np-button-color">
{% t shared.progress, count: course.progress %}
</div> {% endcomment %}
{% if course.has_to_restart? %}
{% include "course_version_outdated_popup", path: course_path %}
{% endif %}
<div class="np-card-link">
{% t shared.view %} <i class="fas fa-arrow-right"></i>
</div>
</div>
</div>
</a>
</div>

View File

@ -0,0 +1,21 @@
{% if courses.in_catalog.any? %}
<div class="np-catalog-courses row row-with-thumbnails">
{% for course in courses.in_catalog %}
{% assign course_category_ids = "" %}
{% for cat in course.categories %}
{% assign course_category_ids = course_category_ids | append: cat.id %}
{% endfor %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content course-column" data-id='{{course_category_ids}}'>
{% include "cards_course" with course %}
</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 %}

View File

@ -0,0 +1,7 @@
{% styles default %}
{% styles colors %}
{% styles custom %}
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

View File

@ -0,0 +1,239 @@
<header class="np-header np-header-color">
<div class="np-header-content">
<div class="np-hidden-desktop np-header-mobile-menu-nav">
{% if current_person.signed_in? %}
<button
data-toggle-class="np-hidden"
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
data-toggle-target=".np-header-mobile-avatar-menu,
.np-header-mobile-menu-content, .np-main, .np-footer"
></button>
<button
data-test="open-mobile-menu"
data-toggle-class="np-hidden"
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
>
<i class="far fa-bars"></i>
</button>
{% endif %}
</div>
{% if current_school.logo_url %}
<h1 class="np-header-logo">
<a href="https://www.magiscenter.com">
<img
alt="{{ current_school.name }}"
class="np-header-logo-image"
src="{{ current_school.logo_url }}"
/>
</a>
</h1>
{% else %}
<a href="https://www.magiscenter.com" class="np-school-name np-header-font-color">
{{ current_school.name }}
</a>
{% endif %}
<div class="np-hidden-mobile np-header-desktop-nav">
<ul class="np-header-desktop-nav-list">
{% for link in navigations.sub_navigation %}
<li class= "np-header-desktop-nav-item {{ link.active_class }}">
<a
href="{{ link.url }}"
class="np-header-desktop-nav-link np-header-font-color"
>
{{ link.label }}
</a>
</li>
{% endfor %}
{% for website_navigation in navigations.header_navigations_external %}
<li class= "np-header-desktop-nav-item">
<a
href="{{ website_navigation.path }}"
class="np-header-desktop-nav-link np-header-font-color"
target="_blank"
>
{{ website_navigation.name }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% 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">
<input
aria-label="{% t .search %}"
class="np-header-search-input np-header-font-background-color"
type="text"
name="q"
placeholder="{% t .search %}"
/>
<i class="np-header-search-icon far fa-search"></i>
</form>
</div>
<div class="np-hidden-mobile np-header-avatar">
<button
class="np-header-avatar-button"
data-test="open-desktop-menu"
data-toggle-class-on-target="np-hidden"
data-toggle-target=".np-header-avatar-tooltip"
data-toggle-outside
>
<i class="far fa-bars"></i>
</button>
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
<span class="np-header-avatar-tooltip-arrow-up"></span>
<div class="np-header-avatar-tooltip-learner">
<div class="np-header-avatar-tooltip-learner-name">
{{ current_person.name }}
</div>
<div class="np-header-avatar-tooltip-learner-email">
{{ current_person.email }}
</div>
</div>
<nav class="np-header-avatar-tooltip-navigation">
{% unless current_school.sso_active? %}
<a
class="np-header-avatar-tooltip-navigation-link"
href="{% route account %}"
>
{% t .profile_settings %}
</a>
{% endunless %}
<a
class="np-header-avatar-tooltip-navigation-link np-danger"
href="{% route logout %}"
>
{% t .sign_out %}
</a>
</nav>
</div>
</div>
{% else %}
<a
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
aria-label="{% t shared.sign_in %}"
href="{% route login %}"
>
{% t shared.sign_in %}
</div>
{% endif %}
</div>
</header>
<div class="np-hidden-desktop">
<div class="np-header-mobile-menu-content np-hidden">
{% if current_person.signed_in? %}
<img
alt="{{ current_person.name }}"
class="np-header-mobile-menu-content-avatar"
src="{{ current_person.avatar_url }}"
/>
<div class="np-header-mobile-menu-content-name">
{{ current_person.name }}
</div>
{% endif %}
<div class="np-header-mobile-menu-content-nav">
<form
class="np-header-search"
data-test="mobile-search"
method="get"
action="{% route search %}"
>
<input
aria-label="{% t .search %}"
class="np-header-search-input"
type="text"
name="q"
placeholder="{% t .search %}"
/>
<i class="np-header-search-icon far fa-search"></i>
</form>
{% for link in navigations.sub_navigation %}
<a
href="{{ link.url }}"
class="np-header-mobile-menu-content-button {{ link.active_class }}"
>
{{ link.label }}
</a>
{% endfor %}
<div class="np-header-mobile-menu-content-line"></div>
{% unless current_school.sso_active? %}
<a
class="np-header-mobile-menu-content-button"
href="{% route account %}"
>
{% t .profile_settings %}
</a>
{% endunless %}
<a
class="np-header-mobile-menu-content-button np-danger"
href="{% route logout %}"
>
{% t .sign_out %}
</a>
</div>
</div>
</div>
{% include "messages" %}
<style>
.np-header-logo-image {
height:30px;
}
.np-header-mobile-menu-nav-button {
font-size:24px;
color:#015893;
}
.np-header-mobile-menu-content { background: #eeedeb; }
.np-header-desktop-nav-list {
margin-right:32px;
}
.np-header-desktop-nav-link {
font-weight: 700;
text-transform:uppercase;
color:#264c6f;
}
.np-header-avatar-button {
color: #264c6f;
font-size: 24px;
}
@media (min-width:768px) {
.np-header-content {
flex-wrap:wrap;
}
.np-header-logo-image {
height:55px;
}
.np-header-search-input {
background:transparent;
}
.np-header-search-icon {
color: #264c6f;
}
}
@media (min-width:768px) and (max-width:1100px) {
.np-header-logo {
width:100%;
margin-bottom:0;
}
.np-header-desktop-nav-list {
margin: 0 32px 0 0;
}
}
</style>

View File

@ -0,0 +1,239 @@
<header class="np-header np-header-color">
<div class="np-header-content">
<div class="np-hidden-desktop np-header-mobile-menu-nav">
{% if current_person.signed_in? %}
<button
data-toggle-class="np-hidden"
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
data-toggle-target=".np-header-mobile-avatar-menu,
.np-header-mobile-menu-content, .np-main, .np-footer"
></button>
<button
data-test="open-mobile-menu"
data-toggle-class="np-hidden"
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
>
<i class="far fa-bars"></i>
</button>
{% endif %}
</div>
{% if current_school.logo_url %}
<h1 class="np-header-logo">
<a href="https://www.magiscenter.com">
<img
alt="{{ current_school.name }}"
class="np-header-logo-image"
src="{{ current_school.logo_url }}"
/>
</a>
</h1>
{% else %}
<a href="https://www.magiscenter.com" class="np-school-name np-header-font-color">
{{ current_school.name }}
</a>
{% endif %}
<div class="np-hidden-mobile np-header-desktop-nav">
<ul class="np-header-desktop-nav-list">
{% for link in navigations.sub_navigation %}
<li class= "np-header-desktop-nav-item {{ link.active_class }}">
<a
href="{{ link.url }}"
class="np-header-desktop-nav-link np-header-font-color"
>
{{ link.label }}
</a>
</li>
{% endfor %}
{% for website_navigation in navigations.header_navigations_external %}
<li class= "np-header-desktop-nav-item">
<a
href="{{ website_navigation.path }}"
class="np-header-desktop-nav-link np-header-font-color"
target="_blank"
>
{{ website_navigation.name }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% 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">
<input
aria-label="{% t .search %}"
class="np-header-search-input np-header-font-background-color"
type="text"
name="q"
placeholder="{% t .search %}"
/>
<i class="np-header-search-icon far fa-search"></i>
</form>
</div>
<div class="np-hidden-mobile np-header-avatar">
<button
class="np-header-avatar-button"
data-test="open-desktop-menu"
data-toggle-class-on-target="np-hidden"
data-toggle-target=".np-header-avatar-tooltip"
data-toggle-outside
>
<i class="far fa-bars"></i>
</button>
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
<span class="np-header-avatar-tooltip-arrow-up"></span>
<div class="np-header-avatar-tooltip-learner">
<div class="np-header-avatar-tooltip-learner-name">
{{ current_person.name }}
</div>
<div class="np-header-avatar-tooltip-learner-email">
{{ current_person.email }}
</div>
</div>
<nav class="np-header-avatar-tooltip-navigation">
{% unless current_school.sso_active? %}
<a
class="np-header-avatar-tooltip-navigation-link"
href="{% route account %}"
>
{% t .profile_settings %}
</a>
{% endunless %}
<a
class="np-header-avatar-tooltip-navigation-link np-danger"
href="{% route logout %}"
>
{% t .sign_out %}
</a>
</nav>
</div>
</div>
{% else %}
<a
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
aria-label="{% t shared.sign_in %}"
href="{% route login %}"
>
{% t shared.sign_in %}
</div>
{% endif %}
</div>
</header>
<div class="np-hidden-desktop">
<div class="np-header-mobile-menu-content np-hidden">
{% if current_person.signed_in? %}
<img
alt="{{ current_person.name }}"
class="np-header-mobile-menu-content-avatar"
src="{{ current_person.avatar_url }}"
/>
<div class="np-header-mobile-menu-content-name">
{{ current_person.name }}
</div>
{% endif %}
<div class="np-header-mobile-menu-content-nav">
<form
class="np-header-search"
data-test="mobile-search"
method="get"
action="{% route search %}"
>
<input
aria-label="{% t .search %}"
class="np-header-search-input"
type="text"
name="q"
placeholder="{% t .search %}"
/>
<i class="np-header-search-icon far fa-search"></i>
</form>
{% for link in navigations.sub_navigation %}
<a
href="{{ link.url }}"
class="np-header-mobile-menu-content-button {{ link.active_class }}"
>
{{ link.label }}
</a>
{% endfor %}
<div class="np-header-mobile-menu-content-line"></div>
{% unless current_school.sso_active? %}
<a
class="np-header-mobile-menu-content-button"
href="{% route account %}"
>
{% t .profile_settings %}
</a>
{% endunless %}
<a
class="np-header-mobile-menu-content-button np-danger"
href="{% route logout %}"
>
{% t .sign_out %}
</a>
</div>
</div>
</div>
{% include "messages" %}
<style>
.np-header-logo-image {
height:30px;
}
.np-header-mobile-menu-nav-button {
font-size:24px;
color:#015893;
}
.np-header-mobile-menu-content { background: #eeedeb; }
.np-header-desktop-nav-list {
margin-right:32px;
}
.np-header-desktop-nav-link {
font-weight: 700;
text-transform:uppercase;
}
.np-header-avatar-button {
color: #fff;
font-size: 24px;
}
@media (min-width:768px) {
.np-header {
position:absolute;
background: transparent;
}
.np-header-content {
flex-wrap:wrap;
}
.np-header-logo-image {
height:55px;
}
.np-header-search-input {
background:transparent;
}
}
@media (min-width:768px) and (max-width:1100px) {
.np-header-logo {
width:100%;
margin-bottom:0;
}
.np-header-desktop-nav-list {
margin: 0 32px 0 0;
}
}
</style>

View File

@ -0,0 +1,60 @@
<main class="np-box-container np-open-access">
<div class="np-box">
{% include "header_minimal" %}
<div class="np-box-content-container">
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
{% form_authenticity_token %}
<div class="np-form-headline" style="width: 120%;margin-left: -40px;">
<p style="margin-bottom:0px;">Welcome to Magis Institute </p>
<p style="margin-top:0px;">for Teachers & Catechists </p>
</div>
<div class="np-form-subheadline">
Please fill out the form below to access your courses
</div>
<div class="np-form-field">
<label class="np-input-label" for="learner_first_name">
{% t shared.first_name %}
</label>
<input
class="np-input"
autofocus="autofocus"
type="text"
name="first_name"
id="learner_first_name"
value="{{ form.first_name }}"
/>
</div>
<div class="np-form-field">
<label class="np-input-label" for="learner_last_name">
{% t shared.last_name %}
</label>
<input
class="np-input"
type="text"
name="last_name"
id="learner_last_name"
value="{{ form.last_name }}"
/>
</div>
<div class="np-form-field">
<label class="np-input-label" for="learner_email">
{% t shared.email_address %}
</label>
<input
class="np-input"
type="text"
name="email"
id="learner_email"
value="{{ form.email }}"
/>
</div>
<input
type="submit"
name="commit"
value="{% t shared.enter %}"
class="np-button np-button-big np-form-action"
/>
</form>
</div>
</div>
</main>

View File

@ -0,0 +1,80 @@
{% include "header_absolute" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
<div class="basic-hero has-image">
<div class="hero-content">
<div class="np-resource-title">{{ catalog.headline }}</div>
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
<form
class="np-header-search hero-search"
data-test="mobile-search"
method="get"
action="{% route search %}"
>
<input
aria-label="Search"
class="np-header-search-input hero-search-input"
type="text"
name="q"
placeholder="Search"
/>
<i class="np-header-search-icon far fa-search"></i>
</form>
</div>
</div>
<div class="category-dropdown-section">
<div class="np-max-width">
<div class="category-dropdown">
<select id="categorySelect">
<option value="all">Show All</option>
{% for cat in categories.in_catalog %}
<option value="{{cat.id}}">{{cat.name}}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<main class="np-main np-catalog np-subpage-container np-max-width">
{% include "courses_catalog" %}
</main>
{% include "footer" %}
<style>
.category-dropdown-section {
background-color: #fafafa;
padding: 32px 0;
}
.category-dropdown {
max-width:400px;
}
.category-dropdown select {
width: 100%;
height: 45px;
border-radius: 6px;
background: #f3f3f3;
padding: 6px;
font-weight: 700;
font-size: 14px;
text-transform:uppercase;
}
</style>
<script>
$('#categorySelect').on('change', function() {
let selectedValue = this.value
if (selectedValue == "all") {
$(".course-column").show()
} else {
$(".course-column").hide()
$(".course-column").each(function() {
if ($(this).data("id").includes(selectedValue)) {
$(this).show()
}
})
}
});
</script>

View File

@ -0,0 +1,10 @@
{% include "header" %}
<main class="np-main np-max-width np-page-container">
<div class="np-hidden-mobile" id="course-desktop">
{% include "course_desktop_view" %}
</div>
<div class="np-hidden-desktop" id="course-mobile">
{% include "course_mobile_view" %}
</div>
</main>
{% include "footer" %}

View File

@ -0,0 +1,12 @@
{% include "header_absolute" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
<div class="basic-hero has-image">
<div class="hero-content">
<div class="np-resource-title"> {% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}</div>
<div class="np-resource-subtitle">{% t .headline, key: current_school.course_vocabulary %}</div>
</div>
</div>
<main class="np-main np-courses np-subpage-container np-max-width">
{% include "courses_index", class: "col-xs-12 col-sm-6 col-lg-4 np-stretch-content" %}
</main>
{% include "footer" %}

View File

@ -0,0 +1,35 @@
{% include "header_absolute" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
<div class="basic-hero has-image">
<div class="hero-content">
<div class="np-resource-title">Discover the intersection of science, reason, and faith</div>
<div class="np-resource-title" style="font-size:2.25em;">Magis Institute for Teachers & Catechists</div>
</div>
</div>
{% comment %} {% include "sub_navigation" %} {% endcomment %}
<main class="np-main np-dashboard np-subpage-container np-max-width">
<div class="row np-flex-center">
<div class="col-xs-12 col-sm-8">
{% if features.learning_paths? %}
<div class="np-dashboard-resources-title">
{% t shared.learning_paths %}
</div>
{% include "learning_paths_index", items: learning_paths.enrolled %}
{% endif %}
<div class="np-dashboard-resources-title">
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
</div>
{% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
</div>
{% if features.training_events? %}
<div class="np-grid-spacing col-xs-12 col-sm-4">
<div class="np-dashboard-resources-title">
{% t .upcoming_events %}
</div>
{% include "training_events_dashboard" %}
</div>
{% endif %}
</div>
</main>
{% include "footer" %}

View File

@ -0,0 +1,94 @@
{% include "header_absolute" %}
{% include "course_version_outdated_alert", courses: courses.featured %}
<main class="np-main np-homepage">
<div class="np-homepage-hero">
<img class="np-homepage-hero-image np-hidden-desktop"
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>
<a class="np-homepage-hero-cta np-button" href="{% route catalog %}">
{% t .discover %}
</a>
</div>
</div>
{% comment %} {% include "sub_navigation" %} {% endcomment %}
<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">
{{ homepage.featured_courses_subheadline }}
</div>
</div>
{% if courses.featured.any? %}
<div class="np-homepage-featured-courses row">
{% for course in courses.featured %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% 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>
</main>
{% include "footer" %}
<style>
@media (min-width:768px) {
.np-homepage-hero {
padding-top: 90px;
padding-bottom:32px;
background-image: url({{homepage.artwork_url}});
background-size:cover;
background-position:center;
min-height: 550px;
position:relative;
}
.np-homepage-hero:after {
content: "";
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
/*background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0) 30%);*/
}
.np-homepage-hero-content {
position:relative;
z-index:1;
max-width: 1300px;
}
.np-homepage-hero-cta {
margin-top:32px;
}
}
@media (min-width:1200px) {
.np-homepage-hero .np-homepage-headline {
font-size: 72px;
}
}
</style>

View File

@ -0,0 +1,19 @@
{% include "header_absolute" %}
<div class="basic-hero has-image">
<div class="hero-content">
<div class="np-resource-title">{% t shared.learning_paths %}</div>
<div class="np-resource-subtitle">{% t .subtitle %}</div>
</div>
</div>
<main class="np-main np-learning-paths np-subpage-container np-max-width">
<div class="np-learning-paths-main">
{% comment %} <div class="np-resource-title">
{% t shared.learning_paths %}
</div>
<div class="np-resource-subtitle">
{% t .subtitle %}
</div> {% endcomment %}
{% include "learning_paths_index", items: learning_paths.available %}
</div>
</main>
{% include "footer" %}

View File

@ -0,0 +1,215 @@
/*
Put your custom overlay styles in here
You can use your northpass color palette in this file
{{ color_palette.button_font_color }}
{{ color_palette.button_color }}
{{ color_palette.button_hover_color }}
{{ color_palette.header_font_color }}
{{ color_palette.header_font_hover_color }}
{{ color_palette.header_color }}
*/
/* GLOBAL STYLES */
body,
html {
font-family: 'Poppins', 'Roboto', sans-serif;
background:#fff;
}
.np-dashboard,
.np-learning-paths {
background: #fff;
}
.np-button { border-radius:6px; }
/* CARD STYLES */
.course-card { box-shadow:none; }
.course-card .np-card-container {
box-shadow:none;
border-radius:6px;
transition: all 0.4s;
text-decoration:none;
}
.course-card .np-card-container:hover {
box-shadow: 0 20px 40px rgb(0 0 0 / 20%);
}
.np-card-image {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.np-card-content { background-color: #fafafa; }
.np-card-content {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.np-card-content-title {
color:#000;
line-height: 1.8rem;
text-transform: uppercase;
margin-bottom:0;
}
.card-description {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
font-size: 14px;
line-height:24px;
flex:1;
}
.course-card .np-card-content-footer {
margin-top:20px;
}
.np-card-link {
text-transform: uppercase;
color: #015893;
text-decoration: none;
font-weight: 700;
font-size:14px;
}
.np-card-link i {
margin-left: 8px;
}
@media (min-width:768px) {
.course-card {
padding: 0 16px 64px!important;
}
.row-with-thumbnails {
margin-left:-16px;
margin-right:-16px;
}
}
/* BASIC HERO STYLING */
.basic-hero {
background-color:#eeedeb;
padding:64px 24px;
}
.basic-hero.has-image {
background-image:url(https://cdn.filestackcontent.com/security=policy:eyJleHBpcnkiOjQ4MzA3OTc4NTIsImNhbGwiOlsicmVhZCIsImNvbnZlcnQiLCJzdG9yZSIsInBpY2siLCJyZW1vdmUiXX0=,signature:ec548cdaa252122149df9f83b63236e888dbe9f59deb76804fe9a7d2da31e35e/QEjCvV4rSOKuUj2quMsY);
background-repeat: no-repeat;
background-size:cover;
background-position:center;
}
.basic-hero .hero-content {
max-width: 1170px;
width:100%;
margin: auto;
}
.basic-hero .hero-content .np-resource-title,
.basic-hero .hero-content .np-resource-subtitle {
text-align:center;
color:#264c6f;
}
.basic-hero.has-image .hero-content .np-resource-title,
.basic-hero.has-image .hero-content .np-resource-subtitle {
color:#fff;
}
.basic-hero .hero-content .np-resource-title {
font-size: 40px;
line-height:48px;
text-transform: none;
}
.np-header-search.hero-search {
margin:60px auto 0;
max-width:900px;
}
.np-header-search-input.hero-search-input {
width: 100%;
background: transparent;
border: 1px solid #fff;
padding: 8px 16px;
border-radius:6px;
height:50px;
opacity:1;
}
.np-header-search.hero-search .np-header-search-icon {
right:16px;
top: 16px;
}
@media (min-width:768px) {
.basic-hero {
background-color:rgb(204, 204, 204);
padding:110px 24px 32px;
min-height:430px;
display: flex;
}
.basic-hero.has-image {
min-height:550px;
}
.basic-hero .hero-content .np-resource-title {
font-size: 48px;
line-height:56px;
}
.basic-hero .hero-content .np-resource-subtitle {
font-size: 24px;
margin-top: 32px;
}
}
@media (min-width:1200px) {
.basic-hero .hero-content .np-resource-title {
font-size: 72px;
line-height:80px;
}
.basic-hero .hero-content .np-resource-subtitle {
font-size: 30px;
line-height:36px;
margin-top: 40px;
}
}
/* FOOTER STYLES */
.np-footer,
.np-footer+.np-powered-by,
.np-powered-by {
background: #264c6f!important;
}
.np-powered-by .np-powered-by-link {
color:#fff!important;
}
.np-footer-support-help,
.np-footer-support-item {
color:#fff;
}
.np-footer-navigation-link {
color: #fff;
font-weight:700;
}
.np-footer-logo-image {
opacity:1;
filter: grayscale(1) brightness(1) invert(1);
}

View File

@ -0,0 +1,24 @@
{% include "header_absolute" %}
<div class="basic-hero has-image">
<div class="hero-content">
<div class="np-resource-title"> {% t .title %}</div>
<div class="np-resource-subtitle"> {% t .subtitle %}</div>
</div>
</div>
<main class="np-main np-training-events np-subpage-container np-max-width">
<div class="row">
<div class="col-xs-12 col-sm-10">
{% comment %} <div class="np-resource-title">
{% t .title %}
</div>
<div class="np-resource-subtitle">
{% t .subtitle %}
</div> {% endcomment %}
</div>
<div class="col-xs-12 col-sm-2">
{% include "training_events_filter" %}
</div>
</div>
{% include "training_events_index" %}
</main>
{% include "footer" %}

View File

@ -155,3 +155,21 @@ Skuid's founder is retiring and joining the board and wants the RTE "beautified"
How to use a prop email/secondary email as a recovery email?
FEAT: Notifications after a Learning Path - not at the last course!
## 02/02/2023
### Long list from Alexa
She has Figma file for cert page and will send it to me Friday/Monday for us to build.
TODO: Build Figma in Sandbox - tbd Skuid/Skuad
Synaps as favorite exam embedding software. They might be an LMS.
Salesforce no syncing. Support knows about it. All new customers that are coming in are not being synced.
TODO: get update on SFDC integration issue.
Lots of Skuid Users that try to go to Skuid instead of HR. Now they are resetting their password on Skuid, but not getting emails.
Users sometimes submit tickets others just don't say anything.
ERROR: Finding it strange that she can pull up a learning path report and everything is fine, but not with course.
She is concerned if someone claims they completed something how can she confirm?

View File

@ -369,4 +369,3 @@ TODO: Add first sentence from each description to the "additional information" f
Joanna - add arrow on each activity to show the driver that it is clickable.
Northpass to wait until we have the official go ahead to make any changes.

BIN
Scripts/.DS_Store vendored

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 279 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 399 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 439 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 120 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

View File

@ -11,10 +11,10 @@ def find_pictures():
for file in listfiles:
files.append(os.path.basename(file))
# Now file will only show the file name, not the entire path
split_resources(files)
split_resources(files, currentdir)
def split_resources(files):
def split_resources(files, currentdir):
print(files)
try:
resource_title = files[0]
@ -26,21 +26,18 @@ def split_resources(files):
new_list.append(file)
for item in new_list:
files.remove(item)
split_resources(files)
print(new_list)
process_pictures(new_list, resource_title)
split_resources(files, currentdir)
process_pictures(new_list, resource_title, currentdir)
except IndexError as e:
pass
finally:
pass
def process_pictures(new_list, resource_title):
def process_pictures(new_list, resource_title, currentdir):
today = date.today()
today = today.strftime("%m.%d.%Y")
image_list = []
print(new_list)
print(resource_title)
resource = Image.open(new_list[0])
resource = resource.convert("RGB")
for picture in new_list[1:]:
@ -49,35 +46,22 @@ def process_pictures(new_list, resource_title):
image_list.append(converted)
# image_list.append(image)
resource.save(
rf"/Users/normrasmussen/Documents/Northpass/Scripts/Walmart_Screenshots/PDFs/{resource_title}_{today}.pdf",
currentdir + f"/PDFs/{resource_title}_{today}.pdf",
save_all=True,
append_images=image_list,
)
delete_originals(currentdir)
def notusable():
image1 = Image.open(
r"/Users/normrasmussen/Documents/Northpass/Scripts/Walmart_Screenshots/Branch Wallet FAQs_1.png"
)
image2 = Image.open(
r"/Users/normrasmussen/Documents/Northpass/Scripts/Walmart_Screenshots/Branch Wallet FAQs_2.png"
)
image3 = Image.open(
r"/Users/normrasmussen/Documents/Northpass/Scripts/Walmart_Screenshots/Branch Wallet FAQs_3.png"
)
im1 = image1.convert("RGB")
im2 = image2.convert("RGB")
im3 = image3.convert("RGB")
imagelist = [im1, im2, im3]
im1.save(
r"/Users/normrasmussen/Documents/Northpass/Scripts/Walmart_Screenshots/mergedImages.pdf",
save_all=True,
append_images=imagelist,
)
def delete_originals(currentdir):
path = glob.glob(currentdir + "*.png")
for file in path:
try:
os.remove(file)
except:
print("Error!")
finally:
print("All Done")
if __name__ == "__main__":
find_pictures()

View File

@ -29,6 +29,7 @@ const url = [
]
*/
const apiKey = "6hUfJdAartHTHhHc0WIRZYPWe"
const url = process.argv[2];
if (!url) {
throw "Please provide a URL as the first argument";

View File

@ -0,0 +1,109 @@
const puppeteer = require('puppeteer');
const axios = require('axios')
const path = require('path')
const apiKey = "6hUfJdAartHTHhHc0WIRZYPWe"
const uid = "/\?uid\=7b84eae4-fb34-4689-9f33-24071c3e5a41";
const groupIds = []
const getAllGroups = async (num) => {
if(num === 1){
}
let page = num;
await axios({
method: 'get',
url: `https://api.northpass.com/v2/courses?page=${page}&limit=100`,
headers: {
'accept': '*/*',
'x-api-key': apiKey,
'content-type': 'application/json'
}
})
.then(async (res) => {
if (res.data.links.next != null) {
page++;
for (let i = 0; i < res.data.data.length; i++) {
if (res.data.data[i].attributes.status == "live") {
groupIds.push(res.data.data[i].id)
}
}
await getAllGroups(page);
} else {
for (let i = 0; i < res.data.data.length; i++) {
if (res.data.data[i].attributes.status == "live") {
groupIds.push(res.data.data[i].id)
}
}
}
})
.catch(err => {
console.log(err);
})
let i = 0
loopIds(i)
console.log(groupIds)
}
function loopIds(i) {
var num = 1
id = groupIds[i]
courseOverview(id, i, num)
}
async function courseOverview(id, i, num) {
const activity = new Array();
const url = "https://walmart.northpass.com/app/courses/";
const browser = await puppeteer.launch();
const page = await browser.newPage();
const course = url+id+uid;
console.log(course)
await page.setViewport({ width:390, height:844 })
await page.goto(course, {
waitUntil: 'load',
timeout: 0 });
await page.title();
const [getXpath] = await page.$x('/html/body/div[2]/div/div');
const resourcetitle = await page.evaluate(name => name.innerText, getXpath);
const resource = resourcetitle.trim();
console.log(resource);
await page.screenshot({path: `${resource}_1.png`, fullPage:true, headless:false});
const hrefs = await page.$$eval('a', as => as.map(a => a.href));
var links = Object.entries(hrefs);
links.forEach(([key, value]) => {
var link = value;
if (link.includes("activities") && (link.includes(id))) {
console.log(link);
activity.push(link);
}
});
setTimeout(() => {
}, 5000);
uniqueLinks = [...new Set(activity)];
for (const link of uniqueLinks) {
num = num+1
const newlink = link+uid;
await page.setViewport({ width: 390, height: 844 })
await page.goto(newlink, {
waitUntil: 'load',
timeout: 0 });
await page.screenshot({path: `${resource}_${num}.png`, fullPage: true, headless: false});
//screenshots(newlink, resource, num, i);
}
await browser.close();
i++;
loopIds(i);
}
async function screenshots(newlink, resource, num, i) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await browser.close();
}
getAllGroups();