From 7b31eba8d7614e82cfcc4583e1dd3c2f40f87944 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Sat, 2 Mar 2024 23:11:33 +0100
Subject: [PATCH] Webapp: improve positioning of the farm status indicator

Split the header into two or three parts, depending on the number of
columns shown. The farm status indicator will be above the middle column
(in 3 col mode) or at the right edge of the left column (in 2 col mode).

Also I reverted the hiding of the farm status when SocketIO has
disconnected, as that disconnect happens when navigation between tabs.
That created a too 'blinky' interface, so now it just shows the last-known
farm status.
---
 web/app/src/App.vue                   | 10 +++++---
 web/app/src/assets/base.css           | 35 ++++++++++++++++++++++++---
 web/app/src/components/ApiSpinner.vue |  2 +-
 web/app/src/components/FarmStatus.vue |  1 -
 4 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/web/app/src/App.vue b/web/app/src/App.vue
index b707f77a..0e716118 100644
--- a/web/app/src/App.vue
+++ b/web/app/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <header>
+  <header class="mainmenu">
     <router-link :to="{ name: 'index' }" class="navbar-brand">{{ flamencoName }}</router-link>
     <nav>
       <ul>
@@ -17,7 +17,11 @@
         </li>
       </ul>
     </nav>
-    <farm-status v-if="socketIOConnected" :status="farmStatus.status()" />
+  </header>
+  <header class="farmstatus">
+    <farm-status :status="farmStatus.status()" />
+  </header>
+  <header class="links">
     <api-spinner />
     <span class="app-version">
       <a :href="backendURL('/flamenco-addon.zip')">add-on</a>
@@ -51,7 +55,6 @@ export default {
     flamencoVersion: DEFAULT_FLAMENCO_VERSION,
     backendURL: backendURL,
     farmStatus: useFarmStatus(),
-    socketIOConnected: false,
   }),
   mounted() {
     window.app = this;
@@ -62,7 +65,6 @@ export default {
     this.$watch(
       () => sockStatus.isConnected,
       (isConnected) => {
-        this.socketIOConnected = isConnected;
         if (!isConnected) return;
         if (!sockStatus.wasEverDisconnected) return;
         this.socketIOReconnect();
diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index eddcb115..bda4cd4d 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -111,7 +111,7 @@ body {
   display: grid;
   grid-gap: var(--grid-gap);
   grid-template-areas:
-    "header header header"
+    "header-L header-M header-R"
     "col-1 col-2 col-3"
     "footer footer footer";
   grid-template-columns: 1fr 1fr 1fr;
@@ -124,7 +124,7 @@ body {
 
 body.is-two-columns #app {
   grid-template-areas:
-    "header header"
+    "header-L header-R"
     "col-1 col-2"
     "footer footer";
   grid-template-columns: 1fr 1fr;
@@ -134,7 +134,7 @@ body.is-two-columns #app {
 @media (max-width: 1280px) {
   #app {
     grid-template-areas:
-    "header header"
+    "header-L header-R"
     "col-1 col-2"
     "col-3 col-3"
     "footer footer";
@@ -206,10 +206,37 @@ header {
   align-items: center;
   color: var(--color-text-muted);
   display: flex;
-  grid-area: header;
   padding: 0 var(--spacer-sm);
 }
 
+header.mainmenu {
+  grid-area: header-L;
+}
+header.farmstatus {
+  grid-area: header-M;
+  margin-left: auto;
+  margin-right: auto;
+}
+@media (max-width: 1280px) {
+  header.farmstatus {
+    grid-area: header-L;
+    margin-right: 0;
+  }
+}
+@media (max-width: 1070px) {
+  header.farmstatus {
+    /* No more space to show it in the header. */
+    display: none;
+  }
+}
+body.is-two-columns header.farmstatus {
+  grid-area: header-L;
+  margin-right: 0;
+}
+header.links {
+  grid-area: header-R;
+}
+
 header nav {
   margin-right: auto;
 }
diff --git a/web/app/src/components/ApiSpinner.vue b/web/app/src/components/ApiSpinner.vue
index ff98436e..a0f09b1b 100644
--- a/web/app/src/components/ApiSpinner.vue
+++ b/web/app/src/components/ApiSpinner.vue
@@ -23,7 +23,7 @@ span {
   transition-delay: 250ms;
   transition-duration: 500ms;
   font-weight: bold;
-  margin-right: 2rem;
+  margin-right: auto;
   position: relative;
 }
 
diff --git a/web/app/src/components/FarmStatus.vue b/web/app/src/components/FarmStatus.vue
index 9ccf0eb4..1575851c 100644
--- a/web/app/src/components/FarmStatus.vue
+++ b/web/app/src/components/FarmStatus.vue
@@ -26,7 +26,6 @@ const explanation = computed(() => {
 
 <style>
 span#farmstatus {
-  margin: 0 auto;
   cursor: default;
 }
 span#farmstatus span {