Enhance finance summary layout and styling in main-view.php; add new styles to style.scss
This commit is contained in:
54
.vscode/ftp-kr.sync.cache.json
vendored
54
.vscode/ftp-kr.sync.cache.json
vendored
@@ -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
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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'];?>
|
||||
|
||||
Reference in New Issue
Block a user