From 88a2a461912cd5f07f93e5cfaa7eabbc58a8a059 Mon Sep 17 00:00:00 2001
From: piratefinn <toyou1995@gmail.com>
Date: Wed, 20 Dec 2017 12:32:23 +0000
Subject: [PATCH] added circles to snippets

WARNING: They are a fixed size, therefore will spill content on larger numbers
---
 .../snippets/cust-snippet-bar.component.html   | 18 +++++++++---------
 src/scss/_custom.scss                          | 11 +++++++++++
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/app/snippets/cust-snippet-bar.component.html b/src/app/snippets/cust-snippet-bar.component.html
index 80a44ef..9c9647f 100644
--- a/src/app/snippets/cust-snippet-bar.component.html
+++ b/src/app/snippets/cust-snippet-bar.component.html
@@ -2,25 +2,25 @@
   <div class="card-footer">
     <ul>
       <li class="hidden-sm-down">
-        <div class="text-muted">My Points</div>
-        <strong>{{ userSum / 10 | number:'1.0-0' }}</strong>
+        <div>My Points</div>
+        <div class="number-circle mx-auto"><strong>{{ userSum / 10 | number:'1.0-0' }}</strong></div>
       </li>
       <li class="hidden-sm-down">
-        <div class="text-muted">My Rank</div>
+        <div class="">My Rank</div>
         <div *ngIf="userPosition == 0" class="statuscontent">
-          <strong>Unranked</strong>
+          <div class="number-circle mx-auto"><strong>Unranked</strong></div>
         </div>
         <div *ngIf="userPosition != 0" class="statuscontent">
-          <strong>{{ userPosition }}</strong>
+          <div class="number-circle mx-auto"><strong>{{ userPosition }}</strong></div>
         </div>
       </li>
       <li class="hidden-sm-down">
-        <div class="text-muted">My Total Spend</div>
-        <strong>{{ userSum | currency:'GBP':'symbol':'1.2-2' }}</strong>
+        <div class="">My Total Spend</div>
+        <div class="number-circle mx-auto"><strong>{{ userSum | currency:'GBP':'symbol':'1.2-2' }}</strong></div>
       </li>
       <li class="hidden-sm-down">
-        <div class="text-muted">Value to Local Economy</div>
-        <strong>{{ userSum * 2.3 | currency:'GBP':'symbol':'1.2-2' }}</strong>
+        <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>
     </ul>
   </div>
diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
index 269a40a..de94c75 100644
--- a/src/scss/_custom.scss
+++ b/src/scss/_custom.scss
@@ -24,6 +24,17 @@ agm-map {
   width: 15%;
 }
 
+// circle for text
+.number-circle {
+  width:24%;
+  border-radius:50%;
+  text-align:center;
+  padding:12% 0;
+  line-height:0;
+  position:relative;
+  background: #20a8d8;
+  color: white;
+}
 // white title font variant on type-2 as defined in _widgets.css
 .horizontal-bars {
   padding: 0;