Some Cin7 updates. Backed up williams-sonoma templates.

Custom_Templates/customer_templates/WSGC - New Hire/_progress_circle.html.liquid

@@ -0,0 +1,97 @@
+<div class="np-progress-ring-wrapper">
+  <svg
+    class="progress-ring"
+    width="{{ size }}"
+    height="{{ size }}">
+    <circle
+      class="progress-ring__circle circle-{{name}}"
+      stroke="#fff"
+      stroke-width="10"
+      fill="transparent"
+      r="52"
+      cx="60"
+      cy="60" />
+    <circle
+      class="progress-ring__circle circle-bg"
+      stroke="rgba(100, 100, 100, 0.15)"
+      stroke-width="10"
+      fill="transparent"
+      r="52"
+      cx="60"
+      cy="60" />
+    <text
+      x="50%"
+      y="50%"
+      text-anchor="middle"
+      stroke="t#000"
+      stroke-width="1px"
+      fill="#000"
+      dy=".3em">{{ count }}</text>
+  </svg>
+  <h3 class="np-card-content-title np-progress-circle-label">
+    {{ name }}
+  </h3>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    var circle = document.getElementsByClassName("circle-{{name}}")[0];
+    var radius = circle.r.baseVal.value;
+    var circumference = radius * 2 * Math.PI;
+
+    circle.style.strokeDasharray = `${circumference} ${circumference}`;
+    circle.style.strokeDashoffset = `${circumference}`;
+
+    function setProgress(percent) {
+      const offset = circumference - percent * circumference;
+      circle.style.strokeDashoffset = offset;
+      console.log(offset)
+    }
+    setProgress('{{ count | divided_by: total }}')
+  })
+</script>
+
+<style>
+  .np-progress-ring-wrapper {
+    flex: 0;
+    flex-direction: column;
+    display: flex;
+    width: 100%;
+    padding: 1.5rem 1rem 1rem;
+    align-items: center;
+  }
+
+  .progress-ring circle {
+    stroke-linecap: round;
+  }
+  .progress-ring text {
+    font-size: 2rem;
+  }
+  .progress-ring__circle {
+    transition: stroke-dashoffset 0.35s;
+    transform: rotate(-90deg);
+    transform-origin: center;
+  }
+
+  .np-progress-circle-label {
+    color: #000;
+    text-transform: uppercase;
+    font-size: 0.875rem;
+    margin-top: 1rem;
+  }
+
+  @media (min-width: 768px) {
+    .np-progress-ring-wrapper {
+      padding: 1.5rem 0.4rem 1rem;
+    }
+  }
+
+  @media (min-width: 1170px) {
+    .progress-ring text {
+      font-size: 2.5rem;
+    }
+    .np-progress-ring-wrapper {
+      padding: 1.5rem 1rem 1rem;
+    }
+  }
+</style>