Update Bootstrap, Redesign of Navigation Menu and Footer

TheAxelander · Dec 6, 2023 · 875a41b · 875a41b
1 parent c2e67be
commit 875a41b
Show file tree

Hide file tree

Showing 67 changed files with 110,374 additions and 82,202 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 * [Changed] Buttons that appeared in the past only via hovering are now always displayed (was not working well, maybe additional rework in future) [#155](https://github.com/TheAxelander/OpenBudgeteer/issues/155)
 * [Changed] More responsive navigation bar [#175](https://github.com/TheAxelander/OpenBudgeteer/issues/175)
 * [Changed] Enable editing of imported file [#196](https://github.com/TheAxelander/OpenBudgeteer/issues/196)
+* [Changed] Redesign of Navigation Menu and Footer
 * [Fixed] UI alignment for large numbers [#189](https://github.com/TheAxelander/OpenBudgeteer/issues/189)
 * [Fixed] Mapping Rules using the Account Name instead of Account Id [#199](https://github.com/TheAxelander/OpenBudgeteer/pull/199) Thanks [Lucaber](https://github.com/Lucaber)
 * [Fixed] Adding a Mapping Rule to an existing Rule Set failed [#200](https://github.com/TheAxelander/OpenBudgeteer/pull/200) Thanks [Lucaber](https://github.com/Lucaber)

diff --git a/OpenBudgeteer.Blazor/App.razor b/OpenBudgeteer.Blazor/App.razor
@@ -10,11 +10,9 @@
     <title>OpenBudgeteer</title>
     <base href="/" />
     <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="css/bootstrap/@AppSettings.Theme/bootstrap.min.css" />
+    <link rel="stylesheet" href="css/bootstrap/@AppSettings.Theme/bootstrap.css" />
     <link rel="stylesheet" href="css/bootstrap/bootstrap-icons.css">
     <link href="css/site.css" rel="stylesheet" />
-    <link href="css/custom.css" rel="stylesheet"/>
-    <link href="css/StickyFooter.css" rel="stylesheet" />
     <style>
         /* Hide Spinner for number Input fields*/
         /* Chrome, Safari, Edge, Opera */
@@ -32,7 +30,7 @@
     <HeadOutlet @rendermode="InteractiveServer" />
 </head>
 <body>
-    <Routes @rendermode="InteractiveServer" />
+    <Routes @rendermode="InteractiveServer"/>
 
     <div id="blazor-error-ui" style="z-index: 1">
         @if (Env.IsDevelopment())
@@ -51,14 +49,6 @@
         <a class="dismiss">🗙</a>
     </div>
 
-    <footer class="footer" style="z-index: 2">
-        <div style="text-align: center">
-            <span class="text-muted">
-                App Icons by <a href="https://icons8.com" target="_blank">Icons8</a>
-            </span>
-        </div>
-    </footer>
-
     <script src="_framework/blazor.web.js"></script>
     <script src="js/bootstrap/bootstrap.bundle.min.js"></script>
     <script src="js/custom.js"></script>
@@ -73,6 +63,6 @@
     <script src="_content/ChartJs.Blazor/ChartJsBlazorInterop.js"></script>
 
     <!-- Some styling -->
-    <link rel="stylesheet" href="_content/ChartJs.Blazor/ChartJSBlazor.css" />
+    <link rel="stylesheet" href="_content/ChartJs.Blazor/ChartJSBlazor.css"/>
 </body>
 </html>
diff --git a/OpenBudgeteer.Blazor/Pages/Import.razor b/OpenBudgeteer.Blazor/Pages/Import.razor
@@ -1,12 +1,11 @@
 @page "/import"
 @using Tewr.Blazor.FileReader
-@using Microsoft.AspNetCore.Components
 @using OpenBudgeteer.Core.ViewModels.EntityViewModels
 @inject IFileReaderService FileReaderService
 @inject IJSRuntime JSRuntime
 @inject NavigationManager NavManager
 
-<div class="accordion" id="accordionSteps">
+<div class="accordion mb-3" id="accordionSteps">
     <div class="accordion-item">
         <h2 class="accordion-header" id="headingStepOne">
             <button @ref="_step1AccordionButtonElement" class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStepOne" aria-expanded="true" aria-controls="collapseStepOne">

diff --git a/OpenBudgeteer.Blazor/Shared/MainLayout.razor b/OpenBudgeteer.Blazor/Shared/MainLayout.razor
@@ -3,43 +3,44 @@
 @using OpenBudgeteer.Core.Data.Entities
 @inject DbContextOptions<DatabaseContext> DbContextOptions
 
-<header>
-    <nav class="navbar navbar-expand-lg navbar-dark sticky-top bg-dark">
-        <div class="container-fluid d-flex flex-column flex-lg-row align-items-start">
-            <div class="d-flex flex-row">
-                <button class="navbar-toggler d-block d-lg-none me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-                <a class="navbar-brand" href="#">OpenBudgeteer</a>
-            </div>
-            <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
-                <div class="offcanvas-header">
-                    <h5 class="offcanvas-title" id="offcanvasNavbarLabel">OpenBudgeteer</h5>
-                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-                </div>
-                <div class="offcanvas-body justify-content-between">
-                    <NavMenu/>
-                    <div class="d-flex flex-column flex-xl-row justify-content-between navbar-text d-lg-none d-xl-block">
-                        <span class="mx-xl-2 my-2 my-xl-0">
-                            Database: @CurrentDatabase
-                        </span>
-                        <span class="mx-xl-2 my-2 my-xl-0">
-                            Version: 1.8 (<a href="https://github.com/TheAxelander/OpenBudgeteer/blob/master/CHANGELOG.md" target="_blank">Change Log</a>)
-                        </span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </nav>
+<header class="sticky-top">
+    <div class="d-flex flex-row app-header navbar align-items-center px-3 py-1 bg-primary" data-bs-theme="dark">
+        <button class="btn btn-sm fs-5" 
+                type="button"
+                data-bs-toggle="collapse" 
+                data-bs-target="#largeNavMenu" 
+                aria-expanded="false" 
+                aria-controls="largeNavMenu"
+                @onclick="OnCollapseClick">
+            <div class="bi bi-list"></div>
+        </button>
+        <span class="navbar-brand flex-fill ms-2 fs-5">OpenBudgeteer</span>
+        <span class="navbar-text ms-3">Database: @CurrentDatabase</span>
+        <span class="navbar-text ms-3">Version: 1.8 (<a href="https://github.com/TheAxelander/OpenBudgeteer/blob/master/CHANGELOG.md" target="_blank">Change Log</a>)</span>
+    </div>
 </header>
-<div class="main">
-    <div class="content px-4" style="max-width: 1500px; margin: auto; margin-bottom: 100px">
-        @Body
+<div class="container-fluid">
+    <div class="h-100 collapse collapse-horizontal show navbar navbar-left bg-dark" data-bs-theme="dark" id="largeNavMenu">
+        <NavMenu/>
+        <div class="align-self-end d-flex flex-column flex-fill navbar-footer px-3">
+            <span class="text-muted py-1"><i class="bi bi-github me-1"></i><a class="text-muted" href="https://github.com/TheAxelander/OpenBudgeteer" target="_blank"> GitHub</a></span>
+            <span class="text-muted py-1"><i class="bi bi-book me-1"></i><a class="text-muted" href="https://theaxelander.github.io/" target="_blank"> Documentation</a></span>
+            <span class="text-muted py-1"><a class="text-muted" href="https://icons8.com" target="_blank">App Icons by Icons8</a></span>
+        </div>
     </div>
+    <div class="content pt-4" style="margin-left: @_marginLeft;">@Body</div>
 </div>
 
 @code {
 
-    public string CurrentDatabase => new DatabaseContext(DbContextOptions).Database.GetDbConnection().Database;
+    private string CurrentDatabase => new DatabaseContext(DbContextOptions).Database.GetDbConnection().Database;
+    private bool _isCollapsed;
+    private string _marginLeft = "250px";
+
+    private void OnCollapseClick()
+    {
+        _isCollapsed = !_isCollapsed;
+        _marginLeft = _isCollapsed ? "0px" : "250px";
+    }
 
 }
diff --git a/OpenBudgeteer.Blazor/Shared/NavMenu.razor b/OpenBudgeteer.Blazor/Shared/NavMenu.razor
@@ -1,65 +1,42 @@
-<ul class="navbar-nav mr-auto">
-    <li class="nav-item">
+<div class="d-flex flex-column flex-fill navbar-nav">
+    <div class="nav-item">
         <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-            <i class="bi bi-house-door"></i> Home
+            <i class="bi bi-house-door me-1"></i> Home
         </NavLink>
-    </li>
-    <li class="nav-item">
+    </div>
+    <div class="nav-item">
         <NavLink class="nav-link" href="account">
-            <i class="bi bi-credit-card"></i> Account
+            <i class="bi bi-credit-card me-1"></i> Account
         </NavLink>
-    </li>
-    <li class="nav-item">
+    </div>
+    <div class="nav-item">
         <NavLink class="nav-link" href="transaction">
-            <i class="bi bi-arrow-left-right"></i> Transaction
+            <i class="bi bi-arrow-left-right me-1"></i> Transaction
         </NavLink>
-    </li>
-    <li class="nav-item">
+    </div>
+    <div class="nav-item">
         <NavLink class="nav-link" href="bucket">
-            <i class="bi bi-bucket"></i> Bucket
+            <i class="bi bi-bucket me-1"></i> Bucket
         </NavLink>
-    </li>
-    <li class="nav-item">
+    </div>
+    <div class="nav-item">
         <NavLink class="nav-link" href="import">
-            <i class="bi bi-upload"></i> Import
+            <i class="bi bi-upload me-1"></i> Import
         </NavLink>
-    </li>
-    <li class="nav-item d-xl-none d-xxl-block">
+    </div>
+    <li class="nav-item">
         <NavLink class="nav-link" href="report">
-            <i class="bi bi-graph-up"></i> Report
+            <i class="bi bi-graph-up me-1"></i> Report
         </NavLink>
     </li>
-    <li class="nav-item d-xl-none d-xxl-block">
+    <div class="nav-item">
         <NavLink class="nav-link" href="rules">
-            <i class="bi bi-file-ruled"></i> Rules
+            <i class="bi bi-file-ruled me-1"></i> Rules
         </NavLink>
-    </li>
-    <li class="nav-item d-xl-none d-xxl-block">
+    </div>
+    <div class="nav-item">
         <NavLink class="nav-link" href="dataconsistency">
-            <i class="bi bi-database-check"></i> Data Consistency
+            <i class="bi bi-database-check me-1"></i> Data Consistency
         </NavLink>
-    </li>
-
-    <li class="nav-item dropdown d-none d-xl-block d-xxl-none">
-        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">More</a>
-        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <li>
-                <NavLink class="dropdown-item" href="report">
-                    <i class="bi bi-graph-up"></i> Report
-                </NavLink>
-            </li>
-            <li>
-                <NavLink class="dropdown-item" href="rules">
-                    <i class="bi bi-file-ruled"></i> Rules
-                </NavLink>
-            </li>
-            <li>
-                <NavLink class="dropdown-item" href="dataconsistency">
-                    <div>
-                        <i class="bi bi-database-check"></i> Data Consistency
-                    </div>
-                </NavLink>
-            </li>
-        </ul>
-    </li>
-</ul>
+    </div>
+</div>
diff --git a/OpenBudgeteer.Blazor/wwwroot/css/StickyFooter.css b/OpenBudgeteer.Blazor/wwwroot/css/StickyFooter.css