Simplified single-site network overview. Added Jules Jordan favicons.

assets/components/networks/network.vue

@@ -5,8 +5,14 @@
     >
         <FilterBar :fetch-releases="fetchNetwork" />
 
-        <div class="network">
-            <div class="sidebar">
+        <div
+            class="network"
+            :class="{ nosites: sites.length === 0 }"
+        >
+            <div
+                v-show="sites.length > 0"
+                class="sidebar"
+            >
                 <a
                     v-tooltip.bottom="`Go to ${network.url}`"
                     :href="network.url"
@@ -31,7 +37,10 @@
                 />
             </div>
 
-            <div class="header">
+            <div
+                class="header"
+                :class="{ hideable: sites.length > 0 }"
+            >
                 <a
                     v-tooltip.bottom="`Go to ${network.url}`"
                     :href="network.url"
@@ -130,6 +139,10 @@ export default {
     flex-grow: 1;
     justify-content: stretch;
     overflow-y: auto;
+
+    &.nosites {
+        flex-direction: column;
+    }
 }
 
 .content-inner {
@@ -169,11 +182,21 @@ export default {
 .header {
     width: 100%;
     height: 3rem;
-    display: none;
+    display: flex;
     flex-shrink: 0;
     justify-content: center;
     border-bottom: solid 1px $shadow-hint;
     background: $profile;
+
+    &.hideable {
+        display: none;
+    }
+
+    .logo {
+        max-width: 20rem;
+        height: 100%;
+        padding: .5rem;
+    }
 }
 
 .sites.compact {
@@ -194,7 +217,8 @@ export default {
 }
 
 @media(max-width: $breakpoint) {
-    .header {
+    .header,
+    .header.hideable {
         display: flex;
     }
 
@@ -214,12 +238,6 @@ export default {
         flex-direction: column;
     }
 
-    .logo {
-        max-width: 20rem;
-        height: 100%;
-        padding: .5rem;
-    }
-
     .sidebar {
         display: none;
         height: auto;