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

.vscode/ftp-kr.sync.cache.json

@@ -34,8 +34,8 @@
       },
       ".htaccess": {
         "type": "-",
-        "size": 1151,
+        "size": 1024,
-        "lmtime": 0,
+        "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": {}
     }
   },

layout/style.scss

@@ -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;
+      }
+    }
+  }
 }

templates/finances/main-view.php

@@ -4,52 +4,44 @@
     <small>Analiza kosztów i przychodów (wg kategorii)</small>
   </div>
 </div>
-<div class="row">
+<div class="finance-summary">
-  <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 > 0 ) ? 'text-system' : 'text-danger';?>"><?= \S::number_display( $this -> wallet_summary );?></h1>
       </div>
       <div class="panel-footer br-t p12">
-        <span class="fs12">
+        <span class="fs12">od początku</span>
-          <b>od początku</b>
-        </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">
+        <span class="fs11">suma w tym miesiącu</span>
-          <b>suma w tym miesiącu</b>
-        </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">
+        <span class="fs11">dochody w tym miesiącu</span>
-          <b>dochody w tym miesiącu</b>
-        </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">
+        <span class="fs11">wydatki w tym miesiącu</span>
-          <b>wydatki w tym miesiącu</b>
-        </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">
+            <td class="pl15 actions">
-              <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_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="red operation-delete" title="usuń operację"><i class="fa fa-times"></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'];?>