Small notes changes. Added HackerRank Internal's Templates

This commit is contained in:
Norm Rasmussen
2023-02-13 13:35:02 -05:00
parent 747bb47464
commit 0a322b8f3a
333 changed files with 1881 additions and 106 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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 %}

View File

@ -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" %}