Added some scripts and customer notes. Change Papa Pal templates.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,36 @@
|
||||
{% capture course_path %}
|
||||
{% route course, id: course.id %}{% endcapture %}
|
||||
|
||||
<a class="np-card" href="{{course_path}}">
|
||||
<div class="np-card-container">
|
||||
<div class="np-img-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
<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>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container">
|
||||
<div class="np-resource-header np-course-header np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
{% include "course_description" %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-6">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.progress == 0 %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,37 @@
|
||||
<div class="np-course-version-outdated-popup np-popup">
|
||||
<div class="np-popup-positioner">
|
||||
<i
|
||||
class="np-course-version-outdated-popup-trigger fas fa-exclamation-circle"
|
||||
data-toggle-class-on-target="np-popup-tooltip--visible"
|
||||
data-toggle-target-parent=".np-popup-tooltip"
|
||||
data-toggle-outside
|
||||
style="color:#1940C0"></i>
|
||||
<div
|
||||
class="np-popup-tooltip"
|
||||
role="tooltip"
|
||||
aria-hidden="true">
|
||||
<header class="np-popup-header">
|
||||
<i class="np-popup-header-icon fas fa-exclamation-circle"></i>
|
||||
<h3 class="np-popup-header-title">
|
||||
{% t.title %}
|
||||
</h3>
|
||||
</header>
|
||||
<div class="np-popup-body">
|
||||
<h4>{% t.body.header %}</h4>
|
||||
<p>{% t.body.content %}</p>
|
||||
<div class="np-popup-body-button" data-path="{{path}}">
|
||||
{% t.body.button %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-popup-tail"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-course-version-outdated-popup {
|
||||
margin: 0 auto 0 12px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,159 @@
|
||||
<div class="rounded-border-wrapper">
|
||||
<svg aria-hidden="true" viewBox="0 0 1440 64" preserveAspectRatio="none"><path d="M0,0S203,64,720,64,1440,0,1440,0V64H0Z"></path></svg>
|
||||
</div>
|
||||
<footer class="np-footer">
|
||||
<div class="footer-image"><img src="https://s3.amazonaws.com/static.northpass.com/papa/footer-image.png" loading="lazy" width="200" height="200"/></div>
|
||||
<div class="np-footer-top">
|
||||
<div class="np-footer-navigation footer-navigation-top">
|
||||
<div class="np-footer-navigation-list">
|
||||
<li class="np-footer-navigation-item">
|
||||
<a href="https://www.papa.com/health-plans" target="_blank" class="np-footer-navigation-link">Health Plans</a>
|
||||
</li>
|
||||
<li class="np-footer-navigation-item">
|
||||
<a href="https://www.papa.com/corporate-wellness-programs" target="_blank" class="np-footer-navigation-link">Employers</a>
|
||||
</li>
|
||||
<li class="np-footer-navigation-item">
|
||||
<a href="https://www.papa.com/pals" target="_blank" class="np-footer-navigation-link">Be a Papa Pal</a>
|
||||
</li>
|
||||
<li class="np-footer-navigation-item">
|
||||
<a href="https://www.papa.com/members" target="_blank" class="np-footer-navigation-link">Members</a>
|
||||
</li>
|
||||
<li class="np-footer-navigation-item">
|
||||
<a href="https://www.papa.com/about/careers" target="_blank" class="np-footer-navigation-link">Careers</a>
|
||||
</li>
|
||||
<li class="np-footer-navigation-item">
|
||||
<a href="https://www.papa.com/resources" target="_blank" class="np-footer-navigation-link">Resources</a>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
{% if website_footer.show_navigation_links? %}
|
||||
<div class="np-footer-navigation">
|
||||
<ul class="np-footer-navigation-list">
|
||||
<li class="np-footer-navigation-item np-footer-navigation-link">
|
||||
Papa Inc © 2022
|
||||
</li>
|
||||
{% for website_navigation in navigations.footer_navigations %}
|
||||
{% if website_navigation.external? %}
|
||||
<li class="np-footer-navigation-item">
|
||||
<a
|
||||
class="np-footer-navigation-link"
|
||||
href="{{ website_navigation.path }}"
|
||||
target="_blank"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="social-media-links">
|
||||
<a href="https://twitter.com/join_papa" rel="noopener" target="_blank">
|
||||
<svg width="40px" height="40px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation"><path d="M16 0C7.14 0 0 7.14 0 16s7.14 16 16 16 16-7.14 16-16S24.86 0 16 0Zm9.734 12.484v.594c0 6-4.547 12.922-12.922 12.922-2.546 0-4.953-.703-6.953-2 .329.031.704.078 1.063.078 2.156 0 4.078-.86 5.64-2.078-1.968-.031-3.671-1.266-4.234-3.078.266.047.563.078.86.078.406 0 .812-.031 1.187-.14-2.078-.454-3.64-2.266-3.64-4.485v-.047a4.096 4.096 0 0 0 2.046.563c-1.219-.813-2-2.188-2-3.782 0-.812.219-1.593.594-2.296a12.908 12.908 0 0 0 9.406 4.78 4.631 4.631 0 0 1-.11-1.03c0-2.532 2-4.563 4.517-4.563 1.296 0 2.484.563 3.296 1.438a9.139 9.139 0 0 0 2.844-1.11c-.328 1.078-1 1.969-1.953 2.531A10.334 10.334 0 0 0 28 10.141c-.625.89-1.375 1.718-2.266 2.343Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://www.facebook.com/joinpapa/" rel="noopener" target="_blank">
|
||||
<svg width="40px" height="40px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation"><path d="M16 0C7.172 0 0 7.172 0 16c0 8.719 6.969 15.813 15.64 16V19.328H12v-4h3.64v-4c0-3.172 1.938-5.312 5.782-5.312 1.687 0 2.875.265 2.875.265V10H21.75c-1.172 0-1.75.656-1.75 1.813v3.515h4l-.578 4H20V31.5c6.906-1.781 12-8.047 12-15.5 0-8.828-7.172-16-16-16Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/PapaInc" rel="noopener" target="_blank">
|
||||
<svg width="40px" height="40px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation"><path d="M16 0C7.14 0 0 7.14 0 16s7.14 16 16 16 16-7.14 16-16S24.86 0 16 0Zm0 23.328c-10 0-10 0-10-7.328s0-7.328 10-7.328 10 0 10 7.328 0 7.328-10 7.328ZM13.328 20 20 16l-6.672-4v8Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/company/papainc" rel="noopener" target="_blank">
|
||||
<svg width="40px" height="40px" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="presentation"><path d="M16 0C7.14 0 0 7.14 0 16s7.14 16 16 16 16-7.14 16-16S24.86 0 16 0ZM9.328 10.672h-.031c-1.594 0-2.625-1.047-2.625-2.344C6.672 7 7.734 6 9.328 6c1.64 0 2.64 1 2.672 2.328 0 1.297-1.031 2.344-2.672 2.344Zm2 13.328h-4V12.672h4V24ZM26 24h-4v-6c0-2.031-.813-2.672-2.031-2.672C18.734 15.328 18 16.375 18 18v6h-4v-8.672s-.078-2.219-.11-2.656h3.97l.14 1.734C18.516 12.97 19.703 12 21.328 12 24.188 12 26 14.328 26 18v6Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://www.instagram.com/join_papa/" rel="noopener" target="_blank">
|
||||
<svg width="40px" height="40px" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.6806 11.1244H15.3194C12.6512 11.1244 10.4805 13.2951 10.4805 15.9633V25.3245C10.4805 27.9927 12.6512 30.1634 15.3194 30.1634H24.6806C27.3488 30.1634 29.5195 27.9927 29.5195 25.3245V15.9633C29.5195 13.2951 27.3488 11.1244 24.6806 11.1244ZM25.8677 20.6552C25.8564 23.8434 23.2674 26.4325 20.0791 26.4212C16.8909 26.4099 14.3018 23.8208 14.3131 20.6326C14.3244 17.4443 16.9135 14.8553 20.1017 14.8666C23.29 14.8779 25.8677 17.4556 25.8677 20.6439V20.6552ZM27.5862 14.4935C27.5862 15.251 26.9644 15.8728 26.2069 15.8728C25.4494 15.8728 24.8276 15.251 24.8276 14.4935C24.8276 13.736 25.4494 13.1142 26.2069 13.1142H26.2182C26.9757 13.1142 27.5862 13.7247 27.5862 14.4822V14.4935ZM20.0791 16.9469C18.0328 16.9582 16.3708 18.6201 16.3821 20.6665C16.3934 22.7129 18.0554 24.3748 20.1017 24.3635C22.1368 24.3522 23.7874 22.7016 23.7987 20.6665V20.6439C23.7874 18.5975 22.1255 16.9356 20.0791 16.9469Z" fill="currentColor"></path><path d="M20 0.666504C8.95421 0.666504 0 9.62072 0 20.6665C0 31.7123 8.95421 40.6665 20 40.6665C31.0458 40.6665 40 31.7123 40 20.6665C40 9.62072 31.0458 0.666504 20 0.666504ZM31.7241 25.3245C31.6902 29.1911 28.5472 32.3115 24.6806 32.3228H15.3194C11.4302 32.3115 8.28717 29.1685 8.27586 25.2793V15.9633C8.27586 12.0741 11.4302 8.91975 15.3194 8.90845H24.6806C28.5698 8.91975 31.7241 12.0741 31.7241 15.9633V25.3245Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
|
||||
.np-footer,
|
||||
.np-powered-by {
|
||||
background-color:#06083c;
|
||||
}
|
||||
|
||||
.np-footer .footer-image img {
|
||||
width: 200px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.rounded-border-wrapper {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.rounded-border-wrapper svg {
|
||||
fill: #06083c;
|
||||
overflow: visible;
|
||||
transform: translate(0, calc(-100% + 1px)) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
height:21px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.np-footer-bottom, .np-footer-top {
|
||||
justify-content: center;
|
||||
margin-bottom:32px;
|
||||
}
|
||||
|
||||
.np-footer-top {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.np-footer-navigation-link {
|
||||
font-family: "Moderne", Arial, sans-serif;
|
||||
font-weight:700;
|
||||
font-size:18px;
|
||||
color:rgb(22, 128, 243);
|
||||
}
|
||||
|
||||
.footer-navigation-top .np-footer-navigation-link {
|
||||
font-size:24px;
|
||||
color:#69f1ff;
|
||||
}
|
||||
|
||||
.np-footer-navigation-list {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.np-footer-navigation-item {
|
||||
margin-bottom:17px;
|
||||
}
|
||||
|
||||
.social-media-links {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.social-media-links > a > svg {
|
||||
color:#69f1ff;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.rounded-border-wrapper svg {
|
||||
height:64px;
|
||||
}
|
||||
|
||||
.np-footer {
|
||||
background-color:#06083c;
|
||||
padding: 80px 24px;
|
||||
}
|
||||
|
||||
.social-media-links > a > svg {
|
||||
margin: 0 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,201 @@
|
||||
<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 fal fa-bars"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"></button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}" />
|
||||
</a>
|
||||
</h1>
|
||||
{% 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-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
|
||||
{% 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-avatar">
|
||||
{% comment %} <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> {% 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>
|
||||
{% 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? %}
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
{% unless website_navigation.name == "Dashboard" %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %}
|
||||
target="_blank"
|
||||
{% endif %}>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
{% comment %} {% unless current_school.sso_active? %}
|
||||
<a class="np-header-mobile-menu-content-button" href="{% route account %}">
|
||||
{% t.profile_settings %}
|
||||
</a>
|
||||
{% endunless %} {% endcomment %}
|
||||
<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 {
|
||||
padding: 24px 16px;
|
||||
height: auto;
|
||||
z-index: 51;
|
||||
}
|
||||
|
||||
.np-header-logo {
|
||||
justify-content: flex-start;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.np-header-logo-image {
|
||||
height: 50px;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-list {
|
||||
background: #fff;
|
||||
border-radius: 30px;
|
||||
margin: 0 32px;
|
||||
padding: 0 24px;
|
||||
box-shadow: 0 0 12px rgba(10, 30, 37, 0.15);
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link {
|
||||
font-weight: 700;
|
||||
font-family: 'Hind', Verdana, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content {
|
||||
background-color: #06083c;
|
||||
padding-top: 70px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-nav-button,
|
||||
.np-header-mobile-menu-content-name {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.fa-times {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button.np-danger {
|
||||
border: 2px solid #1140c0;
|
||||
color: #1140c0;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
|
||||
.np-header {
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
.np-header-content {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.np-header-logo-image {
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:1170px) {
|
||||
.np-header-logo-image {
|
||||
height: 116px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,135 @@
|
||||
<div class="hero">
|
||||
<div class="np-max-width hero-content">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<h2 class="hero-title">Papa Pal University</h2>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="hero-imagery">
|
||||
<div class="hero-image top-image"><img src="https://s3.amazonaws.com/static.northpass.com/papa/hero-image-face-yellow.png" loading="lazy" /></div>
|
||||
<div class="hero-image left-image"><img src="https://s3.amazonaws.com/static.northpass.com/papa/hero-image-face-blue.png" loading="lazy" /></div>
|
||||
<div class="hero-image right-image"><img src="https://s3.amazonaws.com/static.northpass.com/papa/hero-image-face-green.png" loading="lazy" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.hero {
|
||||
background-color: #06083c;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 120px 16px 64px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hero:before {
|
||||
content: "";
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-image: url('https://s3.amazonaws.com/static.northpass.com/papa/hero-background-squiggle.png');
|
||||
transform: translate(9%, -16%);
|
||||
background-size: 109%;
|
||||
background-position: bottom left;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero .hero-title {
|
||||
font-size: 48px;
|
||||
line-height: 130%;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-imagery {
|
||||
display: none;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-imagery .hero-image {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-imagery .hero-image.top-image {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-imagery .hero-image.left-image {
|
||||
top: -35px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.hero-imagery .hero-image.right-image {
|
||||
right: 20px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.hero-imagery img {
|
||||
max-width: 230px;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
|
||||
.hero {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.hero:before {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.hero .hero-title {
|
||||
font-size: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:1024px) {
|
||||
.hero {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.hero:before {
|
||||
background-size: 100%;
|
||||
transform: translate(0%, -16%);
|
||||
}
|
||||
|
||||
.hero .hero-title {
|
||||
font-size: 90px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-imagery {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:1200px) {
|
||||
.hero {
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.hero .hero-title {
|
||||
font-size: 104px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,46 @@
|
||||
{% 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" %}
|
||||
|
||||
<style>
|
||||
|
||||
@media (min-width:768px) {
|
||||
|
||||
body {
|
||||
background-color:#06083c;
|
||||
}
|
||||
|
||||
#course-desktop .np-card-container,
|
||||
#course-mobile .np-card-container {
|
||||
border-radius:30px;
|
||||
}
|
||||
|
||||
.np-main.np-page-container {
|
||||
margin-top:200px;
|
||||
}
|
||||
|
||||
.np-top-title,
|
||||
.np-top-button,
|
||||
.np-top-cta-progress-title,
|
||||
.np-course-outline-content-activity-link {
|
||||
font-family: 'Hind', Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.np-top-button,
|
||||
.np-top-image {
|
||||
border-radius:30px;
|
||||
}
|
||||
|
||||
.np-top-cta {
|
||||
padding: 1.25rem 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,40 @@
|
||||
{% include "header" %}
|
||||
{% include "homepage_hero" %}
|
||||
{% 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-11">
|
||||
<div class="introduction">
|
||||
<div class="np-resource-title">Required Training</div>
|
||||
<div class="np-resource-subtitle">All Pals need to complete the below training. The information in it will help you better understand Papa, our members and how we all work together to ensure a safe and positive Papa community.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row np-flex-center">
|
||||
{% comment %} {% if features.training_events? %}
|
||||
{% assign courses_index_col = "col-sm-8" %}
|
||||
{% assign cards_classes = "col-xs-12 col-sm-6 np-stretch-content " %}
|
||||
{% else %}
|
||||
{% assign courses_index_col = "col-sm-11" %}
|
||||
{% assign cards_classes = "col-xs-12 col-sm-6 col-md-4 np-stretch-content" %}
|
||||
{% endif %} {% endcomment %}
|
||||
<div class="col-xs-12 col-sm-11">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
{% endif %}
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 col-md-4 np-stretch-content" %}
|
||||
</div>
|
||||
{% comment %} {% 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 %} {% endcomment %}</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,138 @@
|
||||
/*
|
||||
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 }}
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: "Moderne";
|
||||
src: url('https://s3.amazonaws.com/static.northpass.com/fonts/ModerneLL-Bold.woff2');
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Moderne";
|
||||
src: url('https://s3.amazonaws.com/static.northpass.com/fonts/ModerneLL-Fat.woff2');
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Bradford";
|
||||
src: url('https://s3.amazonaws.com/static.northpass.com/fonts/BradfordLL-Regular.woff2');
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
/* GLOBAL STYLES */
|
||||
|
||||
body,
|
||||
.np-dashboard {
|
||||
background: #f5fbff;
|
||||
color: #06083c;
|
||||
font-family: 'Bradford', "Times New Roman", serif;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
a {
|
||||
font-family: 'Moderne', Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.np-subpage-container {
|
||||
padding: 64px 24px;
|
||||
}
|
||||
|
||||
.np-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.back-to-home {
|
||||
text-decoration: none;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #06083c;
|
||||
font-family: 'Bradford', "Times New Roman", serif;
|
||||
}
|
||||
|
||||
.back-to-home i {
|
||||
background-color: #1140c0;
|
||||
border-radius: 50%;
|
||||
padding: 12px;
|
||||
color: #69f1ff;
|
||||
margin-right: 16px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
.np-subpage-container {
|
||||
padding: 80px 24px;
|
||||
}
|
||||
|
||||
.np-header-logo-image {
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.np-card {
|
||||
transition: all 0.1s;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.np-card:hover {
|
||||
transform: rotate(-3deg)
|
||||
}
|
||||
|
||||
.np-card .np-card-container {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.np-img-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.np-card .np-button {
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.np-card .np-card-content .np-card-content-progress {
|
||||
font-family: 'Bradford', "Times New Roman", serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.np-card-ribbon {
|
||||
border-radius: 30px;
|
||||
left: 8px;
|
||||
right: auto;
|
||||
top: auto;
|
||||
bottom: 10px;
|
||||
padding: 5px 12px;
|
||||
font-family: 'Bradford', "Times New Roman", serif;
|
||||
text-transform: none;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
color: #1140c0;
|
||||
background-color: #69f1ff
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
@media screen and (min-width: 768px) {
|
||||
.row .np-card {
|
||||
margin: 0;
|
||||
padding: 0 16px 32px;
|
||||
}
|
||||
}
|
||||
@ -267,3 +267,15 @@ designs and these new ones.
|
||||
* Product (Custom Property)
|
||||
* Course/Activities
|
||||
* Talk with Austin about what's possible - can the filtering work with the existing search results? Not separate searches?
|
||||
|
||||
## 10/06/2023
|
||||
|
||||
### Weekly Sync, Aaron invited
|
||||
|
||||
Questions and Topics are mostly around Aaron's workflow.
|
||||
|
||||
* End of Course screen:
|
||||
* Update it programmatically - data fix?
|
||||
* Wanted to discuss how other clients leverage the end of course screen
|
||||
* I offered to help if they have the same custom screen for each course.
|
||||
* I need to test on my end what the database entry looks like for a custom end of course screen
|
||||
|
||||
@ -369,3 +369,10 @@ To better understand how we can make learners/teachers better and easier access
|
||||
* Meet with Marta re: analytics.
|
||||
* Send Sophia LP analytics before end of next week.
|
||||
* Frustrated with unannounced changes in the platform.
|
||||
|
||||
## 10/06/2023
|
||||
|
||||
### Access & Design Project
|
||||
|
||||
DONE: Get Sophia a marketing number on usage increase between embedded and non-embedded academies.
|
||||
|
||||
|
||||
@ -59,7 +59,7 @@ def write_to_csv(courses):
|
||||
Takes on parameter, the list of courses.
|
||||
"""
|
||||
df = pd.DataFrame.from_dict(courses)
|
||||
df.to_csv("/Users/normrasmussen/Downloads/walmart_courses_descriptions.csv")
|
||||
df.to_csv("/Users/normrasmussen/Downloads/courses_descriptions.csv")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
|
||||
Reference in New Issue
Block a user