Added expand/collapse to compact network sites.

assets/components/networks/network.vue

@@ -56,6 +56,12 @@
             </div>
 
             <div class="content-inner">
+                <span
+                    v-show="expanded"
+                    class="expand collapse-sites noselect"
+                    @click="expanded = false"
+                ><Icon icon="arrow-up3" /></span>
+
                 <Sites
                     v-if="sites.length"
                     :sites="sites"
@@ -63,6 +69,18 @@
                     :class="{ expanded }"
                 />
 
+                <span
+                    v-show="!expanded"
+                    class="expand expand-sites noselect"
+                    @click="expanded = true"
+                ><Icon icon="arrow-down3" /></span>
+
+                <span
+                    v-show="expanded"
+                    class="expand expand-sites noselect"
+                    @click="expanded = false"
+                ><Icon icon="arrow-up3" /></span>
+
                 <Releases :releases="releases" />
             </div>
         </div>
@@ -189,23 +207,60 @@ export default {
     }
 }
 
+.expand {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: .5rem 0 0 0;
+    font-weight: bold;
+    font-size: .9rem;
+    cursor: pointer;
+
+    .icon {
+        margin: 0 .5rem;
+    }
+}
+
+.expand-sites {
+    color: $shadow;
+    display: none;
+
+    .icon {
+        fill: $shadow;
+    }
+
+    &:hover {
+        color: $shadow-strong;
+
+        .icon {
+            fill: $shadow-strong;
+        }
+    }
+}
+
+.collapse-sites {
+    background: $profile;
+    color: $highlight;
+
+    .icon {
+        fill: $highlight;
+    }
+
+    &:hover {
+        color: $text-contrast;
+
+        .icon {
+            fill: $text-contrast;
+        }
+    }
+}
+
 .sites.compact {
     display: none;
     background: $profile;
     grid-row: 1;
 }
 
-.expand {
-    display: none;
-    color: $text-contrast;
-    background: $profile;
-    padding: .5rem;
-    text-align: center;
-    cursor: pointer;
-    font-size: .9rem;
-    font-weight: bold;
-}
-
 @media(max-width: $breakpoint3) {
     .header,
     .header.hideable {
@@ -220,8 +275,8 @@ export default {
         }
     }
 
-    .expand {
-        display: block;
+    .expand-sites {
+        display: flex;
     }
 
     .network {

assets/components/sites/sites.vue

@@ -1,19 +1,6 @@
 <template>
     <div class="sites">
         <ul class="nolist tiles">
-            <a
-                v-if="network"
-                :href="network.url"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="tile"
-            >
-                <img
-                    :src="`/img/logos/${network.slug}/network.png`"
-                    class="logo"
-                >
-            </a>
-
             <li
                 v-for="site in sites"
                 :key="`site-${site.id}`"
@@ -67,7 +54,7 @@ export default {
 
     &.expanded {
         .tiles {
-            grid-template-columns: repeat(2, .5fr);
+            grid-template-columns: repeat(auto-fit, minmax(15rem, .5fr));
         }
     }
 }
@@ -81,8 +68,4 @@ export default {
     grid-template-columns: 1fr;
     overflow-y: auto;
 }
-
-.logo {
-    width: 15rem;
-}
 </style>