Changes to root directory
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,52 @@
|
||||
<div class="np-dashboard-resources">
|
||||
<div class="">
|
||||
{% assign countCourses = 0 %}
|
||||
{% assign countPeople = 0 %}
|
||||
{% assign countEvents = 0 %}
|
||||
{% assign countGroups = 0 %}
|
||||
{% assign countTotal = 0 | times: 1.0 %}
|
||||
{% for course in courses %}
|
||||
{% assign countCourses = countCourses | plus: 1 %}
|
||||
{% endfor %}
|
||||
{% for name in groups %}
|
||||
{% assign countGroups = countGroups | plus: 1 %}
|
||||
{% endfor %}
|
||||
{% for title in trainingevents %}
|
||||
{% assign countEvents = countEvents | plus: 1 %}
|
||||
{% endfor %}
|
||||
{% for name in current_person %}
|
||||
{% assign countPeople = countPeople | plus: 1 %}
|
||||
{% endfor %}
|
||||
<ul class="circle-list">
|
||||
<li>
|
||||
{% include "progress_circle", name:'Courses' , count: countCourses %}
|
||||
</li>
|
||||
<li>
|
||||
{% include "progress_circle", name:'People' , count: countPeople %}
|
||||
</li>
|
||||
<li>
|
||||
{% include "progress_circle", name:'Events' , count: countEvents %}
|
||||
</li>
|
||||
<li>
|
||||
{% include "progress_circle", name:'Groups' , count: countGroups %}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.circle-list {
|
||||
list-style-type: none !important;
|
||||
}
|
||||
.align-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
.progress-ring__circle {
|
||||
transition: stroke-dashoffset 0.35s;
|
||||
}
|
||||
.progress-ring__circle {
|
||||
transition: stroke-dashoffset 0.35s;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,73 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
Enrolled Courses
|
||||
</h3>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{{ courses.enrolled.size }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
Groups
|
||||
</h3>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{{ current_person.groups.size }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
Learning Paths Enrolled in
|
||||
</h3>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{{ learning_paths.enrolled.size }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
Learning Paths Available
|
||||
</h3>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{{ learning_paths.available.size }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
|
||||
.np-card-content-title {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.np-card-content-footer {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.np-card-content-progress {
|
||||
text-decoration: teal;
|
||||
font-size: 15pt;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,71 @@
|
||||
<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 fal 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">
|
||||
Courses: {{ learning_path.items.count }}
|
||||
</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 fal 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">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.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 fal fa-graduation-cap"></i>
|
||||
<span class="np-learning-path-items-count">
|
||||
Courses: {{ learning_path.items.count }}
|
||||
</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>
|
||||
|
||||
@ -0,0 +1,18 @@
|
||||
<style>
|
||||
.np-header.np-header-color{
|
||||
background: #D1F1DA;
|
||||
}
|
||||
.np-header-font-color {
|
||||
color: #da5939;
|
||||
}
|
||||
.np-button {
|
||||
color: #ffff ;
|
||||
background-color: #000000 ;
|
||||
}
|
||||
|
||||
.np-card-content-footer.np-button.np-button-background-color {
|
||||
background-color: #D1F1DA;
|
||||
color: #D1F1DA;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,194 @@
|
||||
<header class="np-header np-header-color">
|
||||
<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 %}">
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.name == 'GroupA' %}
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
{% elsif group.name == 'GroupB' %}
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="https://cdn.filestackcontent.com/security=policy:eyJ3Ijo4MjAsImgiOjUwMCwiZml0IjoiY3JvcCIsImNhbGwiOlsicmVhZCIsImNvbnZlcnQiLCJzdG9yZSIsInBpY2siXSwiZXhwaXJ5IjoxNjI3NDI0MTY1fQ==,signature:1ffd3fb5e5fe9263d9e819613e6de85a2b45a5f39a20a9042b2f4f71a324162e/resize=width:820,height:500,fit:crop/Zv0xwGX0Seyuoouc7Iqm"
|
||||
/>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</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 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>
|
||||
|
||||
{% 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">
|
||||
{% 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>
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.name == 'GroupA' %}
|
||||
{% include "group_styles" %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% include "messages" %}
|
||||
|
||||
@ -0,0 +1,61 @@
|
||||
{% 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">
|
||||
Sections: {{ course.section.size }}
|
||||
</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>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</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"
|
||||
>{% for course in courses %}
|
||||
Sections: {% t count: course.sections %}
|
||||
{% endfor %}
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
{% for course in courses %}
|
||||
Sections: {% t count: course.sections %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
|
||||
title:{
|
||||
text: "Earthquakes - per month"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "line",
|
||||
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 00, 1), y: 450 },
|
||||
{ x: new Date(2012, 01, 1), y: 414 },
|
||||
{ x: new Date(2012, 02, 1), y: 520 },
|
||||
{ x: new Date(2012, 03, 1), y: 460 },
|
||||
{ x: new Date(2012, 04, 1), y: 450 },
|
||||
{ x: new Date(2012, 05, 1), y: 500 },
|
||||
{ x: new Date(2012, 06, 1), y: 480 },
|
||||
{ x: new Date(2012, 07, 1), y: 480 },
|
||||
{ x: new Date(2012, 08, 1), y: 410 },
|
||||
{ x: new Date(2012, 09, 1), y: 500 },
|
||||
{ x: new Date(2012, 10, 1), y: 480 },
|
||||
{ x: new Date(2012, 11, 1), y: 510 }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 300px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,46 @@
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding align-center">
|
||||
<h3 class="np-card-content-title" justify="center">
|
||||
{{name}}
|
||||
</h3>
|
||||
<svg
|
||||
class="progress-ring"
|
||||
width="120"
|
||||
height="120">
|
||||
<circle
|
||||
class="progress-ring__circle circle"
|
||||
stroke="white"
|
||||
opacity="0.9"
|
||||
stroke-width="4"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"/>
|
||||
<circle
|
||||
class="progress-ring__circle circle-{{name}}"
|
||||
stroke="#990001"
|
||||
stroke-width="4"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"/>
|
||||
<text x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="2px" dy=".3em">{{count}}</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(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;
|
||||
console.log(offset)
|
||||
circle.style.strokeDashoffset = offset;
|
||||
}
|
||||
setProgress('{{ count | divided_by: total }}')
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,6 @@
|
||||
{% for courses in courses.enrolled %}
|
||||
{% assign courses.created_at = courses.created_at | date: '%m, %y' %}
|
||||
{% assign time_ago = 'now' | date: '%s' | minus: courses.created_at | divided_by: 86400 %}
|
||||
{% if time_ago == 30 %}
|
||||
{{ courses.created_at.name | "name" }}
|
||||
|
||||
@ -0,0 +1,52 @@
|
||||
<nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
<div class="np-sub-navigation-content-item np-sub-navigation-content-item-active">
|
||||
Enrolled Courses
|
||||
<a class="np-sub-navigation-content-item-link" href="">
|
||||
{{ courses.enrolled.size }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
<div class="np-sub-navigation-content-item np-sub-navigation-content-item-active">
|
||||
Groups
|
||||
<a class="np-sub-navigation-content-item-link" href="">
|
||||
{{ current_person.groups.size }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
<div class="np-sub-navigation-content-item np-sub-navigation-content-item-active">
|
||||
Learning Paths: Enrolled
|
||||
<a class="np-sub-navigation-content-item-link" href="">
|
||||
{{ learning_paths.enrolled.size }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
<div class="np-sub-navigation-content-item np-sub-navigation-content-item-active">
|
||||
Learning Paths: Available
|
||||
<a class="np-sub-navigation-content-item-link" href="">
|
||||
{{ learning_paths.available.size }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
<div class="np-sub-navigation-content-item np-sub-navigation-content-item-active">
|
||||
Available Events
|
||||
<a class="np-sub-navigation-content-item-link" href="">
|
||||
{{ training_events.available.size}}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
<div class="np-sub-navigation-content-item np-sub-navigation-content-item-active">
|
||||
Latest Course
|
||||
<a class="np-sub-navigation-content-item-link" href="">
|
||||
{% for courses in courses.enrolled %}
|
||||
{% assign courses.created_at = courses.created_at | date: '%m, %y' %}
|
||||
{% assign time_ago = 'now' | date: '%s' | minus: courses.created_at | divided_by: 86400 %}
|
||||
{% if time_ago == 30 %}
|
||||
{{ courses.created_at }}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -0,0 +1,6 @@
|
||||
import requests
|
||||
'''
|
||||
curl --request GET \
|
||||
--url https://api.northpass.com/v2/courses?api_key=VXwwWNfT8AEiDQqDgP0KiUqIZ \
|
||||
--header 'Accept: application/json'
|
||||
'''
|
||||
@ -0,0 +1,46 @@
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding align-center">
|
||||
<h3 class="np-card-content-title" justify="center">
|
||||
{{name}}
|
||||
</h3>
|
||||
<svg
|
||||
class="progress-ring"
|
||||
width="120"
|
||||
height="120">
|
||||
<circle
|
||||
class="progress-ring__circle circle"
|
||||
stroke="blue"
|
||||
opacity="0.9"
|
||||
stroke-width="4"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"/>
|
||||
<circle
|
||||
class="progress-ring__circle circle-{{name}}"
|
||||
stroke="#990001"
|
||||
stroke-width="4"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"/>
|
||||
<text x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="2px" dy=".3em">{{count}}</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(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;
|
||||
console.log(offset)
|
||||
circle.style.strokeDashoffset = offset;
|
||||
}
|
||||
setProgress('{{ count | divided_by: total }}')
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,48 @@
|
||||
{% include "header" %}
|
||||
<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">
|
||||
{% include "user_stats" %}
|
||||
<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>
|
||||
<div class="np-homepage-featured-courses row">
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_course" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-homepage-featured.np-max-width {
|
||||
margin-top: -2rem !important;
|
||||
padding-top: 0rem !important;
|
||||
border-top: 0rem !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user