Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

added circles to snippets

Browse source 
WARNING: They are a fixed size, therefore will spill content on larger numbers
This commit is contained in:
piratefinn 2017-12-20 12:32:23 +00:00
parent d8fab7c4df
commit 30919e6eb2
2 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/app/snippets/cust-snippet-bar.component.html
View file

@ -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>

11
src/scss/_custom.scss
View file

@ -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;