Enhance finance summary layout and styling in main-view.php; add new styles to style.scss

This commit is contained in:
2024-11-10 14:55:49 +01:00
parent a91c2275b1
commit 4acdddcabf
5 changed files with 134 additions and 26 deletions

View File

@@ -34,8 +34,8 @@
},
".htaccess": {
"type": "-",
"size": 1151,
"lmtime": 0,
"size": 1024,
"lmtime": 1731233634144,
"modified": false
},
"index.php": {
@@ -44,7 +44,26 @@
"lmtime": 0,
"modified": false
},
"layout": {},
"layout": {
"style.css": {
"type": "-",
"size": 14963,
"lmtime": 1731233991810,
"modified": false
},
"style.css.map": {
"type": "-",
"size": 26778,
"lmtime": 1731233991810,
"modified": false
},
"style.scss": {
"type": "-",
"size": 18665,
"lmtime": 1731233991666,
"modified": false
}
},
"libraries": {},
"robots.txt": {
"type": "-",
@@ -53,7 +72,34 @@
"modified": false
},
"temp": {},
"templates": {},
"templates": {
"finances": {
"category-edit.php": {
"type": "-",
"size": 1965,
"lmtime": 0,
"modified": false
},
"main-view.php": {
"type": "-",
"size": 14418,
"lmtime": 1731233950425,
"modified": false
},
"operation-edit.php": {
"type": "-",
"size": 3895,
"lmtime": 0,
"modified": false
},
"operations-list.php": {
"type": "-",
"size": 4312,
"lmtime": 0,
"modified": false
}
}
},
"upload": {}
}
},

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1,13 +1,31 @@
$cBlue: #6690F4;
$cRed: #aa0505;
$cGreen: #43833f;
.animate {
animation: mymove 3s infinite;
}
.text-right {
text-align: right;
}
.nowrap {
white-space: nowrap;
}
table {
border-collapse: collapse;
}
small {
font-size: .75em;
}
table {
font-size: 13px;
}
@keyframes mymove {
50% {
opacity: .33;
@@ -1001,4 +1019,56 @@ input[type="checkbox"] {
}
}
}
}
.finance-summary {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px;
.panel {
background: #FFF;
border-radius: 6px;
padding: 15px;
h1 {
font-size: 20px;
margin: 0;
}
span {
font-size: 0.85em;
}
}
}
.finance-manager {
display: grid;
gap: 10px;
grid-template-columns: 200px 1fr 300px;
padding-top: 25px;
.actions {
width: 100px;
text-align: center;
a {
display: inline-flex;
margin: 0 2px;
height: 25px;
width: 25px;
align-items: center;
justify-content: center;
text-decoration: none;
color: #000;
border: 1px solid #e7e7e7;
font-size: 11px;
border-radius: 3px;
transition: all 0.3s ease;
&:hover {
border: 1px solid $cBlue;
}
}
}
}

View File

@@ -4,52 +4,44 @@
<small>Analiza kosztów i przychodów (wg kategorii)</small>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="finance-summary">
<div class="column">
<div class="panel panel-tile text-center br-a br-grey">
<div class="panel-body">
<h1 class="fs30 mt5 mbn <?= ( $this -> wallet_summary > 0 ) ? 'text-system' : 'text-danger';?>"><?= \S::number_display( $this -> wallet_summary );?></h1>
</div>
<div class="panel-footer br-t p12">
<span class="fs12">
<b>od początku</b>
</span>
<span class="fs12">od początku</span>
</div>
</div>
</div>
<div class="col-3">
<div class="column">
<div class="panel panel-tile text-center br-a br-grey">
<div class="panel-body">
<h1 class="fs30 mt5 mbn <?= ( $this -> wallet_summary_this_month > 0 ) ? 'text-system' : 'text-danger';?>"><?= \S::number_display( $this -> wallet_summary_this_month );?></h1>
</div>
<div class="panel-footer br-t p12">
<span class="fs11">
<b>suma w tym miesiącu</b>
</span>
<span class="fs11">suma w tym miesiącu</span>
</div>
</div>
</div>
<div class="col-3">
<div class="column">
<div class="panel panel-tile text-center br-a br-grey">
<div class="panel-body">
<h1 class="fs30 mt5 mbn <?= ( $this -> wallet_income_this_month > 0 ) ? 'text-system' : 'text-danger';?>"><?= \S::number_display( $this -> wallet_income_this_month );?></h1>
</div>
<div class="panel-footer br-t p12">
<span class="fs11">
<b>dochody w tym miesiącu</b>
</span>
<span class="fs11">dochody w tym miesiącu</span>
</div>
</div>
</div>
<div class="col-3">
<div class="column">
<div class="panel panel-tile text-center br-a br-grey">
<div class="panel-body">
<h1 class="fs30 mt5 mbn <?= ( $this -> wallet_expenses_this_month > 0 ) ? 'text-system' : 'text-danger';?>"><?= \S::number_display( $this -> wallet_expenses_this_month );?></h1>
</div>
<div class="panel-footer br-t p12">
<span class="fs11">
<b>wydatki w tym miesiącu</b>
</span>
<span class="fs11">wydatki w tym miesiącu</span>
</div>
</div>
</div>
@@ -281,9 +273,9 @@
<? endif;?>
<br><small><?= \factory\Finances::get_operation_tags( $operation['id'] );?></small>
</td>
<td class="pl15 category-name">
<a href="/finances/operation_edit/category-id=<?= $operation['category_id'];?>&operation-id=<?= $operation['id'];?>" class="green" title="edytuj operację"><i class="fa fa-cog"></i></a>
<a href="/finances/operation_delete/category-id=<?= $operation['category_id'];?>&operation-id=<?= $operation['id'];?>" class="red operation-delete" title="usuń operację"><i class="fa fa-times"></i></a>
<td class="pl15 actions">
<a href="/finances/operation_edit/category-id=<?= $operation['category_id'];?>&operation-id=<?= $operation['id'];?>" title="edytuj operację"><i class="fa fa-cog"></i></a>
<a href="/finances/operation_delete/category-id=<?= $operation['category_id'];?>&operation-id=<?= $operation['id'];?>" class="operation-delete" title="usuń operację"><i class="fa fa-times"></i></a>
</td>
</tr>
<? $total = $total + $operation['amount'];?>