Further network layout improvements.

assets/components/networks/network.vue

@@ -45,11 +45,34 @@
             </div>
 
             <div class="content-inner">
-                <Sites
+                <div
                     v-if="sites.length"
-                    :sites="sites"
                     class="compact"
-                />
+                >
+                    <span
+                        v-if="expanded"
+                        class="expand"
+                        @click="expanded = false"
+                    >⇱ collapse</span>
+
+                    <Sites
+                        :sites="sites"
+                        class="compact"
+                        :class="{ expanded }"
+                    />
+
+                    <span
+                        v-if="!expanded"
+                        class="expand"
+                        @click="expanded = true"
+                    >expand ⇲</span>
+
+                    <span
+                        v-if="expanded"
+                        class="expand"
+                        @click="expanded = false"
+                    >⇱ collapse</span>
+                </div>
 
                 <Releases :releases="releases" />
             </div>
@@ -89,6 +112,7 @@ export default {
             sites: null,
             releases: [],
             pageTitle: null,
+            expanded: false,
         };
     },
     mounted,
@@ -119,14 +143,22 @@ export default {
     overflow-y: auto;
 }
 
+.content-inner {
+    padding: 0;
+}
+
+.releases {
+    padding: 1rem;
+}
+
 .sidebar {
     height: 100%;
     width: 18rem;
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
-    color: $text-contrast;
     border-right: solid 1px $shadow-hint;
+    color: $text-contrast;
     overflow: hidden;
 }
 
@@ -146,11 +178,8 @@ export default {
     filter: $logo-shadow;
 }
 
-.sites.compact {
-    display: none;
-}
-
 .header {
+    background: $profile;
     width: 100%;
     height: 4rem;
     display: none;
@@ -158,6 +187,19 @@ export default {
     border-bottom: solid 1px $shadow-hint;
 }
 
+.sites.compact {
+    display: none;
+}
+
+.expand {
+    display: none;
+    padding: .5rem;
+    text-align: center;
+    cursor: pointer;
+    font-size: .9rem;
+    font-weight: bold;
+}
+
 @media(max-width: $breakpoint) {
     .header {
         display: flex;
@@ -165,7 +207,14 @@ export default {
 
     .sites.compact {
         display: flex;
-        padding: 0 1rem 1rem 1rem;
+
+        &.expanded {
+            display: grid;
+        }
+    }
+
+    .expand {
+        display: block;
     }
 
     .network {

assets/components/sites/site.vue

@@ -5,52 +5,42 @@
     >
         <FilterBar :fetch-releases="fetchSite" />
 
-        <div class="content-inner">
-            <div class="header">
-                <a
-                    v-if="site.url"
-                    :href="site.url"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="title"
+        <div class="header">
+            <a
+                v-if="site.url"
+                :href="site.url"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="title"
+            >
+                <img
+                    :src="`/img/logos/${site.network.slug}/${site.slug}.png`"
+                    :title="site.name"
+                    :alt="site.name"
+                    class="logo"
                 >
-                    <object
-                        :data="`/img/logos/${site.network.slug}/${site.slug}.png`"
-                        :title="site.name"
-                        type="image/png"
-                        class="logo"
-                    ><h2>{{ site.name }}</h2></object>
+            </a>
 
-                    <Icon
-                        icon="new-tab"
-                        class="icon-href"
-                    />
-                </a>
-
-                <span class="link">
-                    <span class="networklogo-container">
-                        Part of
-                        <a
-                            :href="`/network/${site.network.slug}`"
-                            class="networklogo-link"
+            <span class="link">
+                <span class="networklogo-container">
+                    Part of
+                    <a
+                        :href="`/network/${site.network.slug}`"
+                        class="networklogo-link"
+                    >
+                        <img
+                            :src="`/img/logos/${site.network.slug}/network.png`"
+                            :title="site.network.name"
+                            :alt="site.network.name"
+                            class="logo"
                         >
-                            <object
-                                :data="`/img/logos/${site.network.slug}/network.png`"
-                                :title="site.network.name"
-                                type="image/png"
-                                class="networklogo"
-                            >{{ site.network.name }}</object>
-                        </a>
-                    </span>
+                    </a>
                 </span>
-            </div>
+            </span>
+        </div>
 
-            <p class="description">{{ site.description }}</p>
-
-            <Releases
-                :releases="releases"
-                :context="site.name"
-            />
+        <div class="content-inner">
+            <Releases :releases="releases" />
         </div>
     </div>
 </template>
@@ -93,19 +83,16 @@ export default {
 @import 'theme';
 
 .header {
+    background: $profile;
     display: flex;
+    align-items: center;
     flex-wrap: wrap;
     justify-content: space-between;
+    border-bottom: solid 1px $shadow-weak;
 }
 
 .title {
-    display: inline-flex;
-    align-items: top;
-    margin: 0 1rem 0 0;
-
-    &:hover .icon {
-        fill: $primary;
-    }
+    padding: 1rem;
 }
 
 .heading {
@@ -122,7 +109,7 @@ export default {
 
 .logo {
     width: 20rem;
-    max-height: 8rem;
+    max-height: 6rem;
     object-fit: contain;
     margin: 0 .5rem 1rem 0;
 }
@@ -132,16 +119,6 @@ export default {
     align-items: center;
 }
 
-.networklogo {
-    color: $text;
-    width: 15rem;
-    max-height: 6rem;
-    font-weight: bold;
-    object-fit: contain;
-    object-position: 100% 0;
-    margin: 0 0 0 .5rem;
-}
-
 .sites,
 .scenes {
     display: grid;

assets/components/sites/sites.vue

@@ -36,8 +36,7 @@ export default {
     grid-template-columns: 1fr;
     overflow-y: auto;
 
-    &.compact {
-        display: flex;
+    &.compact:not(.expanded) {
         overflow-x: auto;
 
         .tile {
@@ -45,5 +44,9 @@ export default {
             margin: 0 1rem 0 0;
         }
     }
+
+    &.expanded {
+        grid-template-columns: repeat(2, .5fr);
+    }
 }
 </style>

public/css/style.css

@@ -520,21 +520,18 @@
 
 /* $primary: #ff886c; */
 .header[data-v-194630f6] {
+  background: #222;
   display: -webkit-box;
   display: flex;
+  -webkit-box-align: center;
+          align-items: center;
   flex-wrap: wrap;
   -webkit-box-pack: justify;
           justify-content: space-between;
+  border-bottom: solid 1px rgba(0, 0, 0, 0.2);
 }
 .title[data-v-194630f6] {
-  display: -webkit-inline-box;
-  display: inline-flex;
-  -webkit-box-align: top;
-          align-items: top;
-  margin: 0 1rem 0 0;
-}
-.title:hover .icon[data-v-194630f6] {
-    fill: #ff6c88;
+  padding: 1rem;
 }
 .heading[data-v-194630f6] {
   padding: 0;
@@ -552,7 +549,7 @@
 }
 .logo[data-v-194630f6] {
   width: 20rem;
-  max-height: 8rem;
+  max-height: 6rem;
   -o-object-fit: contain;
      object-fit: contain;
   margin: 0 .5rem 1rem 0;
@@ -563,17 +560,6 @@
   -webkit-box-align: center;
           align-items: center;
 }
-.networklogo[data-v-194630f6] {
-  color: #222;
-  width: 15rem;
-  max-height: 6rem;
-  font-weight: bold;
-  -o-object-fit: contain;
-     object-fit: contain;
-  -o-object-position: 100% 0;
-     object-position: 100% 0;
-  margin: 0 0 0 .5rem;
-}
 .sites[data-v-194630f6],
 .scenes[data-v-194630f6] {
   display: grid;
@@ -640,15 +626,16 @@
   grid-template-columns: 1fr;
   overflow-y: auto;
 }
-.sites.compact[data-v-7bebaa3e] {
-    display: -webkit-box;
-    display: flex;
+.sites.compact[data-v-7bebaa3e]:not(.expanded) {
     overflow-x: auto;
 }
-.sites.compact .tile[data-v-7bebaa3e] {
+.sites.compact:not(.expanded) .tile[data-v-7bebaa3e] {
       width: 15rem;
       margin: 0 1rem 0 0;
 }
+.sites.expanded[data-v-7bebaa3e] {
+    grid-template-columns: repeat(2, 0.5fr);
+}
 
 /* $primary: #ff886c; */
 @media (max-width: 1200px) {
@@ -670,6 +657,12 @@
           justify-content: stretch;
   overflow-y: auto;
 }
+.content-inner[data-v-e2e12602] {
+  padding: 0;
+}
+.releases[data-v-e2e12602] {
+  padding: 1rem;
+}
 .sidebar[data-v-e2e12602] {
   height: 100%;
   width: 18rem;
@@ -679,8 +672,8 @@
   -webkit-box-direction: normal;
           flex-direction: column;
   flex-shrink: 0;
-  color: #fff;
   border-right: solid 1px rgba(0, 0, 0, 0.1);
+  color: #fff;
   overflow: hidden;
 }
 .sidebar .title[data-v-e2e12602] {
@@ -701,10 +694,8 @@
   -webkit-filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
           filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
 }
-.sites.compact[data-v-e2e12602] {
-  display: none;
-}
 .header[data-v-e2e12602] {
+  background: #222;
   width: 100%;
   height: 4rem;
   display: none;
@@ -712,6 +703,17 @@
           justify-content: center;
   border-bottom: solid 1px rgba(0, 0, 0, 0.1);
 }
+.sites.compact[data-v-e2e12602] {
+  display: none;
+}
+.expand[data-v-e2e12602] {
+  display: none;
+  padding: .5rem;
+  text-align: center;
+  cursor: pointer;
+  font-size: .9rem;
+  font-weight: bold;
+}
 @media (max-width: 720px) {
 .header[data-v-e2e12602] {
     display: -webkit-box;
@@ -720,7 +722,12 @@
 .sites.compact[data-v-e2e12602] {
     display: -webkit-box;
     display: flex;
-    padding: 0 1rem 1rem 1rem;
+}
+.sites.compact.expanded[data-v-e2e12602] {
+      display: grid;
+}
+.expand[data-v-e2e12602] {
+    display: block;
 }
 .network[data-v-e2e12602] {
     -webkit-box-orient: vertical;