Organized google codes
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,42 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container course-card">
|
||||
{% 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">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
{% include "course_details"%}
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.course-card{
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px 0 rgb(89 105 123 / 50%);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,83 @@
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
<div class="np-card-container learning-path-card">
|
||||
<div class="np-learning-path">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="np-hidden-desktop np-card-header">
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<div class="np-hidden-desktop np-card-header-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-card-header">
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-description">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-hidden-desktop np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
<a class="np-button" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
<i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i>
|
||||
<span class="np-learning-path-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-stack">
|
||||
<div class="np-card-stack-level-1"></div>
|
||||
<div class="np-card-stack-level-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.learning-path-card{
|
||||
background: #ffffff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px 0 rgb(89 105 123 / 50%);
|
||||
}
|
||||
|
||||
.np-learning-path-image{
|
||||
border-bottom-left-radius: 4px;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,68 @@
|
||||
{% assign topic_classname = topic | split: " " %}
|
||||
|
||||
<div class="courses-carousel np-carousel" data-topic="{{ topic_classname | join: '-' | downcase }}">
|
||||
{% if items.any? %}
|
||||
{% assign sorted_items =items | sort: "name" %}
|
||||
{% for course in sorted_items %}
|
||||
|
||||
{% comment %} USED FOR PROGRESS FILTER {% endcomment %}
|
||||
{% assign course_status = "" %}
|
||||
|
||||
{% if course.started? == false %}
|
||||
{% assign course_status = "not-started" %}
|
||||
{% elsif course.completed? %}
|
||||
{% assign course_status = "completed" %}
|
||||
{% elsif course.started? %}
|
||||
{% assign course_status = "in-progress" %}
|
||||
{% endif %}
|
||||
|
||||
{% if topic == "Not Categorized" %}
|
||||
<div class="np-carousel-card {{course_status}}"> {% include "cards_course" with course %}</div>
|
||||
{% else %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == topic %}
|
||||
<div class="np-carousel-card {{course_status}}"> {% include "cards_course" with course %}</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".courses-carousel").not('.slick-initialized').slick({
|
||||
slidesToShow: 3,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1400,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,34 @@
|
||||
{% assign activities_count = 0 %}
|
||||
{% assign quizzes_count = 0 %}
|
||||
|
||||
{% for course_section in course.sections %}
|
||||
{% for course_activity in course_section.activities %}
|
||||
{% assign activities_count = activities_count | plus: 1 %}
|
||||
|
||||
{% if course_activity.type == "quiz" %}
|
||||
{% assign quizzes_count = quizzes_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="np-course-details">
|
||||
<div class="np-course-detail">
|
||||
<strong>{{ activities_count }}</strong>
|
||||
<span class="np-details-label">
|
||||
{% if activities_count == 1 %}Activity{% else %}Activities{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="np-course-detail">
|
||||
<strong>{{ quizzes_count }}</strong>
|
||||
<span class="np-details-label">
|
||||
{% if quizzes_count == 1 %}Quiz{% else %}Quizzes{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="np-course-detail">
|
||||
{% if course.properties.course_length > 0 %}
|
||||
<strong>{{course.properties.course_length}}</strong>mins<span class="np-details-label">To Complete</span>
|
||||
{% else %}
|
||||
<div> </div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,112 @@
|
||||
{% assign topic_classname = topic | split: " " %}
|
||||
|
||||
<div class="np-progress-filter-wrapper">
|
||||
{% if label %}
|
||||
<div class="np-progress-filter-label">{{ label }}</div>
|
||||
{% endif %}
|
||||
<div class="progress-filter filter-select-wrapper select-wrapper np-button" data-topic="{{ topic_classname | join: '-' | downcase }}">
|
||||
<select >
|
||||
<option selected disabled hidden>{{ default_option}}</option>
|
||||
<option value="a">All Courses</option>
|
||||
<option value="n">Not Started</option>
|
||||
<option value="i">In Progress</option>
|
||||
<option value="c">Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-progress-filter-label {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
padding-right: 7px;
|
||||
text-transform: none;
|
||||
font-weight:500;
|
||||
font-size:0.812rem;
|
||||
}
|
||||
.np-progress-filter-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.filter-select-wrapper {
|
||||
position: relative;
|
||||
padding:0;
|
||||
border: 2px solid rgba(0, 0, 0, 0.25);
|
||||
color: #fff;
|
||||
height:auto;
|
||||
text-transform: none;
|
||||
background: transparent;
|
||||
border-radius:0;
|
||||
}
|
||||
.filter-select-wrapper:hover {
|
||||
background:transparent;
|
||||
color:#fff;
|
||||
}
|
||||
.select-items {
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
top: 105%;
|
||||
left: -2px;
|
||||
z-index: 99;
|
||||
width: 102%;
|
||||
border: 2px solid rgba(0, 0, 0, 0.25);
|
||||
border-top:none;
|
||||
}
|
||||
.select-items div {
|
||||
color: #444;
|
||||
border-top:none;
|
||||
cursor: pointer;
|
||||
width:100%;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.select-items div:hover { color: #fff; }
|
||||
.select-selected {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 9px 66px 9px 20px;
|
||||
position: relative;
|
||||
color:#222;
|
||||
}
|
||||
.select-selected::after {
|
||||
content:"\f078";
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
position: absolute;
|
||||
width:20px;
|
||||
height:100%;
|
||||
color:rgba(0, 0, 0, 0.5);
|
||||
right:10px;
|
||||
top:0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size:1rem;
|
||||
}
|
||||
.select-selected::before {
|
||||
content:"";
|
||||
position: absolute;
|
||||
width:20px;
|
||||
height:100%;
|
||||
border-left:2px solid rgba(0, 0, 0, 0.25);
|
||||
right:20px;
|
||||
top:0;
|
||||
}
|
||||
.select-selected.select-arrow-active::after { transform: rotate(180deg); }
|
||||
.same-as-selected,
|
||||
.filter-select-wrapper select,
|
||||
.select-hide {
|
||||
display: none;
|
||||
}
|
||||
.mo-filter-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.select-items div:hover,
|
||||
.same-as-selected {
|
||||
background-color: #058ccf;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,95 @@
|
||||
<footer class="np-footer">
|
||||
<div class="mizuno-logo">
|
||||
<a href="https://www.mizunousa.com" target="_blank">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-footer-logo-image"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/Mizuno+Golf/MIZUNO_no_background_logo.svg"
|
||||
/>
|
||||
</a>
|
||||
<div class="logo-links">
|
||||
<a href="https://corp.mizuno.com/en" target="_blank">About Us</a>
|
||||
<a href="https://www2.mizunousa.com/help" target="_blank">Contact Us</a>
|
||||
<a href="https://corp.mizuno.com/en/sustainability?ad=msiteus" target="_blank">Sustainability</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="np-footer-social-links">
|
||||
{% if website_footer.show_social_media_links? %}
|
||||
<ul class="np-footer-social-links-list">
|
||||
{% for social_media_link in website_footer.social_media_links %}
|
||||
{% unless social_media_link.name == 'linkedin' %}
|
||||
<li class="np-footer-social-links-item">
|
||||
<a
|
||||
class="np-footer-social-links-link np-button-color"
|
||||
href="{{ social_media_link.link }}"
|
||||
target="_blank" title="{{ social_media_link.name }}"
|
||||
>
|
||||
<i class="np-footer-social-links-icon
|
||||
np-button-color
|
||||
fab fa-{{ social_media_link.name }}"
|
||||
></i>
|
||||
</a>
|
||||
</li>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.np-footer {
|
||||
padding: 0 5px 0;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.mizuno-logo{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.np-footer-logo-image{
|
||||
display: flex;
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
margin-right: 10px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.logo-links{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.logo-links a{
|
||||
color: #001588;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.np-footer-social-links {
|
||||
margin-top: -25px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-footer {
|
||||
padding: 50px 30px 0px;
|
||||
}
|
||||
|
||||
.np-footer-logo-image{
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.np-footer-social-links {
|
||||
margin-top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,120 @@
|
||||
<footer class="np-footer">
|
||||
<div class="mizuno-logo">
|
||||
<a href="https://www.mizunousa.com" target="_blank">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-footer-logo-image"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/Mizuno+Golf/MIZUNO_no_background_logo.svg"
|
||||
/>
|
||||
</a>
|
||||
<div class="logo-links">
|
||||
<a href="https://corp.mizuno.com/en" target="_blank">About Us</a>
|
||||
<a href="https://www2.mizunousa.com/help" target="_blank">Contact Us</a>
|
||||
<a href="https://corp.mizuno.com/en/sustainability?ad=msiteus" target="_blank">Sustainability</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="np-footer-social-links">
|
||||
{% if website_footer.show_social_media_links? %}
|
||||
<ul class="np-footer-social-links-list">
|
||||
{% for social_media_link in website_footer.social_media_links %}
|
||||
{% unless social_media_link.name == 'linkedin' %}
|
||||
<li class="np-footer-social-links-item">
|
||||
<a
|
||||
class="np-footer-social-links-link np-button-color"
|
||||
href="{{ social_media_link.link }}"
|
||||
target="_blank" title="{{ social_media_link.name }}"
|
||||
>
|
||||
<i class="np-footer-social-links-icon
|
||||
np-button-color
|
||||
fab fa-{{ social_media_link.name }}"
|
||||
></i>
|
||||
</a>
|
||||
</li>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.np-footer {
|
||||
height: 180px;
|
||||
padding: 100px 5px 0px;
|
||||
margin-top: 135px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.mizuno-logo{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.np-footer-logo-image{
|
||||
display: flex;
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
margin-right: 10px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.logo-links{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.logo-links a{
|
||||
color: #058ccf;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.np-footer-social-links {
|
||||
margin-top: -25px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.np-footer-social-links-icon {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media screen and (min-width:550px) {
|
||||
.np-footer{
|
||||
margin-top: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 650px){
|
||||
.np-footer-logo-image{
|
||||
height: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width:768px) {
|
||||
.np-footer {
|
||||
margin-top: 90px;
|
||||
padding: 105px 25px 0px;
|
||||
}
|
||||
|
||||
.np-footer-logo-image{
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.np-footer-social-links {
|
||||
margin-top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width:1050px) {
|
||||
.np-footer {
|
||||
padding: 75px 25px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,8 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
|
||||
@ -0,0 +1,98 @@
|
||||
<header>
|
||||
{% if current_school.logo_url %}
|
||||
<div class="mizuno-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<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
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
|
||||
{%- comment -%} Desktop Profile Tooltip {%- endcomment -%}
|
||||
<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>
|
||||
</header>
|
||||
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
body {
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #001588;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding-right: 70px;
|
||||
}
|
||||
|
||||
.mizuno-logo{
|
||||
padding: 15px 0;
|
||||
display: flex;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.np-header-logo-image {
|
||||
display: block;
|
||||
margin: auto;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.mizuno-logo {
|
||||
padding: 30px 70px;
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,70 @@
|
||||
<header id="mizuno-header">
|
||||
<div class="mizuno-header-item">
|
||||
<a
|
||||
href="{% route login %}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
>
|
||||
LOGIN
|
||||
</a>
|
||||
<div class="mizuno-header-item-bar" style="width: 70%;"></div>
|
||||
</div>
|
||||
<div class="mizuno-header-item">
|
||||
<a
|
||||
href="{% route sign_up %}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
>
|
||||
SIGN-UP
|
||||
</a>
|
||||
<div class="mizuno-header-item-bar" style="width: 90%;"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
#mizuno-header {
|
||||
height: 80px;
|
||||
padding: 0px 10px 0px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.mizuno-header-item{
|
||||
width: 75px;
|
||||
margin: -35px 0 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link{
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #058ccf;
|
||||
}
|
||||
|
||||
.mizuno-header-item-bar{
|
||||
height: 2px;
|
||||
margin: auto;
|
||||
margin-top: 3px;
|
||||
background: #058ccf;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
#mizuno-header {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.mizuno-header-item{
|
||||
width: 90px;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,78 @@
|
||||
<div class="features-section angled-section panels-angled-section">
|
||||
<div class="angled-section-container panels-section-container">
|
||||
<div class="np-homepage-headline-mini np-header-font-color">
|
||||
More Mizuno Academies
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-img-container">
|
||||
<img class="feature-img" src="https://trackmanuniversity.com/Images/LandingPage/guy.svg" width="140">
|
||||
</div>
|
||||
<div class="feature-content">
|
||||
<p class="feature-content-title">STAND OUT</p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed velit dignissim sodales ut. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<div class="feature-img-container">
|
||||
<img class="feature-img" src="https://trackmanuniversity.com/Images/LandingPage/class.svg" width="140">
|
||||
</div>
|
||||
|
||||
<div class="feature-content">
|
||||
<p class="feature-content-title">MIZUNO CERTIFICATIONS</p>
|
||||
Nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant. Leo duis ut diam quam nulla. Cras sed felis eget velit aliquet sagittis. At risus viverra adipiscing at in. Quis enim lobortis scelerisque fermentum dui faucibus in.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<div class="feature-img-container">
|
||||
<img class="feature-img" src="https://trackmanuniversity.com/Images/LandingPage/courses.svg" width="140">
|
||||
</div>
|
||||
|
||||
<div class="feature-content">
|
||||
<p class="feature-content-title">TRENDING COURSES</p>
|
||||
Leo duis ut diam quam nulla. Cras sed felis eget velit aliquet sagittis. At risus viverra adipiscing at in. Quis enim lobortis scelerisque fermentum dui faucibus in. Pulvinar neque laoreet suspendisse interdum consectetur libero. Dui ut ornare lectus sit amet est placerat. Morbi non arcu risus quis varius quam quisque id.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.features-section{
|
||||
background: #001588;
|
||||
}
|
||||
|
||||
.panels-angled-section{
|
||||
transform: skewY(4deg);
|
||||
margin-bottom: 77px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.features-section-container {
|
||||
padding-top: 50px;
|
||||
transform: skewY(-4deg)
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
margin:0 auto 40px;
|
||||
}
|
||||
|
||||
.feature-content-title {
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.feature-item {
|
||||
display:flex;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.feature-img {
|
||||
margin-right:48px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,84 @@
|
||||
<div class="panels-section angled-section panels-angled-section">
|
||||
<div class="angled-section-container panels-section-container">
|
||||
<div class="np-homepage-headline-mini np-header-font-color">
|
||||
More Mizuno Academies
|
||||
</div>
|
||||
|
||||
|
||||
<div class="panels-container col-md-12">
|
||||
<div class="panel-item col-xs-12 col-md-3-25">
|
||||
<a class="panel-img-container" href="#">
|
||||
<img class="panel-img" src="https://s3.amazonaws.com/static.northpass.com/Mizuno+Golf/Mizuno_Academy_Golf_image.png">
|
||||
</a>
|
||||
<h1 class="panel-content-title">GOLF</h1>
|
||||
</div>
|
||||
<div class="panel-item col-xs-12 col-md-3-25">
|
||||
<a class="panel-img-container" href="#">
|
||||
<img class="panel-img" src="https://s3.amazonaws.com/static.northpass.com/Mizuno+Golf/Mizuno_Academy_running_image.png">
|
||||
</a>
|
||||
<h1 class="panel-content-title">RUNNING</h1>
|
||||
</div>
|
||||
<div class="panel-item col-xs-12 col-md-3-25">
|
||||
<a class="panel-img-container" href="#">
|
||||
<img class="panel-img" src="https://s3.amazonaws.com/static.northpass.com/Mizuno+Golf/Mizuno_Academy_team_sports_image.png">
|
||||
</a>
|
||||
<h1 class="panel-content-title">TEAM SPORTS</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.panels-angled-section{
|
||||
background: #001588;
|
||||
transform: skewY(4deg);
|
||||
margin-bottom: 77px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.panels-section-container {
|
||||
transform: skewY(-4deg);
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.panels-container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.panel-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.panel-img-container{
|
||||
border-bottom: 3px solid #ffffff;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.panel-img{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.panel-content-title {
|
||||
color: #ffffff;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px){
|
||||
.panels-container{
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.col-md-3-25{
|
||||
flex-basis: 27%;
|
||||
max-width: 27%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,73 @@
|
||||
<div class="homepage-section angled-section promo-angled-section">
|
||||
<div class="homepage-section-container angled-section-container np-header-font-color">
|
||||
<div class="np-homepage-headline-mini np-header-font-color">
|
||||
About Mizuno
|
||||
</div>
|
||||
<div class="np-homepage-subheadline np-header-font-color">
|
||||
It is our mission to not only meet the demands of those who are sincere athletes but also those who believe in the value of sports by offering superior goods and services. We pursue new height in sports and beyond.
|
||||
</div>
|
||||
<div class="video-container">
|
||||
<iframe id="video" class="mizuno-promo-video" width="1000" height="500" src="https://youtu.be/yBD3_0fq_Ug" title="Mizuno Reach Beyond Promo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="np-homepage-headline-mini np-header-font-color">
|
||||
Our Vision
|
||||
</div>
|
||||
<div class="np-homepage-subheadline np-header-font-color">
|
||||
We seek to enrich the lives of people through the power of sports and to contribute in bringing happiness and joy to athlete's lives.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.mizuno-promo-video{
|
||||
width: 100%;
|
||||
height: 215px;
|
||||
margin: 15px auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 450px){
|
||||
.mizuno-promo-video{
|
||||
height: 265px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 525px){
|
||||
.mizuno-promo-video{
|
||||
height: 310px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 625px){
|
||||
.mizuno-promo-video{
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.promo-angled-section{
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
.mizuno-promo-video{
|
||||
height: 315px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 850px){
|
||||
.mizuno-promo-video{
|
||||
height: 390px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1100px){
|
||||
.mizuno-promo-video{
|
||||
height: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px){
|
||||
.mizuno-promo-video{
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,80 @@
|
||||
<div class="np-progress-ring-wrapper">
|
||||
<svg
|
||||
class="progress-ring"
|
||||
width="{{ size }}"
|
||||
height="{{ size }}">
|
||||
<circle
|
||||
class="progress-ring__circle circle-{{name}}"
|
||||
stroke="{{ stroke_color }}"
|
||||
stroke-width="10"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"/>
|
||||
<circle
|
||||
class="progress-ring__circle circle-bg"
|
||||
stroke="{{ stroke_color_bg }}"
|
||||
stroke-width="10"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"/>
|
||||
<text x="50%" y="50%" text-anchor="middle" stroke="" stroke-width="1px" fill="#444" dy=".3em">{{count}}</text>
|
||||
</svg>
|
||||
<h3 class="np-card-content-title np-progress-circle-label">
|
||||
{{name}}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var circle = document.getElementsByClassName("circle-{{name}}")[0];
|
||||
var radius = circle.r.baseVal.value;
|
||||
var circumference = radius * 2 * Math.PI;
|
||||
|
||||
circle.style.strokeDasharray = `${circumference} ${circumference}`;
|
||||
circle.style.strokeDashoffset = `${circumference}`;
|
||||
|
||||
function setProgress(percent) {
|
||||
const offset = circumference - percent * circumference;
|
||||
circle.style.strokeDashoffset = offset;
|
||||
}
|
||||
setProgress('{{ count | divided_by: total }}')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-progress-ring-wrapper {
|
||||
flex: 0;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 1.5rem 1rem 1rem 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-ring circle { stroke-linecap: round; }
|
||||
.progress-ring text { font-size:2rem; }
|
||||
.progress-ring__circle {
|
||||
transition: stroke-dashoffset 0.35s;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.np-progress-circle-label {
|
||||
color:#444;
|
||||
text-transform: uppercase;
|
||||
opacity:0.7;
|
||||
font-size:0.875rem;
|
||||
margin-top:1rem;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-progress-ring-wrapper { padding: 1.5rem 0.4rem 1rem 0.4rem;}
|
||||
}
|
||||
|
||||
@media (min-width:1170px) {
|
||||
.progress-ring text { font-size:2.5rem; }
|
||||
.np-progress-ring-wrapper { padding: 1.5rem 1rem 1rem 1rem;}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,21 @@
|
||||
<nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% if link.label == 'Home' %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
<a class="np-sub-navigation-content-item-link" href="https://mizuno.com" target="_blank">
|
||||
Mizuno.com
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
{{ link.label }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
@ -0,0 +1,8 @@
|
||||
<div class="homepage-section angled-section">
|
||||
<div class="homepage-section-container angled-section-container np-header-font-color">
|
||||
<h1> How Swing DNA Works </h1>
|
||||
<div class="video-container">
|
||||
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/51RYNgBbdsE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,159 @@
|
||||
{% comment %}
|
||||
For this widget to work you must import Slick CSS and JS
|
||||
{% endcomment %}
|
||||
|
||||
<div class="np-dashboard-resources">
|
||||
<div class="np-card">
|
||||
<div class="np-card-container np-dashboard-border">
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="np-card-content-achievements">
|
||||
<div class="achivements-carousel">
|
||||
{% for course in courses.enrolled %}
|
||||
{% assign earnedBadges = 0 %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign earnedBadges = earnedBadges | plus: 1 %}
|
||||
<div>
|
||||
<div class="np-card-content-title col-12">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="col-12 ">
|
||||
{% comment %} <img class="np-achievement-icon" src="{{ course.properties.course_badge }}" /> {% endcomment %}
|
||||
<i class="{{ course.properties.course_badge }} np-achievement-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if earnedBadges == 0 %}
|
||||
<div class="no-badges-message">Complete a course to earn your first badge</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% comment %} <a href="#" class="np-view-all-achievements">View All</a> {% endcomment %}
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
$('.achivements-carousel').slick({
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
infinite: true,
|
||||
autoplay: false,
|
||||
autoplaySpeed: 5000,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
responsive: [{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
|
||||
dots: false
|
||||
}
|
||||
}]
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.no-badges-message {
|
||||
text-align: center;
|
||||
padding: 32px 0 45px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.np-card-content-achievements {
|
||||
min-height:200px;
|
||||
}
|
||||
|
||||
|
||||
.np-card-content-achievements .np-card-content-title {
|
||||
font-size: 18px;
|
||||
color:#444;
|
||||
text-align:center;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.np-achievement-icon {
|
||||
color: #bec2c6;
|
||||
margin:14px auto 26px;
|
||||
width:130px;
|
||||
}
|
||||
|
||||
i.np-achievement-icon {
|
||||
color: #058ccf;
|
||||
font-size: 80px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.np-card-content-achievements .slick-slider {
|
||||
width:100%;
|
||||
max-width: 375px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.np-view-all-achievements {
|
||||
color:#2BB24C;
|
||||
font-size:0.75rem;
|
||||
text-transform:uppercase;
|
||||
text-align:center;
|
||||
text-decoration:none;
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
|
||||
.np-card-content-achievements {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem 2rem .5rem;
|
||||
}
|
||||
|
||||
.achievements-total-points-display {
|
||||
color:#2BB24C;
|
||||
font-size:0.812rem;
|
||||
text-transform:uppercase;
|
||||
text-align:center;
|
||||
margin-bottom:1.5rem;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.achievements-total-points {
|
||||
font-size:10px;
|
||||
color:#fff;
|
||||
padding:3px 5px;
|
||||
display:inline-block;
|
||||
border-radius:2px;
|
||||
}
|
||||
|
||||
.slick-arrow {
|
||||
color: #001588;
|
||||
opacity: 0.5;
|
||||
font-size: 1.5rem;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 50%;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.slick-arrow.fa-chevron-left { left:0 }
|
||||
.slick-arrow.fa-chevron-right { right:0; }
|
||||
|
||||
@media (min-width:1024px) {
|
||||
.np-card-content-achievements .slick-slider {
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,74 @@
|
||||
<div class="np-dashboard-resources widget-course-progress">
|
||||
<div class="np-card">
|
||||
<div class="np-card-container np-dashboard-border">
|
||||
{% if courses.enrolled.any? %}
|
||||
{% assign countComplete = 0 %}
|
||||
{% assign countInProgress = 0 %}
|
||||
{% assign countNotStarted = 0 %}
|
||||
{% assign countTotal = 0 | times: 1.0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% assign countTotal = countTotal | plus: 1 %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign countComplete = countComplete | plus: 1 %}
|
||||
{% endif %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign countInProgress = countInProgress | plus: 1 %}
|
||||
{% endif %}
|
||||
{% if course.progress == 0 %}
|
||||
{% assign countNotStarted = countNotStarted | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<ul class="progress-circle-list">
|
||||
<li>
|
||||
{%
|
||||
include "progress_circle",
|
||||
name:'Completed' ,
|
||||
count: countComplete ,
|
||||
total: countTotal,
|
||||
size: "120",
|
||||
stroke_color: "rgba(0, 21, 136, 1)",
|
||||
stroke_color_bg: "rgba(5, 140, 207, 0.7)"
|
||||
%}
|
||||
</li>
|
||||
<li>
|
||||
{%
|
||||
include "progress_circle",
|
||||
name:'In Progress' ,
|
||||
count: countInProgress ,
|
||||
total: countTotal,
|
||||
size: "120",
|
||||
stroke_color: "rgba(0, 21, 136, 1)",
|
||||
stroke_color_bg: "rgba(5, 140, 207, 0.7)"
|
||||
%}
|
||||
</li>
|
||||
</ul>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.widget-course-progress .np-card {
|
||||
padding:0 0 32px;
|
||||
}
|
||||
|
||||
.progress-circle-list {
|
||||
padding: 0;
|
||||
list-style-type: none !important;
|
||||
justify-content: space-around;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
max-width: 400px;
|
||||
width:100%;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
233
Custom_Templates/customer_templates/Mizuno/dashboard.html.liquid
Normal file
233
Custom_Templates/customer_templates/Mizuno/dashboard.html.liquid
Normal file
@ -0,0 +1,233 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="np-dashboard-header">
|
||||
<div class="np-resource-title">Hi {{current_person.first_name}}!</div>
|
||||
<div class="np-resource-subtitle">Welcome to Mizuno Golf Academy</div>
|
||||
</div>
|
||||
<div class="row np-flex-center">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="col-xs-12 col-md-8">
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-md-4">
|
||||
<div class="np-dashboard-resources-title">Course Progress</div>
|
||||
{% include "widget_course_progress" %}
|
||||
|
||||
{%- comment -%} <div class="np-dashboard-resources-title">Recent Achievements</div>
|
||||
{% include "widget_achievements" %} {%- endcomment -%}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="course-progress-wrapper col-xs-12 col-md-6 offset-lg-1">
|
||||
<div class="np-dashboard-resources-title">Course Progress</div>
|
||||
{% include "widget_course_progress" %}
|
||||
</div>
|
||||
{%- comment -%} <div class="achievements-wrapper col-xs-12 col-md-6">
|
||||
<div class="np-dashboard-resources-title">Recent Achievements</div>
|
||||
{% include "widget_achievements" %}
|
||||
</div> {%- endcomment -%}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="np-dashboard-resources-title" style="margin-bottom:19px;">
|
||||
Courses
|
||||
</div>
|
||||
<div class="row dashboard-section-courses col-xs-12">
|
||||
{%- comment -%} <div class="col-xs-12 dashboard-courses"> {%- endcomment -%}
|
||||
{% if courses.enrolled.any? %}
|
||||
{%- comment -%} {% if categories.enrolled.any? %}
|
||||
{% assign all_categories = categories.enrolled | map: "name" %}
|
||||
{% for enrolled_category in all_categories %}
|
||||
<div class="category-header-wrapper">
|
||||
<div>
|
||||
<div class="np-dashboard-resources-category">
|
||||
{{ enrolled_category }}
|
||||
</div>
|
||||
</div>
|
||||
{%
|
||||
include "filter_by_progress",
|
||||
label: "Filter by Progress:",
|
||||
default_option: "All Courses",
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
</div>
|
||||
{%
|
||||
include "carousel_courses",
|
||||
items: courses.enrolled,
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% assign enrolled_category = "Not Categorized" %}
|
||||
<div class="category-header-wrapper">
|
||||
<div>
|
||||
<div class="np-dashboard-resources-title">
|
||||
Topic
|
||||
</div>
|
||||
<div class="np-dashboard-resources-category">
|
||||
{{ enrolled_category }}
|
||||
</div>
|
||||
</div>
|
||||
{%
|
||||
include "filter_by_progress",
|
||||
label: "Filter by Progress:",
|
||||
default_option: "All Courses",
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
</div>
|
||||
{%
|
||||
include "carousel_courses",
|
||||
items: courses.enrolled,
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
{% endif %} {%- endcomment -%}
|
||||
{% for course in courses.enrolled %}
|
||||
{% assign course_status = "" %}
|
||||
|
||||
{% if course.started? == false %}
|
||||
{% assign course_status = "not-started" %}
|
||||
{% elsif course.completed? %}
|
||||
{% assign course_status = "completed" %}
|
||||
{% elsif course.started? %}
|
||||
{% assign course_status = "in-progress" %}
|
||||
{% endif %}
|
||||
|
||||
<div class="np-carousel-card col-xs-12 col-md-4 {{course_status}}"> {% include "cards_course" with course %}</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="np-dashboard-resources-title" style="margin-bottom:19px;">
|
||||
Courses
|
||||
</div>
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
<div style="margin-bottom:3rem;">
|
||||
{% include "courses_zero_state", message: message %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{%- comment -%} </div> {%- endcomment -%}
|
||||
</div>
|
||||
.
|
||||
|
||||
{% comment %} <div class="row dashboard-section-events">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t .upcoming_events %}
|
||||
</div>
|
||||
{% if training_events.enrolled.any? %}
|
||||
{%
|
||||
include "carousel_events",
|
||||
items: training_events.enrolled,
|
||||
%}
|
||||
{% else %}
|
||||
<div style="margin-bottom:3rem;">
|
||||
{% include "training_events_zero_state" %}
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
</div> {% endcomment %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<script>
|
||||
// Creates the custom dropdown and dropdown functionality
|
||||
var x, i, j, l, ll, selElmnt, a, b, c;
|
||||
/* Look for any elements with the class “select-wrapper”: */
|
||||
x = document.getElementsByClassName("progress-filter");
|
||||
l = x.length;
|
||||
for (i = 0; i < l; i++) {
|
||||
selElmnt = x[i].getElementsByTagName("select")[0];
|
||||
ll = selElmnt.length;
|
||||
a = document.createElement("DIV");
|
||||
a.setAttribute("class", "select-selected");
|
||||
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
|
||||
x[i].appendChild(a);
|
||||
b = document.createElement("DIV");
|
||||
b.setAttribute("class", "select-items select-hide");
|
||||
for (j = 1; j < ll; j++) {
|
||||
c = document.createElement("DIV");
|
||||
c.innerHTML = selElmnt.options[j].innerHTML;
|
||||
c.addEventListener("click", function(e) {
|
||||
var y, i, k, s, h, sl, yl;
|
||||
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
|
||||
sl = s.length;
|
||||
h = this.parentNode.previousSibling;
|
||||
for (i = 0; i < sl; i++) {
|
||||
if (s.options[i].innerHTML == this.innerHTML) {
|
||||
s.selectedIndex = i;
|
||||
h.innerHTML = this.innerHTML;
|
||||
y = this.parentNode.getElementsByClassName("same-as-selected");
|
||||
yl = y.length;
|
||||
for (k = 0; k < yl; k++) {
|
||||
y[k].removeAttribute("class");
|
||||
}
|
||||
this.setAttribute("class", "same-as-selected");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
filterCourses(this);
|
||||
|
||||
h.click();
|
||||
});
|
||||
b.appendChild(c);
|
||||
}
|
||||
x[i].appendChild(b);
|
||||
a.addEventListener("click", function(e) {
|
||||
e.stopPropagation();
|
||||
closeAllSelect(this);
|
||||
this.nextSibling.classList.toggle("select-hide");
|
||||
this.classList.toggle("select-arrow-active");
|
||||
});
|
||||
}
|
||||
|
||||
function closeAllSelect(elmnt) {
|
||||
var x, y, i, xl, yl, arrNo = [];
|
||||
x = document.getElementsByClassName("select-items");
|
||||
y = document.getElementsByClassName("select-selected");
|
||||
xl = x.length;
|
||||
yl = y.length;
|
||||
for (i = 0; i < yl; i++) {
|
||||
if (elmnt == y[i]) {
|
||||
arrNo.push(i)
|
||||
} else {
|
||||
y[i].classList.remove("select-arrow-active");
|
||||
}
|
||||
}
|
||||
for (i = 0; i < xl; i++) {
|
||||
if (arrNo.indexOf(i)) {
|
||||
x[i].classList.add("select-hide");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* If the user clicks anywhere outside the select box,
|
||||
then close all select boxes: */
|
||||
document.addEventListener("click", closeAllSelect);
|
||||
$(".select-items div").each(function() {
|
||||
if($( this ).text() == $(".select-selected").text()) {
|
||||
$(this).addClass("same-as-selected");
|
||||
}
|
||||
});
|
||||
|
||||
function filterCourses(selectedItem) {
|
||||
|
||||
let filterGroup = $(selectedItem).closest(".progress-filter").data("topic");
|
||||
let selectedFilter = $(selectedItem).text().replace(" ", "-").toLowerCase();
|
||||
let carouselGroup = $('.courses-carousel[data-topic="' + filterGroup + '"]');
|
||||
|
||||
carouselGroup.slick('slickUnfilter');
|
||||
|
||||
if (selectedFilter != "all-courses") {
|
||||
carouselGroup.slick('slickFilter', `.${selectedFilter}`);
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,226 @@
|
||||
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="np-dashboard-header">
|
||||
<div class="np-resource-title">Hi {{current_person.first_name}}! 👋</div>
|
||||
<div class="np-resource-subtitle">This is what’s relevant to you right now in Pixel Academy.</div>
|
||||
</div>
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-md-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>
|
||||
<div class="np-grid-spacing col-xs-12 col-md-4">
|
||||
<div class="np-dashboard-resources-title">Course Progress</div>
|
||||
{% comment %} {% include "widget_course_progress" %} {% endcomment %}
|
||||
|
||||
<div class="np-dashboard-resources-title">Recent Achievements</div>
|
||||
{% comment %} {% include "widget_achievements" %} {% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row dashboard-section-courses">
|
||||
<div class="col-xs-12">
|
||||
{% if courses.enrolled.any? %}
|
||||
{% if categories.enrolled.any? %}
|
||||
{% assign all_categories = categories.enrolled | map: "name" %}
|
||||
{% for enrolled_category in all_categories %}
|
||||
<div class="np-md-flex-wrapper">
|
||||
<div>
|
||||
<div class="np-dashboard-resources-title">
|
||||
Topic
|
||||
</div>
|
||||
<div class="np-dashboard-resources-category">
|
||||
{{ enrolled_category }}
|
||||
</div>
|
||||
</div>
|
||||
{%
|
||||
include "filter_by_progress",
|
||||
label: "Filter by Progress:",
|
||||
default_option: "All Courses",
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
</div>
|
||||
{%
|
||||
include "carousel_courses",
|
||||
items: courses.enrolled,
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% assign enrolled_category = "Not Categorized" %}
|
||||
<div class="np-md-flex-wrapper">
|
||||
<div>
|
||||
<div class="np-dashboard-resources-title">
|
||||
Topic
|
||||
</div>
|
||||
<div class="np-dashboard-resources-category">
|
||||
{{ enrolled_category }}
|
||||
</div>
|
||||
</div>
|
||||
{%
|
||||
include "filter_by_progress",
|
||||
label: "Filter by Progress:",
|
||||
default_option: "All Courses",
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
</div>
|
||||
{%
|
||||
include "carousel_courses",
|
||||
items: courses.enrolled,
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-dashboard-resources-title" style="margin-bottom:19px;">
|
||||
Courses
|
||||
</div>
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
<div style="margin-bottom:3rem;">
|
||||
{% include "courses_zero_state", message: message %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% comment %} <div class="row dashboard-section-events">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t .upcoming_events %}
|
||||
</div>
|
||||
{% if training_events.enrolled.any? %}
|
||||
{%
|
||||
include "carousel_events",
|
||||
items: training_events.enrolled,
|
||||
%}
|
||||
{% else %}
|
||||
<div style="margin-bottom:3rem;">
|
||||
{% include "training_events_zero_state" %}
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
</div> {% endcomment %}
|
||||
|
||||
|
||||
<div class="row dashboard-section-instructors">
|
||||
<div class="col-xs-12">
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
Meet the Instructors
|
||||
</div>
|
||||
{%
|
||||
include "carousel_instructors",
|
||||
items: courses.enrolled,
|
||||
%}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
<script>
|
||||
// Creates the custom dropdown and dropdown functionality
|
||||
var x, i, j, l, ll, selElmnt, a, b, c;
|
||||
/* Look for any elements with the class “select-wrapper”: */
|
||||
x = document.getElementsByClassName("progress-filter");
|
||||
l = x.length;
|
||||
for (i = 0; i < l; i++) {
|
||||
selElmnt = x[i].getElementsByTagName("select")[0];
|
||||
ll = selElmnt.length;
|
||||
a = document.createElement("DIV");
|
||||
a.setAttribute("class", "select-selected");
|
||||
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
|
||||
x[i].appendChild(a);
|
||||
b = document.createElement("DIV");
|
||||
b.setAttribute("class", "select-items select-hide");
|
||||
for (j = 1; j < ll; j++) {
|
||||
c = document.createElement("DIV");
|
||||
c.innerHTML = selElmnt.options[j].innerHTML;
|
||||
c.addEventListener("click", function(e) {
|
||||
var y, i, k, s, h, sl, yl;
|
||||
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
|
||||
sl = s.length;
|
||||
h = this.parentNode.previousSibling;
|
||||
for (i = 0; i < sl; i++) {
|
||||
if (s.options[i].innerHTML == this.innerHTML) {
|
||||
s.selectedIndex = i;
|
||||
h.innerHTML = this.innerHTML;
|
||||
y = this.parentNode.getElementsByClassName("same-as-selected");
|
||||
yl = y.length;
|
||||
for (k = 0; k < yl; k++) {
|
||||
y[k].removeAttribute("class");
|
||||
}
|
||||
this.setAttribute("class", "same-as-selected");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
filterCourses(this);
|
||||
|
||||
h.click();
|
||||
});
|
||||
b.appendChild(c);
|
||||
}
|
||||
x[i].appendChild(b);
|
||||
a.addEventListener("click", function(e) {
|
||||
e.stopPropagation();
|
||||
closeAllSelect(this);
|
||||
this.nextSibling.classList.toggle("select-hide");
|
||||
this.classList.toggle("select-arrow-active");
|
||||
});
|
||||
}
|
||||
|
||||
function closeAllSelect(elmnt) {
|
||||
var x, y, i, xl, yl, arrNo = [];
|
||||
x = document.getElementsByClassName("select-items");
|
||||
y = document.getElementsByClassName("select-selected");
|
||||
xl = x.length;
|
||||
yl = y.length;
|
||||
for (i = 0; i < yl; i++) {
|
||||
if (elmnt == y[i]) {
|
||||
arrNo.push(i)
|
||||
} else {
|
||||
y[i].classList.remove("select-arrow-active");
|
||||
}
|
||||
}
|
||||
for (i = 0; i < xl; i++) {
|
||||
if (arrNo.indexOf(i)) {
|
||||
x[i].classList.add("select-hide");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* If the user clicks anywhere outside the select box,
|
||||
then close all select boxes: */
|
||||
document.addEventListener("click", closeAllSelect);
|
||||
$(".select-items div").each(function() {
|
||||
if($( this ).text() == $(".select-selected").text()) {
|
||||
$(this).addClass("same-as-selected");
|
||||
}
|
||||
});
|
||||
|
||||
function filterCourses(selectedItem) {
|
||||
|
||||
let filterGroup = $(selectedItem).closest(".progress-filter").data("topic");
|
||||
let selectedFilter = $(selectedItem).text().replace(" ", "-").toLowerCase();
|
||||
let carouselGroup = $('.courses-carousel[data-topic="' + filterGroup + '"]');
|
||||
|
||||
carouselGroup.slick('slickUnfilter');
|
||||
|
||||
if (selectedFilter != "all-courses") {
|
||||
carouselGroup.slick('slickFilter', `.${selectedFilter}`);
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
191
Custom_Templates/customer_templates/Mizuno/homepage.html.liquid
Normal file
191
Custom_Templates/customer_templates/Mizuno/homepage.html.liquid
Normal file
@ -0,0 +1,191 @@
|
||||
{% if current_person.signed_in? == false %}
|
||||
{% include "header_special" %}
|
||||
<div class="sub-header-angled-section"></div>
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
|
||||
<main class="np-main np-homepage">
|
||||
<div class="np-homepage-hero">
|
||||
<a href="https://www.mizunousa.com" target="_blank">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-homepage-hero-logo-image"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/Mizuno+Golf/logo.png"
|
||||
/>
|
||||
</a>
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-headline np-header-font-color">
|
||||
Mizuno Academy
|
||||
</div>
|
||||
<div class="np-homepage-subheadline np-header-font-color">
|
||||
Founded in Osaka, Japan, Mizuno has been dedicated to creating premium performance gear for all sports lovers for over a century. Our mission is to contribute to society through the advancement of sporting goods and the promotion of sports. Mizuno Academy serves as your dedicated platform for all Mizuno product information, training, and certification. Begin your journey today and become a Mizuno Pro.
|
||||
</div>
|
||||
<div class="hero-sign-up-cta np-header-font-color">
|
||||
<a class="hero-sign-up-cta-link" href="{% route sign_up %}">Become a Pro </a><span class="fal fa-arrow-right"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "mizuno_promo" %}
|
||||
|
||||
{% include "homepage_panels_section" %}
|
||||
</main>
|
||||
{% include "footer_special" %}
|
||||
{% else %}
|
||||
<script>
|
||||
window.location.href = '/app/dashboard'
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.np-homepage{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sub-header-angled-section{
|
||||
content: "";
|
||||
width: 100%;
|
||||
background-color: #001588;
|
||||
height: calc(100% + 200px);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform-origin: left bottom;
|
||||
transform: skewY(9deg);
|
||||
}
|
||||
|
||||
.np-homepage-hero{
|
||||
background-color: transparent;
|
||||
height: 445px;
|
||||
margin-bottom: 90px;
|
||||
}
|
||||
|
||||
.np-homepage-hero-logo-image{
|
||||
height: 250px;
|
||||
max-height: 35%;
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
.np-homepage-hero .np-homepage-subheadline,
|
||||
.homepage-section .np-homepage-subheadline {
|
||||
font-size: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.hero-sign-up-cta{
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
.np-homepage-hero .np-homepage-subheadline,
|
||||
.homepage-section .np-homepage-subheadline,
|
||||
.hero-sign-up-cta{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.np-homepage-headline-mini{
|
||||
font-size: 1.25rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.hero-sign-up-cta-link{
|
||||
color: #ffffff;
|
||||
text-decoration: underline 2px solid #ffffff;
|
||||
}
|
||||
|
||||
.video-container{
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 400px){
|
||||
.sub-header-angled-section{
|
||||
transform: skewY(7deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 465px){
|
||||
.sub-header-angled-section{
|
||||
transform: skewY(6deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.sub-header-angled-section{
|
||||
transform: skewY(8deg);
|
||||
}
|
||||
|
||||
.np-homepage-hero{
|
||||
height: 785px;
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.np-homepage-hero-logo-image{
|
||||
height: 250px;
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
.np-homepage-hero .np-homepage-headline {
|
||||
font-size: 64px;
|
||||
margin-bottom: 35px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.np-homepage-headline-mini{
|
||||
font-size: 48px;
|
||||
margin-bottom: 35px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.np-homepage-hero .np-homepage-subheadline,
|
||||
.homepage-section .np-homepage-subheadline {
|
||||
font-size: 25px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.hero-sign-up-cta{
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.homepage-section-container{
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.video-container{
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 850px){
|
||||
.np-homepage-hero{
|
||||
height: 685px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px){
|
||||
.sub-header-angled-section{
|
||||
transform: skewY(6deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1100px){
|
||||
.sub-header-angled-section{
|
||||
transform: skewY(4deg);
|
||||
}
|
||||
|
||||
.np-homepage-hero{
|
||||
height: 585px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2000px){
|
||||
.np-homepage-hero{
|
||||
margin-top: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px){
|
||||
.np-homepage-hero{
|
||||
margin-top: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
446
Custom_Templates/customer_templates/Mizuno/styles.css.liquid
Normal file
446
Custom_Templates/customer_templates/Mizuno/styles.css.liquid
Normal file
@ -0,0 +1,446 @@
|
||||
/*
|
||||
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 }}
|
||||
*/
|
||||
|
||||
/* HOMEPAGE */
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.np-top-button {
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.np-homepage-subheadline {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.np-homepage-hero {
|
||||
background-color: #001588;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.np-homepage-hero-content {
|
||||
color: white;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.np-homepage-hero-cta.np-button {
|
||||
background-color: #058ccf;
|
||||
padding: 30px;
|
||||
padding-left: 70px;
|
||||
padding-right: 70px;
|
||||
}
|
||||
|
||||
.np-button.mizuno-login {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.angled-section {
|
||||
margin: -15px auto 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.angled-section:before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
background-color: inherit;
|
||||
height: calc(100% + 200px);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
transform-origin: left bottom;
|
||||
transform: skewY(15.5deg);
|
||||
}
|
||||
|
||||
.angled-section-container {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
max-width: 1440px;
|
||||
}
|
||||
|
||||
.homepage-section {
|
||||
background: #001588;
|
||||
}
|
||||
|
||||
.homepage-section-container {
|
||||
text-align: center;
|
||||
padding: 20px 0 60px;
|
||||
}
|
||||
|
||||
.features-section {
|
||||
background: #efeff8;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 375px){
|
||||
.angled-section:before {
|
||||
transform: skewY(15deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 400px){
|
||||
.angled-section:before {
|
||||
transform: skewY(14deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 425px){
|
||||
.angled-section:before {
|
||||
transform: skewY(13deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 450px){
|
||||
.angled-section:before {
|
||||
transform: skewY(12.25deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 450px){
|
||||
.angled-section:before {
|
||||
transform: skewY(11.5deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 480px){
|
||||
.angled-section {
|
||||
margin: 0px auto 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px){
|
||||
.angled-section:before {
|
||||
transform: skewY(11.5deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 525px){
|
||||
.angled-section:before {
|
||||
transform: skewY(10.25deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 550px){
|
||||
.angled-section:before {
|
||||
transform: skewY(7.25deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px){
|
||||
.angled-section:before {
|
||||
transform: skewY(6.5deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 650px){
|
||||
.angled-section:before {
|
||||
transform: skewY(6deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 700px){
|
||||
.angled-section:before {
|
||||
transform: skewY(5.25deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px){
|
||||
.angled-section:before {
|
||||
transform: skewY(4.75deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.angled-section {
|
||||
margin: 30px auto 100px;
|
||||
}
|
||||
|
||||
.angled-section:before {
|
||||
transform: skewY(3deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 850px){
|
||||
.angled-section:before {
|
||||
transform: skewY(3deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px){
|
||||
.angled-section:before {
|
||||
transform: skewY(2.35deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px){
|
||||
.angled-section:before {
|
||||
transform: skewY(2.15deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px){
|
||||
.angled-section:before {
|
||||
transform: skewY(1.9deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1075px){
|
||||
.angled-section:before {
|
||||
transform: skewY(1.6deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1150px){
|
||||
.angled-section:before {
|
||||
transform: skewY(1.5deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1225px){
|
||||
.angled-section:before {
|
||||
transform: skewY(1.25deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1300px){
|
||||
.angled-section:before {
|
||||
transform: skewY(1deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1400px){
|
||||
.angled-section:before {
|
||||
transform: skewY(0.85deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1500px){
|
||||
.angled-section:before {
|
||||
transform: skewY(0.65deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* END
|
||||
HOMEPAGE */
|
||||
|
||||
/* DASHBOARD */
|
||||
|
||||
.np-dashboard {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.category-header-wrapper {
|
||||
margin: 16px 12px;
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title,
|
||||
.np-dashboard-resources-category {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.category-header-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* END */
|
||||
/* DASHBOARD */
|
||||
|
||||
/* SUB NAVIGATION */
|
||||
.np-sub-navigation {
|
||||
margin-bottom: 0;
|
||||
padding: 0 1rem 16px;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(237, 237, 237, 1) 0%,
|
||||
rgba(254, 254, 254, 1) 30%,
|
||||
rgba(254, 254, 254, 1) 70%,
|
||||
rgba(237, 237, 237, 1) 100%
|
||||
);
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item-link {
|
||||
justify-content: flex-end;
|
||||
height: 30px;
|
||||
color: #001588;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-link {
|
||||
color: #001588;
|
||||
font-weight: 700;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-link,
|
||||
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-bar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item-bar {
|
||||
background-color: #001588;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
height: 0.2rem;
|
||||
}
|
||||
/* END */
|
||||
/* SUB NAVIGATION */
|
||||
|
||||
/* COURSE CARDS */
|
||||
.np-card-container {
|
||||
background: #f5f5f5;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.np-card-content-title {
|
||||
color: #292929;
|
||||
}
|
||||
|
||||
.np-card-content-footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.np-card-content-progress {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.np-card .np-button {
|
||||
width: 100%;
|
||||
border-radius: 30px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.np-course-details {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.np-course-detail {
|
||||
font-size: 1.125rem;
|
||||
flex: 0 1 calc(33.33%);
|
||||
}
|
||||
|
||||
.np-details-label {
|
||||
text-transform: uppercase;
|
||||
opacity: 0.5;
|
||||
font-size: 0.75rem;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.row .np-card {
|
||||
margin: 0;
|
||||
padding: 0 10px 4rem;
|
||||
}
|
||||
|
||||
.np-course-detail {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.np-course-banner-info .np-course-details {
|
||||
max-width: 430px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1170px) {
|
||||
.np-course-banner-info .np-course-detail {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.np-course-banner-info .np-details-label {
|
||||
font-size: 1.062rem;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
/* END */
|
||||
/* COURSE CARDS */
|
||||
|
||||
/* LEARNING PATH CARDS */
|
||||
|
||||
.np-learning-paths{
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.np-learning-path .np-button {
|
||||
width: auto;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.np-learning-path .np-learning-path-items {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* END */
|
||||
/* LEARNING PATH CARDS */
|
||||
|
||||
/* CAROUSEL STYLES */
|
||||
.np-carousel .slick-arrow {
|
||||
color: #001588;
|
||||
font-size: 2.5rem;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.np-carousel .slick-arrow:before {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
z-index: 500;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.np-carousel .slick-arrow.fa-chevron-left {
|
||||
left: -30px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.np-carousel .slick-arrow.fa-chevron-right {
|
||||
right: -15px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.np-carousel .np-card {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* END */
|
||||
/* CAROUSEL STYLES */
|
||||
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.np-subpage-container {
|
||||
padding: 80px 5% 0;
|
||||
}
|
||||
}
|
||||
@ -103,8 +103,8 @@ Embedding Questions regarding SCORM files
|
||||
- Cannot filter courses well, especially when resetting course progress. They have to change the course name temporarily to something that starts with A so that it shows up higher in the list.
|
||||
- All the dropdowns are not user friendly because with long lists, it is glitchy and doesn't show all the courses.
|
||||
- SCORM Pacages hurdles:
|
||||
- They can't easily add SCORM packages to the course because it doesn't show up in alphabetical order
|
||||
- The names are not easily readable, you have to scroll very carefully to find the right course.
|
||||
- They can't easily add SCORM packages to the course because it doesn't show up in alphabetical order
|
||||
- The names are not easily readable, you have to scroll very carefully to find the right course.
|
||||
- Siying is literally preventing her boss from using Northpass so he doesn't throw it out of the window before the contract is over.
|
||||
- They have a new VP of Talent Management with them onsite and they will know by next week if they are keeping Northpass or not.
|
||||
- They are currently in budgeting season.
|
||||
|
||||
1
Scripts/GoogleScripts/Artera_wowprog/.clasp.json
Normal file
1
Scripts/GoogleScripts/Artera_wowprog/.clasp.json
Normal file
@ -0,0 +1 @@
|
||||
{"scriptId":"1TtrlsqzXey172jgJ2O8KLOudCm8p-q8aePsWRS4m3_HgLyOgmO1AWKrY","rootDir":"/Users/normrasmussen/Documents/Northpass/Scripts/GoogleScripts/Artera_wowprog"}
|
||||
29
Scripts/GoogleScripts/Artera_wowprog/Code.js
Normal file
29
Scripts/GoogleScripts/Artera_wowprog/Code.js
Normal file
@ -0,0 +1,29 @@
|
||||
var now = new Date();
|
||||
var today = Utilities.formatDate(now, 'America/New_York', 'MM/dd/yyyy');
|
||||
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
|
||||
const sheet2 = SpreadsheetApp.getActiveSpreadsheet().getSheets()[1];
|
||||
var lastColumn = sheet2.getLastColumn()+1;
|
||||
//Logger.log(lastColumn)
|
||||
|
||||
function writeHeadings() {
|
||||
// Write the new Column Headings
|
||||
sheet2.getRange(1, lastColumn).setValue("Percent Change");
|
||||
sheet2.getRange(1, lastColumn+1).setValue("Progress");
|
||||
sheet2.getRange(2, lastColumn+1).setValue(today);
|
||||
// addtoSheet()
|
||||
}
|
||||
|
||||
function addtoSheet() {
|
||||
var numRows = sheet.getLastRow()-1; // Number of rows to process
|
||||
var dataRange = sheet.getRange(2, 2, numRows, 3);
|
||||
var values = dataRange.getValues();
|
||||
|
||||
for (item in values) {
|
||||
var row = values[item];
|
||||
var course= row[0];
|
||||
var avgProgress = row [2];
|
||||
//var setRow = i+1
|
||||
//sheet2.getRange(setRow, 1).setValue(course);
|
||||
//sheet2.getRange(setRow, 2).setValue(avgProgress);
|
||||
}
|
||||
}
|
||||
7
Scripts/GoogleScripts/Artera_wowprog/appsscript.json
Normal file
7
Scripts/GoogleScripts/Artera_wowprog/appsscript.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"timeZone": "America/New_York",
|
||||
"dependencies": {
|
||||
},
|
||||
"exceptionLogging": "STACKDRIVER",
|
||||
"runtimeVersion": "V8"
|
||||
}
|
||||
Binary file not shown.
16
TodoList.md
16
TodoList.md
@ -2,17 +2,11 @@
|
||||
|
||||
DONE: Work with Tracy to create a Confluence Document Illustrating the different Manager Permissions and what the app looks like with those permissions.
|
||||
DONE: Get Chris to create Tracy's Dashboard in Hubspot.
|
||||
TODO: Train Courtney on: Automation, Apps, Analytics, Templates & Design
|
||||
DONE: Train Courtney on: Automation, Apps, Analytics, Templates & Design
|
||||
TODO: Intro Tracy to new clients (see Tracy's slack)
|
||||
|
||||
TODO: Start Implementation Channel, tell everyone that if Patrycja USED to be involved in a client that is now launched and the client reaches out to you and Patrycja, don't expect her to reply. If she has some technical knowledge about the account, then please reach out to her but as for SE tasks, someone else should be doing them.
|
||||
|
||||
Customer Health Score:
|
||||
|
||||
* Usage Data is the most important part
|
||||
|
||||
* Last Seen
|
||||
* No Course in last 3 months
|
||||
* No newly activated learners
|
||||
* New Admins
|
||||
|
||||
TODO: Financial Times outreach with new CSM. They asked for Account Manager.
|
||||
TODO: Intro 4Pillars with Nergis
|
||||
TODO: Intro Kiwi with Nergis
|
||||
TODO: Psychiatry-UK Feb22nd Intro
|
||||
|
||||
Reference in New Issue
Block a user