Doordash templates, notes for Mizuno, a few template changes. Anthology,included.

Custom_Templates/customer_templates/DoorDash Resource Hub/course.html.liquid

@@ -0,0 +1,131 @@
+{% assign groups = current_person.groups | map: 'name'%}
+{% if groups contains 'NZ Mandatory Training' %}
+  {% assign nz_status = true%}
+{% else %}
+  {% assign nz_status = false%}
+{% endif %}
+
+{% 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" %}
+
+  {% if nz_status %}
+    <style>
+      #course-mobile .np-top-button:after,
+      #course-desktop .np-top-button:after{
+        border-radius: 30px !important;
+      }
+    </style>
+  {% endif %}
+  
+  <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>
+{% if course.properties.course_language == 'fr' %}
+<script>
+$('div.np-top-vocabulary.np-text-title.np-text-muted').text('APPRENEZ COMMENT DANS CE COURS DE 3 MINUTES')
+$('div.np-text-title.np-course-outline-title').text('PLAN DE COURS')
+$('.np-card-heading').text('À propos du module')
+</script>
+  {% if course.progress == 0 %}
+    <script>
+    $('.np-top-button.np-button-font-color.np-button.np-button-big').text('Commencer le cours')
+    </script>
+  {% elsif  course.progress > 0 and course.progress < 100 %}
+    <script>
+    $('.np-top-button.np-button-font-color.np-button.np-button-big').text('Continuer')
+    </script>
+  {% else %}
+    <script>
+    $('.np-top-button.np-button-font-color.np-button.np-button-big').text('Reprendre le cours')
+    </script>
+  {% endif %}
+
+{% endif %}
+
+{% if course.properties.course_language != 'fr' %}
+  <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 %}
+{% endif %}