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

snippet circles fixed

Browse source
This commit is contained in:
piratefinn 2017-12-20 16:46:25 +00:00
parent 762da58c3d
commit 52d322416d
2 changed files with 38 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

10
src/scss/_custom.scss
View file

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