updated pie css
This commit is contained in:
parent
c9ecfd0566
commit
ac2ab1d551
4 changed files with 43 additions and 20 deletions
|
@ -78,7 +78,7 @@
|
||||||
<div class="card-block">
|
<div class="card-block">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<h4 class="card-title float-left mb-0">Sector Purchase Amounts</h4>
|
<h4 class="card-title float-left mb-0">Purchases by Sector</h4>
|
||||||
</div><!--/.col-->
|
</div><!--/.col-->
|
||||||
</div><!--/.row-->
|
</div><!--/.row-->
|
||||||
<div class="chart-wrapper">
|
<div class="chart-wrapper">
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="card-block">
|
<div class="card-block">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-8">
|
||||||
<h4 class="card-title mb-0">Local Purchases</h4>
|
<h4 class="card-title mb-0">All Purchases</h4>
|
||||||
</div><!--/.col-->
|
</div><!--/.col-->
|
||||||
<div class="col-sm-4 hidden-sm-down">
|
<div class="col-sm-4 hidden-sm-down">
|
||||||
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
|
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
|
||||||
|
|
|
@ -1,16 +1,22 @@
|
||||||
<div class="card text-center">
|
<div class="row">
|
||||||
|
<div class="col-md-6 col-xl-3">
|
||||||
|
<div class="card text-center" style="background-color: transparent; border: none">
|
||||||
<div class="card-block">
|
<div class="card-block">
|
||||||
<ul style="list-style: none; padding-left: 0;">
|
<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><h5 class="text-dark-green">My Points</h5></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>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-sm-6 col-md-3 mx-auto">
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 col-xl-3">
|
||||||
|
<div class="card text-center" style="background-color: transparent; border: none">
|
||||||
|
<div class="card-block">
|
||||||
|
<ul style="list-style: none; padding-left: 0;">
|
||||||
<li class="hidden-sm-down">
|
<li class="hidden-sm-down">
|
||||||
<div class="">My Rank</div>
|
<div><h5 class="text-dark-green">My Rank</h5></div>
|
||||||
<div *ngIf="userPosition == 0" class="statuscontent">
|
<div *ngIf="userPosition == 0" class="statuscontent">
|
||||||
<div class="number-circle mx-auto"><strong>Unranked</strong></div>
|
<div class="number-circle mx-auto"><strong>Unranked</strong></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -18,20 +24,32 @@
|
||||||
<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">
|
|
||||||
<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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 col-xl-3">
|
||||||
|
<div class="card text-center" style="background-color: transparent; border: none">
|
||||||
|
<div class="card-block">
|
||||||
|
<ul style="list-style: none; padding-left: 0;">
|
||||||
|
<li class="hidden-sm-down">
|
||||||
|
<div><h5 class="text-dark-green">My Total Spend</h5></div>
|
||||||
|
<div class="number-circle mx-auto"><strong>{{ userSum | currency:'GBP':'symbol':'1.2-2' }}</strong></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 col-xl-3">
|
||||||
|
<div class="card text-center" style="background-color: transparent; border: none">
|
||||||
|
<div class="card-block">
|
||||||
|
<ul style="list-style: none; padding-left: 0;">
|
||||||
|
<li class="hidden-sm-down">
|
||||||
|
<div><h5 class="text-dark-green">Value to Local Economy</h5></div>
|
||||||
|
<div class="number-circle mx-auto"><strong>{{ userSum * 2.3 | currency:'GBP':'symbol':'1.2-2' }}</strong></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -34,10 +34,15 @@ agm-map {
|
||||||
padding: 5rem 5%;
|
padding: 5rem 5%;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #20a8d8;
|
background: #4dbd74;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-dark-green {
|
||||||
|
color: #10602c;
|
||||||
|
}
|
||||||
|
|
||||||
// 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 {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
Reference in a new issue