395 lines
12 KiB
Plaintext
395 lines
12 KiB
Plaintext
{% assign activities_count = 0 %}
|
|
{% for course_section in course.sections %}
|
|
{% for course_activity in course_section.activities %}
|
|
{% assign activities_count = activities_count | plus: 1 %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
|
|
|
{% if course.enrolled? %}
|
|
{% assign wrapperClassName = "course-header-left-button" %}
|
|
{% else %}
|
|
{% assign wrapperClassName = "course-header-left-button enroll-button" %}
|
|
{% endif %}
|
|
|
|
|
|
{% include 'header' %}
|
|
{% if course.enrolled? %}
|
|
<script>
|
|
console.log('course enrolled')
|
|
window.location.replace('{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}')
|
|
</script>
|
|
{% else %}
|
|
<div class="course">
|
|
<div class="course-header row">
|
|
<div class="course-header-left col-lg-6">
|
|
<div class="course-header-left-title">
|
|
{{ course.name }}
|
|
</div>
|
|
<div class="course-header-left-subtitles">
|
|
<div class="course-header-left-subtitles-text" style="margin-right: 30px;">
|
|
{{ activities_count }} LESSONS COURSE
|
|
</div>
|
|
<div class="course-header-left-subtitles-text" time>
|
|
{{ course.properties.course_time }}
|
|
</div>
|
|
</div>
|
|
<a class="{{wrapperClassName}}"
|
|
{% 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 %}>
|
|
{% if course.started? %}
|
|
Continue Watching
|
|
{% else %}
|
|
{% if course.enrolled? %}
|
|
Start Course
|
|
{% else %}
|
|
Watch Video
|
|
{% endif %}
|
|
{% endif %}
|
|
</a>
|
|
</div>
|
|
<div class="course-header-right col-lg-5">
|
|
<img class="course-header-right-image" src="{{ course.image_url }}">
|
|
<div class="course-header-right-background"></div>
|
|
</div>
|
|
</div>
|
|
<div class="course-description">
|
|
<div class="course-description-left">
|
|
<div class="course-description-title">
|
|
DESCRIPTION
|
|
</div>
|
|
<div class="course-description-text">
|
|
{{ course.full_description }}
|
|
</div>
|
|
</div>
|
|
<div class="course-description-right">
|
|
<div class="course-description-title">
|
|
WHAT YOU WILL LEARN
|
|
</div>
|
|
<div class="course-description-text">
|
|
{% for section in course.sections %}
|
|
<div class="course-description-text-item">
|
|
<i class="fa-solid fa-check"></i> {{ section.name }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if course.instructors.size != 0 %}
|
|
</div>
|
|
{% assign instructor = course.instructors.first %}
|
|
<div class="course-instructor-wrapper">
|
|
<div class="course-instructor">
|
|
<div class="row">
|
|
<div class="course-instructor-left-wrapper col-md-6">
|
|
<div class="course-instructor-left">
|
|
<div class="course-instructor-left-pretext">
|
|
THIS COURSE BROUGHT BY
|
|
</div>
|
|
<div class="course-instructor-left-about">
|
|
<img class="course-instructor-left-about-image" src="{{ instructor.avatar_url }}">
|
|
<div class="course-instructor-left-about-right">
|
|
<div class="course-instructor-left-about-right-name">
|
|
{{ instructor.name }}
|
|
</div>
|
|
<div class="course-instructor-left-about-right-title">
|
|
{{ instructor.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="course-instructor-left-bio">
|
|
{{ instructor.bio }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="course" style="display: inline-block">
|
|
{% endif %}
|
|
<div class="course-similar">
|
|
{% include 'similar_courses' %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% include 'footer' %}
|
|
|
|
<style>
|
|
.course {
|
|
padding: 0 4% 100px;
|
|
}
|
|
.course-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 80px;
|
|
margin-top: 50px;
|
|
}
|
|
.course-header-left {
|
|
margin: auto 0;
|
|
}
|
|
.course-header-left-title {
|
|
font-family: 'Faktum', sans-serif;
|
|
font-size: 4.75rem;
|
|
font-weight: 800;
|
|
line-height: 80px;
|
|
}
|
|
.course-header-left-subtitles {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 20px;
|
|
margin-bottom: 50px;
|
|
width: min-content;
|
|
white-space: nowrap;
|
|
}
|
|
.course-header-left-subtitles-text {
|
|
font-weight: 500;
|
|
font-size: 0.9375rem;
|
|
line-height: 24px;
|
|
letter-spacing: 3px;
|
|
}
|
|
.course-header-left-button {
|
|
background: #2F8481;
|
|
color: white;
|
|
font-size: 1.06rem;
|
|
border: none;
|
|
border-radius: 10px;
|
|
padding: 10px 100px;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
}
|
|
.course-header-left-button:hover {
|
|
background: #246b69;
|
|
color: white;
|
|
}
|
|
.course-header-right {
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
.course-header-right-image {
|
|
width: 100%;
|
|
position: relative;
|
|
border-radius: 10px;
|
|
margin: auto;
|
|
object-fit: contain;
|
|
right: -15%;
|
|
}
|
|
.course-header-right-background {
|
|
height: 100%;
|
|
top: 0;
|
|
z-index: -1;
|
|
width: 100%;
|
|
background: #88D880;
|
|
border-radius: 20px;
|
|
right: -40%;
|
|
position: absolute;
|
|
}
|
|
.course-description {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 80px;
|
|
}
|
|
.course-description-left {
|
|
width: 45%;
|
|
}
|
|
.course-description-right {
|
|
width: 40%;
|
|
}
|
|
.course-description-title {
|
|
font-weight: 500;
|
|
font-size: 0.9375rem;
|
|
line-height: 24px;
|
|
letter-spacing: 3px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.course-description-text {
|
|
font-size: 1.375rem;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: 300;
|
|
line-height: 32px;
|
|
}
|
|
.course-description-text-item {
|
|
padding-bottom: 10px;
|
|
}
|
|
.course-description-text-item .fa-check {
|
|
color: #88D880;
|
|
padding: 5px;
|
|
}
|
|
.course-instructor-wrapper {
|
|
margin-bottom: 80px;
|
|
background: #F9F3E9;
|
|
}
|
|
.course-instructor {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
position: relative;
|
|
padding: 4%;
|
|
}
|
|
.course-instructor-left-wrapper {
|
|
margin: auto 0;
|
|
}
|
|
.course-instructor-left {
|
|
width: 90%;
|
|
}
|
|
.course-instructor-left-pretext {
|
|
font-weight: 500;
|
|
font-size: 0.9375rem;
|
|
line-height: 24px;
|
|
letter-spacing: 3px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.course-instructor-left-about {
|
|
display: flex;
|
|
padding-bottom: 30px;
|
|
border-bottom: 1px solid #2F8481;
|
|
}
|
|
.course-instructor-left-about-image {
|
|
border-radius: 50%;
|
|
margin-right: 40px;
|
|
height: 160px;
|
|
width: 160px;
|
|
}
|
|
.course-instructor-left-about-right{
|
|
margin: auto 0;
|
|
}
|
|
.course-instructor-left-about-right-name {
|
|
font-weight: 800;
|
|
font-size: 2.125rem;
|
|
line-height: 46px;
|
|
font-family: 'Faktum', sans-serif;
|
|
padding-bottom: 15px;
|
|
}
|
|
.course-instructor-left-about-right-title {
|
|
font-size: 1.5rem;
|
|
line-height: 32px;
|
|
color: black;
|
|
font-family: 'Faktum', sans-serif;
|
|
}
|
|
.course-instructor-left-bio {
|
|
margin-top: 30px;
|
|
font-weight: 300;
|
|
font-size: 1.125rem;
|
|
line-height: 32px;
|
|
}
|
|
.course-instructor-right {
|
|
margin: auto;
|
|
}
|
|
.course-instructor-right-image {
|
|
width: 100%;
|
|
}
|
|
@media only screen and (min-width: 1800px) {
|
|
.course {
|
|
padding: 0 10% 100px;
|
|
}
|
|
.course-instructor {
|
|
padding: 72px 10%;
|
|
}
|
|
.course-header-right-image {
|
|
right: -31%;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1200px) {
|
|
.course-header-right-image {
|
|
margin: 30px 0;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 1050px) {
|
|
.course {
|
|
padding: 0 4%;
|
|
}
|
|
.course-header {
|
|
flex-direction: column-reverse;
|
|
}
|
|
.course-header-left {
|
|
width: 100%;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
}
|
|
.course-header-right {
|
|
margin: auto 0;
|
|
width: 100%;
|
|
}
|
|
.course-header-right-image {
|
|
float: none;
|
|
height: auto;
|
|
margin-bottom: 20px;
|
|
margin-left: 0;
|
|
right: 0;
|
|
}
|
|
.course-header-right-background {
|
|
display: none;
|
|
}
|
|
.course-description-left {
|
|
width: 50%;
|
|
}
|
|
.course-description-right {
|
|
width: 45%;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 850px) {
|
|
.course-header-left-title {
|
|
font-size: 4rem;
|
|
line-height: 60px;
|
|
}
|
|
.course-header-right-image {
|
|
width: 100%;
|
|
}
|
|
.course-header-left {
|
|
width: 100%;
|
|
}
|
|
.course-instructor-left-about {
|
|
width: 100%;
|
|
}
|
|
.course-instructor-left-bio {
|
|
width: 100%;
|
|
}
|
|
.course-instructor-right {
|
|
display: none;
|
|
}
|
|
.course-description {
|
|
flex-direction: column;
|
|
}
|
|
.course-description-left {
|
|
width: 90%;
|
|
margin: auto auto 20px;
|
|
}
|
|
.course-description-right {
|
|
width: 90%;
|
|
margin: auto;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 850px) {
|
|
.course-description-left {
|
|
width: 100%;
|
|
}
|
|
.course-description-right {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
/* parse time property to human format */
|
|
var a = parseInt($('[time]').text());
|
|
var minutes = a % 60;
|
|
var hours = Math.floor(a / 60);
|
|
var time = '';
|
|
if (hours != 0) {
|
|
time = time + hours.toString() + 'h ';
|
|
}
|
|
if (minutes != 0) {
|
|
time = time + minutes.toString() + 'm';
|
|
}
|
|
$('[time]').text(time);
|
|
|
|
// document.querySelector('.enroll-button').addEventListener('click', redirectToCoursePage);
|
|
|
|
let redirectToCoursePage = () => {
|
|
setTimeout(1000, () => {
|
|
window.location.replace('{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}')
|
|
})
|
|
}
|
|
</script>
|