Merge pull request #53 from Pear-Trading/finn/circlefix

snippet circles fixed

CHANGELOG.md

@@ -8,6 +8,7 @@
 * Added week by week purchase list for customer dashboard
 * Added sector purchase amount list for customer dashboard
 * Added sector U to available ones
+* Fixed snippet layout
 
 # v0.0.7
 

src/app/snippets/cust-snippet-bar.component.html

@@ -1,10 +1,14 @@
-<div class="card">
-  <div class="card-footer">
-    <ul>
+<div class="card text-center">
+  <div class="card-block">
+    <ul style="list-style: none; padding-left: 0;">
+      <div class="row no-gutters">
+        <div class="col-12 col-sm-6 col-md-3 mx-auto">
           <li class="hidden-sm-down">
             <div>My Points</div>
             <div class="number-circle mx-auto"><strong>{{ userSum / 10 | number:'1.0-0' }}</strong></div>
           </li>
+        </div>
+        <div class="col-12 col-sm-6 col-md-3 mx-auto">
           <li class="hidden-sm-down">
             <div class="">My Rank</div>
             <div *ngIf="userPosition == 0" class="statuscontent">
@@ -14,14 +18,20 @@
               <div class="number-circle mx-auto"><strong>{{ userPosition }}</strong></div>
             </div>
           </li>
+        </div>
+        <div class="col-12 col-sm-6 col-md-3 mx-auto">
           <li class="hidden-sm-down">
             <div class="">My Total Spend</div>
             <div class="number-circle mx-auto"><strong>{{ userSum | currency:'GBP':'symbol':'1.2-2' }}</strong></div>
           </li>
+        </div>
+        <div class="col-12 col-sm-6 col-md-3 mx-auto">
           <li class="hidden-sm-down">
             <div class="">Value to Local Economy</div>
             <div class="number-circle mx-auto"><strong>{{ userSum * 2.3 | currency:'GBP':'symbol':'1.2-2' }}</strong></div>
           </li>
+        </div>
+      </div>
     </ul>
   </div>
 </div>

src/scss/_custom.scss

@@ -27,14 +27,16 @@ agm-map {
 // circle for text
 // TODO: Make these resize based on inside content
 .number-circle {
-  width:24%;
+  height: 10rem;
   border-radius:50%;
   text-align:center;
-  padding:12% 0;
-  line-height:0;
-  position:relative;
+  width: 10rem;
+  padding: 5rem 5%;
+  line-height: 0;
+  position: relative;
   background: #20a8d8;
   color: white;
+  font-size: 0.875rem;
 }
 // white title font variant on type-2 as defined in _widgets.css
 .horizontal-bars {