Cayuse and Crayon templates. Added Talkspace's emails as temporary files, but still need to organize them.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,102 @@
|
||||
{% comment %}This section of code will iterate over all courses in a learning path and average out the completion per course compared to the total of the LP {% endcomment %}
|
||||
{% assign total_progress = 0 %}
|
||||
{% assign completed_progress = 0 %}
|
||||
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% assign total_progress = total_progress | plus: 100 %}
|
||||
|
||||
{% assign completed_progress = completed_progress | plus: item.progress %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% assign total_progress = total_progress | times: 0.01 %}
|
||||
{% assign calculated_progress = completed_progress | divided_by: total_progress %}
|
||||
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="np-hidden-desktop np-card-header">
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<div class="np-hidden-desktop np-card-header-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-card-header">
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-description">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-progress
|
||||
np-button-color">
|
||||
{% comment %}{% t shared.progress, count: learning_path.progress %}{% endcomment %}
|
||||
{% if calculated_progress < 1 %}
|
||||
Not Started
|
||||
{% else %}
|
||||
{{calculated_progress | ceil }}% Completed
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ calculated_progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-hidden-desktop np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
<a class="np-button" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
<i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i>
|
||||
<span class="np-learning-path-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-stack">
|
||||
<div class="np-card-stack-level-1"></div>
|
||||
<div class="np-card-stack-level-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-learning-paths .np-learning-path-image {
|
||||
min-height: unset;
|
||||
margin: auto;
|
||||
}
|
||||
.np-learning-path-image {
|
||||
min-width: 33%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,60 @@
|
||||
{% if learning_path.enrolled? and course.unlocked? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="np-learning-path-outline-item np-card-container"
|
||||
href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
|
||||
>
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
{% if course.instructors %}
|
||||
<div class="np-learning-path-outline-caption">
|
||||
{{ course.instructors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-learning-path-outline-progress
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% comment %}
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endcomment %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
</div>
|
||||
{% comment %}
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,57 @@
|
||||
{% if learning_path.enrolled? and training_session.unlocked? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="np-learning-path-outline-item np-card-container"
|
||||
href="{% route training_session, id: training_session.id %}"
|
||||
>
|
||||
<div class="np-card-content np-card-padding">
|
||||
<div class="np-events-content-date np-button-background-color">
|
||||
<div class="np-events-content-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-events-content-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
|
||||
<div class="np-learning-path-outline-caption">{{ training_session.instructors }}</div>
|
||||
<div class="np-events-content-time np-learning-path-outline-time np-button-color">
|
||||
{{ training_session.time }} {{ training_session.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% comment %}
|
||||
{% if training_session.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endcomment %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-outline-item np-card-container np-learning-path-outline-inactive-item">
|
||||
<div class="np-card-content np-card-padding">
|
||||
<div class="np-events-content-date np-button-background-color">
|
||||
<div class="np-events-content-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-events-content-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
|
||||
<div class="np-learning-path-outline-caption">{{ training_session.caption }}</div>
|
||||
</div>
|
||||
{% comment %}
|
||||
{% if training_session.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,28 @@
|
||||
<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>
|
||||
{% if link.label == 'Dashboard' %}
|
||||
My Dashboard
|
||||
{% elsif link.label == 'Catalog' %}
|
||||
Courses Library
|
||||
{% elsif link.label == 'Events' %}
|
||||
Live Training Webinars
|
||||
{% else %}
|
||||
{{ link.label }}
|
||||
{% endif %}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="np-sub-navigation-content-item">
|
||||
<a class="np-sub-navigation-content-item-link" href="https://support.hackerrank.com">
|
||||
<i style="color: #bac4ca;" class="far fa-book-reader np-sub-navigation-content-item-icon"></i>
|
||||
Knowledge Base
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -0,0 +1,24 @@
|
||||
<div class="np-card-spacing-large">
|
||||
{% include "training_session_date" %}
|
||||
|
||||
<div class="np-training-session-time">
|
||||
<i class="fal fa-clock np-button-color np-training-session-icon"></i>
|
||||
{{ training_session.time_period }} {{ training_session.time_zone }}
|
||||
</div>
|
||||
|
||||
{% if training_session.location %}
|
||||
<div class="np-training-session-location">
|
||||
<i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
|
||||
{% comment %} {{ training_session.location }} {% endcomment %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if training_session.session_url %}
|
||||
<div class="np-training-session-location">
|
||||
{% comment %} <i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
|
||||
<a href="{{ training_session.session_url }}" class="np-button-color" target="_blank" >
|
||||
{{ training_session.session_url }} {% endcomment %}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,66 @@
|
||||
<main class="np-box-container np-open-access">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-headline">
|
||||
{% t shared.welcome_to_school, school_name: current_school.name %}
|
||||
</div>
|
||||
<div class="np-form-subheadline">
|
||||
{% comment %} {% t .headline, key: current_school.course_vocabulary %} {% endcomment %}
|
||||
To access the HackerRank Academy, simply enter your first name, last name, and work email address below.
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_first_name">
|
||||
{% t shared.first_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="text"
|
||||
name="first_name"
|
||||
id="learner_first_name"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_last_name">
|
||||
{% t shared.last_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="last_name"
|
||||
id="learner_last_name"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_email">
|
||||
Work {% t shared.email_address %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="email"
|
||||
id="learner_email"
|
||||
value="{{ form.email }}"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="submit"
|
||||
name="commit"
|
||||
value="{% t shared.enter %}"
|
||||
class="np-button np-button-big np-form-action"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
if (document.querySelector('.np-alert-wrapper > div').textContent.includes('You need to log in or sign up before continuing.')) {
|
||||
document.querySelector('.np-alert').style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,63 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
{% include "sub_navigation" %}
|
||||
<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" %}
|
||||
|
||||
<script>
|
||||
function clickDropdownMenu() {
|
||||
const dropdownMenu = document.getElementsByClassName('dropdown-menu')[0]
|
||||
|
||||
const event = new MouseEvent('click', {
|
||||
view: window,
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
});
|
||||
|
||||
dropdownMenu.dispatchEvent(event);
|
||||
console.log('clicked')
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const choices = document.querySelectorAll('.choices__item.choices__item--choice.choices__item--selectable')
|
||||
|
||||
const targetNode = document.getElementsByClassName('choices__list')[2];
|
||||
const config = { attributes: true, childList: true, subtree: true };
|
||||
const callback = (mutationList, observer) => {
|
||||
var updated_choices = document.querySelectorAll('.choices__item.choices__item--choice.choices__item--selectable')
|
||||
for (const mutation of mutationList) {
|
||||
Array.from(updated_choices).forEach((choice) => {
|
||||
choice.addEventListener("mousedown", clickDropdownMenu);
|
||||
})
|
||||
}
|
||||
};
|
||||
const observer = new MutationObserver(callback);
|
||||
|
||||
Array.from(choices).forEach((choice) => {
|
||||
choice.addEventListener("mousedown", clickDropdownMenu);
|
||||
})
|
||||
observer.observe(targetNode, config);
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,24 @@
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{% comment %} {% 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" %} {% endcomment %}
|
||||
@ -0,0 +1,47 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
<main class="np-main np-homepage">
|
||||
<div class="np-homepage-hero">
|
||||
<img class="np-homepage-hero-image"
|
||||
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>
|
||||
{% include "sub_navigation" %}
|
||||
<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 learning_paths.available.any? %}
|
||||
<div class="np-learning-paths-resources">
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% if learning_path.name == 'HackerRank Screen (Self-Guided Learning Path)' or learning_path.name == 'HackerRank Interview (Self-Guided Learning Path)' %}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% endif %}
|
||||
{% if learning_path.name == 'HackerRank Company Admin' %}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,19 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<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">
|
||||
Live Training Webinars
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
View and register for upcoming online webinars
|
||||
</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