norm/Gainsight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Hackerrank new templates in sandbox. updated a bunch of williams-sonoma stuff. GSU backup.

Browse Source
This commit is contained in:
Norm Rasmussen
2024-10-24 16:50:02 -04:00
parent 1335c4c29b
commit 3626ead591
42 changed files with 839 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
Custom_Templates/customer_templates/HackerRank Sandbox/_account_tabs.html.liquid
View File

@ -1,23 +0,0 @@
{% capture settings_path %}{% route account %}{% endcapture %}
{% capture transcript_path %}{% route transcript %}{% endcapture %}
{% if current_person.signed_in? %}
{% unless current_school.sso_active? %}
<nav class="np-tabs np-account-tabs">
<div class="np-tabs-content">
<div class="np-tab{% if page.path == settings_path %} np-tab-active{% endif %}">
<a class="np-tab-link" href="{{ settings_path}}">
{% t .profile_settings %}
</a>
<div class="np-tab-indicator np-button-background-color"></div>
</div>
<div class="np-tab{% if page.path == transcript_path %} np-tab-active{% endif %}">
<a class="np-tab-link" href="{{ transcript_path }}">
{% t .transcript %}
</a>
<div class="np-tab-indicator np-button-background-color"></div>
</div>
</div>
</nav>
{% endunless %}
{% endif %}

36
Custom_Templates/customer_templates/HackerRank Sandbox/_cards_learning_path.html.liquid
View File

@ -1,3 +1,18 @@
{% 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">
@ -34,12 +49,17 @@
<div class="np-hidden-mobile np-card-content-progress
np-button-color">
{% t shared.progress, count: learning_path.progress %}
{% 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: {{ learning_path.progress }}%"
style="width: {{ calculated_progress }}%"
class="np-button-background-color np-card-progress-bar">
</div>
</div>
@ -68,3 +88,15 @@
<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>

38
Custom_Templates/customer_templates/HackerRank Sandbox/_cards_training_event.html.liquid
View File

@ -1,46 +1,38 @@
<div class="np-card np-card-training-event">
<div class="np-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">
<i class="far {{ training_event.event_type_icon }} np-training-session-icon"></i>
{% t shared.event_types, key: training_event.event_type %}
<span class="np-card-training-sessions-separator">•</span>
<i class="np-card-training-sessions-icon far fa-calendar-star"></i>
<span class="np-card-training-sessions-label">
{% t .sessions, count: training_event.sessions.size %}
</span>
</div>
<div class="np-card-training-session">
<span class="np-card-content-label">
{% t .next_session %} -
<span class="{{ training_event.sessions.first.status.type}}">
{{ training_event.sessions.first.status.label}}
</span>
{% t .next_session %}
</span>
<div class="np-card-training-session-date">
<div class="np-button-background-color np-card-training-session-date-bar"></div>
<div class="np-card-training-session-date-label">
<div class="np-card-training-session-date-day">
{{ training_event.sessions.first.day }}
<div class="np-card-training-session-date-day">
{{ training_event.sessions.first.day }}
</div>
<div>
<div class="np-card-training-session-date-month">
{{ training_event.sessions.first.month }}
</div>
<div>
<div class="np-card-training-session-date-month">
{{ training_event.sessions.first.month }}
</div>
<div class="np-card-training-session-date-year">
{{ training_event.sessions.first.year }}
</div>
<div class="np-card-training-session-date-year">
{{ training_event.sessions.first.year }}
</div>
</div>
</div>
</div>
</div>
<div class="np-card-content np-card-content-vertical np-card-content-training-event">
<div class="np-card-content np-card-content-vertical np-card-padding">
<div class="np-card-training-sessions">
<i class="np-card-training-sessions-icon far fa-calendar-star"></i>
<span class="np-card-training-sessions-label">
{% t .sessions, count: training_event.sessions.size %}
</span>
<a
class="np-button np-button-wide"
href="{% route training_session, id: training_event.sessions.first.id %}"

42
Custom_Templates/customer_templates/HackerRank Sandbox/_header.html.liquid
View File

@ -26,7 +26,7 @@
<h1 class="np-header-logo">
<a href="{% route home %}">
<img
alt="This is the school name"
alt="{{ current_school.name }}"
class="np-header-logo-image"
src="{{ current_school.logo_url }}"
/>
@ -92,22 +92,14 @@
</div>
</div>
<nav class="np-header-avatar-tooltip-navigation">
{% unless current_school.sso_active? %}
<a
class="np-header-avatar-tooltip-navigation-link"
href="{% route account %}"
>
{% t .profile_settings %}
</a>
{% endunless %}
{% if current_person.signed_in? %}
<a
class="np-header-avatar-tooltip-navigation-link"
href="{% route transcript %}"
>
{% t .transcript %}
</a>
{% endif %}
{% 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 %}"
@ -167,22 +159,14 @@
</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 %}
{% if current_person.signed_in? %}
{% unless current_school.sso_active? %}
<a
class="np-header-mobile-menu-content-button"
href="{% route transcript %}"
href="{% route account %}"
>
{% t .transcript %}
{% t .profile_settings %}
</a>
{% endif %}
{% endunless %}
<a
class="np-header-mobile-menu-content-button np-danger"
href="{% route logout %}"

14
Custom_Templates/customer_templates/HackerRank Sandbox/_learning_path_course.html.liquid
View File

@ -26,11 +26,13 @@
</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 %}
@ -46,11 +48,13 @@
{{ course.name }}
</div>
</div>
{% if course.optional? %}
<div class="np-optional-ribbon">
{% t shared.optional %}
</div>
{% endif %}
{% comment %}
{% if course.optional? %}
<div class="np-optional-ribbon">
{% t shared.optional %}
</div>
{% endif %}
{% endcomment %}
</div>
</div>
{% endif %}

4
Custom_Templates/customer_templates/HackerRank Sandbox/_learning_path_training_session.html.liquid
View File

@ -21,11 +21,13 @@
</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 %}
@ -43,11 +45,13 @@
<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 %}

68
Custom_Templates/customer_templates/HackerRank Sandbox/_sub_navigation.html.liquid
View File

@ -4,10 +4,76 @@
<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 }}
{% 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-inactive knowledge-base-link">
<a class="np-sub-navigation-content-item-link" href="https://support.hackerrank.com">
<i class="fal fa-book-reader np-button-color 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 class="np-sub-navigation-content-item new-products-link">
<a class="np-sub-navigation-content-item-link"
href="https://hackerrank.northpass.com/app/new-product-releases">
<i class="fal fa-rocket-launch np-sub-navigation-content-item-icon"></i>
New Product Releases
</a>
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
</div>
<div class="np-sub-navigation-content-item case-studies-link">
<a style="text-decoration: none;" href="https://hackerrank.northpass.com/app/case-studies">
<div class="np-sub-navigation-content-item-link" >
<img class="fal np-button-color np-sub-navigation-content-item-icon custom-icon" src="https://s3.amazonaws.com/static.northpass.com/HackerRank/Lightbulb_Book-Icon.jpg">
Case Studies
</div>
</a>
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
</div>
</div>
</nav>
<style>
/* .custom-icon {
content: url('https://s3.amazonaws.com/static.northpass.com/HackerRank/Lightbulb_Book-Icon.jpg');
height: 100%;
overflow: auto;
} */
.custom-icon {
width: 32px;
position: relative;
top: 50%;
left: 50%;
padding: 0;
transform: translate(-135%, calc(-50% - 10px));
}
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-link {
color:#1ba94c;
}
</style>
<script>
if (window.location.pathname == "/app/case-studies") {
document.querySelector(".case-studies-link").classList.add("np-sub-navigation-content-item-active")
} else {
document.querySelector(".case-studies-link").classList.add("np-sub-navigation-content-item-inactive")
}
if (window.location.pathname == "/app/new-product-releases") {
document.querySelector(".new-products-link").classList.add("np-sub-navigation-content-item-active")
} else {
document.querySelector(".new-products-link").classList.add("np-sub-navigation-content-item-inactive")
}
</script>

56
Custom_Templates/customer_templates/HackerRank Sandbox/_training_session_cta.html.liquid
View File

@ -1,33 +1,51 @@
{% if training_session.approved? %}
<div class="np-training-session-cta-note">
<i class="far fa-check np-training-session-icon"></i>
{% t .registered %}
</div>
{% elsif training_session.pending? %}
<div class="np-training-session-cta-note np-training-session-cta-note-error">
{% t .pending %}
</div>
{% elsif training_session.denied? %}
<div class="np-training-session-cta-note np-training-session-cta-note-error">
{% t .denied %}
</div>
{% elsif training_session.too_late? %}
<div class="np-training-session-cta-note np-training-session-cta-note-error">
{% t .too_late %}
</div>
{% elsif training_session.no_seats? %}
<div class="np-training-session-cta-note np-training-session-cta-note-error">
{% t .no_seats %}
</div>
{% endif %}
<div class="np-training-session-cta">
<div class="np-training-session-cta-buttons">
<form
action="{{ training_session.cta.url }}"
action="{% route training_session_registration, id: training_session.id %}"
method="post"
>
{% form_authenticity_token %}
{% if training_session.show_calendar_links? %}
{% include "training_session_calendars" %}
{% endif %}
{% if training_session.internal? and training_session.approved? %}
{% if features.training_events_google_calendar? %}
{% include "training_session_calendars" %}
<button type="submit" class="np-top-button np-button np-button-big np-button-secondary">
{% t .unregister %}
</button>
{% else %}
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
{% t .unregister %}
</button>
{% endif %}
{% if training_session.cta.undo? %}
<input type="hidden" name="_method" value="delete" />
{% endif %}
{% if training_session.cta.label %}
<button
type="submit"
class="
np-top-button
np-button
np-button-big
{% if training_session.show_calendar_links? %}
np-button-secondary
{% endif %}
"
>
{{ training_session.cta.label }}
{% if training_session.not_registered? %}
<button type="submit" class="np-top-button np-button np-button-big">
{% t .register %}
</button>
{% endif %}
</form>

18
Custom_Templates/customer_templates/HackerRank Sandbox/_training_session_date.html.liquid
View File

@ -1,16 +1,14 @@
<div class="np-card-training-session-date">
<div class="np-button-background-color np-card-training-session-date-bar"></div>
<div class="np-card-training-session-date-label">
<div class="np-card-training-session-date-day">
{{ training_session.day }}
<div class="np-card-training-session-date-day">
{{ training_session.day }}
</div>
<div>
<div class="np-card-training-session-date-month">
{{ training_session.month }}
</div>
<div>
<div class="np-card-training-session-date-month">
{{ training_session.month }}
</div>
<div class="np-card-training-session-date-year">
{{ training_session.year }}
</div>
<div class="np-card-training-session-date-year">
{{ training_session.year }}
</div>
</div>
</div>

53
Custom_Templates/customer_templates/HackerRank Sandbox/_training_session_desktop_view.html.liquid
View File

@ -1,43 +1,40 @@
<div class="np-resource-header np-resource-header-card np-card-padding-large">
{% include "training_session_header" %}
</div>
<div class="row np-training-session-row">
<div class="col-xs-12 col-sm-8">
<div class="row">
<div class="col-xs-12 col-sm-7">
<div class="np-card-container">
<div class="np-card-padding-large">
<div>
{% include "training_session_status" %}
{% include "training_session_date" %}
</div>
<div class="np-training-session-details">
<div class="row">
<div class="col-xs-12 col-sm-5">
{% include "training_session_details" %}
</div>
<div class="col-xs-12 col-sm-7">
{% include "training_session_cta" %}
</div>
</div>
<div class="np-card-content-divider"></div>
<div class="np-card-padding-large">
{% include "training_session_description" %}
<div class="np-card-content-divider">
{% include "training_session_description" %}
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 np-grid-spacing">
<div class="np-training-session-container">
<div class="np-training-session-sessions-title">
{% t shared.more_sessions %}
</div>
{% if training_event.sessions.size > 1 %}
{% include "training_session_more_sessions" %}
{% else %}
<div class="np-training-session-zero-state">
<img
alt="{% t .empty %}"
class="np-zero-state-training-sessions"
/>
<div class="np-training-session-zero-state-text">
{% t .empty %}
</div>
</div>
{% endif %}
<div class="col-xs-12 col-sm-5 np-grid-spacing">
<div class="np-training-session-sessions-title">
{% t shared.more_sessions %}
</div>
{% if training_event.sessions.size > 1 %}
{% include "training_session_more_sessions" %}
{% else %}
<div class="np-training-session-zero-state">
<img
alt="{% t .empty %}"
class="np-zero-state-training-sessions"
/>
<div class="np-training-session-zero-state-text">
{% t .empty %}
</div>
</div>
{% endif %}
</div>
</div>

15
Custom_Templates/customer_templates/HackerRank Sandbox/_training_session_details.html.liquid
View File

@ -1,22 +1,23 @@
<div class="np-training-session-info">
<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>
<time>{{ training_session.time_period }} {{ training_session.time_zone }}</time>
{{ training_session.time_period }} {{ training_session.time_zone }}
</div>
{% if training_session.approved? and training_session.location %}
{% 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>
{{ training_session.location }}
{% comment %} {{ training_session.location }} {% endcomment %}
</div>
{% endif %}
{% if training_session.approved? and training_session.session_url %}
{% if training_session.session_url %}
<div class="np-training-session-location">
<i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
{% 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 }}
{{ training_session.session_url }} {% endcomment %}
</a>
</div>
{% endif %}

2
Custom_Templates/customer_templates/HackerRank Sandbox/_training_session_header.html.liquid
View File

@ -1,6 +1,6 @@
<div class="np-top-vocabulary np-text-title">
{% t shared.event_types, key: training_event.event_type %}
<i class="fal {{ training_event.event_type_icon }} np-button-color np-training-session-icon"></i>
<i class="fal fa-users-class np-button-color np-training-session-icon"></i>
</div>
<div class="np-top-title">
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">

41
Custom_Templates/customer_templates/HackerRank Sandbox/_training_session_mobile_view.html.liquid
View File

@ -1,27 +1,22 @@
<div class="np-training-session-view">
<div class="np-training-session-view-header">
<div class="np-card-container-training-session">
<div class="np-card-spacing-large">
{% include "training_session_header" %}
</div>
<div class="np-card-container np-training-session-view-details np-card-padding np-card-spacing">
{% include "training_session_status" %}
{% include "training_session_date" %}
{% include "training_session_details" %}
<div class="np-card-padding-large">
{% include "training_session_cta" %}
</div>
{% include "training_session_description" %}
{% include "training_session_details" %}
<div class="np-card-padding-large">
{% include "training_session_cta" %}
</div>
{% if training_event.sessions.size > 1 %}
<div class="np-card-spacing">
<div class="np-training-session-container">
<div class="np-training-session-sessions-title">
{% t shared.more_sessions %}
</div>
{% include "training_session_more_sessions" %}
</div>
</div>
{% endif %}
</div>
<div class="np-card-container np-card-padding np-card-spacing">
{% include "training_session_description" %}
</div>
{% if training_event.sessions.size > 1 %}
<div class="np-card-spacing">
<div class="np-training-session-sessions-title">
{% t shared.more_sessions %}
</div>
{% include "training_session_more_sessions" %}
</div>
{% endif %}

6
Custom_Templates/customer_templates/HackerRank Sandbox/_training_session_status.html.liquid
View File

@ -1,6 +0,0 @@
<div class="np-training-session-cta-note np-training-session-tile-badge np-training-session-tile-badge-{{ training_session.status.type }}">
{% if training_session.approved? %}
<i class="far fa-check np-training-session-icon"></i>
{% endif %}
{{ training_session.status.label }}
</div>

23
Custom_Templates/customer_templates/HackerRank Sandbox/_training_session_tile.html.liquid
View File

@ -3,22 +3,15 @@
class="np-training-session-tile"
href="{% route training_session, id: session.id %}"
>
<div class="np-training-session-tile-header">
<i class="far fa-calendar-star np-training-session-tile-icon"></i>
<div class="np-training-session-tile-badge np-training-session-tile-badge-{{ session.status.type }}">
{{ session.status.label }}
</div>
</div>
<div class="np-training-session-tile-content">
<div>
<div class="np-training-session-tile-date">
{{ session.month }} {{ session.day }}, {{ session.year }}
</div>
<div class="np-training-session-tile-time">
{{ session.time_period }} {{ session.time_zone }}
</div>
<i class="far fa-calendar-star np-training-session-tile-icon"></i>
<div>
<div class="np-training-session-tile-date">
{{ session.month }} {{ session.day }}, {{ session.year }}
</div>
<div class="np-training-session-tile-time">
{{ session.time_period }} {{ session.time_zone }}
</div>
<i class="fas fa-arrow-right np-training-session-tile-chevron"></i>
</div>
<i class="fas fa-chevron-right np-training-session-tile-chevron"></i>
</a>
{% endif %}

1
Custom_Templates/customer_templates/HackerRank Sandbox/account.html.liquid
View File

@ -1,5 +1,4 @@
{% include "header" %}
{% include "account_tabs" %}
<main class="np-main np-subpage-container np-account">
<div class="np-hidden-desktop">

11
Custom_Templates/customer_templates/HackerRank Sandbox/auth_url_email.html.liquid
View File

@ -8,7 +8,8 @@
{% t shared.welcome_to_school, school_name: current_school.name %}
</div>
<div class="np-form-subheadline">
{% t .headline, key: current_school.course_vocabulary %}
{% 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">
@ -37,7 +38,7 @@
</div>
<div class="np-form-field">
<label class="np-input-label" for="learner_email">
{% t shared.email_address %}
Work {% t shared.email_address %}
</label>
<input
class="np-input"
@ -57,3 +58,9 @@
</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>

193
Custom_Templates/customer_templates/HackerRank Sandbox/case-studies.html.liquid Normal file
View File

@ -0,0 +1,193 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.featured %}
<main class="np-main np-homepage">
{% include "sub_navigation" %}
<div class="np-homepage-featured np-max-width custom-page-main-content">
<div class="custom-page-filter-bars">
<div>
<h1>{{ custom_page.headline }}</h1>
<div class="custom-page-label">
{{ custom_page.subheadline }}
</div>
</div>
</div>
{% if courses.in_catalog.any? %}
<div class="catalog-courses">
{% for course in courses.in_catalog %}
{% for category in course.categories %}
{% if category.name == 'Case Studies' %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% endif %}
{% endfor %}
{% 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>
</main>
{% include "footer" %}
<style>
.custom-page-top-info-bar{
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 5%;
}
.custom-page-nametag h4{
color: #016aab;
}
.custom-page-profile-button{
border: 1px solid #016aab;
border-radius: 8px;
color: #016aab;
padding: 10px 25px;
text-decoration: none;
}
.custom-page-main-content{
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 5%;
width: 100%;
}
.custom-page-label{
font-size: 18px;
margin-bottom: 40px;
}
.custom-page-filter-bars{
display: flex;
flex-direction: column;
margin-bottom: 50px;
}
.custom-page-content-search{
max-width: unset;
}
.np-filter{
margin: 0;
}
.custom-page-content-filter .np-input{
margin-top: 20px;
padding: 10px 12px;
}
.custom-page-content-filter .dropdown{
width: 100%;
}
.custom-page-courses{
display: flex;
flex-direction: column;
padding: 0 5%;
width: 100%;
}
.custom-page-courses .np-card{
padding: 0;
}
.custom-page-courses .np-card-container{
display: flex;
flex-direction: row;
}
.custom-page-courses .np-card-image{
border-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
max-width: 20%;
}
.custom-page-courses .np-card-content{
display: flex;
flex-direction: column;
padding: 5px;
}
.custom-page-courses .np-card-info{
display: flex;
flex-direction: column;
}
.custom-page-courses .np-card-content-progress-and-cta{
display: flex;
width: 100%;
height: 100%;
align-items: center;
flex-direction: row;
justify-content: flex-end;
}
.custom-page-courses .np-card-content-progress{
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px){
.custom-page-main-content{
margin-top: 0;
}
.custom-page-filter-bars{
align-items: center;
flex-direction: row;
justify-content: space-between;
}
.custom-page-courses .np-card-content{
align-items: center;
flex-direction: row;
padding: 10px 35px;
}
.custom-page-courses .np-card-info{
max-width: 80%;
}
.custom-page-courses .np-card-content-title{
margin: 0;
margin-bottom: 8px;
}
.custom-page-courses .np-card-content-progress-and-cta{
align-items: center;
flex-direction: row;
height: 100%;
width: 100%;
}
.custom-page-courses .np-card-content-progress{
align-items: flex-start;
height: 100%;
justify-content: center;
padding-right: 25px;
width: 60%;
}
.custom-page-courses .np-card-content-progress-and-cta .np-button{
width: 40%;
}
}
</style>

40
Custom_Templates/customer_templates/HackerRank Sandbox/catalog.html.liquid
View File

@ -21,3 +21,43 @@
{% 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>

18
Custom_Templates/customer_templates/HackerRank Sandbox/course.html.liquid
View File

@ -1,4 +1,18 @@
{% include "header" %}
{% 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" %}
@ -7,4 +21,4 @@
{% include "course_mobile_view" %}
</div>
</main>
{% include "footer" %}
{% include "footer" %} {% endcomment %}

27
Custom_Templates/customer_templates/HackerRank Sandbox/homepage.html.liquid
View File

@ -28,25 +28,20 @@
{{ 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_course" with course %}
</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>
{% else %}
<div class="np-homepage-featured-empty">
<div class="np-zero-state-text">
Hi there, James! No courses for you.
</div>
<img
class="np-zero-state-courses"
alt="{% t .empty, key: current_school.course_vocabulary %}"
/>
</div>
{% endif %}
</div>
</main>
{% include "footer" %}

193
Custom_Templates/customer_templates/HackerRank Sandbox/new-product-releases.html.liquid Normal file
View File

@ -0,0 +1,193 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.featured %}
<main class="np-main np-homepage">
{% include "sub_navigation" %}
<div class="np-homepage-featured np-max-width custom-page-main-content">
<div class="custom-page-filter-bars">
<div>
<h1>{{ custom_page.headline }}</h1>
<div class="custom-page-label">
{{ custom_page.subheadline }}
</div>
</div>
</div>
{% if courses.in_catalog.any? %}
<div class="catalog-courses">
{% for course in courses.in_catalog %}
{% for category in course.categories %}
{% if category.id == '37ebf83e-69fb-4b12-ae98-e1be1ecd3342' %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% endif %}
{% endfor %}
{% 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>
</main>
{% include "footer" %}
<style>
.custom-page-top-info-bar{
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 5%;
}
.custom-page-nametag h4{
color: #016aab;
}
.custom-page-profile-button{
border: 1px solid #016aab;
border-radius: 8px;
color: #016aab;
padding: 10px 25px;
text-decoration: none;
}
.custom-page-main-content{
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 5%;
width: 100%;
}
.custom-page-label{
font-size: 18px;
margin-bottom: 40px;
}
.custom-page-filter-bars{
display: flex;
flex-direction: column;
margin-bottom: 50px;
}
.custom-page-content-search{
max-width: unset;
}
.np-filter{
margin: 0;
}
.custom-page-content-filter .np-input{
margin-top: 20px;
padding: 10px 12px;
}
.custom-page-content-filter .dropdown{
width: 100%;
}
.custom-page-courses{
display: flex;
flex-direction: column;
padding: 0 5%;
width: 100%;
}
.custom-page-courses .np-card{
padding: 0;
}
.custom-page-courses .np-card-container{
display: flex;
flex-direction: row;
}
.custom-page-courses .np-card-image{
border-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
max-width: 20%;
}
.custom-page-courses .np-card-content{
display: flex;
flex-direction: column;
padding: 5px;
}
.custom-page-courses .np-card-info{
display: flex;
flex-direction: column;
}
.custom-page-courses .np-card-content-progress-and-cta{
display: flex;
width: 100%;
height: 100%;
align-items: center;
flex-direction: row;
justify-content: flex-end;
}
.custom-page-courses .np-card-content-progress{
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px){
.custom-page-main-content{
margin-top: 0;
}
.custom-page-filter-bars{
align-items: center;
flex-direction: row;
justify-content: space-between;
}
.custom-page-courses .np-card-content{
align-items: center;
flex-direction: row;
padding: 10px 35px;
}
.custom-page-courses .np-card-info{
max-width: 80%;
}
.custom-page-courses .np-card-content-title{
margin: 0;
margin-bottom: 8px;
}
.custom-page-courses .np-card-content-progress-and-cta{
align-items: center;
flex-direction: row;
height: 100%;
width: 100%;
}
.custom-page-courses .np-card-content-progress{
align-items: flex-start;
height: 100%;
justify-content: center;
padding-right: 25px;
width: 60%;
}
.custom-page-courses .np-card-content-progress-and-cta .np-button{
width: 40%;
}
}
</style>

4
Custom_Templates/customer_templates/HackerRank Sandbox/training_events.html.liquid
View File

@ -4,10 +4,10 @@
<div class="row">
<div class="col-xs-12 col-sm-10">
<div class="np-resource-title">
{% t .title %}
Live Training Webinars
</div>
<div class="np-resource-subtitle">
{% t .subtitle %}
View and register for upcoming online webinars
</div>
</div>
<div class="col-xs-12 col-sm-2">

2
Custom_Templates/customer_templates/HackerRank Sandbox/training_session_attendance.html.liquid
View File

@ -2,7 +2,7 @@
<main class="np-main np-cta-page np-max-width np-subpage-container">
<div class="np-card-container np-card-padding-xlarge">
{% if token %}
<i class="np-cta-page-icon fal {{ training_event.event_type_icon }}"></i>
<i class="np-cta-page-icon fal fa-users-class"></i>
<div class="np-form-headline">
{{ training_session.title }}
</div>

8
Custom_Templates/customer_templates/HackerRank Sandbox/transcript.html.liquid
View File

@ -1,8 +0,0 @@
{% include "header" %}
{% include "account_tabs" %}
<main class="np-main np-subpage-container np-transcript">
{% transcript %}
</main>
{% include "footer" %}