From f0930b06bb593fa618dbcba260ef78c7b693428f Mon Sep 17 00:00:00 2001
From: Dave Brown <dave.brown@hee.nhs.uk>
Date: Sun, 17 Dec 2023 17:47:26 +0000
Subject: [PATCH] Position footer correctly at the bottom of page

---
 .../Components/PropertyCard.razor             |  2 +-
 .../Pages/AccountList.razor                   | 33 +++++++--------
 .../Pages/ContactList.razor                   | 33 ++++++++-------
 .../Pages/ContactTypeList.razor               | 33 ++++++++-------
 .../Pages/Documents.razor                     |  4 +-
 .../Pages/PortfolioList.razor                 | 33 ++++++++-------
 .../Pages/TenancyList.razor                   | 33 ++++++++-------
 .../Pages/TenancyTypeList.razor               | 33 ++++++++-------
 .../Pages/UnitList.razor                      | 35 ++++++++--------
 .../Pages/UnitTypeList.razor                  | 33 ++++++++-------
 .../Shared/MainLayout.razor                   | 41 ++++++++++---------
 .../wwwroot/css/app.css                       |  2 +-
 12 files changed, 155 insertions(+), 160 deletions(-)

diff --git a/src/PropertyPortfolioManager.Client/Components/PropertyCard.razor b/src/PropertyPortfolioManager.Client/Components/PropertyCard.razor
index f25804e..20e8f64 100644
--- a/src/PropertyPortfolioManager.Client/Components/PropertyCard.razor
+++ b/src/PropertyPortfolioManager.Client/Components/PropertyCard.razor
@@ -1,4 +1,4 @@
-<div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-3">
+<div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-3 page-content">
     <div class="card rounded-3 employee-card">
         <div class="card-header py-3">
             <h4>@Property.StreetAddress, @Property.TownCity</h4>
diff --git a/src/PropertyPortfolioManager.Client/Pages/AccountList.razor b/src/PropertyPortfolioManager.Client/Pages/AccountList.razor
index 60f0fa7..6b5beb9 100644
--- a/src/PropertyPortfolioManager.Client/Pages/AccountList.razor
+++ b/src/PropertyPortfolioManager.Client/Pages/AccountList.razor
@@ -2,7 +2,23 @@
 
 
 <SectionContent SectionName="top-bar">
-    <div>Accounts</div>
+    <div class="row">
+        <div class="col">
+            <div>Accounts</div>
+        </div>
+        <div class="col">
+            <a href="accountedit">Create New Account</a>
+            @if (ActiveOnly)
+            {
+                <a class="float-end" @onclick="(() => IncludeInactive(true))">Include Inactive</a>
+            }
+            else
+            {
+                <a class="float-end" @onclick="(() => IncludeInactive(false))">Hide Inactive</a>
+            }
+        </div>
+    </div>
+
 </SectionContent>
 
 @if (accounts == null)
@@ -12,21 +28,6 @@
 else
 {
     <div class="page-content">
-        <div class="row">
-            <div class="col">
-                <a href="accountedit">Create New Account</a>
-            </div>
-            <div class="col">
-                @if (ActiveOnly)
-                {
-                    <a class="float-end" @onclick="(() => IncludeInactive(true))">Include Inactive</a>
-                }
-                else
-                {
-                    <a class="float-end" @onclick="(() => IncludeInactive(false))">Hide Inactive</a>
-                }
-            </div>
-        </div>
 
         <table class="table">
             <thead>
diff --git a/src/PropertyPortfolioManager.Client/Pages/ContactList.razor b/src/PropertyPortfolioManager.Client/Pages/ContactList.razor
index 70199d3..edc236e 100644
--- a/src/PropertyPortfolioManager.Client/Pages/ContactList.razor
+++ b/src/PropertyPortfolioManager.Client/Pages/ContactList.razor
@@ -1,7 +1,22 @@
 @page "/contact"
 
 <SectionContent SectionName="top-bar">
-    <div>Contacts</div>
+    <div class="row">
+        <div class="col">
+            <div>Contacts</div>
+        </div>
+        <div class="col">
+            <a href="contactedit">Create New Contact</a>
+            @if (ActiveOnly)
+            {
+                <a class="float-end" @onclick="(() => IncludeInactive(true))">Include Inactive</a>
+            }
+            else
+            {
+                <a class="float-end" @onclick="(() => IncludeInactive(false))">Hide Inactive</a>
+            }
+        </div>
+    </div>
 </SectionContent>
 
 @if (contacts == null)
@@ -11,22 +26,6 @@
 else
 {
     <div class="page-content">
-        <div class="row">
-            <div class="col">
-                <a href="contactedit">Create New Contact</a>
-            </div>
-            <div class="col">
-                @if (ActiveOnly)
-                {
-                    <a class="float-end" @onclick="(() => IncludeInactive(true))">Include Inactive</a>
-                }
-                else
-                {
-                    <a class="float-end" @onclick="(() => IncludeInactive(false))">Hide Inactive</a>
-                }
-            </div>
-        </div>
-
         <table class="table">
             <thead>
                 <tr>
diff --git a/src/PropertyPortfolioManager.Client/Pages/ContactTypeList.razor b/src/PropertyPortfolioManager.Client/Pages/ContactTypeList.razor
index dcbb160..d436558 100644
--- a/src/PropertyPortfolioManager.Client/Pages/ContactTypeList.razor
+++ b/src/PropertyPortfolioManager.Client/Pages/ContactTypeList.razor
@@ -1,7 +1,22 @@
 @page "/contacttype"
 
 <SectionContent SectionName="top-bar">
-    <div>Contact Types</div>
+    <div class="row">
+        <div class="col">
+            <div>Contact Types</div>
+        </div>
+        <div class="col">
+            <a href="contacttypeedit">Create New Contact Type</a>
+            @if (ActiveOnly)
+            {
+                <a class="float-end" @onclick="(() => IncludeInactive(true))">Include Inactive</a>
+            }
+            else
+            {
+                <a class="float-end" @onclick="(() => IncludeInactive(false))">Hide Inactive</a>
+            }
+        </div>
+    </div>
 </SectionContent>
 
 @if (contactypes == null)
@@ -11,22 +26,6 @@
 else
 {
     <div class="page-content">
-        <div class="row">
-            <div class="col">
-                <a href="contacttypeedit">Create New Contact Type</a>
-            </div>
-            <div class="col">
-                @if (ActiveOnly)
-                {
-                    <a class="float-end" @onclick="(() => IncludeInactive(true))">Include Inactive</a>
-                }
-                else
-                {
-                    <a class="float-end" @onclick="(() => IncludeInactive(false))">Hide Inactive</a>
-                }
-            </div>
-        </div>
-
         <table class="table">
             <thead>
                 <tr>
diff --git a/src/PropertyPortfolioManager.Client/Pages/Documents.razor b/src/PropertyPortfolioManager.Client/Pages/Documents.razor
index 9b9f4e1..2fa2bb1 100644
--- a/src/PropertyPortfolioManager.Client/Pages/Documents.razor
+++ b/src/PropertyPortfolioManager.Client/Pages/Documents.razor
@@ -1,7 +1,9 @@
 @page "/documents"
 @using static PropertyPortfolioManager.Client.Helpers.StringHelpers
 
-<h3>Documents</h3>
+<SectionContent SectionName="top-bar">
+    <div>Documents</div>
+</SectionContent>
 
 @if (Initialising)
 {
diff --git a/src/PropertyPortfolioManager.Client/Pages/PortfolioList.razor b/src/PropertyPortfolioManager.Client/Pages/PortfolioList.razor
index 9960489..e068217 100644
--- a/src/PropertyPortfolioManager.Client/Pages/PortfolioList.razor
+++ b/src/PropertyPortfolioManager.Client/Pages/PortfolioList.razor
@@ -1,7 +1,22 @@
 @page "/portfolio"
 
 <SectionContent SectionName="top-bar">
-    <div>Portfolios</div>
+    <div class="row">
+        <div class="col">
+            <div>Portfolios</div>
+        </div>
+        <div class="col">
+            <a href="portfolioedit">Create New Portfolio</a>
+            @if (ActiveOnly)
+            {
+                <a class="float-end" @onclick="(() => IncludeInactive(true))">Include Inactive</a>
+            }
+            else
+            {
+                <a class="float-end" @onclick="(() => IncludeInactive(false))">Hide Inactive</a>
+            }
+        </div>
+    </div>
 </SectionContent>
 
 @if (portfolios == null)
@@ -11,22 +26,6 @@
 else
 {
     <div class="page-content">
-        <div class="row">
-            <div class="col">
-                <a href="portfolioedit">Create New Portfolio</a>
-            </div>
-            <div class="col">
-                @if (ActiveOnly)
-                {
-                    <a class="float-end" @onclick="(() => IncludeInactive(true))">Include Inactive</a>
-                }
-                else
-                {
-                    <a class="float-end" @onclick="(() => IncludeInactive(false))">Hide Inactive</a>
-                }
-            </div>
-        </div>
-
         <table class="table">
             <thead>
                 <tr>
diff --git a/src/PropertyPortfolioManager.Client/Pages/TenancyList.razor b/src/PropertyPortfolioManager.Client/Pages/TenancyList.razor
index 6046af4..168432f 100644
--- a/src/PropertyPortfolioManager.Client/Pages/TenancyList.razor
+++ b/src/PropertyPortfolioManager.Client/Pages/TenancyList.razor
@@ -1,7 +1,22 @@
 @page "/tenancy"
 
 <SectionContent SectionName="top-bar">
-    <div>Tenancies</div>
+    <div class="row">
+        <div class="col">
+            <div>Tenancies</div>
+        </div>
+        <div class="col">
+            <a href="tenancyedit">Create New Tenancy</a>
+            @if (ActiveOnly)
+            {
+                <a class="float-end" @onclick="(() => IncludeInactive(true))">Include Inactive</a>
+            }
+            else
+            {
+                <a class="float-end" @onclick="(() => IncludeInactive(false))">Hide Inactive</a>
+            }
+        </div>
+    </div>
 </SectionContent>
 
 @if (tenancies == null)
@@ -11,22 +26,6 @@
 else
 {
     <div class="page-content">
-        <div class="row">
-            <div class="col">
-                <a href="tenancyedit">Create New Tenancy</a>
-            </div>
-            <div class="col">
-                @if (ActiveOnly)
-                {
-                    <a class="float-end" @onclick="(() => IncludeInactive(true))">Include Inactive</a>
-                }
-                else
-                {
-                    <a class="float-end" @onclick="(() => IncludeInactive(false))">Hide Inactive</a>
-                }
-            </div>
-        </div>
-
         <table class="table">
             <thead>
                 <tr>
diff --git a/src/PropertyPortfolioManager.Client/Pages/TenancyTypeList.razor b/src/PropertyPortfolioManager.Client/Pages/TenancyTypeList.razor
index c688304..f50f100 100644
--- a/src/PropertyPortfolioManager.Client/Pages/TenancyTypeList.razor
+++ b/src/PropertyPortfolioManager.Client/Pages/TenancyTypeList.razor
@@ -1,7 +1,22 @@
 @page "/tenancytype"
 
 <SectionContent SectionName="top-bar">
-    <div>Tenancy Types</div>
+    <div class="row">
+        <div class="col">
+            <div>Tenancy Types</div>
+        </div>
+        <div class="col">
+            <a href="tenancytypeedit">Create New Tenancy Type</a>
+            @if (ActiveOnly)
+            {
+                <a class="float-end" @onclick="(() => IncludeInactive(true))">Include Inactive</a>
+            }
+            else
+            {
+                <a class="float-end" @onclick="(() => IncludeInactive(false))">Hide Inactive</a>
+            }
+        </div>
+    </div>
 </SectionContent>
 
 @if (tenancytypes == null)
@@ -11,22 +26,6 @@
 else
 {
     <div class="page-content">
-        <div class="row">
-            <div class="col">
-                <a href="tenancytypeedit">Create New Tenancy Type</a>
-            </div>
-            <div class="col">
-                @if (ActiveOnly)
-                {
-                    <a class="float-end" @onclick="(() => IncludeInactive(true))">Include Inactive</a>
-                }
-                else
-                {
-                    <a class="float-end" @onclick="(() => IncludeInactive(false))">Hide Inactive</a>
-                }
-            </div>
-        </div>
-
         <table class="table">
             <thead>
                 <tr>
diff --git a/src/PropertyPortfolioManager.Client/Pages/UnitList.razor b/src/PropertyPortfolioManager.Client/Pages/UnitList.razor
index 5e028bd..7328335 100644
--- a/src/PropertyPortfolioManager.Client/Pages/UnitList.razor
+++ b/src/PropertyPortfolioManager.Client/Pages/UnitList.razor
@@ -1,7 +1,22 @@
 @page "/unit"
 
 <SectionContent SectionName="top-bar">
-    <div>Properties</div>
+    <div class="row">
+        <div class="col">
+            <div>Properties</div>
+        </div>
+        <div class="col">
+            <a href="unitedit">Create New Property</a>
+            @if (ActiveOnly)
+            {
+                <a class="float-end" @onclick="(() => IncludeInactive(true))">Include Inactive</a>
+            }
+            else
+            {
+                <a class="float-end" @onclick="(() => IncludeInactive(false))">Hide Inactive</a>
+            }
+        </div>
+    </div>
 </SectionContent>
 
 @if (units == null)
@@ -10,23 +25,6 @@
 }
 else
 {
-    <div class="page-content">
-        <div class="row">
-            <div class="col">
-                <a href="unitedit">Create New Property</a>
-            </div>
-            <div class="col">
-                @if (ActiveOnly)
-                {
-                    <a class="float-end" @onclick="(() => IncludeInactive(true))">Include Inactive</a>
-                }
-                else
-                {
-                    <a class="float-end" @onclick="(() => IncludeInactive(false))">Hide Inactive</a>
-                }
-            </div>
-        </div>
-
         <div class="row">
             @foreach (var unit in units)
             {           
@@ -41,6 +39,5 @@ else
 
             }
         </div>
-    </div>
 
 }
diff --git a/src/PropertyPortfolioManager.Client/Pages/UnitTypeList.razor b/src/PropertyPortfolioManager.Client/Pages/UnitTypeList.razor
index e56cc1c..ad5b9a6 100644
--- a/src/PropertyPortfolioManager.Client/Pages/UnitTypeList.razor
+++ b/src/PropertyPortfolioManager.Client/Pages/UnitTypeList.razor
@@ -1,7 +1,22 @@
 @page "/unittype"
 
 <SectionContent SectionName="top-bar">
-    <div>Unit Types</div>
+    <div class="row">
+        <div class="col">
+            <div>Unit Types</div>
+        </div>
+        <div class="col">
+            <a href="unittypeedit">Create New Unit Type</a>
+            @if (ActiveOnly)
+            {
+                <a class="float-end" @onclick="(() => IncludeInactive(true))">Include Inactive</a>
+            }
+            else
+            {
+                <a class="float-end" @onclick="(() => IncludeInactive(false))">Hide Inactive</a>
+            }
+        </div>
+    </div>
 </SectionContent>
 
 @if (unittypes == null)
@@ -11,22 +26,6 @@
 else
 {
     <div class="page-content">
-        <div class="row">
-            <div class="col">
-                <a href="unittypeedit">Create New Unit Type</a>
-            </div>
-            <div class="col">
-                @if (ActiveOnly)
-                {
-                    <a class="float-end" @onclick="(() => IncludeInactive(true))">Include Inactive</a>
-                }
-                else
-                {
-                    <a class="float-end" @onclick="(() => IncludeInactive(false))">Hide Inactive</a>
-                }
-            </div>
-        </div>
-
         <table class="table">
             <thead>
                 <tr>
diff --git a/src/PropertyPortfolioManager.Client/Shared/MainLayout.razor b/src/PropertyPortfolioManager.Client/Shared/MainLayout.razor
index 9a91a71..a6e853c 100644
--- a/src/PropertyPortfolioManager.Client/Shared/MainLayout.razor
+++ b/src/PropertyPortfolioManager.Client/Shared/MainLayout.razor
@@ -1,24 +1,25 @@
 @inherits LayoutComponentBase
+<div  class="d-flex flex-column min-vh-100">
+    <header>
+        <NavMenu />
+    </header>
+    <AuthorizeView>
+        <Authorized>
+            <div class="page-banner container-fluid px-4">
+                <SectionOutlet SectionName="top-bar" />
+            </div>
+        </Authorized>
+    </AuthorizeView>
 
-<header>
-    <NavMenu />
-</header>
-<AuthorizeView>
-    <Authorized>
-        <div class="page-banner container-fluid px-4">
-            <SectionOutlet SectionName="top-bar" />
-        </div>
-    </Authorized>
-</AuthorizeView>
+    <div class="container-fluid px-4 pt-4">
+        <main role="main" class="pb-3">
+            @Body
+        </main>
+    </div>
 
-<div class="container-fluid px-4 pt-4">
-    <main role="main" class="pb-3">
-        @Body
-    </main>
+    <footer class="mt-auto border-top footer text-muted bg-primary">
+        <div class="container-fluid">
+            &copy; 2023 - Property Portfolio Manager
+        </div>
+    </footer>
 </div>
-
-<footer class="border-top footer text-muted bg-primary">
-    <div class="container-fluid">
-        &copy; 2023 - Property Portfolio Manager
-    </div>
-</footer>
diff --git a/src/PropertyPortfolioManager.Client/wwwroot/css/app.css b/src/PropertyPortfolioManager.Client/wwwroot/css/app.css
index 7ce4aac..50d304d 100644
--- a/src/PropertyPortfolioManager.Client/wwwroot/css/app.css
+++ b/src/PropertyPortfolioManager.Client/wwwroot/css/app.css
@@ -30,10 +30,10 @@ ul.dropdown-menu .nav-link.active {
     border-radius: 1rem;
     border: solid 1px #e3e6eb;
     padding: 1rem;
+    margin-bottom: 1rem;
 }
 
 .footer {
-    position: absolute;
     bottom: 0;
     width: 100%;
     white-space: nowrap;