Improved network overview responsivity.

assets/components/networks/network.vue

@@ -24,22 +24,34 @@
                     class="description"
                 >{{ network.description }}</p>
 
-                <template v-if="sites.length">
-                    <ul class="nolist sites">
-                        <li
-                            v-for="site in sites"
-                            :key="`site-${site.id}`"
-                        >
-                            <SiteTile :site="site" />
-                        </li>
-                    </ul>
-                </template>
+                <Sites
+                    v-if="sites.length"
+                    :sites="sites"
+                />
+            </div>
+
+            <div class="header">
+                <a
+                    :href="network.url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="title"
+                >
+                    <img
+                        :src="`/img/logos/${network.slug}/network.png`"
+                        class="logo"
+                    >
+                </a>
             </div>
 
             <div class="content-inner">
-                <Releases
-                    :releases="releases"
+                <Sites
+                    v-if="sites.length"
+                    :sites="sites"
+                    class="compact"
                 />
+
+                <Releases :releases="releases" />
             </div>
         </div>
     </div>
@@ -48,7 +60,7 @@
 <script>
 import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';
-import SiteTile from '../tile/site.vue';
+import Sites from '../sites/sites.vue';
 
 async function fetchNetwork() {
     this.network = await this.$store.dispatch('fetchNetworks', this.$route.params.networkSlug);
@@ -69,7 +81,7 @@ export default {
     components: {
         FilterBar,
         Releases,
-        SiteTile,
+        Sites,
     },
     data() {
         return {
@@ -86,6 +98,16 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import 'theme';
+
+@media(max-width: $breakpoint3) {
+    .releases .tiles {
+        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+    }
+}
+</style>
+
 <style lang="scss" scoped>
 @import 'theme';
 
@@ -99,47 +121,68 @@ export default {
 
 .sidebar {
     height: 100%;
+    width: 18rem;
     display: flex;
     flex-direction: column;
-    background: $profile;
+    flex-shrink: 0;
     color: $text-contrast;
-    width: 25rem;
+    border-right: solid 1px $shadow-hint;
     overflow: hidden;
 }
 
+.sidebar .title {
+    border-bottom: solid 1px $shadow-hint;
+}
+
 .logo {
     width: 100%;
     max-height: 8rem;
+    display: flex;
+    justify-content: center;
     object-fit: contain;
     box-sizing: border-box;
-    padding: 1rem 2rem;
-    border-bottom: solid 1px $highlight-hint;
-    margin: 0;
-    filter: $logo-highlight;
-}
-
-.sites {
-    display: grid;
-    grid-gap: 1rem;
     padding: 1rem;
     margin: 0;
-    grid-template-columns: repeat(2, .5fr);
-    overflow-y: auto;
+    filter: $logo-shadow;
+}
+
+.sites.compact {
+    display: none;
+}
+
+.header {
+    width: 100%;
+    height: 4rem;
+    display: none;
+    justify-content: center;
+    border-bottom: solid 1px $shadow-hint;
 }
 
 @media(max-width: $breakpoint) {
+    .header {
+        display: flex;
+    }
+
+    .sites.compact {
+        display: flex;
+        padding: 0 1rem 1rem 1rem;
+    }
+
     .network {
         flex-direction: column;
     }
 
-    .sidebar {
-        height: 20rem;
-        overflow: hidden;
+    .logo {
+        max-width: 20rem;
+        height: 100%;
+        padding: .5rem;
     }
 
-    .sites {
-        grid-template-columns: repeat(auto-fit, minmax(15rem, .5fr));
-        overflow-y: auto;
+    .sidebar {
+        display: none;
+        height: auto;
+        width: 100%;
+        overflow: hidden;
     }
 }
 </style>