added circles to snippets
WARNING: They are a fixed size, therefore will spill content on larger numbers
This commit is contained in:
parent
d8fab7c4df
commit
30919e6eb2
2 changed files with 20 additions and 9 deletions
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
Reference in a new issue