Fix: \n 1. General styles cleanup. \n 2. Contact page - styling of input fields on mobile improved. \n 3. Services page - alignment error in technologies table on most devices, corrected. \n 4. Supplier Purchase Order page - items preview click event was not triggering, fixed end-to-end saving of new SPO, most changes copied to Manufacturing Purchase Orders, but not tested.

static/css/layouts/footer.css

@@ -0,0 +1,23 @@
+
+/* Footer */
+.footer {
+    padding: 1vh;
+    padding-left: 1vw;
+    padding-right: 1vw;
+    text-align: center;
+    margin: 0;
+    height: 8vh !important;
+    overflow-y: auto;
+    background-color: var(--c_purple_pastel);
+    border-top-left-radius: 2.5vh;
+    border-top-right-radius: 2.5vh;
+    position: absolute;
+    /* top: 2.5vh; */
+    bottom: 0;
+    width: 98vw;
+}
+
+.footer > h4, h5 {
+    padding: 0;
+    margin: 0;
+}

static/css/layouts/header.css

@@ -1,5 +1,72 @@
 
 
+/* 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;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    width: 100%;
+    max-height: 15vh;
+    font-weight: normal;
+    justify-content: center;
+}
+.topnav a:hover {
+    background-color: var(--c_purple_light);
+    color: var(--c_purple_dark);
+}
+
+.topnav > .container {
+    max-width: 50%;
+    height: 100%;
+    align-items: center;
+    align-self: center;
+    /* align-content: center; */
+    /* width: fit-content; */
+    display: flex;
+}
+.topnav select {
+    padding: 1vh;
+    margin: 1vh;
+    border-radius: 1vh;
+    /* background-color: var(--c_purple_light); */
+    color: var(--c_purple_dark);
+    border: 2px solid white;
+    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));
+    color: white;
+}
+@media screen and (max-width: 450px) {
+    .company-name {
+        font-size: min(24px, calc(1vh * 7));
+    }
+}
+
+/* Page Filters */
 button.collapsed {
     display: block;
     opacity: 0;

static/css/layouts/table-main.css

@@ -9,7 +9,11 @@
     justify-content: normal;
 }
 
-#tableMain select, #tableMain input, #tableMain textarea, #tableMain div {
+#tableMain * {
+    padding: 0.25vh 0.5vh;
+}
+
+#tableMain select, #tableMain input:not([type="checkbox"]), #tableMain textarea, #tableMain div {
     box-sizing: border-box;
     width: 100%;
     height: 100%;
@@ -20,6 +24,13 @@
     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;
@@ -27,4 +38,4 @@
 #tableMain tbody tr td.display_order, #tableMain thead tr th.display_order {
     width: 5vh;
     min-width: 5vh;
-}
+}