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

@@ -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();

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;
 }

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;
 }
 

web/app/src/components/FarmStatus.vue

@@ -26,7 +26,6 @@ const explanation = computed(() => {
 
 <style>
 span#farmstatus {
-  margin: 0 auto;
   cursor: default;
 }
 span#farmstatus span {