Skip to content

M
MBetterd
Commit 904ffbdf authored by Stefy Lanza (nextime / spora )'s avatar Stefy Lanza (nextime / spora )
Browse files
Options

Fix reports page layout: display 5 summary cards in single line with smaller icons

parent f6616afb
Hide whitespace changes
Inline Side-by-side
Showing with 20 additions and 20 deletions
app/templates/main/reports.html
View file @ 904ffbdf
...@@ -22,16 +22,16 @@ ...@@ -22,16 +22,16 @@
<!-- Summary Cards --> <!-- Summary Cards -->
<div class="row mb-4"> <div class="row mb-4">
<div class="col-12 col-md-6 col-lg-3"> <div class="col" style="flex: 0 0 20%; max-width: 20%;">
<div class="card bg-gradient-primary text-white mb-3 shadow-sm border-0 h-100"> <div class="card bg-gradient-primary text-white mb-3 shadow-sm border-0 h-100">
<div class="card-body"> <div class="card-body">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<div class="icon-box bg-white bg-opacity-25 rounded-circle p-3"> <div class="icon-box bg-white bg-opacity-25 rounded-circle p-2">
<i class="fas fa-arrow-down fa-2x"></i> <i class="fas fa-arrow-down fa-lg"></i>
</div> </div>
</div> </div>
<div class="flex-grow-1 ms-3"> <div class="flex-grow-1 ms-2">
<h6 class="card-title mb-1 text-white-50">Total Payin</h6> <h6 class="card-title mb-1 text-white-50">Total Payin</h6>
<h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(totals.total_payin) }}</h3> <h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(totals.total_payin) }}</h3>
</div> </div>
...@@ -39,16 +39,16 @@ ...@@ -39,16 +39,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 col-md-6 col-lg-3"> <div class="col" style="flex: 0 0 20%; max-width: 20%;">
<div class="card bg-gradient-info text-white mb-3 shadow-sm border-0 h-100"> <div class="card bg-gradient-info text-white mb-3 shadow-sm border-0 h-100">
<div class="card-body"> <div class="card-body">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<div class="icon-box bg-white bg-opacity-25 rounded-circle p-3"> <div class="icon-box bg-white bg-opacity-25 rounded-circle p-2">
<i class="fas fa-arrow-up fa-2x"></i> <i class="fas fa-arrow-up fa-lg"></i>
</div> </div>
</div> </div>
<div class="flex-grow-1 ms-3"> <div class="flex-grow-1 ms-2">
<h6 class="card-title mb-1 text-white-50">Total Payout</h6> <h6 class="card-title mb-1 text-white-50">Total Payout</h6>
<h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(totals.total_payout) }}</h3> <h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(totals.total_payout) }}</h3>
</div> </div>
...@@ -56,16 +56,16 @@ ...@@ -56,16 +56,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 col-md-6 col-lg-3"> <div class="col" style="flex: 0 0 20%; max-width: 20%;">
<div class="card {% if totals.total_balance >= 0 %}bg-gradient-success{% else %}bg-gradient-danger{% endif %} text-white mb-3 shadow-sm border-0 h-100"> <div class="card {% if totals.total_balance >= 0 %}bg-gradient-success{% else %}bg-gradient-danger{% endif %} text-white mb-3 shadow-sm border-0 h-100">
<div class="card-body"> <div class="card-body">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<div class="icon-box bg-white bg-opacity-25 rounded-circle p-3"> <div class="icon-box bg-white bg-opacity-25 rounded-circle p-2">
<i class="fas fa-balance-scale fa-2x"></i> <i class="fas fa-balance-scale fa-lg"></i>
</div> </div>
</div> </div>
<div class="flex-grow-1 ms-3"> <div class="flex-grow-1 ms-2">
<h6 class="card-title mb-1 text-white-50">Total Balance</h6> <h6 class="card-title mb-1 text-white-50">Total Balance</h6>
<h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(totals.total_balance) }}</h3> <h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(totals.total_balance) }}</h3>
</div> </div>
...@@ -73,16 +73,16 @@ ...@@ -73,16 +73,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 col-md-6 col-lg-3"> <div class="col" style="flex: 0 0 20%; max-width: 20%;">
<div class="card bg-gradient-warning text-white mb-3 shadow-sm border-0 h-100"> <div class="card bg-gradient-warning text-white mb-3 shadow-sm border-0 h-100">
<div class="card-body"> <div class="card-body">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<div class="icon-box bg-white bg-opacity-25 rounded-circle p-3"> <div class="icon-box bg-white bg-opacity-25 rounded-circle p-2">
<i class="fas fa-exchange-alt fa-2x"></i> <i class="fas fa-exchange-alt fa-lg"></i>
</div> </div>
</div> </div>
<div class="flex-grow-1 ms-3"> <div class="flex-grow-1 ms-2">
<h6 class="card-title mb-1 text-white-50">CAP Redistribution</h6> <h6 class="card-title mb-1 text-white-50">CAP Redistribution</h6>
<h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(totals.cap_balance) }}</h3> <h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(totals.cap_balance) }}</h3>
</div> </div>
...@@ -90,16 +90,16 @@ ...@@ -90,16 +90,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 col-md-6 col-lg-3"> <div class="col" style="flex: 0 0 20%; max-width: 20%;">
<div class="card bg-gradient-info text-white mb-3 shadow-sm border-0 h-100"> <div class="card bg-gradient-info text-white mb-3 shadow-sm border-0 h-100">
<div class="card-body"> <div class="card-body">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<div class="icon-box bg-white bg-opacity-25 rounded-circle p-3"> <div class="icon-box bg-white bg-opacity-25 rounded-circle p-2">
<i class="fas fa-chart-line fa-2x"></i> <i class="fas fa-chart-line fa-lg"></i>
</div> </div>
</div> </div>
<div class="flex-grow-1 ms-3"> <div class="flex-grow-1 ms-2">
<h6 class="card-title mb-1 text-white-50">Accumulated Shortfall</h6> <h6 class="card-title mb-1 text-white-50">Accumulated Shortfall</h6>
<h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(totals.accumulated_shortfall) }}</h3> <h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(totals.accumulated_shortfall) }}</h3>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment