Tons of Solutions Engineering work done today for the rest of the CS team! Headway, Howard Hanna, Engels, Brighton, etc. Also completed Datasnippers auth flow and worked on Anthology's script. Cloned Anthology's courses (900..) and will clone Full Story on Monday.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,69 @@
|
||||
{% assign cat_name = "" %}
|
||||
{% assign cat_class = "" %}
|
||||
{% for category in course.categories limit: 1 %}
|
||||
{% unless category.name contains "Focus-" or category.name contains "Production Applications-" or category.name contains "Materials-" or category.name contains "Cleaning Methods-" %}
|
||||
{% assign cat_name = category.name %}
|
||||
{% assign cat_class = cat_name | replace: " ", "-" | downcase | replace: "&", "and" %}
|
||||
{% endunless % %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="np-card course-card">
|
||||
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div style="position: relative;">
|
||||
<div class="course-category {{cat_class}}">
|
||||
<span>{{ cat_name }}</span>
|
||||
</div>
|
||||
<div class="course-image-container">
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
{% unless course.instructor_names == "" %}
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
{% endunless %}
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% if course.progress == 100 %}
|
||||
<i class="far fa-check-circle"></i>
|
||||
<span>completed</span>
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
<i class="fas fa-spinner"></i>
|
||||
<span>{% t shared.progress, count: course.progress %}</span>
|
||||
{% else %}
|
||||
<i class="not-started-circle"></i>
|
||||
<span>{% t shared.progress, count: course.progress %}</span>
|
||||
{% endif %}
|
||||
|
||||
</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" href="{{ course_path }}">
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
Continue
|
||||
{% elsif course.progress == 100 %}
|
||||
Retake
|
||||
{% else %}
|
||||
Start
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,84 @@
|
||||
<div class="np-card np-no-horizontal-padding learning-path-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<div class="learning-path-image-container">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="np-hidden-desktop np-card-header">
|
||||
<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>
|
||||
{% comment %} <div class="np-hidden-mobile np-card-header">
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
</div> {% endcomment %}
|
||||
|
||||
<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>
|
||||
|
||||
{% comment %} <div class="np-hidden-mobile np-card-content-description">
|
||||
{{ learning_path.description }}
|
||||
</div> {% endcomment %}
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-progress
|
||||
np-button-color">
|
||||
{% if learning_path.progress == 100 %}
|
||||
<i class="far fa-check-circle"></i> <span>completed</span>
|
||||
{% elsif learning_path.progress > 0 and learning_path.progress < 100 %}
|
||||
<i class="fas fa-spinner"></i> <span>{% t shared.progress, count: learning_path.progress %}</span>
|
||||
{% else %}
|
||||
<i class="not-started-circle"></i> <span>{% t shared.progress, count: learning_path.progress %}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%; {% if learning_path.progress == 100 %}background-color: #16C466;{% endif %}"
|
||||
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">
|
||||
{% if learning_path.progress == 100 %}
|
||||
<i class="far fa-check-circle"></i> <span>completed</span>
|
||||
{% elsif learning_path.progress > 0 and learning_path.progress < 100 %}
|
||||
<i class="fas fa-spinner"></i> <span>{% t shared.progress, count: learning_path.progress %}</span>
|
||||
{% else %}
|
||||
<i class="not-started-circle"></i> <span>{% t shared.progress, count: learning_path.progress %}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<a class="np-button" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% if learning_path.progress > 0 and learning_path.progress < 100 %}
|
||||
Continue
|
||||
{% else %}
|
||||
{% t shared.view %}
|
||||
{% endif %}
|
||||
</a>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.84375 0.9375H2.53125C2.98828 0.9375 3.375 1.32422 3.375 1.78125V3.46875C3.375 3.96094 2.98828 4.3125 2.53125 4.3125V7.40625H4.5C4.5 6.94922 4.85156 6.5625 5.34375 6.5625H7.03125C7.48828 6.5625 7.875 6.94922 7.875 7.40625V9.09375C7.875 9.58594 7.48828 9.9375 7.03125 9.9375H5.34375C4.85156 9.9375 4.5 9.58594 4.5 9.09375H2.53125V12.75C2.53125 12.9258 2.63672 13.0312 2.8125 13.0312H4.5C4.5 12.5742 4.85156 12.1875 5.34375 12.1875H7.03125C7.48828 12.1875 7.875 12.5742 7.875 13.0312V14.7188C7.875 15.2109 7.48828 15.5625 7.03125 15.5625H5.34375C4.85156 15.5625 4.5 15.2109 4.5 14.7188H2.8125C1.72266 14.7188 0.84375 13.8398 0.84375 12.75V8.25V4.3125C0.351562 4.3125 0 3.96094 0 3.46875V1.78125C0 1.32422 0.351562 0.9375 0.84375 0.9375ZM5.625 2.625C5.625 2.16797 5.97656 1.78125 6.46875 1.78125H17.1562C17.6133 1.78125 18 2.16797 18 2.625C18 3.11719 17.6133 3.46875 17.1562 3.46875H6.46875C5.97656 3.46875 5.625 3.11719 5.625 2.625ZM10.125 8.25C10.125 7.79297 10.4766 7.40625 10.9688 7.40625H17.1562C17.6133 7.40625 18 7.79297 18 8.25C18 8.74219 17.6133 9.09375 17.1562 9.09375H10.9688C10.4766 9.09375 10.125 8.74219 10.125 8.25ZM10.125 13.875C10.125 13.418 10.4766 13.0312 10.9688 13.0312H17.1562C17.6133 13.0312 18 13.418 18 13.875C18 14.3672 17.6133 14.7188 17.1562 14.7188H10.9688C10.4766 14.7188 10.125 14.3672 10.125 13.875Z" fill="#185A7D"/>
|
||||
</svg>
|
||||
<span class="np-learning-path-items-count">
|
||||
{{ learning_path.items.count }} Courses
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,28 @@
|
||||
<div class="np-card previous-event-card">
|
||||
<div class="np-card-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 }}"
|
||||
>
|
||||
<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-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{{ course.properties.previous_event_date_and_time}}
|
||||
</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a class="np-button" href="{{ course_path }}">
|
||||
Watch
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,42 @@
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% assign enrolled_courses_alphabetical = courses.enrolled | sort: "name" %}
|
||||
{% for course in enrolled_courses_alphabetical %}
|
||||
|
||||
{% assign course_progress = "" %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign course_progress = "completed" %}
|
||||
{% elsif course.progress < 100 and course.progress > 0 %}
|
||||
{% assign course_progress = "in-progress" %}
|
||||
{% else %}
|
||||
{% assign course_progress = "not-started" %}
|
||||
{% endif %}
|
||||
|
||||
{% assign cat_name = "" %}
|
||||
{% for category in course.categories limit: 1 %}
|
||||
{% assign cat_name = category.name %}
|
||||
{% endfor %}
|
||||
<div class="{{ class }}" data-progress="{{course_progress}}" data-category="{{cat_name}}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-card.course-card {
|
||||
padding: 0 0 100px;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,108 @@
|
||||
<footer class="np-footer">
|
||||
<div class="footer-container">
|
||||
<div class="footer-title">Brighton Science Service and Support</div>
|
||||
<a
|
||||
class="footer-item"
|
||||
href="https://customer.brighton-science.com/myinstruments"
|
||||
target="_blank">
|
||||
<span>
|
||||
Instrument Records and Support
|
||||
</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="1em"
|
||||
viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" /></svg>
|
||||
</a>
|
||||
<a
|
||||
class="footer-item"
|
||||
href="https://customer.brighton-science.com/knowledge"
|
||||
target="_blank">
|
||||
<span>
|
||||
Knowledge Base
|
||||
</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="1em"
|
||||
viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" /></svg>
|
||||
</a>
|
||||
<a
|
||||
class="footer-item"
|
||||
href="https://store.brighton-science.com"
|
||||
target="_blank">
|
||||
<span>
|
||||
Instrument Parts and Service
|
||||
</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="1em"
|
||||
viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" /></svg>
|
||||
</a>
|
||||
<a
|
||||
class="footer-item"
|
||||
href="https://app.brighton-science.com/experiments/list"
|
||||
target="_blank">
|
||||
<span>
|
||||
BConnect
|
||||
</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="1em"
|
||||
viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" /></svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.np-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 373px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
width: 85%;
|
||||
border-top: 6px solid #185A7D;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footer-title {
|
||||
color: #185A7D;
|
||||
font-family: Helvetica Neue;
|
||||
font-size: 34px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.footer-item {
|
||||
color: #0077B8;
|
||||
font-size: 19px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 49px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-item:hover {
|
||||
color: #185A7D;
|
||||
}
|
||||
|
||||
.footer-item svg {
|
||||
margin-left: 10px;
|
||||
fill: #0077B8;
|
||||
}
|
||||
|
||||
.footer-item:hover svg {
|
||||
fill: #185A7D;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,9 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;900&display=swap" rel="stylesheet">
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
|
||||
@ -0,0 +1,309 @@
|
||||
<header class="np-header np-header-color">
|
||||
<div class="np-header-content">
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"></button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer">
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}" />
|
||||
</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 }}" />
|
||||
<div class="logo-text">Brighton Academy</div>
|
||||
</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 link in navigations.sub_navigation %}
|
||||
{% unless link.label == "Dashboard" %}
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a href="{% if link.label == 'Catalog' %}/app/courses{% else %}{{ link.url }}{% endif %}" class="np-header-desktop-nav-link np-header-font-color {{ link.active_class }}">
|
||||
{% if link.label == "Home" %}
|
||||
Dashboard
|
||||
{% elsif link.label == "Catalog" %}
|
||||
Courses
|
||||
{% elsif link.label == "Events" %}
|
||||
Upcoming Events
|
||||
{% else %}
|
||||
{{ link.label }}
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank">
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form
|
||||
action="{% route search %}"
|
||||
method="get"
|
||||
data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}" />
|
||||
<i class="np-header-search-icon far fa-search np-header-font-color"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside>
|
||||
<div>
|
||||
<span class="welcome-text">Welcome back,</span><br>
|
||||
<strong class="person-name-text">
|
||||
{% if current_person.first_name %}
|
||||
{{ current_person.first_name }}{% endif %}
|
||||
{% if current_person.last_name %}
|
||||
{{ current_person.last_name }}{% endif %}
|
||||
</strong>
|
||||
</div>
|
||||
<svg
|
||||
style="margin-left: 13px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="9"
|
||||
viewBox="0 0 21 13"
|
||||
fill="none">
|
||||
<path
|
||||
d="M1.0376 1.23193L10.5188 10.7129L20 1.23193"
|
||||
stroke="#0077B8"
|
||||
stroke-width="2" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<div>
|
||||
<span class="welcome-text">Welcome back,</span><br>
|
||||
<strong class="person-name-text">
|
||||
{% if current_person.first_name %}
|
||||
{{ current_person.first_name }}{% endif %}
|
||||
{% if current_person.last_name %}
|
||||
{{ current_person.last_name }}{% endif %}
|
||||
</strong>
|
||||
</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" href="/app/profile">
|
||||
Your Profile
|
||||
</a>
|
||||
<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 %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}" />
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}" />
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
{% for link in navigations.sub_navigation %}
|
||||
<a href="{{ link.url }}" class="np-header-mobile-menu-content-button {{ link.active_class }}">
|
||||
{% if link.label == "Home" %}
|
||||
Dashboard
|
||||
{% elsif link.label == "Events" %}
|
||||
Upcoming Events
|
||||
{% else %}
|
||||
{{ link.label }}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endfor %}
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a class="np-header-mobile-menu-content-button" href="{% route account %}">
|
||||
{% t.profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a class="np-header-mobile-menu-content-button" href="/app/profile">
|
||||
Your Profile
|
||||
</a>
|
||||
<a class="np-header-mobile-menu-content-button np-danger" href="{% route logout %}">
|
||||
{% t.sign_out %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
|
||||
.np-header-logo a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.np-header-logo img {
|
||||
border-right: 1px solid #707070;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.np-header-logo .logo-text {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.4px;
|
||||
margin-left: 16px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item-inactive {
|
||||
color: #0077B8;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item-active {
|
||||
color: #185A7D!important;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
border-bottom: 1px solid #185A7D;
|
||||
}
|
||||
|
||||
.np-header {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-bottom: 1px solid #185A7D;
|
||||
padding: 0 4%;
|
||||
}
|
||||
|
||||
.np-header-avatar-button {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.np-header-avatar-button i {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.np-header-search-icon {
|
||||
color: #0077B8;
|
||||
font-size: 23px;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
color: #185A7D;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.person-name-text {
|
||||
color: #185A7D;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
border: 1px solid #F0F0F0;
|
||||
background: #fff;
|
||||
box-shadow: 2px 1px 1.5px 0 rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip > div {
|
||||
padding-left: 20px;
|
||||
padding-top: 10px
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link {
|
||||
color: #0077B8;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 46px;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
.np-header {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.np-header-logo .logo-text {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,31 @@
|
||||
<div class="progress-activity-section-container">
|
||||
<div class="np-main np-dashboard np-subpage-container np-max-width progress-activity-section">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="dashboard-title">YOUR PROGRESS</div>
|
||||
{% include "section_progress_widget" %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
{% include "section_recent_activity", enrolled_courses: enrolled_courses, enrolled_learning_paths: enrolled_learning_paths %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.progress-activity-section-container {
|
||||
margin-bottom: 6px;
|
||||
box-shadow: 0px 3px 2.5px 0px rgba(0, 0, 0, 0.42);
|
||||
}
|
||||
|
||||
.progress-activity-section-container,
|
||||
.progress-activity-section {
|
||||
background-color: #f7fbfe;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.progress-activity-section {
|
||||
padding: 42px 60px 54px 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,29 @@
|
||||
<div class="np-learning-paths-resources row">
|
||||
{% if learning_paths.available.any? %}
|
||||
{% for learning_path in items %}
|
||||
|
||||
{% assign learning_path_progress = "" %}
|
||||
{% if learning_path.progress == 100 %}
|
||||
{% assign learning_path_progress = "completed" %}
|
||||
{% elsif learning_path.progress < 100 and learning_path.progress > 0 %}
|
||||
{% assign learning_path_progress = "in-progress" %}
|
||||
{% endif %}
|
||||
|
||||
{% assign cat_name = "" %}
|
||||
{% for category in learning_path.categories limit: 1 %}
|
||||
{% assign cat_name = category.name %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="col-xs-12 col-md-6 lp-column" data-progress="{{learning_path_progress}}" data-category="{{cat_name}}">
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,41 @@
|
||||
{% assign radius = 93 %}
|
||||
{% assign pi = 3.14159 %}
|
||||
{% assign circumference = radius | times: 2 | times: pi %}
|
||||
{% assign progress = count | times: 1.0 | divided_by: total %}
|
||||
{% assign offset = 1 | minus: progress | times: circumference %}
|
||||
|
||||
{% assign circle_background_color = '#e5e9eb' %}
|
||||
{% assign progress_number_color = '#1b3e4f' %}
|
||||
|
||||
<div class="progress-circle-wrapper">
|
||||
<svg
|
||||
class="progress-circle"
|
||||
width="212"
|
||||
height="212">
|
||||
<circle
|
||||
class="circle circle-bg"
|
||||
stroke="#6FCFEB"
|
||||
stroke-width="17"
|
||||
fill="transparent"
|
||||
r="{{ radius }}"
|
||||
cx="106"
|
||||
cy="106"
|
||||
/>
|
||||
<circle
|
||||
class="circle"
|
||||
stroke="#185A7D"
|
||||
stroke-width="17"
|
||||
fill="transparent"
|
||||
r="{{ radius }}"
|
||||
cx="106"
|
||||
cy="106"
|
||||
stroke-dasharray="{{ circumference }} {{ circumference }}"
|
||||
stroke-dashoffset="{{ offset }}"
|
||||
style='transform: rotate(-90deg);transform-origin: 50% 50%;'
|
||||
/>
|
||||
<text class='dt' x="50%" y="60%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="{{ progress_number_color }}" dy=".3em">
|
||||
<tspan x="50%" dy="0em" class="progress-circle-big-text">{{count}}</tspan>
|
||||
<tspan x="50%" dy="1.4em" class="progress-circle-text">of {{ total }}</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
@ -0,0 +1,168 @@
|
||||
<div class="row lps-row">
|
||||
{% assign displayed_learning_paths_count = 0 %}
|
||||
<div class="col-xs-12">
|
||||
<div class="flex-wrapper">
|
||||
<div class="dashboard-title">LEARNING PATHS: NEW AND IN PROGRESS</div>
|
||||
<div class="learning-paths-link">
|
||||
<a href="/app/learning_paths?category=completed">View completed Learning Paths</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if learning_paths.enrolled.any? %}
|
||||
{% assign learning_paths_by_progress = learning_paths.enrolled | sort: "progress" | reverse %}
|
||||
{% assign learning_paths_index = 1 %}
|
||||
|
||||
{% for learning_path in learning_paths_by_progress %}
|
||||
{% if learning_path.progress < 100 and learning_paths_index < 3 %}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% assign learning_paths_index = learning_paths_index | plus: 1 %}
|
||||
{% assign displayed_learning_paths_count = displayed_learning_paths_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if displayed_learning_paths_count == 0 %}
|
||||
<div class="learning-paths-completed-card np-card">
|
||||
<div>
|
||||
<div class="flex-wrapper">
|
||||
<div class="completion-icon">
|
||||
<svg
|
||||
width="102"
|
||||
height="103"
|
||||
viewBox="0 0 102 103"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M48.4102 68.4844C46.2188 70.6758 42.832 70.6758 40.6406 68.4844L27.8906 55.7344C25.6992 53.543 25.6992 50.1562 27.8906 47.9648C30.082 45.7734 33.4688 45.7734 35.6602 47.9648L44.625 56.7305L66.1406 35.2148C68.332 33.0234 71.7188 33.0234 73.9102 35.2148C76.1016 37.4062 76.1016 40.793 73.9102 42.9844L48.4102 68.4844ZM102 51.75C102 80.0391 79.0898 102.75 51 102.75C22.7109 102.75 0 80.0391 0 51.75C0 23.6602 22.7109 0.75 51 0.75C79.0898 0.75 102 23.6602 102 51.75ZM51 10.3125C28.0898 10.3125 9.5625 29.0391 9.5625 51.75C9.5625 74.6602 28.0898 93.1875 51 93.1875C73.7109 93.1875 92.4375 74.6602 92.4375 51.75C92.4375 29.0391 73.7109 10.3125 51 10.3125Z" fill="#16C466" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class='completion-title-message'>Congratulations, you've completed all your assigned Learning Paths!</div>
|
||||
<div class="completion-subtitle-message">When new learning paths become available we'll send an email announcing it and they'll always appear here.<br>For now you can
|
||||
<a href="/app/courses">browse your courses</a>,
|
||||
<a href="/app/courses">watch previous events</a>, and sign-up for any
|
||||
<a href="/app/training_events">upcoming events</a>.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.learning-paths-link {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{% t.empty %}
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.completion-title-message {
|
||||
color: #000;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.completion-subtitle-message a {
|
||||
color: #0077B8;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.completion-subtitle-message {
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.completion-icon {
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.learning-paths-link {
|
||||
margin-bottom: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.learning-paths-link a {
|
||||
color: #0077B8;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.learning-paths-link a:hover {
|
||||
color: #185A7D;
|
||||
}
|
||||
|
||||
.learning-path-card.np-card {
|
||||
height: unset;
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
.learning-paths-completed-card.np-card {
|
||||
padding: 0 !important;
|
||||
margin-bottom: 150px !important;
|
||||
}
|
||||
|
||||
.learning-paths-completed-card .np-card-container {
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
.learning-paths-completed-card .learning-paths-completed-heading {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
|
||||
.lps-row .flex-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lps-row .learning-paths-link {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.learning-paths-completed-card .flex-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.learning-paths-completed-card .np-card-container {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// hide title and link if no laernings paths to display
|
||||
$(document).ready(function() {
|
||||
const displayedLps = {{displayed_learning_paths_count}}
|
||||
|
||||
if (displayedLps == 0) {
|
||||
$(".lps-row .dashboard-title").hide()
|
||||
$(".learning-paths-link").hide()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,67 @@
|
||||
<div class="previous-events">
|
||||
<div class="dashboard-title">WATCH PREVIOUS EVENTS</div>
|
||||
<div class="previous-events-widget">
|
||||
<div class="row">
|
||||
{% assign index = 0 %}
|
||||
|
||||
{% for course in enrolled_courses %}
|
||||
{% assign is_event_course = false %}
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | downcase %}
|
||||
{% if cat_name contains "webinars" or cat_name contains "events" %}
|
||||
{% assign is_event_course = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if course.properties.previous_event_display_on_dashboard and index < 2 and is_event_course %}
|
||||
<div class="col-xs-12 col-sm-6 previous-event" data-date="{{course.properties.course_publish_date}}">
|
||||
{% include "cards_previous_event" with course %}
|
||||
</div>
|
||||
{% assign index = index | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var eventIndexes = document.querySelectorAll(".previous-event:not([data-date=''])");
|
||||
var eventIndexesArray = Array.from(eventIndexes);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.previous-event-card .np-card-content-title {
|
||||
color: #0077B8;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
.previous-event-card .np-button {
|
||||
background-color: #0077B8;
|
||||
color: #FFF;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.previous-event-card .np-card-container:hover .np-card-content-title {
|
||||
color: #185A7D;
|
||||
}
|
||||
|
||||
.previous-event-card .np-card-container:hover .np-button {
|
||||
background-color: #185A7D;;
|
||||
}
|
||||
|
||||
.previous-event-card .course-image-container {
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.previous-event-card .np-card-container:hover .np-card-image {
|
||||
scale: 1.25;
|
||||
transition: .5s ease all;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,121 @@
|
||||
<div class="progress-widget">
|
||||
<div class="progress-widget-flex-wrapper">
|
||||
<div class="progress-item courses-progress">
|
||||
{% assign completed_courses_count = 0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign completed_courses_count = completed_courses_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="progress-header">Courses Completed</div>
|
||||
<a href="/app/courses?category=not-started" class="progress-link">View Courses not started</a>
|
||||
{%
|
||||
include "progress_circle",
|
||||
count: completed_courses_count,
|
||||
total: courses.enrolled.size %}
|
||||
</div>
|
||||
<div class="progress-item courses-progress">
|
||||
{% assign completed_lps_count = 0 %}
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
{% if learning_path.progress == 100 %}
|
||||
{% assign completed_lps_count = completed_lps_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="progress-header">Learning Paths Completed</div>
|
||||
<a href="/app/learning_paths?category=completed" class="progress-link">View all Learning Paths</a>
|
||||
{%
|
||||
include "progress_circle",
|
||||
count: completed_lps_count,
|
||||
total: learning_paths.enrolled.size %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.progress-widget {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.progress-widget .progress-item {
|
||||
width: 100%;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.progress-widget .progress-header {
|
||||
color: #000;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.progress-circle-wrapper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-circle-wrapper:before {
|
||||
content: "";
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 195px;
|
||||
height: 195px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.progress-circle {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-widget .progress-link {
|
||||
color: #0077B8;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-bottom: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.progress-widget .progress-link:hover {
|
||||
color: #185A7D;
|
||||
}
|
||||
|
||||
.progress-circle-big-text {
|
||||
color: #002745;
|
||||
font-size: 80px;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.progress-circle-text {
|
||||
color: #000;
|
||||
text-align: center;
|
||||
font-size: 23px;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
@media(min-width:500px) {
|
||||
.progress-widget .progress-widget-flex-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.progress-widget .progress-item {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1200px) {
|
||||
.progress-widget .progress-widget-flex-wrapper {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,138 @@
|
||||
{% assign courses_by_progress = enrolled_courses | sort: "progress" %}
|
||||
{% assign learning_paths_by_progress = enrolled_learning_paths | sort: "progress" %}
|
||||
|
||||
<div class="dashboard-title">RECENT ACTIVITY</div>
|
||||
<div class="recent-activity-widget">
|
||||
<table class="recent-activity-table" id='recentActivityTable'>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
{% for course in courses_by_progress %}
|
||||
{% if course.progress > 0 %}
|
||||
<tr data-progress="{{course.progress}}">
|
||||
<td width="70%" class="name-element"><a href="{% route course, id: course.id %}">{{course.name}}</a></td>
|
||||
<td width="30%" class="progress-element">
|
||||
<div>
|
||||
{% if course.progress == 100 %}
|
||||
<i class="far fa-check-circle"></i> <span>completed</span>
|
||||
{% else %}
|
||||
<i class="fas fa-spinner"></i> <span>in progress</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for learning_path in learning_paths_by_progress %}
|
||||
{% if learning_path.progress > 0 %}
|
||||
<tr data-progress="{{learning_path.progress}}">
|
||||
<td width="70%"><a class="name-element" href="{% route learning_path, id: learning_path.id %}">{{learning_path.name}}</a></td>
|
||||
<td width="30%" class="progress-element">
|
||||
<div>
|
||||
{% if learning_path.progress == 100 %}
|
||||
<i class="far fa-check-circle"></i> <span>completed</span>
|
||||
{% else %}
|
||||
<i class="fas fa-spinner"></i> <span>in progress</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.progress-element div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.progress-element span {
|
||||
margin-left: 9px;
|
||||
color: #000;
|
||||
text-align: right;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.recent-activity-table th {
|
||||
color: #FFF;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
padding: 6px 0 6px 12px;
|
||||
}
|
||||
|
||||
.recent-activity-widget {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.recent-activity-widget table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
box-shadow: 0px 3px 2.5px 0px rgba(0, 0, 0, 0.42);
|
||||
background-color:#fff;
|
||||
border-bottom: 2px solid #185A7D;
|
||||
}
|
||||
|
||||
.progress-element {
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
.name-element {
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
.recent-activity-widget td {
|
||||
border: 1px solid #dddddd;
|
||||
text-align: left;
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #185A7D;
|
||||
}
|
||||
|
||||
.recent-activity-widget th {
|
||||
color:#fff;
|
||||
border-color: #185A7D;
|
||||
background-color: #185A7D;
|
||||
}
|
||||
|
||||
.name-element a,
|
||||
.name-element a:visited {
|
||||
color: #0077B8;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.name-element a:hover {
|
||||
color: #185A7D;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
const table = document.getElementById('recentActivityTable');
|
||||
const tbody = table.querySelector('tbody'); // Select the tbody element
|
||||
const rows = Array.from(tbody.querySelectorAll('tr'));
|
||||
|
||||
const sortedRows = rows
|
||||
.map(row => ({ progress: parseInt(row.getAttribute('data-progress')), element: row }))
|
||||
.sort((a, b) => a.progress - b.progress);
|
||||
|
||||
rows.forEach(row => tbody.removeChild(row));
|
||||
|
||||
sortedRows.forEach((sortedRow, index) => {
|
||||
if (index < 6) {
|
||||
tbody.appendChild(sortedRow.element)
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,77 @@
|
||||
<div class="row recent-courses-row">
|
||||
<div class="col-xs-12">
|
||||
<div class="recent-courses-flex-wrapper">
|
||||
<div>
|
||||
<div class="dashboard-title">COURSES: RECENTLY ADDED</div>
|
||||
<div class="dashboard-subtitle">See what's new from Brighton Science</div>
|
||||
</div>
|
||||
<div class="recent-courses-link">
|
||||
<a href="/app/courses" class="recent-courses-link">View all Courses</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12">
|
||||
<div class="row recent-courses-list">
|
||||
{% for course in enrolled_courses %}
|
||||
{% unless course.properties.course_publish_date == "MM/DD/YYYY" %}
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 recent-course np-hidden" data-date="{{course.properties.course_publish_date}}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var indexes = document.querySelectorAll(".recent-course:not([data-date=''])");
|
||||
var indexesArray = Array.from(indexes);
|
||||
|
||||
const sortByDate = arr => {
|
||||
const dateSorter = (a, b) => {
|
||||
return new Date(b.dataset.date).getTime() - new Date(a.dataset.date).getTime();
|
||||
}
|
||||
arr.sort(dateSorter);
|
||||
};
|
||||
|
||||
sortByDate(indexesArray);
|
||||
|
||||
$(".recent-courses-list").empty()
|
||||
|
||||
for (let i = 0; i < indexesArray.length; i++) {
|
||||
if (i < 4) {
|
||||
document.querySelector(".recent-courses-list").appendChild(indexesArray[i])
|
||||
}
|
||||
}
|
||||
|
||||
$(".recent-course").removeClass("np-hidden")
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.recent-courses-flex-wrapper {
|
||||
margin:32px 0;
|
||||
}
|
||||
|
||||
.recent-courses.link {
|
||||
margin-bottom: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.recent-courses-flex-wrapper .dashboard-title {
|
||||
margin-bottom:4px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.recent-courses-flex-wrapper {
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:flex-end;
|
||||
margin:64px 0 32px ;
|
||||
}
|
||||
|
||||
.recent-courses-row .np-card {
|
||||
padding: 0 0 32px;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,206 @@
|
||||
<div class="row recommended-courses-row">
|
||||
<div class="col-xs-12">
|
||||
<div class="recommended-courses-flex-wrapper">
|
||||
<div>
|
||||
<div class="dashboard-title">COURSES: RECOMMENDED</div>
|
||||
<div class="dashboard-subtitle">Personalized list of courses just for you</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: row;">
|
||||
<div class="recommended-courses-container">
|
||||
<strong>Why am I seeing these?</strong>
|
||||
<a href="/app/profile" class="recommended-courses-link">Review and update your interest profile</a>
|
||||
</div>
|
||||
|
||||
<div class="recent-courses-link view-all-courses">
|
||||
<a href="/app/courses" class="recent-courses-link">View all Courses</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12">
|
||||
<div class="row" id="recommended-courses-row">
|
||||
{% assign focus_groups = "" %}
|
||||
{% assign materials_groups = "" %}
|
||||
{% assign cleaning_method_groups = "" %}
|
||||
{% assign production_application_groups = "" %}
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.name contains "Focus" %}
|
||||
{% assign focus_groups = focus_groups | append: "," | append: group.name %}
|
||||
{% endif %}
|
||||
|
||||
{% if group.name contains "Materials" %}
|
||||
{% assign materials_groups = materials_groups | append: "," | append: group.name %}
|
||||
{% endif %}
|
||||
|
||||
{% if group.name contains "Production Application" %}
|
||||
{% assign production_application_groups = production_application_groups | append: "," | append: group.name %}
|
||||
{% endif %}
|
||||
|
||||
{% if group.name contains "Cleaning Method" %}
|
||||
{% assign cleaning_method_groups = cleaning_method_groups | append: "," | append: group.name %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
|
||||
<div class="col-xs-12 np-hidden" id="recommended-courses-zero-state">
|
||||
{% capture message %}
|
||||
Update your interest profile to gain recommended content
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="unfilteredRecommendedCourses" style="display:none">
|
||||
{% for course in enrolled_courses %}
|
||||
{% if course.progress < 100 %}
|
||||
{% assign course_categories_list = "" %}
|
||||
{% for category in course.categories %}
|
||||
{% assign course_categories_list = course_categories_list | append: category.name | append: "," %}
|
||||
{% endfor %}
|
||||
<div
|
||||
class="recommended-course"
|
||||
data-categories="{{course_categories_list}}"
|
||||
data-id="{{course.id}}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
$("document").ready(function() {
|
||||
const allCourses = $(".recommended-course")
|
||||
const focusGroups = "{{focus_groups}}"
|
||||
const productionApplicationGroups = "{{production_application_groups}}"
|
||||
const materialsGroups = "{{materials_groups}}"
|
||||
const cleaningMethodGroups = "{{cleaning_method_groups}}"
|
||||
|
||||
const focusGroupsArray = focusGroups.split(",").filter(item => item !== "");
|
||||
const productionApplicationGroupsArray = productionApplicationGroups.split(",").filter(item => item !== "");
|
||||
const materialsGroupsArray = materialsGroups.split(",").filter(item => item !== "");
|
||||
const cleaningMethodGroupsArray = cleaningMethodGroups.split(",").filter(item => item !== "");
|
||||
|
||||
let focusCourses = []
|
||||
let productionApplicationsCourses = []
|
||||
let materialsCourses = []
|
||||
let cleaningMethodCourses = []
|
||||
|
||||
$(allCourses).each((index, course) => {
|
||||
if (course.getAttribute("data-categories").includes("Focus-")) {
|
||||
const categories = course.getAttribute("data-categories").split(",")
|
||||
const focusCategories = categories.filter(category => category.includes('Focus-'));
|
||||
if (focusGroups.includes(focusCategories[0])) {
|
||||
focusCourses.push(course)
|
||||
}
|
||||
}
|
||||
|
||||
if (course.getAttribute("data-categories").includes("Production Applications-")) {
|
||||
const categories = course.getAttribute("data-categories").split(",")
|
||||
const productionApplicationsCategories = categories.filter(category => category.includes('Production Applications-'));
|
||||
if (productionApplicationGroups.includes(productionApplicationsCategories[0])) {
|
||||
productionApplicationsCourses.push(course)
|
||||
}
|
||||
}
|
||||
|
||||
if (course.getAttribute("data-categories").includes("Materials-")) {
|
||||
const categories = course.getAttribute("data-categories").split(",")
|
||||
const materialsCategories = categories.filter(category => category.includes('Materials-'));
|
||||
if (materialsGroups.includes(materialsCategories[0])) {
|
||||
materialsCourses.push(course)
|
||||
}
|
||||
}
|
||||
|
||||
if (course.getAttribute("data-categories").includes("Cleaning Method-")) {
|
||||
const categories = course.getAttribute("data-categories").split(",")
|
||||
const cleaningMethodCategories = categories.filter(category => category.includes('Cleaning Method-'));
|
||||
if (cleaningMethodGroups.includes(cleaningMethodCategories[0])) {
|
||||
cleaningMethodCourses.push(course)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
console.log("Focus Courses: ", focusCourses)
|
||||
let coursesToAppend = [];
|
||||
|
||||
for (let i = 0; i < 3; i++) {
|
||||
if (productionApplicationsCourses.length > 0) {
|
||||
coursesToAppend.push(productionApplicationsCourses.shift());
|
||||
} else if (materialsCourses.length > 0) {
|
||||
coursesToAppend.push(materialsCourses.shift());
|
||||
} else if (cleaningMethodCourses.length > 0) {
|
||||
coursesToAppend.push(cleaningMethodCourses.shift());
|
||||
} else if (focusCourses.length > 0) {
|
||||
coursesToAppend.push(focusCourses.shift());
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
console.log("Recommended Courses to Append: ", coursesToAppend)
|
||||
if (coursesToAppend.length > 0) {
|
||||
|
||||
for (let i = 0; i < coursesToAppend.length; i++) {
|
||||
console.log(coursesToAppend[i].innerHTML)
|
||||
$("#recommended-courses-row").append(`<div class="col-xs-12 col-sm-6 col-md-4">${
|
||||
coursesToAppend[i].innerHTML
|
||||
}</div>`)
|
||||
}
|
||||
} else {
|
||||
$("#recommended-courses-zero-state").removeClass("np-hidden")
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.recommended-courses-row {
|
||||
margin-bottom: 32px;
|
||||
margin-top: 86px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.recommended-courses-flex-wrapper {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.recommended-courses.link {
|
||||
margin-bottom: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.recommended-courses-flex-wrapper .dashboard-title {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.recommended-courses-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.view-all-courses {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
.recommended-courses-flex-wrapper strong {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
.recommended-courses-flex-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.recommended-courses-row .np-card {
|
||||
padding: 0 0 32px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
{% comment %} <nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav> {% endcomment %}
|
||||
@ -0,0 +1,198 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-courses np-subpage-container np-max-width">
|
||||
<div class="row row-with-thumbnails">
|
||||
<div class="col-xs-12">
|
||||
<div class="filters-container courses-filters">
|
||||
<div class="filters-heading">APPLY FILTERS<i class="fa fa-chevron-down"></i>
|
||||
</div>
|
||||
<div class="filters-content">
|
||||
<div class="filter-column status-column">
|
||||
<div class="filter-column-title">STATUS</div>
|
||||
<div class="filters-list">
|
||||
<div class="filter-item status-filter">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="completed"
|
||||
value="completed">
|
||||
<label for="completed">Completed
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="filter-item status-filter">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="in-progress"
|
||||
value="in-progress">
|
||||
<label for="in-progress">In Progress
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="filter-item status-filter">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="in-progress"
|
||||
value="not-started">
|
||||
<label for="not-started">Not Started
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-column categories-column">
|
||||
<div class="filter-column-title">CATEGORY</div>
|
||||
<div class="filters-list">
|
||||
{% for category in categories.enrolled %}
|
||||
<script>
|
||||
console.log("{{category.name}}")
|
||||
</script>
|
||||
<div class="filter-item category-filter">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="{{category.name}}"
|
||||
value="{{category.name}}">
|
||||
<label for="{{category.name}}">{{ category.name }}
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 col-md-4 col-lg-3 course-column" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<script>
|
||||
window.onload = () => {
|
||||
let url = new URL(window.location.href);
|
||||
let params = new URLSearchParams(url.search);
|
||||
if (params.has('category')) {
|
||||
let allParams = params.getAll('category')
|
||||
allParams.forEach((param) => {
|
||||
document.querySelector(`.filter-item input[value='${param}']`).click()
|
||||
})
|
||||
}
|
||||
|
||||
addCountToFilters()
|
||||
addActiveNavigationClass()
|
||||
|
||||
}
|
||||
|
||||
$("input[type='checkbox']").change(function(e) {
|
||||
filterCourses()
|
||||
})
|
||||
|
||||
$("document").ready(function() {
|
||||
|
||||
document
|
||||
.querySelector(".filters-heading")
|
||||
.addEventListener("click", function() {
|
||||
this.classList.toggle("active");
|
||||
var panel = this.nextElementSibling;
|
||||
if (panel.style.maxHeight) {
|
||||
panel.style.maxHeight = null;
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + 32 + "px";
|
||||
}
|
||||
})
|
||||
|
||||
document
|
||||
.querySelector(".filters-heading")
|
||||
.click()
|
||||
})
|
||||
|
||||
|
||||
function filterCourses() {
|
||||
|
||||
// hide all courses
|
||||
$(".course-column").hide()
|
||||
|
||||
// get all checked filters
|
||||
let selectedStatusFilters = []
|
||||
let selectedCategoryFilters = []
|
||||
|
||||
$(".status-column input[type='checkbox']:checked").each((index, filter) => {
|
||||
selectedStatusFilters.push(filter.value)
|
||||
})
|
||||
|
||||
$(".categories-column input[type='checkbox']:checked").each((index, filter) => {
|
||||
selectedCategoryFilters.push(filter.value)
|
||||
})
|
||||
|
||||
// loop over courses and get filters
|
||||
$(".course-column").each((index, course) => {
|
||||
const courseStatus = $(course).data("progress")
|
||||
const courseCategory = $(course).data("category")
|
||||
|
||||
if (selectedStatusFilters.length && selectedCategoryFilters.length) {
|
||||
if ($.inArray(courseCategory, selectedCategoryFilters) !== -1 && $.inArray(courseStatus, selectedStatusFilters) !== -1) {
|
||||
$(course).show()
|
||||
}
|
||||
} else if (! selectedStatusFilters.length && selectedCategoryFilters.length) {
|
||||
if ($.inArray(courseCategory, selectedCategoryFilters) !== -1) {
|
||||
$(course).show()
|
||||
}
|
||||
} else if (selectedStatusFilters.length && ! selectedCategoryFilters.length) {
|
||||
if ($.inArray(courseStatus, selectedStatusFilters) !== -1) {
|
||||
$(course).show()
|
||||
}
|
||||
} else {
|
||||
$(course).show()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function addCountToFilters() {
|
||||
const allFiltersFromCourses = []
|
||||
|
||||
$(".course-column").each((index, course) => {
|
||||
if ($(course).attr("data-progress")) {
|
||||
allFiltersFromCourses.push($(course).attr("data-progress"))
|
||||
}
|
||||
|
||||
if ($(course).attr("data-category")) {
|
||||
allFiltersFromCourses.push($(course).attr("data-category"))
|
||||
}
|
||||
})
|
||||
|
||||
$(".filter-item").each((index, filter) => {
|
||||
const filterValue = $(filter).find("input").val()
|
||||
const filterCount = getFilterCount(filterValue, allFiltersFromCourses)
|
||||
|
||||
if ($(filter).hasClass("category-filter")) {
|
||||
if (filterCount == 0) {
|
||||
$(filter).hide()
|
||||
} else {
|
||||
$(filter).find("label > span").text(`(${filterCount})`)
|
||||
}
|
||||
} else {
|
||||
$(filter).find("label > span").text(`(${filterCount})`)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getFilterCount = (value, array) => {
|
||||
let count = 0;
|
||||
|
||||
array.forEach(filter => {
|
||||
if (filter == value) {
|
||||
count++;
|
||||
}
|
||||
});
|
||||
|
||||
return count
|
||||
}
|
||||
|
||||
function addActiveNavigationClass() {
|
||||
$('a[href="/app/courses"]').addClass("np-sub-navigation-content-item-active").removeClass("np-sub-navigation-content-item-inactive")
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,3 @@
|
||||
<script>
|
||||
window.location.replace("/app")
|
||||
</script>
|
||||
@ -0,0 +1,183 @@
|
||||
{% assign enrolled_courses = courses.enrolled %}
|
||||
{% assign enrolled_learning_paths = learning_paths.enrolled %}
|
||||
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
{% include "homepage_section_progress_activity" %}
|
||||
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row">
|
||||
{% if features.training_events? %}
|
||||
<div class="col-xs-12 col-sm-6 col-md-7">
|
||||
<div class="dashboard-title">UPCOMING EVENTS</div>
|
||||
<div class="np-dashboard-resources row upcoming-events">
|
||||
{% if training_events.available.any? %}
|
||||
{% for training_event in training_events.available limit: 2 %}
|
||||
<div class="col-xs-12 col-md-6">
|
||||
{% include "cards_training_event" with training_event %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="col-xs-12 col-sm-6 col-md-5">
|
||||
{% include "section_previous_events", enrolled_courses: enrolled_courses %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if features.learning_paths? %}
|
||||
{% include "section_learning_paths" %}
|
||||
{% endif %}
|
||||
<div class="background-logo">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="657"
|
||||
height="844"
|
||||
viewBox="0 0 657 844">
|
||||
<defs>
|
||||
<clipPath id="clip-BRT_Background">
|
||||
<rect width="657" height="844" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="BRT_Background" clip-path="url(#clip-BRT_Background)">
|
||||
<g
|
||||
id="Group_535"
|
||||
data-name="Group 535"
|
||||
transform="translate(-762.559 -1560.226)">
|
||||
<g
|
||||
id="Group_109"
|
||||
data-name="Group 109"
|
||||
transform="translate(762.559 1867.316)"
|
||||
opacity="0.05">
|
||||
<path
|
||||
id="Path_61"
|
||||
data-name="Path 61"
|
||||
d="M1406.748,820.66H1578V667.283H1406.748a153.283,153.283,0,0,1-132.81-76.691,153.354,153.354,0,0,0,132.81,230.068Z"
|
||||
transform="translate(-1253.371 -360.524)"
|
||||
fill="#6fcfeb" />
|
||||
<path
|
||||
id="Path_62"
|
||||
data-name="Path 62"
|
||||
d="M1406.748,703.671H1578V550.288H1406.748a153.353,153.353,0,0,0-132.81,230.068A153.278,153.278,0,0,1,1406.748,703.671Z"
|
||||
transform="translate(-1253.371 -550.288)"
|
||||
fill="#4e738a" />
|
||||
</g>
|
||||
<g
|
||||
id="Group_124"
|
||||
data-name="Group 124"
|
||||
transform="translate(762.559 1944.09)"
|
||||
opacity="0.05">
|
||||
<path
|
||||
id="Path_61-2"
|
||||
data-name="Path 61"
|
||||
d="M1406.748,820.66H1578V667.283H1406.748a153.283,153.283,0,0,1-132.81-76.691,153.354,153.354,0,0,0,132.81,230.068Z"
|
||||
transform="translate(-1253.371 -360.524)"
|
||||
fill="#6fcfeb" />
|
||||
<path
|
||||
id="Path_62-2"
|
||||
data-name="Path 62"
|
||||
d="M1406.748,703.671H1578V550.288H1406.748a153.353,153.353,0,0,0-132.81,230.068A153.278,153.278,0,0,1,1406.748,703.671Z"
|
||||
transform="translate(-1253.371 -550.288)"
|
||||
fill="#4e738a" />
|
||||
</g>
|
||||
<g
|
||||
id="Group_122"
|
||||
data-name="Group 122"
|
||||
transform="translate(1411.828 2020.362) rotate(180)"
|
||||
opacity="0.05">
|
||||
<path
|
||||
id="Path_61-3"
|
||||
data-name="Path 61"
|
||||
d="M153.377,230.068H324.632V76.691H153.377A153.283,153.283,0,0,1,20.567,0a153.354,153.354,0,0,0,132.81,230.068Z"
|
||||
transform="translate(0 230.068)"
|
||||
fill="#6fcfeb" />
|
||||
<path
|
||||
id="Path_62-3"
|
||||
data-name="Path 62"
|
||||
d="M153.377,153.383H324.632V0H153.377A153.354,153.354,0,0,0,20.567,230.068,153.279,153.279,0,0,1,153.377,153.383Z"
|
||||
transform="translate(0 0)"
|
||||
fill="#4e738a" />
|
||||
</g>
|
||||
<g
|
||||
id="Group_123"
|
||||
data-name="Group 123"
|
||||
transform="translate(1411.828 2097.135) rotate(180)"
|
||||
opacity="0.05">
|
||||
<path
|
||||
id="Path_61-4"
|
||||
data-name="Path 61"
|
||||
d="M153.377,230.068H324.632V76.691H153.377A153.283,153.283,0,0,1,20.567,0a153.354,153.354,0,0,0,132.81,230.068Z"
|
||||
transform="translate(0 230.068)"
|
||||
fill="#6fcfeb" />
|
||||
<path
|
||||
id="Path_62-4"
|
||||
data-name="Path 62"
|
||||
d="M153.377,153.383H324.632V0H153.377A153.354,153.354,0,0,0,20.567,230.068,153.279,153.279,0,0,1,153.377,153.383Z"
|
||||
transform="translate(0 0)"
|
||||
fill="#4e738a" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
{% include "section_recommended_courses", enrolled_courses: enrolled_courses %}
|
||||
|
||||
{% include "section_recently_added_courses", enrolled_courses: enrolled_courses %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-dashboard-resources .np-card {
|
||||
padding-left: 0;
|
||||
padding-right: 16px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.np-dashboard-resources .np-card-content-vertical {
|
||||
justify-content:flex-end;
|
||||
}
|
||||
|
||||
.previous-events,
|
||||
.upcoming-events {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.dashboard-subtitle {
|
||||
color: #000;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.recommended-courses-link,
|
||||
.recent-courses-link {
|
||||
color: #0077B8;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.recommended-courses-link:hover,
|
||||
.recent-courses-link:hover {
|
||||
color: #185A7D;
|
||||
}
|
||||
|
||||
.background-logo {
|
||||
position: relative;
|
||||
max-height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.background-logo svg {
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
top: 200px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,179 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-learning-paths np-subpage-container np-max-width">
|
||||
<div class="np-learning-paths-main">
|
||||
<div class="filters-container Lps-filters">
|
||||
<div class="filters-heading">APPLY FILTERS<i class="fa fa-chevron-down"></i></div>
|
||||
<div class="filters-content">
|
||||
<div class="filter-column status-column">
|
||||
<div class="filter-column-title">STATUS</div>
|
||||
<div class="filters-list">
|
||||
<div class="filter-item status-filter">
|
||||
<input type="checkbox" name="completed" value="completed">
|
||||
<label for="completed">Completed <span></span></label>
|
||||
</div>
|
||||
|
||||
<div class="filter-item status-filter">
|
||||
<input type="checkbox" name="in-progress" value="in-progress">
|
||||
<label for="in-progress">In Progress <span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-column categories-column">
|
||||
<div class="filter-column-title">CATEGORY</div>
|
||||
<div class="filters-list">
|
||||
{% for category in categories.enrolled %}
|
||||
<div class="filter-item category-filter">
|
||||
<input type="checkbox" name="{{category.name}}" value="{{category.name}}">
|
||||
<label for="{{category.name}}">{{category.name}} <span></span></label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign learning_paths_alphabetical = learning_paths.available | sort: "name" %}
|
||||
{% include "learning_paths_index", items: learning_paths_alphabetical %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-card-content-vertical {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.learning-path-card .np-card-content-title {
|
||||
font-size: 16px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.np-learning-path-image {
|
||||
align-self: unset !important;
|
||||
object-fit: cover !important;
|
||||
width: 100% !important;
|
||||
min-height: unset !important;
|
||||
}
|
||||
|
||||
.learning-path-image-container {
|
||||
max-width: 265px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.onload = () => {
|
||||
let url = new URL(window.location.href);
|
||||
let params = new URLSearchParams(url.search);
|
||||
if (params.has('category')) {
|
||||
let allParams = params.getAll('category')
|
||||
allParams.forEach((param) => {
|
||||
document.querySelector(`.filter-item input[value='${param}']`).click()
|
||||
})
|
||||
}
|
||||
|
||||
addCountToFilters()
|
||||
}
|
||||
|
||||
$("input[type='checkbox']").change(function(e) {
|
||||
filterLps()
|
||||
})
|
||||
|
||||
$("document").ready(function() {
|
||||
|
||||
document.querySelector(".filters-heading").addEventListener("click", function() {
|
||||
this.classList.toggle("active");
|
||||
var panel = this.nextElementSibling;
|
||||
if (panel.style.maxHeight) {
|
||||
panel.style.maxHeight = null;
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + 32 + "px";
|
||||
}
|
||||
})
|
||||
|
||||
document.querySelector(".filters-heading").click()
|
||||
})
|
||||
|
||||
function filterLps() {
|
||||
// hide all Lps
|
||||
$(".lp-column").hide()
|
||||
|
||||
// get all checked filters
|
||||
let selectedStatusFilters = []
|
||||
let selectedCategoryFilters = []
|
||||
|
||||
$(".status-column input[type='checkbox']:checked").each((index, filter) => {
|
||||
selectedStatusFilters.push(filter.value)
|
||||
})
|
||||
|
||||
$(".categories-column input[type='checkbox']:checked").each((index, filter) => {
|
||||
selectedCategoryFilters.push(filter.value)
|
||||
})
|
||||
|
||||
//loop over Lps and get filters
|
||||
$(".lp-column").each((index, lp) => {
|
||||
const lpStatus = $(lp).data("progress")
|
||||
const courseCategory = $(lp).data("category")
|
||||
|
||||
if (selectedStatusFilters.length && selectedCategoryFilters.length) {
|
||||
if($.inArray(courseCategory, selectedCategoryFilters) !== -1 && $.inArray(lpStatus, selectedStatusFilters) !== -1) {
|
||||
$(lp).show()
|
||||
}
|
||||
} else if (!selectedStatusFilters.length && selectedCategoryFilters.length) {
|
||||
if($.inArray(courseCategory, selectedCategoryFilters) !== -1) {
|
||||
$(lp).show()
|
||||
}
|
||||
} else if (selectedStatusFilters.length && !selectedCategoryFilters.length) {
|
||||
if($.inArray(lpStatus, selectedStatusFilters) !== -1) {
|
||||
$(lp).show()
|
||||
}
|
||||
} else {
|
||||
$(lp).show()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function addCountToFilters() {
|
||||
const allFiltersFromLps = []
|
||||
|
||||
$(".lp-column").each((index, course) => {
|
||||
if ($(course).attr("data-progress")) {
|
||||
allFiltersFromLps.push($(course).attr("data-progress"))
|
||||
}
|
||||
|
||||
if ($(course).attr("data-category")) {
|
||||
allFiltersFromLps.push($(course).attr("data-category"))
|
||||
}
|
||||
})
|
||||
|
||||
$(".filter-item").each((index, filter) => {
|
||||
const filterValue = $(filter).find("input").val()
|
||||
const filterCount = getFilterCount(filterValue, allFiltersFromLps)
|
||||
|
||||
|
||||
if ($(filter).hasClass("category-filter")) {
|
||||
if (filterCount == 0) {
|
||||
$(filter).hide()
|
||||
} else {
|
||||
$(filter).find("label > span").text(`(${filterCount})`)
|
||||
}
|
||||
} else {
|
||||
$(filter).find("label > span").text(`(${filterCount})`)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getFilterCount = (value, array) => {
|
||||
let count = 0;
|
||||
|
||||
array.forEach(filter => {
|
||||
if (filter == value) { count++; }
|
||||
});
|
||||
|
||||
return count
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,53 @@
|
||||
{% include "header" %}
|
||||
<div class="your-profile-container">
|
||||
<div class="your-profile np-max-width">
|
||||
your profile
|
||||
</div>
|
||||
</div>
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div width="100%" height="100%" style="margin-bottom: 46px;">
|
||||
<iframe src="https://customer.brighton-science.com/profile-update" frameborder="0" width="100%" height="1400px" id="profile-update-frame"></iframe>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.your-profile-container {
|
||||
width: 100%;
|
||||
background-color: #F8FBFF;
|
||||
}
|
||||
|
||||
.your-profile {
|
||||
color: #185A7D;
|
||||
font-size: 50px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-transform: uppercase;
|
||||
padding: 23px 5% 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #185A7D;
|
||||
font-size: 34px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.embed-wrapper {
|
||||
margin-bottom:48px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.getElementById("profile-update-frame").name = Date();
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
addActiveNavigationClass()
|
||||
})
|
||||
|
||||
function addActiveNavigationClass() {
|
||||
$('.np-header-avatar-button').addClass("np-sub-navigation-content-item-active")
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,434 @@
|
||||
/*
|
||||
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 }}
|
||||
*/
|
||||
|
||||
body {
|
||||
font-family: 'Heebo', "Roboto", sans-serif;
|
||||
background-color:#fff;
|
||||
}
|
||||
|
||||
.np-dashboard,
|
||||
.np-learning-paths {
|
||||
background-color:#fff;
|
||||
}
|
||||
|
||||
.np-button {
|
||||
border-radius:0;
|
||||
height:30px;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color:#0077B8;
|
||||
}
|
||||
|
||||
.np-card-container,
|
||||
.np-card-progress-bar-container,
|
||||
.np-card-progress-bar {
|
||||
border-radius:0;
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 16px;
|
||||
color: #185A7D;
|
||||
}
|
||||
|
||||
.learning-path-card .np-card-content {
|
||||
height:100%;
|
||||
justify-content:unset;
|
||||
}
|
||||
|
||||
.np-card-stack-level-1,
|
||||
.np-card-stack-level-2 {
|
||||
border-radius:0;
|
||||
}
|
||||
|
||||
.np-flex {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.np-card-content-progress i {
|
||||
margin-right:6px;
|
||||
}
|
||||
|
||||
.np-card-content-progress i.not-started-circle {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
border: 2.7px dashed;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.dashboard-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.learning-path-card.np-card {
|
||||
display:flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.learning-path-card .np-card-container {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.learning-path-card .np-learning-path {
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.learning-path-card .np-card-content-title {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.course-card .np-card-container,
|
||||
.previous-event-card .np-card-container {
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
.course-card .np-card-content-footer,
|
||||
.previous-event-card .np-card-content-footer {
|
||||
margin-top:0;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.course-card .course-category {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
opacity: 0.9;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-transform:uppercase;
|
||||
color: #fff;
|
||||
padding: 6px 26px;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 27px;
|
||||
z-index: 2;
|
||||
background-color: {{ color_palette.button_color }};
|
||||
}
|
||||
|
||||
.course-card .np-card-content,
|
||||
.previous-event-card .np-card-content {
|
||||
padding: 20px 0 0;
|
||||
}
|
||||
|
||||
.course-card .np-card-content-progress,
|
||||
.previous-event-card .np-card-content-progress {
|
||||
margin-bottom:12px;
|
||||
font-size:14px;
|
||||
text-transform:lowercase;
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
.np-card.previous-event-card {
|
||||
padding: 0 0 32px;
|
||||
}
|
||||
|
||||
.previous-event-card .np-card-cotnent-title {
|
||||
font-size:16px;
|
||||
line-height:normal;
|
||||
}
|
||||
|
||||
/* FILTERS */
|
||||
.filters-container {
|
||||
margin-bottom:64px;
|
||||
background-color: #F8FBFF;
|
||||
}
|
||||
|
||||
.filters-heading {
|
||||
background-color: #185A7D;
|
||||
color:#fff;
|
||||
padding: 8px 25px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.filters-heading.active i {
|
||||
transform:rotate(180deg);
|
||||
}
|
||||
|
||||
.filters-content {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease-out;
|
||||
}
|
||||
|
||||
.filter-column {
|
||||
padding: 20px 32px;
|
||||
}
|
||||
|
||||
.filter-column.categories-column {
|
||||
flex:1;
|
||||
}
|
||||
|
||||
.filter-column-title {
|
||||
color: #185A7D;
|
||||
font-size: 21px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
letter-spacing: 2.1px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom:16px;
|
||||
}
|
||||
|
||||
.filter-item label {
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
text-transform: uppercase;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.filters-content {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.categories-column .filters-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-width: 550px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.categories-column .filters-list .filter-item {
|
||||
width:calc(50% - 24px);
|
||||
}
|
||||
}
|
||||
|
||||
.fa-spinner {
|
||||
color: #EAAF1E;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.fa-check-circle {
|
||||
color: #16C466;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.learning-path-card .np-card-container {
|
||||
border: 1px solid #185A7D;
|
||||
|
||||
-webkit-box-shadow: 9px 9px 0px -1px rgba(0, 119, 184, 1);
|
||||
-moz-box-shadow: 9px 9px 0px -1px rgba(0, 119, 184, 1);
|
||||
box-shadow: 9px 9px 0px -1px rgba(0, 119, 184, 1);
|
||||
}
|
||||
|
||||
.learning-path-card .np-card-content-title,
|
||||
.course-card .np-card-content-title {
|
||||
color: #0077B8;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.course-card .np-card-content-title {
|
||||
font-size: 16px;
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
.learning-path-card .np-card-content-card {
|
||||
color: #0077B8;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.learning-path-card .np-card-content-progress span,
|
||||
.course-card .np-card-content-progress span {
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.learning-path-card .np-card-progress-bar {
|
||||
background-color: #EAAF1E;
|
||||
}
|
||||
|
||||
.learning-path-card .np-card-progress-bar-container {
|
||||
border: 1px solid #707070;
|
||||
background-color: #FFFFFF;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.learning-path-card .np-button {
|
||||
padding: 3px 16px;
|
||||
color: #FFF;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.learning-path-card .np-learning-path-items-count {
|
||||
color: #185A7D;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.case-studies {
|
||||
background-color: #256180 !important;
|
||||
}
|
||||
|
||||
.surface-research {
|
||||
background-color: #6ABCD5CC !important;
|
||||
}
|
||||
|
||||
.internal-training {
|
||||
background-color: #10BE60!important;
|
||||
}
|
||||
|
||||
.webinars-and-events {
|
||||
background-color: #EEA153 !important;
|
||||
}
|
||||
|
||||
.course-card .np-card-content-progress {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.course-card .np-card-content-progress i.not-started-circle {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.course-card .np-card-content-footer .np-button {
|
||||
color: #FFF;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
padding: 6px 18px;
|
||||
background-color: #0077B8;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=checkbox]:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
border: 2px solid #0077B8;
|
||||
border-radius: 3px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 9px;
|
||||
border: solid #0077B8;
|
||||
border-width: 0 2px 2px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
.np-learning-path:hover .np-card-content-title,
|
||||
.course-card .np-card-container:hover .np-card-content-title {
|
||||
color: #185A7D;
|
||||
}
|
||||
|
||||
.course-card .np-card-container:hover .np-card-content-footer .np-button,
|
||||
.np-learning-path:hover .np-button {
|
||||
background-color: #185A7D;
|
||||
}
|
||||
|
||||
/*.np-learning-path:hover {
|
||||
-webkit-box-shadow: 3px 3px 0px -1px #185A7D;
|
||||
-moz-box-shadow: 3px 3px 0px -1px #185A7D;
|
||||
box-shadow: 3px 3px 0px -1px #185A7D;
|
||||
transition: .5s ease all;
|
||||
}*/
|
||||
|
||||
.learning-path-card:hover .np-card-container {
|
||||
-webkit-box-shadow: 3px 3px 0px -1px #185A7D;
|
||||
-moz-box-shadow: 3px 3px 0px -1px #185A7D;
|
||||
box-shadow: 3px 3px 0px -1px #185A7D;
|
||||
transition: .5s all;
|
||||
}
|
||||
|
||||
.np-learning-path:hover .np-card-image,
|
||||
.course-card .np-card-container:hover .np-card-image {
|
||||
scale: 1.25;
|
||||
transition: .5s ease all;
|
||||
}
|
||||
|
||||
.learning-path-image-container {
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.course-image-container {
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-learning-path-image {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.learning-path-image-container {
|
||||
max-width: 345px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user