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

Merge pull request #53 from Pear-Trading/finn/circlefix

Browse source 
snippet circles fixed
This commit is contained in:
Finn 2017-12-20 16:52:26 +00:00 committed by GitHub
parent 4f6edf9470 11fcf170ba
commit ee43c80041
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -8,6 +8,7 @@
* Added week by week purchase list for customer dashboard
* Added sector purchase amount list for customer dashboard
* Added sector U to available ones
* Fixed snippet layout
# v0.0.7

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 {