Agriwebb templates. SOme notes and todo cleaning. Other file organization.

2023-07-11 17:11:05 -04:00
parent 662ea94761
commit aa20284351
9 changed files with 456 additions and 541 deletions
--- a/Custom_Templates/customer_templates/Agriwebb/_widget_achievements.html.liquid
+++ b/Custom_Templates/customer_templates/Agriwebb/_widget_achievements.html.liquid
@ -0,0 +1,134 @@
+<div class="np-dashboard-resources">
+  <div class="np-card">
+    <div class="np-card-container np-dashboard-border">
+      <div class="np-card-content-achievements">
+        <div class="achievements-carousel">
+          {% for course in courses.enrolled %}
+            {% if course.properties.badges != 'NULL' and course.progress == 100 %}
+              <div>
+                <div class="np-card-content-title col-12">
+                  {{ course.name }}
+                </div>
+                 <div class="col-12">
+                    <img class="np-achievement-icon" src="{{ course.properties.badges }}" />
+                </div>             
+              </div>
+            {% endif %}
+          {% endfor %}
+        </div>
+        {% include "achievements_modal" %}     
+      </div>
+    </div>
+  </div>
+</div>
+
+<script type="text/javascript">
+const noBadgeMsg = "<div class='no-badge-msg'>Complete a course to recieve your first badge!</div>";
+    $('document').ready(function() {
+      if ($(".achievements-carousel").children().length > 0) {
+        $('.achievements-carousel').slick({
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          dots: false,
+          infinite: true,
+          autoplay: false,
+          autoplaySpeed: 5000,
+          cssEase: 'linear',
+          prevArrow: '<i class="fal fa-chevron-left"></i>',
+          nextArrow: '<i class="fal fa-chevron-right"></i>',
+          responsive: [{
+            breakpoint: 991,
+            settings: {
+                dots: false
+            }
+          }]
+        })
+      } else {
+        $(".achievements-carousel").append(noBadgeMsg)
+      }
+        
+    });
+
+    $(".dialog-trigger").click(function() {
+      if (!$("body").hasClass("modal-open")) {
+        $("body").addClass("modal-open");
+      }
+    });
+
+    $(".modal-close").click(function() {
+      $("body").removeClass("modal-open");
+    })    
+</script>
+
+<style>
+
+  .noBadgeMsg {
+    text-align:center;
+    margin-bottom:32px;
+  }
+
+  .modal-open {
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .np-card-content-achievements .np-card-content-title { 
+    text-align:center; 
+    font-size:0.937rem;
+    font-weight:500;
+  }
+
+  .np-card-content-achievements {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 2rem 2rem .5rem;
+  }
+
+  .np-card-content-achievements .slick-slider {
+    width:100%;
+    max-width: 375px;
+    margin: auto;
+  }
+
+  .np-achievement-icon {
+    color: #bec2c6;
+    margin:14px auto 26px;
+    width:130px;
+  }
+
+  .slick-arrow {
+    color: #35404E;
+    font-size: 1.5rem;
+    position: absolute;
+    top: 50%;
+    cursor:pointer;
+  }
+
+  .slick-arrow.fa-chevron-left { left:0 }
+  .slick-arrow.fa-chevron-right { right:0; }
+
+  .np-view-all-achievements {
+    color:#092344;
+    font-size:0.8rem;
+    text-transform:uppercase;
+    text-align:center;
+    text-decoration:none;
+    margin-bottom:1.5rem;
+    cursor:pointer;
+    font-weight:500;
+    transition: all 0.1s;
+  }
+
+  .np-view-all-achievements:hover {
+    text-decoration:underline;
+  }
+
+  @media (min-width:1024px) {
+    .np-card-content-achievements .slick-slider {
+      max-width: none;
+      margin: 0;
+    }
+  }
+
+</style>