Small notes changes. Added HackerRank Internal's Templates
This commit is contained in:
@ -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,15 @@
|
||||
<div class="np-learning-path-outline">
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% include "learning_path_course", course: item %}
|
||||
{% elsif item.training_event? %}
|
||||
{% include "learning_path_training_session", training_session: item %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-learning-path-outline-item.np-card-container .np-optional-ribbon {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@ -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,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" %}
|
||||
Reference in New Issue
Block a user