Feat(SQL, UI): Logic for Get-Many SQL Stored Procedures refactored to use Calc Stored Procedures and Dog Command Links page styling improved.

static/css/layouts/footer.css

@@ -1,57 +1,25 @@
 
+/* Footer */
 .footer {
-    background: #1f2937;
-    color: #f3f4f6;
-    padding: 4rem 0 2rem;
-}
-
-.footer-content {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 2rem;
-    margin-bottom: 2rem;
-}
-
-.footer-section h3 {
-    color: #fff;
-    margin-bottom: 1rem;
-    font-size: 1.2rem;
-}
-
-.footer-section ul {
-    list-style: none;
-    padding: 0;
-}
-
-.footer-section ul li {
-    margin-bottom: 0.5rem;
-}
-
-.footer-section a {
-    color: #f3f4f6;
-    text-decoration: none;
-    transition: color 0.3s ease;
-}
-
-.footer-section a:hover {
-    color: #fff;
-    text-decoration: underline;
-}
-
-.footer-bottom {
-    border-top: 1px solid #374151;
-    padding-top: 2rem;
+    padding: 1vh;
+    padding-left: 1vw;
+    padding-right: 1vw;
     text-align: center;
-    font-size: 0.9rem;
+    margin: 0;
+    height: 8vh !important;
+    overflow-y: auto;
+    background-color: var(--colour-accent);
+    /*
+    border-top-left-radius: 2.5vh;
+    border-top-right-radius: 2.5vh;
+    */
+    position: absolute;
+    /* top: 2.5vh; */
+    bottom: 0;
+    width: 98vw;
 }
 
-.footer-bottom a {
-    color: aquamarine;
-}
-
-@media (max-width: 768px) {
-    .footer-content {
-        grid-template-columns: 1fr;
-        text-align: center;
-    }
+.footer > h4, h5 {
+    padding: 0;
+    margin: 0;
 }

static/css/layouts/header.css

@@ -1,9 +1,10 @@
 
+/*
 header {
     background: white;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    /* position: fixed;
-    top: 0; */
+    / * position: fixed;
+    top: 0; * /
     width: 100%;
     z-index: 1000;
 }
@@ -34,4 +35,108 @@ header {
 }
 .nav-links a.button {
     color: white;
+}
+*/
+
+
+/* Navigation */
+.topnav {
+    border-bottom-left-radius: 2.5vh;
+    border-bottom-right-radius: 2.5vh;
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1;
+    flex-direction: row;
+    font-weight: bold;
+    font-size: 1vh;
+    max-height: 15vh;
+    height: 15vh;
+    align-items: flex-start;
+}
+.topnav a, .topnav label, .topnav p, .topnav h1 {
+    float: left;
+    display: flex;
+    text-align: center;
+    text-decoration: none;
+    width: 100%;
+    max-height: 15vh;
+    font-weight: normal;
+    justify-content: center;
+}
+.topnav a:hover {
+    background-color: var(--colour-page-background);
+}
+
+.topnav > .container {
+    max-width: 50%;
+    height: 100%;
+    align-items: center;
+    align-self: center;
+    display: flex;
+}
+.topnav select {
+    padding: 1vh;
+    margin: 1vh;
+    border-radius: 1vh;
+    border: 2px solid var(--border-colour);
+    font-weight: bold;
+    text-align: center;
+}
+.topnav select .collapsed {
+    width: 5vw;
+}
+.topnav select .expanded {
+    width: 25vw;
+}
+
+.company-name {
+    font-size: min(28px, calc(1vh * 7));
+}
+@media screen and (max-width: 450px) {
+    .company-name {
+        font-size: min(24px, calc(1vh * 7));
+    }
+}
+
+/* Page Filters */
+#formFilters {
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+  
+}
+#formFilters * {
+    font-size: 12px;
+}
+
+#formFilters .container {
+    max-width: fit-content;
+}
+#formFilters .container-input {
+    padding: 0 0.5vh;
+}
+
+#formFilters .container-input input {
+    max-width: 5vh;
+}
+
+#formFilters .container-input.filter.active {
+    width: 8vh;
+}
+#formFilters .container-input.filter.is_not_empty {
+    width: 12vh;
+}
+
+button.collapsed {
+    display: block;
+    opacity: 0;
+}
+
+form.filter button.save, form.filter button.button-cancel {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+form.filter button.save, form.filter button.button-cancel {
+    margin-top: 0;
+    margin-bottom: 1px;
 }

static/css/layouts/table-main.css

@@ -0,0 +1,65 @@
+
+#tableMain {
+    overflow-x: auto;
+    padding: 1vh;
+    max-width: 95vw; /* min(calc(1vh * 80), calc(1vw * 90)); */
+    width: min-content;
+    margin: 1vh auto;
+    align-items: normal;
+    justify-content: normal;
+}
+
+#tableMain * {
+    padding: 0.25vh 0.5vh;
+}
+
+#tableMain tbody{
+    max-height: 53vh;
+    overflow-y: auto;
+    min-width: fit-content;
+    max-width: fit-content;
+    overflow-x: visible;
+}
+#tableMain:has(tbody > div) tbody {
+}
+#tableMain tbody > div {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    justify-content: center;
+    justify-items: center;
+    justify-self: center;
+    align-content: center;
+    align-items: center;
+    align-self: center;
+    position: relative;
+    display: block;
+    width: 90vh;
+}
+
+#tableMain select, #tableMain input:not([type="checkbox"]), #tableMain textarea, #tableMain div {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+}
+
+#tableMain thead tr th, #tableMain tbody tr td {
+    width: 20vh;
+    min-width: 20vh;
+    padding: 0 0.5vh;
+}
+#tableMain tbody tr td {
+    height: 5vh;
+    padding-top: 0.5vh;
+}
+#tableMain tbody tr:not(:last-of-type) td {
+    padding-bottom: 0.5vh;
+}
+#tableMain thead tr th.active, #tableMain tbody tr td.active {
+    width: 6vh;
+    min-width: 6vh;
+}
+#tableMain tbody tr td.display_order, #tableMain thead tr th.display_order {
+    width: 5vh;
+    min-width: 5vh;
+}