Datasnipper's templates were updated for their login page. Chubb notes and todos.

Custom_Templates/customer_templates/DataSnipper/dashboard.html.liquid

@@ -0,0 +1,115 @@
+{% include "header" %}
+{% include "course_version_outdated_alert", courses: courses.enrolled %}
+{% include "sub_navigation" %}
+<main class="np-main np-courses np-subpage-container np-max-width">
+  
+  <div class="row">
+    <div class="col-xs-12 col-sm-6 col-md-7 col-lg-9">
+      <div class="np-resource-title">
+        My Courses
+      </div>
+      {% include "courses_index", class: "col-xs-12 col-md-6 col-lg-4 np-stretch-content" %}
+
+      <div class="np-resource-title">
+        Available Courses
+      </div>
+      {% if courses.in_catalog.any? %}
+        <div class="np-catalog-courses row row-with-thumbnails">
+          {% for course in courses.in_catalog %}
+            {% unless course.enrolled? %}
+              <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
+                {% include "cards_course" with course %}
+              </div>
+            {% endunless %}
+          {% endfor %}
+        </div>
+      {% else %}
+        {% capture message %}
+          {% t shared.zero_state.courses.catalog
+          , key: current_school.course_vocabulary %}
+        {% endcapture %}
+        {% include "courses_zero_state", message: message %}
+      {% endif %}
+    </div>
+
+    {% if features.training_events? %}
+      <div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
+        <div class="dashboard-events">
+          <div class="np-dashboard-resources-title">
+            {% t .upcoming_events %}
+          </div>
+          {% include "training_events_dashboard" %}
+        </div>
+      </div>
+    {% endif %}
+  </div>
+</main>
+{% include "section_datasnipper_expert" %}
+{% include "footer" %}
+
+<style>
+  .np-resource-title {
+    margin-bottom: 32px;
+  }
+
+  .np-dashboard-resources-title {
+    color: #fff;
+    text-transform: capitalize;
+    margin-bottom: 40px;
+    font-size: 36px;
+    line-height: 40px;
+    font-weight: 600;
+  }
+
+  .np-zero-state-text {
+    color:#fff;
+  }
+
+  @media(min-width:768px) {
+    .row .np-card.course-card {
+      padding: 0 10px 48px;
+    }
+
+    .row-with-thumbnails {
+      margin-left: -16px;
+      margin-right: -16px;
+    }
+
+    .dashboard-events .np-card.training-event-card {
+      padding-left:0;
+      padding-right:0;
+    }
+  }
+</style>
+
+{% comment %} <script>
+const categoryFilters = document.querySelectorAll(".category-filter")
+const courseColumns = document.querySelectorAll(".course-columns")
+
+categoryFilters.forEach((filter) => {
+filter.addEventListener("click", function(e) {
+setActiveFilter(e.target)
+filterCourses(e.target.getAttribute("data-cat"))
+})
+})
+
+function setActiveFilter(selectedFilter) {
+categoryFilters.forEach((filter) => {
+filter.classList.remove("active")
+})
+
+selectedFilter.classList.add("active")
+}
+
+function filterCourses(filter) {
+courseColumns.forEach((col) => {
+col.style.display = "none"
+})
+
+courseColumns.forEach((col) => {
+if (col.getAttribute("data-categories").includes(filter)) {
+col.style.display = "flex"
+}
+})
+}
+</script> {% endcomment %}