snippet circles fixed
This commit is contained in:
parent
4f6edf9470
commit
95a918076a
2 changed files with 38 additions and 26 deletions
|
@ -1,27 +1,37 @@
|
||||||
<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;">
|
||||||
<li class="hidden-sm-down">
|
<div class="row no-gutters">
|
||||||
<div>My Points</div>
|
<div class="col-12 col-sm-6 col-md-3 mx-auto">
|
||||||
<div class="number-circle mx-auto"><strong>{{ userSum / 10 | number:'1.0-0' }}</strong></div>
|
<li class="hidden-sm-down">
|
||||||
</li>
|
<div>My Points</div>
|
||||||
<li class="hidden-sm-down">
|
<div class="number-circle mx-auto"><strong>{{ userSum / 10 | number:'1.0-0' }}</strong></div>
|
||||||
<div class="">My Rank</div>
|
</li>
|
||||||
<div *ngIf="userPosition == 0" class="statuscontent">
|
|
||||||
<div class="number-circle mx-auto"><strong>Unranked</strong></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="userPosition != 0" class="statuscontent">
|
<div class="col-12 col-sm-6 col-md-3 mx-auto">
|
||||||
<div class="number-circle mx-auto"><strong>{{ userPosition }}</strong></div>
|
<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>
|
</div>
|
||||||
</li>
|
<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>
|
||||||
<li class="hidden-sm-down">
|
</div>
|
||||||
<div class="">Value to Local Economy</div>
|
<div class="col-12 col-sm-6 col-md-3 mx-auto">
|
||||||
<div class="number-circle mx-auto"><strong>{{ userSum * 2.3 | currency:'GBP':'symbol':'1.2-2' }}</strong></div>
|
<li class="hidden-sm-down">
|
||||||
</li>
|
<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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Reference in a new issue