Recast Templates for skipping overview page. Added Zenjob's templates. Some notes.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,19 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="desktop_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card">
|
||||
<div class="np-card-container np-card-padding">
|
||||
<div class="row">
|
||||
<div class="col-sm-7 np-account-form">
|
||||
{% render "account_form", form: form, version: "desktop", country:current_person.properties.country, company:current_person.properties.company %}
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-sm-5 np-account-avatar">
|
||||
{% include "account_avatar", version: "desktop" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@ -0,0 +1,148 @@
|
||||
<div class="np-resource-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="user-details">
|
||||
<div class='detail'>Country: {{country}}</div>
|
||||
<div class='detail'>Company: {{company}}</div>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'email' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_email">{% t shared.email %} *</label>
|
||||
<input
|
||||
{% if form.options.invite? %} disabled {% endif %}
|
||||
autofocus="autofocus"
|
||||
class="np-input"
|
||||
id="{{version}}_learner_email"
|
||||
name="learner[email]"
|
||||
type="email"
|
||||
value="{{ form.email }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'first_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_first_name">
|
||||
{% t shared.first_name %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_first_name"
|
||||
name="learner[first_name]"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'last_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_last_name">
|
||||
{% t shared.last_name %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_last_name"
|
||||
name="learner[last_name]"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'display_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_display_name">
|
||||
{% t .display_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_display_name"
|
||||
name="learner[display_name]"
|
||||
value="{{ form.display_name }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{% unless form.options.invite? %}
|
||||
<div class="np-form-field {% if form.errors contains 'current_password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_current_password">
|
||||
{% t .current_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_current_password"
|
||||
name="learner[current_password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password">
|
||||
{% t .new_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password"
|
||||
name="learner[password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field {% if form.errors contains 'password_confirmation' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password_confirmation">
|
||||
{% t .confirm_new_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password_confirmation"
|
||||
name="learner[password_confirmation]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
{% endunless %}
|
||||
|
||||
{% if form.options.invite? %}
|
||||
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password">
|
||||
{% t shared.password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password"
|
||||
name="learner[password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{% if form.terms_of_service_required? %}
|
||||
<div class="np-form-field terms-of-service {% if form.errors contains 'terms_of_service_accepted' %}np-account-form-field-error{% endif %}">
|
||||
<input
|
||||
id="{{version}}_learner_terms_of_service"
|
||||
name="learner[terms_of_service_accepted]"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div class="label">
|
||||
{% t .terms_of_service %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-margin-top">
|
||||
<span class="np-form-terms ">
|
||||
{% t .terms %}
|
||||
<a
|
||||
class="np-form-link np-button-color"
|
||||
target="_blank"
|
||||
href={{ form.terms_of_service_url }}
|
||||
>
|
||||
{% t .terms_link %}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<input
|
||||
id="{{version}}_invite_token"
|
||||
name="learner[token]"
|
||||
value="{{ form.invite_token }}"
|
||||
type="hidden"
|
||||
/>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<style>
|
||||
.user-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
gap: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,17 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="mobile_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card np-account-form">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% render "account_form", form: form, version: "mobile", country:current_person.properties.country, company:current_person.properties.company %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card np-account-avatar">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% include "account_avatar", version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</form>
|
||||
@ -0,0 +1,34 @@
|
||||
<div class="np-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-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>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,37 @@
|
||||
<div class="np-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-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-featured-short-desc">
|
||||
<span>{{ course.short_description }}</span>
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,46 @@
|
||||
<div class="np-card np-event-card homepage-event-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content-training-event">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ training_event.title }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ training_event.event_type }}
|
||||
</div>
|
||||
<div class="np-card-training-session" style="text-align: left;">
|
||||
<span class="np-card-content-label" style='border-radius: 4px; color: #29ABE2; font-size: 1rem; background: none;'>
|
||||
Next Session
|
||||
</span>
|
||||
<div class="np-card-training-session-date">
|
||||
<div>
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_event.sessions.first.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year np-opacity-50">
|
||||
{{ training_event.sessions.first.year }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-training-session-date-day">
|
||||
{% if training_event.sessions.first.day < 10 %}0{% endif %}{{ training_event.sessions.first.day }}
|
||||
</div>
|
||||
<div class="np-button-background-color np-card-training-session-date-bar" style='border-right: 16px solid #29ABE2;'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class="np-card-training-sessions">
|
||||
<span class="np-card-training-sessions-label" style="color: #29ABE2; font-size: 20px; font-weight: 700;">
|
||||
Total Sessions: {{training_event.sessions.size}}
|
||||
</span>
|
||||
<a
|
||||
class="np-button"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
style='background: #29ABE2; border-radius: 8px;'
|
||||
>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
<div class="events-carousel np-carousel np-carousel-bg-blue" id="events-carousel">
|
||||
{% if items.any? %}
|
||||
{% for training_event in items %}
|
||||
<div class="np-carousel-card"> {% include "cards_featured_training_event" with training_event %}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".events-carousel").slick({
|
||||
slidesToShow: 1,
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: true,
|
||||
dots: false,
|
||||
arrows: true
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,26 @@
|
||||
{% 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=Lexend:wght@100;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
{% if current_person.signed_in? and current_person.properties.company == "NULL" and current_person.properties.country == "NULL"%}
|
||||
<script>
|
||||
if ( window.location.pathname != '/app/sign-up-follow-up'
|
||||
&& window.location.pathname != '/terms_agreement/new'
|
||||
&& !window.sessionStorage.propertiesAdded ) {
|
||||
window.location.replace('/app/sign-up-follow-up');
|
||||
}
|
||||
</script>
|
||||
{% endif %}
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.5.1.min.js"
|
||||
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
|
||||
crossorigin="anonymous"></script>
|
||||
@ -0,0 +1,218 @@
|
||||
<header class="np-header np-header-color" >
|
||||
<!-- Added to Header for Marketo and SalesForce tracking via Marketing team Jina and Chelsea. -->
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var didInit = false;
|
||||
function initMunchkin() {
|
||||
if(didInit === false) {
|
||||
didInit = true;
|
||||
Munchkin.init('563-ODB-688');
|
||||
}
|
||||
}
|
||||
var s = document.createElement('script');
|
||||
s.type = 'text/javascript';
|
||||
s.async = true;
|
||||
s.src = '//munchkin.marketo.net/munchkin-beta.js';
|
||||
s.onreadystatechange = function() {
|
||||
if (this.readyState == 'complete' || this.readyState == 'loaded') {
|
||||
initMunchkin();
|
||||
}
|
||||
};
|
||||
s.onload = initMunchkin;
|
||||
document.getElementsByTagName('head')[0].appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
<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 }}"
|
||||
/>
|
||||
</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 desktop-subnav" style="height: 100%">
|
||||
{% include "sub_navigation" %}
|
||||
</div>
|
||||
|
||||
{% comment %}<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>{% endcomment %}
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input np-header-font-background-color"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
<a class="np-header-avatar-tooltip-navigation-link" onclick="buildURL(window.location.pathname)" style="cursor:pointer">
|
||||
Default
|
||||
</a>
|
||||
{% 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"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
<script>
|
||||
if (window.location.pathname === "/app") {
|
||||
const headerTag = document.querySelector(".np-header");
|
||||
headerTag.classList.add("np-header-absolute");
|
||||
}
|
||||
|
||||
$(".np-header-desktop-nav-link[href='https://change_to_mail.com'").attr("href", "mailto:support@northpass.com")
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,80 @@
|
||||
<div class="np-progress-ring-wrapper">
|
||||
<svg
|
||||
class="progress-ring"
|
||||
width="{{ size }}"
|
||||
height="{{ size }}">
|
||||
<circle
|
||||
class="progress-ring__circle circle-{{name}}"
|
||||
stroke="#29ABE2"
|
||||
stroke-width="10"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"/>
|
||||
<circle
|
||||
class="progress-ring__circle circle-bg"
|
||||
stroke="{{ stroke_color_bg }}"
|
||||
stroke-width="10"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"/>
|
||||
<text x="50%" y="50%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="#323F48" dy=".3em">{{count}}</text>
|
||||
</svg>
|
||||
<h3 class="np-card-content-title np-progress-circle-label">
|
||||
{{name}}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var circle = document.getElementsByClassName("circle-{{name}}")[0];
|
||||
var radius = circle.r.baseVal.value;
|
||||
var circumference = radius * 2 * Math.PI;
|
||||
|
||||
circle.style.strokeDasharray = `${circumference} ${circumference}`;
|
||||
circle.style.strokeDashoffset = `${circumference}`;
|
||||
|
||||
function setProgress(percent) {
|
||||
const offset = circumference - percent * circumference;
|
||||
circle.style.strokeDashoffset = offset;
|
||||
}
|
||||
setProgress('{{ count | divided_by: total }}')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-progress-ring-wrapper {
|
||||
flex: 0;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 1.5rem 1rem 1rem 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-ring circle { stroke-linecap: round; }
|
||||
.progress-ring text { font-size:2rem; }
|
||||
.progress-ring__circle {
|
||||
transition: stroke-dashoffset 0.35s;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.np-progress-circle-label {
|
||||
color:#323F48;
|
||||
text-transform: uppercase;
|
||||
opacity:0.35;
|
||||
font-size:0.875rem;
|
||||
margin-top:1rem;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-progress-ring-wrapper { padding: 1.5rem 0.4rem 1rem 0.4rem;}
|
||||
}
|
||||
|
||||
@media (min-width:1170px) {
|
||||
.progress-ring text { font-size:2.5rem; }
|
||||
.np-progress-ring-wrapper { padding: 1.5rem 1rem 1rem 1rem;}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,196 @@
|
||||
<div class="np-homepage-featured np-glossary np-max-width desktop-glossary">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Commonly Used Terms
|
||||
</div>
|
||||
</div>
|
||||
<div class="row np-glossaries col-xs-12" style='margin:0;'>
|
||||
<div class="col-xs-6">
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>AD</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Active Directory is Microsoft's proprietary directory service. It runs on Windows Server and enables administrators to manage permissions and access to network resources.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>EI</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Endpoint Insights enables you to access up-to-date information on the users assigned to devices. See all software in use in your environment, no matter how it was installed. Discover what servers and printers are in your environment and who's using them. Quickly see device warranty status and device age.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>LAPS</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Local Administrator Password Solution provides management of local account passwords of domain joined computers. Passwords are stored in Active Directory (AD) and protected by ACL, so only eligible users can read it or request its reset.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>RCT</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Right Click Tools are a collection of individual tools or functions that allow you to take action on a single device, many devices, or entire collections, all via a right-click in the ConfigMgr Console.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>RMS</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Recast Management Server is the centralized web interface for Recast Enterprise products, including Right Click Tools, and Endpoint Insights. Hosted on a server of your choice, RMS utilizes an on-premises SQL database to house settings, configurations, logs, etc.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>SCCM/MECM</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Microsoft Endpoint Configuration Manager, more commonly known as System Center Configuration Manager, is an integrated solution for managing all of your devices. Microsoft brings together Configuration Manager and Intune, without a complex migration, and with simplified licensing. Continue to leverage your existing Configuration Manager investments, while taking advantage of the power of the Microsoft cloud at your own pace.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-homepage-featured np-glossary np-max-width mobile-glossary">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Glossary
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-glossaries col-xs-12" style='margin:0;'>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>AD</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Active Directory is Microsoft's proprietary directory service. It runs on Windows Server and enables administrators to manage permissions and access to network resources.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>EI</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Endpoint Insights enables you to access up-to-date information on the users assigned to devices. See all software in use in your environment, no matter how it was installed. Discover what servers and printers are in your environment and who's using them. Quickly see device warranty status and device age.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>LAPS</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Local Administrator Password Solution provides management of local account passwords of domain joined computers. Passwords are stored in Active Directory (AD) and protected by ACL, so only eligible users can read it or request its reset.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>RCT</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Right Click Tools are a collection of individual tools or functions that allow you to take action on a single device, many devices, or entire collections, all via a right-click in the ConfigMgr Console.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>RMS</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Recast Management Server is the centralized web interface for Recast Enterprise products, including Right Click Tools, and Endpoint Insights. Hosted on a server of your choice, RMS utilizes an on-premises SQL database to house settings, configurations, logs, etc.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>SCCM/MECM</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Microsoft Endpoint Configuration Manager, more commonly known as System Center Configuration Manager, is an integrated solution for managing all of your devices. Microsoft brings together Configuration Manager and Intune, without a complex migration, and with simplified licensing. Continue to leverage your existing Configuration Manager investments, while taking advantage of the power of the Microsoft cloud at your own pace.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.clicked {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.accordion-panel {
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
|
||||
.mobile-glossary{
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px){
|
||||
.mobile-glossary{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.desktop-glossary{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
let accordions = document.getElementsByClassName("accordion-btn");
|
||||
|
||||
for (let i = 0; i < accordions.length; i++) {
|
||||
accordions[i].addEventListener("click", function() {
|
||||
this.querySelector('.fal').classList.toggle("fa-plus");
|
||||
this.querySelector('.fal').classList.toggle("fa-minus");
|
||||
this.classList.toggle("clicked");
|
||||
let panel = this.nextElementSibling;
|
||||
panel.classList.toggle("panel-open");
|
||||
if (panel.style.maxHeight) {
|
||||
panel.style.maxHeight = null;
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + "px";
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,13 @@
|
||||
<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>
|
||||
@ -0,0 +1,88 @@
|
||||
<div class="np-dashboard-resources progress-card" style="padding-bottom: 0;">
|
||||
<div class="np-card" style="display:inline-flex; margin: auto; padding: 0px !important;">
|
||||
<div class="np-card-container np-card-content" style="border-radius: 8px; display: inline-block; height: 12rem; padding-top: 1rem;">
|
||||
{% if courses.enrolled.any? %}
|
||||
{% assign countComplete = 0 %}
|
||||
{% assign countInProgress = 0 %}
|
||||
{% assign countNotStarted = 0 %}
|
||||
{% assign countTotal = 0 | times: 1.0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% assign countTotal = countTotal | plus: 1 %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign countComplete = countComplete | plus: 1 %}
|
||||
{% endif %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign countInProgress = countInProgress | plus: 1 %}
|
||||
{% endif %}
|
||||
{% if course.progress == 0 %}
|
||||
{% assign countNotStarted = countNotStarted | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<ul class="progress-circle-list">
|
||||
<li>
|
||||
{%
|
||||
include "progress_circle",
|
||||
name:'Completed' ,
|
||||
count: countComplete ,
|
||||
total: countTotal,
|
||||
size: "120",
|
||||
stroke_color: "rgba(43, 178, 76, 1)",
|
||||
stroke_color_bg: "rgba(255, 255, 255, 0.15)"
|
||||
%}
|
||||
</li>
|
||||
<li>
|
||||
{%
|
||||
include "progress_circle",
|
||||
name:'In Progress' ,
|
||||
count: countInProgress ,
|
||||
total: countTotal,
|
||||
size: "120",
|
||||
stroke_color: "rgba(43, 178, 76, 1)",
|
||||
stroke_color_bg: "rgba(255, 255, 255, 0.15)"
|
||||
%}
|
||||
</li>
|
||||
</ul>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.progress-circle-list {
|
||||
padding: 0;
|
||||
list-style-type: none !important;
|
||||
justify-content: space-around;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: 400px;
|
||||
margin: auto;
|
||||
}
|
||||
.progress-card {
|
||||
border-radius: 8px;
|
||||
/* background: #001E2E; */
|
||||
height: 260px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
}
|
||||
.np-progress-ring-wrapper {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
@media screen and (max-width: 1023px) {
|
||||
.progress-card {
|
||||
height: 190px;
|
||||
margin-bottom: 2.187rem;
|
||||
display: flex;
|
||||
}
|
||||
.progress-circle-list {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
{% comment %}{% include "sub_navigation" %}{% endcomment %}
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
<div class="np-catalog-header-wrapper">
|
||||
<div class="np-catalog-header">
|
||||
<div class="np-resource-title">{{ catalog.headline }}</div>
|
||||
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
|
||||
</div>
|
||||
{% capture label %}{% t shared.filters.by_category %}{% endcapture %}
|
||||
|
||||
{% if courses.in_catalog.any? %}
|
||||
{%
|
||||
include "filter_dropdown",
|
||||
filters: courses.filters,
|
||||
key: "category_uuid",
|
||||
label: label
|
||||
%}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% include "courses_catalog" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,20 @@
|
||||
{% if course.properties.skip_course_cover_page %}
|
||||
{% if course.enrolled? %}
|
||||
<script>window.location.replace('{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}')</script>
|
||||
{% else %}
|
||||
<script>window.location.replace('{% route course_enrollment, code: course.enrollment_code %}')</script>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
|
||||
{% 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" %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,29 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% comment %}{% include "sub_navigation" %}{% endcomment %}
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="np-dashboard-header">
|
||||
<div class="np-resource-title">Hi {{current_person.first_name}}! 👋</div>
|
||||
<div class="np-resource-subtitle">This is what's relevant to you right now in Recast Academy.</div>
|
||||
</div>
|
||||
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-md-8">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
{% endif %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-md-4 progress-section">
|
||||
<div class="np-dashboard-resources-title">Course Progress</div>
|
||||
{% include "widget_course_progress" %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,210 @@
|
||||
{% include "header" %}
|
||||
{% if current_person.signed_in? %}
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
{% endif %}
|
||||
<main class="np-main np-homepage">
|
||||
<div class="np-homepage-hero">
|
||||
<img class="np-homepage-hero-image"
|
||||
src="{{ homepage.artwork_url }}"
|
||||
alt="{{ homepage.headline }}"
|
||||
/>
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-headline np-header-font-color">
|
||||
{{ homepage.headline }}
|
||||
</div>
|
||||
<div class="np-homepage-subheadline np-header-font-color">
|
||||
{{ homepage.subheadline }}
|
||||
</div>
|
||||
<a class="np-homepage-hero-cta np-button" href="{% route catalog %}">
|
||||
{% t .discover %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% comment %}{% include "sub_navigation" %}{% endcomment %}
|
||||
<div class="np-homepage-featured np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
{{ homepage.featured_courses_headline }}
|
||||
</div>
|
||||
<div class="np-homepage-subheadline">
|
||||
{{ homepage.featured_courses_subheadline }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if courses.featured.any? %}
|
||||
<div class="np-homepage-featured-courses row">
|
||||
{% for course in courses.featured %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_featured_course" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
{% t .empty, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="{% t .empty, key: current_school.course_vocabulary %}"
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="col-xs-12" style="display: flex; flex-wrap: wrap; margin-top: 3rem;">
|
||||
<div class="col-xs-12 col-lg-6" style="text-align: center;">
|
||||
<div class="np-homepage-headline">
|
||||
Recast Blog Feed
|
||||
</div>
|
||||
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
|
||||
<!-- <div id='recast-resource-embed-container'>
|
||||
<iframe id='recast-resource-embed' src="https://www.recastsoftware.com/resources/" scrolling="auto"></iframe>
|
||||
</div> -->
|
||||
<div class="elfsight-app-e9e07ce5-cf47-4b0b-a053-689ee3d0d54a" style="padding-top: 2.5%;"></div>
|
||||
</div>
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="col-xs-12 col-lg-6" style="text-align: center;">
|
||||
<div class="np-homepage-headline">
|
||||
Upcoming Events
|
||||
</div>
|
||||
{% comment %}{% if training_events.available.any? %}
|
||||
{% assign limiter = 0 %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for training_event in training_events.available %}
|
||||
{% if limiter < 2 %}
|
||||
<div class="col-xs-12 np-stretch-content homepage-event-cards">
|
||||
{% include "cards_training_event" with training_event %}
|
||||
</div>
|
||||
|
||||
{% assign limiter = limiter | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}{% endcomment %}
|
||||
|
||||
{% if training_events.available.any? %}
|
||||
{%
|
||||
include "carousel_featured_events",
|
||||
items: training_events.available,
|
||||
%}
|
||||
{% else %}
|
||||
<div style="margin-bottom:3rem;">
|
||||
{% include "training_events_zero_state" %}
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% include "section_glossary" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
<script>
|
||||
let checkIfNodeAvailable = () => {
|
||||
let config = {
|
||||
attributes: true,
|
||||
childList: true,
|
||||
subtree: true
|
||||
};
|
||||
|
||||
function callback(mutationList, observer){
|
||||
let url = window.location.href;
|
||||
let rssWidgetMarker = document.querySelector('#eapps-rss-feed-e9e07ce5-cf47-4b0b-a053-689ee3d0d54a > div > a');
|
||||
|
||||
if(url == 'https://recastsoftware.northpass.com/app' && rssWidgetMarker != null){
|
||||
manipulateElement(rssWidgetMarker);
|
||||
}
|
||||
}
|
||||
|
||||
function manipulateElement(someNode){
|
||||
console.log('MUTATION OBSERVER ACTIVE; ELEMENT FOUND')
|
||||
someNode.style.display = 'none';
|
||||
}
|
||||
|
||||
let observer = new MutationObserver(callback)
|
||||
|
||||
observer.observe(document, config);
|
||||
}
|
||||
checkIfNodeAvailable();
|
||||
|
||||
|
||||
let iframeMutationObserver = () => {
|
||||
// console.log('EMBED MUTATION OBSERVER CALLED')
|
||||
let config = {
|
||||
attributes: true,
|
||||
childList: true,
|
||||
subtree: true
|
||||
};
|
||||
|
||||
let embedManipulation = (iFrame) => {
|
||||
console.log('embedManipulation Invoked')
|
||||
|
||||
iFrame.contentWindow.postMessage({}, '*');
|
||||
let iFrameDoc = iFrame.contentWindow.document;
|
||||
|
||||
if(iFrameDoc != null){
|
||||
console.log('iFRAME CONTENT DETECTED');
|
||||
console.log(iFrameDoc);
|
||||
|
||||
let embedHeader = iFrameDoc.querySelector('.headerwrap');
|
||||
let embedHero = iFrameDoc.querySelector('.simplehero');
|
||||
let embedContent1 = iFrameDoc.querySelector('.fullcontent');
|
||||
let embedContent2 = iFrameDoc.querySelector('.collectionsslider');
|
||||
let embedFooter = iFrameDoc.querySelector('#colophon');
|
||||
|
||||
let embedResources = iFrameDoc.querySelector('.resourcesposts');
|
||||
|
||||
let allEmbedElements = [embedResources,embedHeader, embedHero, embedContent1, embedContent2, embedFooter]
|
||||
|
||||
console.log(allEmbedElements);
|
||||
|
||||
for(let i = 0; i < allEmbedElements; i++){
|
||||
if(allEmbedElements[i] === null){
|
||||
embedHeader = iFrameDoc.querySelector('.headerwrap');
|
||||
embedHero = iFrameDoc.querySelector('.simplehero');
|
||||
embedContent1 = iFrameDoc.querySelector('.fullcontent');
|
||||
embedContent2 = iFrameDoc.querySelector('.collectionsslider');
|
||||
embedFooter = iFrameDoc.querySelector('#colophon');
|
||||
|
||||
embedResources = iFrameDoc.querySelector('.resourcesposts');
|
||||
i = 0;
|
||||
console.log(allEmbedElements);
|
||||
} else {
|
||||
i === 0 ? allEmebedElements[i].style.marginTop = '0' : allEmbedElements[i].style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
new MutationObserver(() => {
|
||||
// console.log('SEARCHING FOR IFRAME')
|
||||
let iFrame = document.querySelector('#recast-resource-embed');
|
||||
iFrame.contentWindow.postMessage({}, '*')
|
||||
|
||||
if(iFrame !== null){
|
||||
console.log('EMBED DETECTED')
|
||||
embedManipulation(iFrame);
|
||||
}
|
||||
}).observe(document, config);
|
||||
}
|
||||
iframeMutationObserver();
|
||||
|
||||
</script>
|
||||
<style>
|
||||
#recast-resource-embed-container{
|
||||
width: 100%;
|
||||
height: 22.25rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#recast-resource-embed{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: asbolute;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,14 @@
|
||||
{% include "header" %}
|
||||
{% comment %}{% include "sub_navigation" %}{% endcomment %}
|
||||
<main class="np-main np-learning-paths np-subpage-container np-max-width">
|
||||
<div class="np-learning-paths-main">
|
||||
<div class="np-resource-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .subtitle %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.available %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,514 @@
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.id == "29ae12e6-f740-4190-a5c2-a7e12e87926f" or group.id == "aa36069f-e354-4dbe-9972-9ce70ad146d7" or group.id == "8cd6ec9c-101e-4b1a-82c7-77dac583a1f5" %}
|
||||
<script>
|
||||
window.location.replace('/app');
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<body>
|
||||
{% include "header" %}
|
||||
<main class="np-main np-box-container">
|
||||
<div class="np-box">
|
||||
<div class="np-box-content-container">
|
||||
<form id="register-form" class="np-form np-box-content" novalidate>
|
||||
<div class="np-form-title"> Welcome! </div>
|
||||
<div class="np-form-subtitle"> We need a little more information to tailor the best courses to your role </div>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_company">
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="learner[company]"
|
||||
id="learner_company"
|
||||
placeholder="Company Name"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_country">
|
||||
</label>
|
||||
<select
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="learner[country]"
|
||||
id="learner_country"
|
||||
required
|
||||
>
|
||||
<option class="default-option" disabled selected id="default-option">Your Country</option>
|
||||
<option class="selection-option" value="Afghanistan">Afghanistan</option>
|
||||
<option class="selection-option" value="Åland Islands">Åland Islands</option>
|
||||
<option value="Albania">Albania</option>
|
||||
<option value="Algeria">Algeria</option>
|
||||
<option value="American Samoa">American Samoa</option>
|
||||
<option value="Andorra">Andorra</option>
|
||||
<option value="Angola">Angola</option>
|
||||
<option value="Anguilla">Anguilla</option>
|
||||
<option value="Antarctica">Antarctica</option>
|
||||
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
|
||||
<option value="Argentina">Argentina</option>
|
||||
<option value="Armenia">Armenia</option>
|
||||
<option value="Aruba">Aruba</option>
|
||||
<option value="Australia">Australia</option>
|
||||
<option value="Austria">Austria</option>
|
||||
<option value="Azerbaijan">Azerbaijan</option>
|
||||
<option value="Bahamas">Bahamas</option>
|
||||
<option value="Bahrain">Bahrain</option>
|
||||
<option value="Bangladesh">Bangladesh</option>
|
||||
<option value="Barbados">Barbados</option>
|
||||
<option value="Belarus">Belarus</option>
|
||||
<option value="Belgium">Belgium</option>
|
||||
<option value="Belize">Belize</option>
|
||||
<option value="Benin">Benin</option>
|
||||
<option value="Bermuda">Bermuda</option>
|
||||
<option value="Bhutan">Bhutan</option>
|
||||
<option value="Bolivia">Bolivia</option>
|
||||
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
|
||||
<option value="Botswana">Botswana</option>
|
||||
<option value="Bouvet Island">Bouvet Island</option>
|
||||
<option value="Brazil">Brazil</option>
|
||||
<option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
|
||||
<option value="Brunei Darussalam">Brunei Darussalam</option>
|
||||
<option value="Bulgaria">Bulgaria</option>
|
||||
<option value="Burkina Faso">Burkina Faso</option>
|
||||
<option value="Burundi">Burundi</option>
|
||||
<option value="Cambodia">Cambodia</option>
|
||||
<option value="Cameroon">Cameroon</option>
|
||||
<option value="Canada">Canada</option>
|
||||
<option value="Cape Verde">Cape Verde</option>
|
||||
<option value="Cayman Islands">Cayman Islands</option>
|
||||
<option value="Central African Republic">Central African Republic</option>
|
||||
<option value="Chad">Chad</option>
|
||||
<option value="Chile">Chile</option>
|
||||
<option value="China">China</option>
|
||||
<option value="Christmas Island">Christmas Island</option>
|
||||
<option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
|
||||
<option value="Colombia">Colombia</option>
|
||||
<option value="Comoros">Comoros</option>
|
||||
<option value="Congo">Congo</option>
|
||||
<option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option>
|
||||
<option value="Cook Islands">Cook Islands</option>
|
||||
<option value="Costa Rica">Costa Rica</option>
|
||||
<option value="Cote D'ivoire">Cote D'ivoire</option>
|
||||
<option value="Croatia">Croatia</option>
|
||||
<option value="Cuba">Cuba</option>
|
||||
<option value="Cyprus">Cyprus</option>
|
||||
<option value="Czech Republic">Czech Republic</option>
|
||||
<option value="Denmark">Denmark</option>
|
||||
<option value="Djibouti">Djibouti</option>
|
||||
<option value="Dominica">Dominica</option>
|
||||
<option value="Dominican Republic">Dominican Republic</option>
|
||||
<option value="Ecuador">Ecuador</option>
|
||||
<option value="Egypt">Egypt</option>
|
||||
<option value="El Salvador">El Salvador</option>
|
||||
<option value="Equatorial Guinea">Equatorial Guinea</option>
|
||||
<option value="Eritrea">Eritrea</option>
|
||||
<option value="Estonia">Estonia</option>
|
||||
<option value="Ethiopia">Ethiopia</option>
|
||||
<option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
|
||||
<option value="Faroe Islands">Faroe Islands</option>
|
||||
<option value="Fiji">Fiji</option>
|
||||
<option value="Finland">Finland</option>
|
||||
<option value="France">France</option>
|
||||
<option value="French Guiana">French Guiana</option>
|
||||
<option value="French Polynesia">French Polynesia</option>
|
||||
<option value="French Southern Territories">French Southern Territories</option>
|
||||
<option value="Gabon">Gabon</option>
|
||||
<option value="Gambia">Gambia</option>
|
||||
<option value="Georgia">Georgia</option>
|
||||
<option value="Germany">Germany</option>
|
||||
<option value="Ghana">Ghana</option>
|
||||
<option value="Gibraltar">Gibraltar</option>
|
||||
<option value="Greece">Greece</option>
|
||||
<option value="Greenland">Greenland</option>
|
||||
<option value="Grenada">Grenada</option>
|
||||
<option value="Guadeloupe">Guadeloupe</option>
|
||||
<option value="Guam">Guam</option>
|
||||
<option value="Guatemala">Guatemala</option>
|
||||
<option value="Guernsey">Guernsey</option>
|
||||
<option value="Guinea">Guinea</option>
|
||||
<option value="Guinea-bissau">Guinea-bissau</option>
|
||||
<option value="Guyana">Guyana</option>
|
||||
<option value="Haiti">Haiti</option>
|
||||
<option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option>
|
||||
<option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
|
||||
<option value="Honduras">Honduras</option>
|
||||
<option value="Hong Kong">Hong Kong</option>
|
||||
<option value="Hungary">Hungary</option>
|
||||
<option value="Iceland">Iceland</option>
|
||||
<option value="India">India</option>
|
||||
<option value="Indonesia">Indonesia</option>
|
||||
<option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
|
||||
<option value="Iraq">Iraq</option>
|
||||
<option value="Ireland">Ireland</option>
|
||||
<option value="Isle of Man">Isle of Man</option>
|
||||
<option value="Israel">Israel</option>
|
||||
<option value="Italy">Italy</option>
|
||||
<option value="Jamaica">Jamaica</option>
|
||||
<option value="Japan">Japan</option>
|
||||
<option value="Jersey">Jersey</option>
|
||||
<option value="Jordan">Jordan</option>
|
||||
<option value="Kazakhstan">Kazakhstan</option>
|
||||
<option value="Kenya">Kenya</option>
|
||||
<option value="Kiribati">Kiribati</option>
|
||||
<option value="Korea, Democratic People's Republic of">Korea, Democratic People's Republic of</option>
|
||||
<option value="Korea, Republic of">Korea, Republic of</option>
|
||||
<option value="Kuwait">Kuwait</option>
|
||||
<option value="Kyrgyzstan">Kyrgyzstan</option>
|
||||
<option value="Lao People's Democratic Republic">Lao People's Democratic Republic</option>
|
||||
<option value="Latvia">Latvia</option>
|
||||
<option value="Lebanon">Lebanon</option>
|
||||
<option value="Lesotho">Lesotho</option>
|
||||
<option value="Liberia">Liberia</option>
|
||||
<option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
|
||||
<option value="Liechtenstein">Liechtenstein</option>
|
||||
<option value="Lithuania">Lithuania</option>
|
||||
<option value="Luxembourg">Luxembourg</option>
|
||||
<option value="Macao">Macao</option>
|
||||
<option value="Macedonia, The Former Yugoslav Republic of">Macedonia, The Former Yugoslav Republic of</option>
|
||||
<option value="Madagascar">Madagascar</option>
|
||||
<option value="Malawi">Malawi</option>
|
||||
<option value="Malaysia">Malaysia</option>
|
||||
<option value="Maldives">Maldives</option>
|
||||
<option value="Mali">Mali</option>
|
||||
<option value="Malta">Malta</option>
|
||||
<option value="Marshall Islands">Marshall Islands</option>
|
||||
<option value="Martinique">Martinique</option>
|
||||
<option value="Mauritania">Mauritania</option>
|
||||
<option value="Mauritius">Mauritius</option>
|
||||
<option value="Mayotte">Mayotte</option>
|
||||
<option value="Mexico">Mexico</option>
|
||||
<option value="Micronesia, Federated States of">Micronesia, Federated States of</option>
|
||||
<option value="Moldova, Republic of">Moldova, Republic of</option>
|
||||
<option value="Monaco">Monaco</option>
|
||||
<option value="Mongolia">Mongolia</option>
|
||||
<option value="Montenegro">Montenegro</option>
|
||||
<option value="Montserrat">Montserrat</option>
|
||||
<option value="Morocco">Morocco</option>
|
||||
<option value="Mozambique">Mozambique</option>
|
||||
<option value="Myanmar">Myanmar</option>
|
||||
<option value="Namibia">Namibia</option>
|
||||
<option value="Nauru">Nauru</option>
|
||||
<option value="Nepal">Nepal</option>
|
||||
<option value="Netherlands">Netherlands</option>
|
||||
<option value="Netherlands Antilles">Netherlands Antilles</option>
|
||||
<option value="New Caledonia">New Caledonia</option>
|
||||
<option value="New Zealand">New Zealand</option>
|
||||
<option value="Nicaragua">Nicaragua</option>
|
||||
<option value="Niger">Niger</option>
|
||||
<option value="Nigeria">Nigeria</option>
|
||||
<option value="Niue">Niue</option>
|
||||
<option value="Norfolk Island">Norfolk Island</option>
|
||||
<option value="Northern Mariana Islands">Northern Mariana Islands</option>
|
||||
<option value="Norway">Norway</option>
|
||||
<option value="Oman">Oman</option>
|
||||
<option value="Pakistan">Pakistan</option>
|
||||
<option value="Palau">Palau</option>
|
||||
<option value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</option>
|
||||
<option value="Panama">Panama</option>
|
||||
<option value="Papua New Guinea">Papua New Guinea</option>
|
||||
<option value="Paraguay">Paraguay</option>
|
||||
<option value="Peru">Peru</option>
|
||||
<option value="Philippines">Philippines</option>
|
||||
<option value="Pitcairn">Pitcairn</option>
|
||||
<option value="Poland">Poland</option>
|
||||
<option value="Portugal">Portugal</option>
|
||||
<option value="Puerto Rico">Puerto Rico</option>
|
||||
<option value="Qatar">Qatar</option>
|
||||
<option value="Reunion">Reunion</option>
|
||||
<option value="Romania">Romania</option>
|
||||
<option value="Russian Federation">Russian Federation</option>
|
||||
<option value="Rwanda">Rwanda</option>
|
||||
<option value="Saint Helena">Saint Helena</option>
|
||||
<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
|
||||
<option value="Saint Lucia">Saint Lucia</option>
|
||||
<option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
|
||||
<option value="Saint Vincent and The Grenadines">Saint Vincent and The Grenadines</option>
|
||||
<option value="Samoa">Samoa</option>
|
||||
<option value="San Marino">San Marino</option>
|
||||
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
|
||||
<option value="Saudi Arabia">Saudi Arabia</option>
|
||||
<option value="Senegal">Senegal</option>
|
||||
<option value="Serbia">Serbia</option>
|
||||
<option value="Seychelles">Seychelles</option>
|
||||
<option value="Sierra Leone">Sierra Leone</option>
|
||||
<option value="Singapore">Singapore</option>
|
||||
<option value="Slovakia">Slovakia</option>
|
||||
<option value="Slovenia">Slovenia</option>
|
||||
<option value="Solomon Islands">Solomon Islands</option>
|
||||
<option value="Somalia">Somalia</option>
|
||||
<option value="South Africa">South Africa</option>
|
||||
<option value="South Georgia and The South Sandwich Islands">South Georgia and The South Sandwich Islands</option>
|
||||
<option value="Spain">Spain</option>
|
||||
<option value="Sri Lanka">Sri Lanka</option>
|
||||
<option value="Sudan">Sudan</option>
|
||||
<option value="Suriname">Suriname</option>
|
||||
<option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
|
||||
<option value="Swaziland">Swaziland</option>
|
||||
<option value="Sweden">Sweden</option>
|
||||
<option value="Switzerland">Switzerland</option>
|
||||
<option value="Syrian Arab Republic">Syrian Arab Republic</option>
|
||||
<option value="Taiwan">Taiwan</option>
|
||||
<option value="Tajikistan">Tajikistan</option>
|
||||
<option value="Tanzania, United Republic of">Tanzania, United Republic of</option>
|
||||
<option value="Thailand">Thailand</option>
|
||||
<option value="Timor-leste">Timor-leste</option>
|
||||
<option value="Togo">Togo</option>
|
||||
<option value="Tokelau">Tokelau</option>
|
||||
<option value="Tonga">Tonga</option>
|
||||
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
|
||||
<option value="Tunisia">Tunisia</option>
|
||||
<option value="Turkey">Turkey</option>
|
||||
<option value="Turkmenistan">Turkmenistan</option>
|
||||
<option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
|
||||
<option value="Tuvalu">Tuvalu</option>
|
||||
<option value="Uganda">Uganda</option>
|
||||
<option value="Ukraine">Ukraine</option>
|
||||
<option value="United Arab Emirates">United Arab Emirates</option>
|
||||
<option value="United Kingdom">United Kingdom</option>
|
||||
<option value="United States">United States</option>
|
||||
<option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
|
||||
<option value="Uruguay">Uruguay</option>
|
||||
<option value="Uzbekistan">Uzbekistan</option>
|
||||
<option value="Vanuatu">Vanuatu</option>
|
||||
<option value="Venezuela">Venezuela</option>
|
||||
<option value="Viet Nam">Viet Nam</option>
|
||||
<option value="Virgin Islands, British">Virgin Islands, British</option>
|
||||
<option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option>
|
||||
<option value="Wallis and Futuna">Wallis and Futuna</option>
|
||||
<option value="Western Sahara">Western Sahara</option>
|
||||
<option value="Yemen">Yemen</option>
|
||||
<option value="Zambia">Zambia</option>
|
||||
<option value="Zimbabwe">Zimbabwe</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
<button id="send_button" onclick="SendInfos()" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
Update Information
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
</body>
|
||||
|
||||
<style>
|
||||
@media (min-width: 1440px) {
|
||||
#password-too-short-alert {
|
||||
position: absolute;
|
||||
right: 25.5%;
|
||||
bottom: 23%;
|
||||
color: salmon;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#passwords-dont-match-alert {
|
||||
position: absolute;
|
||||
right: 23%;
|
||||
bottom: 14.5%;
|
||||
color: salmon;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
#password-too-short-alert {
|
||||
position: absolute;
|
||||
right: 24%;
|
||||
bottom: 23%;
|
||||
color: salmon;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#passwords-dont-match-alert {
|
||||
position: absolute;
|
||||
right: 21.5%;
|
||||
bottom: 14.5%;
|
||||
color: salmon;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 426px) and (max-width: 768px) {
|
||||
.np-box-content-container {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 376px) and (max-width: 425px) {
|
||||
.np-input {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 326px) and (max-width: 375px) {
|
||||
.np-input {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 325px) {
|
||||
.np-input {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.np-main {
|
||||
margin: 25px 0;
|
||||
}
|
||||
.np-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: unset !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
.np-box-container {
|
||||
height: unset !important;
|
||||
background: none;
|
||||
}
|
||||
.hero-image-left-desktop {
|
||||
width: 60%;
|
||||
}
|
||||
.hero-image-left-mobile {
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
.np-box-content-container {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 2rem 0 2rem 2.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.np-form-subtitle {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.np-input {
|
||||
background-color: #FFF6F0;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.np-input::placeholder {
|
||||
color: #6F7277;
|
||||
font-size: 16px;
|
||||
}
|
||||
#default-option {
|
||||
color: #6F7277;
|
||||
font-size: 16px;
|
||||
}
|
||||
.selection-option {
|
||||
font-family: Inter;
|
||||
}
|
||||
.body {
|
||||
height: 100%;
|
||||
}
|
||||
#learner_role {
|
||||
color: #1B1C1D;
|
||||
text-align: left;
|
||||
}
|
||||
@media only screen and (min-width: 1190px) {
|
||||
.hero-image-left-desktop {
|
||||
min-width: 60%;
|
||||
}
|
||||
.np-box-content-container {
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.np-box-content-container {
|
||||
padding: 2rem 2rem 2.25rem;
|
||||
}
|
||||
.hero-image-left-desktop {
|
||||
display: none;
|
||||
}
|
||||
.hero-image-left-mobile {
|
||||
display: block;
|
||||
}
|
||||
.np-box {
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
}
|
||||
.np-main {
|
||||
margin: 0;
|
||||
}
|
||||
.np-box-content-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
#send_button {
|
||||
pointer-events: none;
|
||||
background: #6F7277;
|
||||
}
|
||||
|
||||
.loader {
|
||||
border: 16px solid #f3f3f3;
|
||||
border-radius: 50%;
|
||||
border-top: 16px solid #00bf8f;
|
||||
border-bottom: 16px solid #00bf8f;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
animation: spin 2s linear infinite;
|
||||
|
||||
|
||||
position: absolute;
|
||||
top:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
function checkIfInputsExist (){
|
||||
window.setTimeout(function(){
|
||||
if ($("#learner_company")[0].value.length > 0 && $("#learner_country")[0].value != "Your Country") {
|
||||
$("#send_button").css("background-color","#005cb9");
|
||||
$("#send_button").css("pointer-events","auto");
|
||||
}
|
||||
else {
|
||||
$("#send_button").css("background-color","#6F7277");
|
||||
$("#send_button").css("pointer-events","none");
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
document.addEventListener('keydown', checkIfInputsExist);
|
||||
document.getElementById("learner_country").addEventListener('change', checkIfInputsExist);
|
||||
|
||||
|
||||
function SendInfos() {
|
||||
var xhr = new XMLHttpRequest();
|
||||
url = "https://www.workato.com/webhooks/rest/504ccf22-b03b-40b4-b8f6-8ff40a2f7d71/recast-academy-colleting-information-while-signing-in"
|
||||
xhr.addEventListener("load", e => {
|
||||
window.sessionStorage.propertiesAdded = 'true';
|
||||
window.location.replace('/app');
|
||||
});
|
||||
xhr.open("POST", url, true);
|
||||
xhr.send(JSON.stringify({
|
||||
user_id: '{{ current_person.id }}',
|
||||
company: $("#learner_company")[0].value,
|
||||
country: $("#learner_country")[0].value
|
||||
}));
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-box-container {
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,253 @@
|
||||
/*
|
||||
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: "archia-regular";
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/recast/Archia-Regular.otf") format("opentype");
|
||||
}
|
||||
|
||||
main,
|
||||
body{
|
||||
font-family: "archia-regular", serif;
|
||||
}
|
||||
|
||||
|
||||
/* Global */
|
||||
.np-button{
|
||||
background: #29ABE2;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.np-button:hover{
|
||||
background: #FFFFFF !important;
|
||||
color: #29ABE2;
|
||||
border: 1px solid #29ABE2;
|
||||
}
|
||||
/* ----------------------------------------------------------------------------------------------------------------------- */
|
||||
/* Header */
|
||||
/* Header: Subnav */
|
||||
.np-sub-navigation{
|
||||
background: transparent;
|
||||
margin-bottom: 0;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item-icon,
|
||||
.np-sub-navigation-content-item-link,
|
||||
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-link,
|
||||
.np-button, .np-button-background-color,
|
||||
.sub-navigation-content-item-bar{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (min-width: 768px){
|
||||
.np-header-logo,
|
||||
.np-header-search{
|
||||
flex-grow: 0.5;
|
||||
}
|
||||
|
||||
.np-header-logo-image{
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.np-header-avatar-image{
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
}
|
||||
|
||||
.np-header-content .desktop-subnav{
|
||||
margin: 0 5%;
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item{
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px){
|
||||
.np-sub-navigation-content-item{
|
||||
margin: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px){
|
||||
.np-sub-navigation-content-item{
|
||||
margin: 0 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------------------------------------------------- */
|
||||
/* Homepage Sections */
|
||||
/* Section: Events */
|
||||
.np-homepage-hero-image{
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.homepage-event-card{
|
||||
padding: 1rem 2.3rem !important;
|
||||
}
|
||||
|
||||
.np-carousel {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.np-carousel .slick-track {
|
||||
display: flex;
|
||||
}
|
||||
.np-carousel .slick-slide {
|
||||
height: auto;
|
||||
}
|
||||
.np-carousel .np-card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.np-carousel .slick-arrow {
|
||||
color: #089fb7;
|
||||
font-size: 2.5rem;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.np-carousel .slick-arrow:before {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
z-index: 500;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.np-carousel .slick-arrow.fa-chevron-left {
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
.np-carousel .slick-arrow.fa-chevron-right {
|
||||
right: -8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.np-carousel .slick-arrow.fa-chevron-left:before {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.np-carousel .slick-arrow.fa-chevron-right:before {
|
||||
justify-content: flex-end;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.np-carousel .slick-arrow.slick-disabled {
|
||||
opacity: 0;
|
||||
cursor: text;
|
||||
}
|
||||
.np-carousel-card .np-card {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-carousel .slick-track {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.np-carousel .slick-arrow:before {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Section: Glossary */
|
||||
.np-glossary {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.np-accordion {
|
||||
margin: 0 22px 32px;
|
||||
}
|
||||
|
||||
.accordion-btn {
|
||||
color: #001e2e;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
min-height: 76px;
|
||||
padding: 0 18px 0 92px;
|
||||
text-align: left;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: 0.4s;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.fa-plus,
|
||||
.fa-minus {
|
||||
background: #323F48;
|
||||
font-size: 2.5rem;
|
||||
color: #29ABE2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: 0.4s;
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
.accordion-title,
|
||||
.accordion-panel-content {
|
||||
line-height: 1.375rem;
|
||||
position: relative;
|
||||
}
|
||||
.accordion-panel-content {
|
||||
padding: 18px;
|
||||
}
|
||||
.accordion-panel-content p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.accordion-panel-content:before {
|
||||
content: "";
|
||||
width: 75px;
|
||||
height: 1px;
|
||||
background: #B04EC4;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
.accordion-panel {
|
||||
color: #001e2e;
|
||||
background-color: #fff;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.4s ease-out;
|
||||
margin-left: 76px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-glossaries {
|
||||
margin: 0 4.0625rem;
|
||||
}
|
||||
.np-accordion {
|
||||
margin: 0 8px 32px;
|
||||
}
|
||||
}
|
||||
/* ----------------------------------------------------------------------------------------------------------------------- */
|
||||
@ -0,0 +1,19 @@
|
||||
{% include "header" %}
|
||||
{% comment %}{% include "sub_navigation" %}{% endcomment %}
|
||||
<main class="np-main np-training-events np-subpage-container np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-10">
|
||||
<div class="np-resource-title">
|
||||
{% t .title %}
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .subtitle %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-2">
|
||||
{% include "training_events_filter" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "training_events_index" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
Reference in New Issue
Block a user