Tasks.

Custom_Templates/customer_templates/ACPA Sandbox v1/_featured_carousel.html.liquid

@@ -0,0 +1,150 @@
+<div class="np-md-flex-wrapper">
+    <div>
+      <div class="np-dashboard-resources-title">
+        Featured Courses
+      </div>
+    </div>       
+</div>
+<div class="courses-carousel np-carousel" data-topic="featured-courses">
+    {% assign items = courses.enrolled %}
+      {% if items.any? %}
+          {% assign sorted_items =items | sort: "name" %}
+          {% for course in sorted_items %}
+            {% if course.properties.featured %}
+                <div class="np-carousel-card "> {% include "cards_course" with course %}</div>
+            {% endif %}
+          {% endfor %}
+      {% endif %}
+</div>
+  
+  
+
+
+  <style>
+    .np-progress-filter-label {
+        color: rgba(255, 255, 255, 0.5);
+        padding-right: 7px;
+        text-transform: none;
+        font-weight:500;
+        font-size:0.812rem;
+    }
+    .np-progress-filter-wrapper {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+    }
+    .filter-select-wrapper {
+        position: relative;
+        padding:0;
+        border: 2px solid  rgba(255, 255, 255, 0.25);
+        color: #fff;
+        height:auto;
+        text-transform: none;
+        background: transparent;
+        border-radius:0;
+    }
+    .filter-select-wrapper:hover {
+        background:transparent;
+        color:#fff;
+    }
+    .select-items {
+        position: absolute;
+        background-color: #062531;
+        top: 105%;
+        left: -2px;
+        z-index: 99;
+        width: 102%;
+        border: 2px solid rgba(255, 255, 255, 0.25);
+        border-top:none;
+    }
+    .select-items div {
+        color: rgba(255, 255, 255, 0.5);
+        border-top:none;
+        cursor: pointer;
+        width:100%;
+        padding: 12px 16px;
+      }
+  
+    .select-items div:hover {  color: rgba(255, 255, 255, 1); }
+    .select-selected {
+        width: 100%;
+        height: 100%;
+        padding: 9px 66px 9px 20px;
+        position: relative;
+        color:#fff;
+    }
+    .select-selected::after {
+        content:"\f078";
+        font-family: "Font Awesome 5 Pro";
+        position: absolute;
+        width:20px;
+        height:100%;
+        color:rgba(255, 255, 255, 0.5);
+        right:10px;
+        top:0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size:1rem;
+    }
+    .select-selected::before {
+        content:"";
+        position: absolute;
+        width:20px;
+        height:100%;
+        border-left:2px solid rgba(255, 255, 255, 0.25);
+        right:20px;
+        top:0;
+    }
+    .select-selected.select-arrow-active::after { transform: rotate(180deg); }
+    .same-as-selected,
+    .filter-select-wrapper select,
+    .select-hide {
+        display: none;
+    }
+    .mo-filter-wrapper {
+        display: flex;
+        justify-content: center;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+    .select-items div:hover, 
+    .same-as-selected {
+      background-color: #062531;
+    }
+  </style>
+
+
+  <script>
+  
+    $(document).ready(function(){
+    
+        $(".courses-carousel").not('.slick-initialized').slick({
+            slidesToShow: 3,
+            cssEase: 'linear',
+            prevArrow: '<i class="fal fa-chevron-left"></i>',
+            nextArrow: '<i class="fal fa-chevron-right"></i>',
+            infinite: false,
+            responsive: [
+                {
+                    breakpoint: 1170,
+                    settings: {
+                        slidesToShow: 2,
+                    }
+                },
+                {
+                    breakpoint: 768,
+                    settings: {
+                        slidesToShow: 1,
+                        slidesToScroll: 1,
+                        dots: false,
+                        arrows: true,
+                    }
+                }
+            ]
+        });  
+    });
+        
+    </script>
+