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

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

@ -1,27 +1,37 @@
<div class="card">
<div class="card-footer">
<ul>
<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>
<li class="hidden-sm-down">
<div class="">My Rank</div>
<div *ngIf="userPosition == 0" class="statuscontent">
<div class="number-circle mx-auto"><strong>Unranked</strong></div>
<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 *ngIf="userPosition != 0" class="statuscontent">
<div class="number-circle mx-auto"><strong>{{ userPosition }}</strong></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">
<div class="number-circle mx-auto"><strong>Unranked</strong></div>
</div>
<div *ngIf="userPosition != 0" class="statuscontent">
<div class="number-circle mx-auto"><strong>{{ userPosition }}</strong></div>
</div>
</li>
</div>
</li>
<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>
<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 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>

10
src/scss/_custom.scss
View file

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