509 lines
15 KiB
Plaintext
509 lines
15 KiB
Plaintext
{% include "header" %}
|
|
<div class="course-top-bar-wrapper">
|
|
<div class="course-top-bar np-page-container np-max-width">
|
|
<a class="breadcrumb-element" href="/app">
|
|
Home
|
|
</a>
|
|
<i class="fas fa-circle"></i>
|
|
<div class="breadcrumb-element">
|
|
{{ course.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="course-wrapper">
|
|
<div class="course-header-wrapper">
|
|
<div class="course-header np-max-width container">
|
|
<div class="course-categories">
|
|
{% for category in course.categories %}
|
|
<div class="course-categories-label">
|
|
{{ category.name }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="course-title">
|
|
{{ course.name }}
|
|
</div>
|
|
<div class="course-info">
|
|
<div class="course-info-part">
|
|
<div class="course-rating-value">
|
|
{{ course.properties.np_course_rating }}
|
|
</div>
|
|
<div class="course-rating-stars">
|
|
{% for i in (1..5) %}
|
|
{% if course.properties.np_course_rating >= i %}
|
|
<i class="fas fa-star"></i>
|
|
{% else %}
|
|
<i class="fal fa-star"></i>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
<div class="course-rating-count">
|
|
({{ course.properties.np_course_rating_count }})
|
|
</div>
|
|
</div>
|
|
<div class="course-info-part" style="margin-left: 25px;">
|
|
<i class="fal fa-clock" style="margin-right: 10px; align-self: center;"></i> Last updated {{ course.updated_at |date: "%m/%y" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<main class="np-main np-max-width np-page-container container">
|
|
<div class="course-main row">
|
|
<div class="course-main-body col-9">
|
|
<div class="course-bookmarks">
|
|
<div class="course-bookmark course-bookmark-selected">
|
|
Overview
|
|
</div>
|
|
</div>
|
|
|
|
<div class="course-description-wrapper">
|
|
<div class="course-description-title">
|
|
Description
|
|
</div>
|
|
<div class="course-description">
|
|
<div class="course-description-text">
|
|
{{course.full_description}}
|
|
</div>
|
|
<div class="course-description-fog np-hidden"></div>
|
|
</div>
|
|
<div class="course-description-button np-hidden" onclick="toggleDescription()">
|
|
Show more
|
|
</div>
|
|
</div>
|
|
|
|
<div class="course-content-wrapper">
|
|
<div class="course-description-title">
|
|
Course Content
|
|
</div>
|
|
<div class="course-content-top">
|
|
<div class="course-content-top-section-count">
|
|
{{ course.sections.size }} section{% if course.sections.size > 1 %}s{% endif %}
|
|
</div>
|
|
<div class="course-content-expand" onclick="toggleAllSections()">
|
|
<span class="course-conent-expand-text">Expand All Sections</span>
|
|
<span class="course-conent-hide-text">Hide All Sections</span>
|
|
</div>
|
|
</div>
|
|
<div class="course-content-body">
|
|
{% for section in course.sections %}
|
|
<div class="course-content-section">
|
|
<div class="course-content-section-header" onclick="toggleSection(this)">
|
|
<div class="course-content-section-header-left">
|
|
<i class="far fa-angle-down section-expand-icon"></i>
|
|
<i class="far fa-angle-up section-hide-icon"></i>
|
|
{{ section.name }}
|
|
</div>
|
|
<div class="course-content-section-header-right">
|
|
{{ section.activities.size }} lecture{% if section.activities.size > 1 %}s{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="course-content-section-activities">
|
|
{% for activity in section.activities %}
|
|
{% if activity.locked? %}
|
|
<div class="course-content-section-activity course-content-section-activity-locked">
|
|
<div class="course-content-section-activity-title">
|
|
{{ activity.title }}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="course-content-section-activity course-content-section-activity-unlocked">
|
|
<div class="course-content-section-activity-title">
|
|
{{ activity.title }}
|
|
</div>
|
|
<a class="course-content-section-activity-preview"
|
|
href="
|
|
{% route activity_viewer,
|
|
id: activity.id,
|
|
course_id: params.course_id,
|
|
learning_path_id: params.learning_path_id
|
|
%}"
|
|
>
|
|
Preview
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<div class="course-widget-wrapper">
|
|
<div class="course-widget">
|
|
<img class="course-widget-image" src="{{ course.image_url }}">
|
|
<div class="course-widget-content">
|
|
<a class="course-widget-button np-button"
|
|
{% if course.enrolled? %}
|
|
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
|
{% else %}
|
|
href="{% route course_enrollment, code: course.enrollment_code %}"
|
|
{% endif %}
|
|
>
|
|
Start Course
|
|
</a>
|
|
<div class="course-widget-button np-button transparent-button">
|
|
Save Course
|
|
</div>
|
|
<div class="course-widget-info-wrapper">
|
|
<div class="course-widget-info">
|
|
<div class="course-widget-info-left">
|
|
<i class="fal fa-file-alt"></i>
|
|
Lessons
|
|
</div>
|
|
<div class="course-widget-info-right">
|
|
{{ course.sections.size }}
|
|
</div>
|
|
</div>
|
|
<div class="course-widget-info">
|
|
<div class="course-widget-info-left">
|
|
<i class="fal fa-clock"></i>
|
|
Duration
|
|
</div>
|
|
<div class="course-widget-info-right">
|
|
{{ course.properties.course_time | divided_by: 60 }}h {{ course.properties.course_time | modulo: 60 }}m
|
|
</div>
|
|
</div>
|
|
<div class="course-widget-info">
|
|
<div class="course-widget-info-left">
|
|
<i class="fal fa-signal-3 course-widget-info-icon"></i>
|
|
Skill level
|
|
</div>
|
|
<div class="course-widget-info-right">
|
|
{{ course.properties.course_difficulty }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="course-widget-social">
|
|
<a class="course-widget-social-button">
|
|
<i class="fab fa-facebook-f"></i>
|
|
</a>
|
|
<a class="course-widget-social-button">
|
|
<i class="fab fa-twitter"></i>
|
|
</a>
|
|
<a class="course-widget-social-button">
|
|
<i class="fab fa-instagram"></i>
|
|
</a>
|
|
<a class="course-widget-social-button">
|
|
<i class="fab fa-linkedin-in"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% include "footer" %}
|
|
|
|
<style>
|
|
.course-top-bar-wrapper {
|
|
background: #f5f7fe;
|
|
display: flex;
|
|
width: 100vw;
|
|
padding: 0 30px;
|
|
}
|
|
.breadcrumb-element {
|
|
color: #563150;
|
|
}
|
|
.course-top-bar.np-page-container.np-max-width {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: left;
|
|
margin-top: 1.3rem;
|
|
margin-bottom: 1.3rem;
|
|
}
|
|
.course-top-bar .fas.fa-circle {
|
|
align-self: center;
|
|
margin: auto 10px;
|
|
font-size: 0.3rem;
|
|
}
|
|
.course-wrapper {
|
|
position: relative;
|
|
}
|
|
.course-main {
|
|
position: relative;
|
|
}
|
|
.course-main-body {
|
|
max-width: 75%;
|
|
}
|
|
.course-header-wrapper {
|
|
background: #f7f8fb;
|
|
}
|
|
.course-header {
|
|
padding: 90px 0;
|
|
}
|
|
.course-categories {
|
|
display: flex;
|
|
}
|
|
.course-categories-label {
|
|
background: #563150;
|
|
color: #fff;
|
|
padding: 8px 15px;
|
|
border-radius: 40px;
|
|
margin: auto 10px;
|
|
font-size: 0.7rem;
|
|
}
|
|
.course-categories-label:first-child {
|
|
margin-left: 0;
|
|
}
|
|
.course-categories-label:last-child {
|
|
margin-right: 0;
|
|
}
|
|
.course-title {
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
padding: 20px 0 30px;
|
|
}
|
|
.course-info {
|
|
display: flex;
|
|
}
|
|
.course-info-part {
|
|
display: flex;
|
|
}
|
|
.course-rating-value {
|
|
color: #e59819;
|
|
margin-right: 6px;
|
|
}
|
|
.course-rating-stars {
|
|
margin: auto 6px auto 0;
|
|
}
|
|
.course-rating-stars > * {
|
|
color: #e59819;
|
|
margin: auto;
|
|
}
|
|
.course-rating-count {
|
|
color: rgb(79, 85, 123);
|
|
}
|
|
.course-bookmarks {
|
|
margin-top: 120px;
|
|
border-bottom: 2px solid rgb(237, 237, 237);
|
|
}
|
|
.course-bookmark {
|
|
padding: 15px 5px;
|
|
margin: auto 20px;
|
|
width: fit-content;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
.course-bookmark:first-child {
|
|
margin-left: 0;
|
|
}
|
|
.course-bookmark:last-child {
|
|
margin-right: 0;
|
|
}
|
|
.course-bookmark.course-bookmark-selected {
|
|
color: rgb(86, 49, 80);
|
|
border-bottom: 2px solid rgb(86, 49, 80);
|
|
}
|
|
.course-description-title {
|
|
font-weight: 500;
|
|
font-size: 1.15rem;
|
|
margin: 30px auto;
|
|
}
|
|
.course-description {
|
|
position: relative;
|
|
}
|
|
.description-height-restraint {
|
|
max-height: 0.2hv;
|
|
overflow-y: clip;
|
|
}
|
|
.course-description-fog {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(0deg, rgba(250,254,249,1) 35%, rgba(250,254,249,0) 100%);
|
|
}
|
|
.course-content-section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.course-content-section-header-left {
|
|
display: flex;
|
|
}
|
|
.course-content-section .course-content-section-activities {
|
|
display: none;
|
|
}
|
|
.course-content-section.section-expanded .course-content-section-activities {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.course-content-section .section-hide-icon {
|
|
display: none;
|
|
}
|
|
.course-content-section.section-expanded .section-hide-icon {
|
|
display: block;
|
|
}
|
|
.course-content-section.section-expanded .section-expand-icon {
|
|
display: none;
|
|
}
|
|
.section-hide-icon, .section-expand-icon {
|
|
align-self: center;
|
|
margin-right: 15px;
|
|
}
|
|
.course-content-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.course-content-top-section-count {
|
|
color: rgb(89, 98, 88);
|
|
}
|
|
.course-content-expand {
|
|
text-decoration: underline;
|
|
}
|
|
.course-content-expand:not(.all-sections-expanded) .course-conent-hide-text {
|
|
display: none;
|
|
}
|
|
.course-content-expand.all-sections-expanded .course-conent-expand-text {
|
|
display: none;
|
|
}
|
|
.course-content-section {
|
|
border-radius: 16px;
|
|
border: 1px solid rgb(237,237, 237);
|
|
margin: 18px auto;
|
|
}
|
|
.course-content-section-activities {
|
|
padding: 20px 30px;
|
|
}
|
|
.course-content-section-header {
|
|
padding: 20px 30px;
|
|
background: #f7f8fb;
|
|
border-radius: 16px;
|
|
}
|
|
.course-content-section-header-left {
|
|
color: #563150;
|
|
}
|
|
|
|
.course-content-section-activity {
|
|
padding: 3px 0;
|
|
margin: 6px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.course-widget-wrapper {
|
|
position: absolute;
|
|
right: 30px;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 25%;
|
|
}
|
|
.course-widget {
|
|
width: 100%;
|
|
position: sticky;
|
|
right: 60px;
|
|
top: 230px;
|
|
background: white;
|
|
padding: 10px;
|
|
border: 1px solid #ededed;
|
|
border-radius: 8px;
|
|
box-shadow: 0 25px 70px 0 #01213a12;
|
|
}
|
|
.course-widget-image {
|
|
width: 100%;
|
|
}
|
|
.course-widget-content {
|
|
padding: 12px;
|
|
}
|
|
.course-widget-button.np-button.transparent-button {
|
|
background: transparent;
|
|
color: #2e3634 !important;
|
|
}
|
|
.course-widget-button.np-button.transparent-button:hover {
|
|
background: #2e3634;
|
|
color: white !important;
|
|
}
|
|
.course-widget-button {
|
|
width: 100%;
|
|
margin-bottom: 16px;
|
|
}
|
|
.course-widget-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid aliceblue;
|
|
padding: 12px 0;
|
|
}
|
|
.course-widget-info-left > i {
|
|
padding-right: 26px;
|
|
margin: auto;
|
|
align-self: center;
|
|
text-align: center;
|
|
width: 20px;
|
|
}
|
|
.course-widget-social {
|
|
margin: 30px auto;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
width: 90%;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
<script>
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
toggleShowingDescriptionButton();
|
|
});
|
|
|
|
function toggleShowingDescriptionButton() {
|
|
let descriptionElement = document.querySelector('.course-description');
|
|
let descriptionHeight = document.offsetHeight;
|
|
let windowHeight = window.innerHeight;
|
|
let buttonElement = document.getElementsByClassName('course-description-button')[0]
|
|
if (descriptionHeight * 3 > windowHeight) {
|
|
if (buttonElement.classList.contains('np-hidden')) {
|
|
document.getElementsByClassName('course-description-fog')[0].classlist.remove('np-hidden');
|
|
buttonElement.classList.remove('np-hidden');
|
|
descriptionElement.classList.add('description-height-restraint');
|
|
}
|
|
}
|
|
else {
|
|
if (!buttonElement.classList.contains('np-hidden')) {
|
|
document.getElementsByClassName('course-description-fog')[0].classlist.add('np-hidden');
|
|
buttonElement.classList.add('np-hidden');
|
|
descriptionElement.classList.remove('description-height-restraint');
|
|
}
|
|
}
|
|
}
|
|
|
|
function toggleDescription() {
|
|
|
|
}
|
|
|
|
function toggleSection(element) {
|
|
//redo to show 'hide all' only on all extended
|
|
element.parentNode.classList.toggle('section-expanded');
|
|
if (document.querySelector('all-sections-expanded')) {
|
|
if (document.querySelector('.course-content-section:not(.section-expanded)')) {
|
|
document.getElementsByClassName('course-content-expand')[0].classList.remove('all-sections-expanded')
|
|
}
|
|
}
|
|
else {
|
|
if (document.querySelector('.course-content-section.section-expanded')) {
|
|
document.getElementsByClassName('course-content-expand')[0].classList.add('all-sections-expanded')
|
|
}
|
|
}
|
|
}
|
|
|
|
function toggleAllSections() {
|
|
let button = document.getElementsByClassName('course-content-expand')[0]
|
|
if (button.classList.contains('all-sections-expanded')) {
|
|
Array.from(document.getElementsByClassName('section-expanded')).forEach((element) => {
|
|
element.classList.remove('section-expanded')
|
|
})
|
|
}
|
|
else {
|
|
Array.from(document.getElementsByClassName('course-content-section')).forEach((element) => {
|
|
element.classList.add('section-expanded')
|
|
})
|
|
}
|
|
button.classList.toggle('all-sections-expanded')
|
|
}
|
|
</script>
|