191 lines
6.4 KiB
Plaintext
191 lines
6.4 KiB
Plaintext
<script src="https://kit.fontawesome.com/41a3aee3ad.js" crossorigin="anonymous"></script>
|
|
<div class="np-course-outline">
|
|
<div class="np-text-title np-course-outline-title">
|
|
{% t .header, key: current_school.course_vocabulary %}
|
|
</div>
|
|
<div class="np-course-outline-content">
|
|
<ol class="np-course-outline-content-section">
|
|
{% for section in course.sections %}
|
|
{% comment %}<li class="np-course-outline-content-section-list">
|
|
<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
|
|
{{ section.name }}
|
|
</div>
|
|
<ol class="np-course-outline-content-activity">
|
|
{% for activity in section.activities %}
|
|
|
|
<li class="np-course-outline-content-activity-list" >
|
|
{% if activity.completed? %}
|
|
<i class="fas fa-circle np-course-outline-content-activity-icon np-button-color" style="color: green; font-weight: 900"></i>
|
|
{% if activity.locked? %}
|
|
{% include "course_activity_locked" %}
|
|
{% else %}
|
|
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}
|
|
{% endif %}
|
|
<div class="np-course-outline-content-activity-list-bar" style="background: green"></div>
|
|
<div class="np-button-background-color np-course-outline-content-activity-list-bar" style="color: green"></div>
|
|
{% else %}
|
|
<i class="far fa-circle np-course-outline-content-activity-icon" style="color: red; font-weight: 900"></i>
|
|
{% if activity.locked? %}
|
|
{% include "course_activity_locked" %}
|
|
{% else %}
|
|
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
|
|
{% endif %}
|
|
<div class="np-course-outline-content-activity-list-bar" style="background: red"></div>
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ol>
|
|
</li>{% endcomment %}
|
|
<div class="np-accordion">
|
|
<div class="accordion-btn">
|
|
<i class="fal fa-plus"></i>
|
|
<div class="accordion-title">
|
|
<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
|
|
{{ section.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-panel">
|
|
<div class="accordion-panel-content">
|
|
<ol class="np-course-outline-content-activity">
|
|
{% for activity in section.activities %}
|
|
|
|
<li class="np-course-outline-content-activity-list" >
|
|
{% if activity.completed? %}
|
|
<i class="fas fa-circle np-course-outline-content-activity-icon np-button-color" style="color: green; font-weight: 900"></i>
|
|
{% if activity.locked? %}
|
|
{% include "course_activity_locked" %}
|
|
{% else %}
|
|
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}
|
|
{% endif %}
|
|
<div class="np-course-outline-content-activity-list-bar" style="background: green"></div>
|
|
{%comment%}<div class="np-button-background-color np-course-outline-content-activity-list-bar" style="color: green"></div>{%endcomment%}
|
|
{% else %}
|
|
<i class="far fa-circle np-course-outline-content-activity-icon" style="color: red; font-weight: 900"></i>
|
|
{% if activity.locked? %}
|
|
{% include "course_activity_locked" %}
|
|
{% else %}
|
|
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
|
|
{% endif %}
|
|
<div class="np-course-outline-content-activity-list-bar" style="background: red"></div>
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let accordions = document.getElementsByClassName("accordion-btn");
|
|
|
|
for (let i = 0; i < accordions.length; i++) {
|
|
accordions[i].addEventListener("click", function() {
|
|
this.querySelector('.fal').classList.toggle("fa-plus");
|
|
this.querySelector('.fal').classList.toggle("fa-minus");
|
|
|
|
let panel = this.nextElementSibling;
|
|
panel.classList.toggle("panel-open");
|
|
if (panel.style.maxHeight) {
|
|
panel.style.maxHeight = null;
|
|
} else {
|
|
panel.style.maxHeight = panel.scrollHeight + "px";
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.np-faq {
|
|
margin-bottom: 3rem;
|
|
}
|
|
.np-accordion {
|
|
margin: 0 22px 32px;
|
|
}
|
|
|
|
.accordion-btn {
|
|
color: #000000;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
min-height: 76px;
|
|
padding: 0 18px 0 92px;
|
|
text-align: left;
|
|
border: none;
|
|
outline: none;
|
|
transition: 0.4s;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.fa-plus,
|
|
.fa-minus {
|
|
color: #000000;
|
|
font-size: 2.5rem;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 76px;
|
|
height: 76px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
.accordion-title,
|
|
.accordion-panel-content {
|
|
line-height: 1.375rem;
|
|
position: relative;
|
|
}
|
|
.accordion-panel-content {
|
|
padding: 18px;
|
|
}
|
|
.accordion-panel-content p {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.accordion-panel-content:before {
|
|
content: "";
|
|
width: 75px;
|
|
height: 1px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 18px;
|
|
}
|
|
|
|
.accordion-panel {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.4s ease-out;
|
|
margin-left: 76px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.np-faqs {
|
|
margin: 0 4.0625rem;
|
|
}
|
|
.np-accordion {
|
|
margin: 0 8px 32px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.activity-time {
|
|
background: darkgrey;
|
|
padding: 4px 8px;
|
|
border-radius: 1px;
|
|
margin-right: 10px;
|
|
color: #1b1b1b;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
}
|
|
.np-course-outline-content-activity-link {
|
|
align-self: center;
|
|
}
|
|
</style> |