Finalized WALMART screenshots! Maybe It can be productized.
This commit is contained in:
Norm Rasmussen
BIN
Custom_Templates/customer_templates/.DS_Store
vendored
BIN
Custom_Templates/customer_templates/.DS_Store
vendored
Binary file not shown.
@ -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>
|
||||
@ -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 %}
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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" %}
|
||||
@ -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" %}
|
||||
@ -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" %}
|
||||
|
||||
@ -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>
|
||||
@ -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" %}
|
||||
@ -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);
|
||||
}
|
||||
@ -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" %}
|
||||
Reference in New Issue
Block a user