91 lines
2.4 KiB
Plaintext
91 lines
2.4 KiB
Plaintext
{% if course.properties.is_single_activity_course %}
|
|
|
|
<script>
|
|
window.location.replace("/courses/{{course.id}}");
|
|
</script>
|
|
|
|
{% else %}
|
|
|
|
{% include "header" %}
|
|
<main class="np-main np-max-width np-page-container">
|
|
<div class="np-hidden-mobile" id="course-desktop">
|
|
{% include "course_desktop_view" %}
|
|
</div>
|
|
<div class="np-hidden-desktop" id="course-mobile">
|
|
{% include "course_mobile_view" %}
|
|
</div>
|
|
</main>
|
|
{% include "footer" %}
|
|
<style>
|
|
.np-page-container {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
/* button countdown animation and styles associated with it */
|
|
#course-mobile .np-top-button.animate,
|
|
#course-desktop .np-top-button.animate {
|
|
position:relative;
|
|
background:#000000;
|
|
z-index:1;
|
|
}
|
|
|
|
#course-mobile .np-top-button:after,
|
|
#course-desktop .np-top-button:after {
|
|
content: '';
|
|
position: absolute;
|
|
left:0;
|
|
top:0;
|
|
height:100%;
|
|
width:100%;
|
|
z-index:-1;
|
|
border-radius:4px;
|
|
transition:border-radius 0.2s;
|
|
}
|
|
|
|
#course-mobile .np-top-button.animate:after,
|
|
#course-desktop .np-top-button.animate:after {
|
|
background-color:#ff2c00;
|
|
animation-name: bgColorLeftToRight;
|
|
animation-duration: 10s;
|
|
animation-timing-function: linear;
|
|
z-index:-1;
|
|
border-top-right-radius:0;
|
|
border-bottom-right-radius:0;
|
|
}
|
|
|
|
@keyframes bgColorLeftToRight {
|
|
0% { width:0 }
|
|
100% { width:100% }
|
|
}
|
|
/* end button animaation */
|
|
|
|
</style>
|
|
|
|
<script>
|
|
var progress = {{ course.progress }}
|
|
progress < 100 ? initCourseCountdown() : "";
|
|
console.log("script")
|
|
// Init 10 second countdown to auto start learner in course
|
|
function initCourseCountdown() {
|
|
console.log("init countdown")
|
|
let btn
|
|
|
|
window.innerWidth < 768 ?
|
|
btn = document.getElementById("course-mobile").querySelector('.np-top-button') :
|
|
btn = document.getElementById("course-desktop").querySelector('.np-top-button')
|
|
|
|
btn.classList.add('animate')
|
|
|
|
btn.addEventListener("animationend", () => {
|
|
console.log("ended")
|
|
btn.classList.remove('animate')
|
|
|
|
// redirect learner to next activity
|
|
{% if course.enrolled? %}
|
|
window.location.href = `{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}`
|
|
{% endif %}
|
|
}, false);
|
|
|
|
}
|
|
</script>
|
|
{% endif %} |