new directory

customer_templates/One Network/_completion_dashboard.html.liquid

@@ -0,0 +1,57 @@
+<div class="np-dashboard-resources">
+  {% if courses.enrolled.any? %}
+  <div class="">
+  {% assign countComplete = 0 %}
+  {% assign countInProgress = 0 %}
+  {% assign countNotStarted = 0 %}
+  {% assign countTotal = 0 | times: 1.0 %}
+    {% for course in courses.enrolled %}
+      {% assign countTotal = countTotal | plus: 1 %}
+      {% if course.progress == 100 %}
+        {% assign countComplete = countComplete | plus: 1 %}
+      {% endif %}
+      {% if course.progress > 0 and course.progress < 100 %}
+        {% assign countInProgress = countInProgress | plus: 1 %}
+      {% endif %}
+      {% if course.progress == 0 %}
+        {% assign countNotStarted = countNotStarted | plus: 1 %}
+      {% endif %}
+    {% endfor %}
+    <ul class="circle-list">
+      <li>
+        {% include "progress_circle", name:'Completed' , count: countComplete , total: countTotal %}
+      </li>
+      <li>
+        {% include "progress_circle", name:'In Progress' , count: countInProgress , total: countTotal %}
+      </li>
+      <li>
+        {% include "progress_circle", name:'Not Started' , count: countNotStarted , total: countTotal %}
+      </li>
+    </ul>
+  </div>
+{% else %}
+  {% capture message %}
+    {% t shared.zero_state.courses.index,
+      key: current_school.course_vocabulary
+    %}
+  {% endcapture %}
+  {% include "courses_zero_state", message: message %}
+{% endif %}
+</div>
+
+<style>
+  .circle-list {
+    list-style-type: none !important;
+  }
+  .align-center {
+    align-items: center !important;
+}
+.progress-ring__circle {
+  transition: stroke-dashoffset 0.35s;
+}
+.progress-ring__circle {
+  transition: stroke-dashoffset 0.35s;
+  transform: rotate(-90deg);
+  transform-origin: center;
+}
+</style>