Artera notes. A few scripting things. Downloaded templates.

Custom_Templates/customer_templates/Artera_sandbox/_my_courses_filter.html.liquid

@@ -1,10 +1,14 @@
 <div class="my-courses-filters" style="display: none;">
   <div class="progress-filter-dropdown-container">
-    <button class="progress-filter-dropdown np-button">All Courses</button>
+    <button class="progress-filter-dropdown np-button">
+      <span style="margin-right: 10px">
+        Not Started
+      </span>
+      <i class="fas fa-angle-down"></i>
+    </button>
     <div class="progress-filter-dropdown-content">
-      <span class="progress-filter-item" id="all-courses" style="display: none;">All Courses</span>
-      <span class="progress-filter-item" id="not-started">Not Started</span>
       <span class="progress-filter-item" id="in-progress">In Progress</span>
+      <span class="progress-filter-item" id="not-started" style="display: none">Not Started</span>
       <span class="progress-filter-item" id="completed">Completed</span>
     </div>
   </div>
@@ -12,6 +16,9 @@
 
 <script>
   window.addEventListener('DOMContentLoaded', (event) => {
+    setDefaultFilter('.learning-paths-container', 'not-started')
+    setDefaultFilter('.courses-container', 'not-started')
+  
     document.querySelectorAll('.progress-filter-item').forEach((item) => {
       item.addEventListener('click', (clickEvent) => {
         changeFilterButtonName(clickEvent.target);
@@ -20,16 +27,32 @@
         filter(clickEvent.target);
       })
     })
+
+    document.querySelector('.progress-filter-dropdown').addEventListener('click', showDropdown)
+
+    window.addEventListener("click", hideDropdown);
   });
+
+  function hideDropdown(event) {
+    if (!event.target.matches('.progress-filter-dropdown')) {
+      var dropdowns = document.getElementsByClassName("progress-filter-dropdown-content");
+      var i;
+      for (i = 0; i < dropdowns.length; i++) {
+        var openDropdown = dropdowns[i];
+        if (openDropdown.classList.contains('progress-filter-dropdown-content-show')) {
+          openDropdown.classList.remove('progress-filter-dropdown-content-show');
+        }
+      }
+    }
+  }
+
+  function showDropdown() {
+    document.querySelector('.progress-filter-dropdown-content').classList.add('progress-filter-dropdown-content-show')
+  }
   
   function filter(filterOption) {
-    if (filterOption.id !== "all-courses" ) {
-      filterItems('.learning-paths-container', filterOption)
-      filterItems('.courses-container', filterOption)
-    } else {
-      showAllItems('.learning-paths-container')
-      showAllItems('.courses-container')
-    }
+    filterItems('.learning-paths-container', filterOption)
+    filterItems('.courses-container', filterOption)
   }
 
   function filterItems(itemsClass, filterOption) {
@@ -41,6 +64,15 @@
     })
   }
 
+  function setDefaultFilter(itemsClass, filterOption) {
+    document.querySelectorAll(itemsClass).forEach((item) => {
+      if (!item.id.includes(filterOption))
+        item.style.display = "none";
+      else
+        item.style.removeProperty('display');
+    })
+  }
+
   function showAllItems(itemsClass) {
     document.querySelectorAll(itemsClass).forEach((item) => {
       item.style.removeProperty('display');
@@ -58,7 +90,7 @@
   }
 
   function changeFilterButtonName(newName) {
-    document.querySelector(".progress-filter-dropdown").innerHTML = newName.innerHTML;
+    document.querySelector(".progress-filter-dropdown span").innerHTML = newName.innerHTML;
   }
 </script>
 
@@ -83,7 +115,6 @@
     display: inline-block;
   }
 
-  /* Dropdown Content (Hidden by Default) */
   .progress-filter-dropdown-content {
     display: none;
     position: absolute;
@@ -93,7 +124,6 @@
     z-index: 1;
   }
 
-  /* Links inside the dropdown */
   .progress-filter-item {
     color: black;
     padding: 12px 16px;
@@ -102,11 +132,13 @@
     cursor: pointer;
   }
 
-  /* Change color of dropdown links on hover */
+  .progress-filter-dropdown * {
+    pointer-events: none;
+  }
+
   .progress-filter-item:hover {background-color: #f1f1f1}
 
-  /* Show the dropdown menu on hover */
-  .progress-filter-dropdown-container:hover .progress-filter-dropdown-content {
+  .progress-filter-dropdown-content-show {
     display: block;
   }
 

Custom_Templates/customer_templates/Artera_sandbox/dashboard.html.liquid

@@ -1,7 +1,8 @@
 {% include "header" %}
 {% include "course_version_outdated_alert", courses: courses.enrolled %}
 {% include "sub_navigation" %}
-
+{% assign courses_classes = "" %}
+{% if features.training_events? %}
   {% assign courses_classes = "col-xs-12 col-sm-6 np-stretch-content" %}
 {% else %}
   {% assign courses_classes = "col-xs-12 col-sm-4 np-stretch-content" %}
@@ -17,7 +18,7 @@
           </div>
           {% include "in_progress_learning_paths_index", items: learning_paths.enrolled %}
         </div>
-
+        
         <div class="learning-paths-container" id="not-started-learning-paths">
           <div class="np-dashboard-resources-title">
             Enrolled Learning Paths
@@ -87,4 +88,4 @@
         margin: 20px 0 20px;
     }
   }
-</style>
+</style>

Custom_Templates/customer_templates/Artera_sandbox/homepage.html.liquid

@@ -52,6 +52,7 @@
 {% include "footer" %}
 
 <style>
+/*
   .np-homepage-hero-content {
     position: static;
     text-align: left;
@@ -70,7 +71,7 @@
     max-width: 50%;
     height: auto;
     max-height: max-content;
-  }
+  }*/
 
   .np-stretch-content:nth-child(n+2) {
     margin-top: 24px;
@@ -80,10 +81,14 @@
     margin: 0;
   }
 
-.tns-outer {
+  .tns-outer {
     position: relative;
   }
 
+  #tns1-mw {
+    min-height: 500px;
+  }
+
   .tns-controls {
     position: absolute;
     z-index: 100;
@@ -127,6 +132,10 @@
   }
 
   @media (min-width: 768px) {
+    .course-card {
+      height: 29rem;
+    }
+
     .np-homepage-hero-cta.np-button {
       border-radius: 30px;
       padding: 32px;
@@ -168,4 +177,4 @@
       }
     }
   });
-</script>
+</script>