Improved network overview responsivity.

assets/components/networks/network.vue

@@ -24,22 +24,34 @@
                     class="description"
                 >{{ network.description }}</p>
 
-                <template v-if="sites.length">
+                <Sites
-                    <ul class="nolist sites">
+                    v-if="sites.length"
-                        <li
+                    :sites="sites"
-                            v-for="site in sites"
+                />
-                            :key="`site-${site.id}`"
+            </div>
+
+            <div class="header">
+                <a
+                    :href="network.url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="title"
                 >
-                            <SiteTile :site="site" />
+                    <img
-                        </li>
+                        :src="`/img/logos/${network.slug}/network.png`"
-                    </ul>
+                        class="logo"
-                </template>
+                    >
+                </a>
             </div>
 
             <div class="content-inner">
-                <Releases
+                <Sites
-                    :releases="releases"
+                    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);
+    filter: $logo-shadow;
-    overflow-y: auto;
+}
+
+.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 {
+    .logo {
-        height: 20rem;
+        max-width: 20rem;
-        overflow: hidden;
+        height: 100%;
+        padding: .5rem;
     }
 
-    .sites {
+    .sidebar {
-        grid-template-columns: repeat(auto-fit, minmax(15rem, .5fr));
+        display: none;
-        overflow-y: auto;
+        height: auto;
+        width: 100%;
+        overflow: hidden;
     }
 }
 </style>

assets/components/site/site.vue

@@ -1,155 +0,0 @@
-<template>
-    <div
-        v-if="site"
-        class="content site"
-    >
-        <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"
-                >
-                    <object
-                        :data="`/img/logos/${site.network.slug}/${site.slug}.png`"
-                        :title="site.name"
-                        type="image/png"
-                        class="logo"
-                    ><h2>{{ site.name }}</h2></object>
-
-                    <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"
-                        >
-                            <object
-                                :data="`/img/logos/${site.network.slug}/network.png`"
-                                :title="site.network.name"
-                                type="image/png"
-                                class="networklogo"
-                            >{{ site.network.name }}</object>
-                        </a>
-                    </span>
-                </span>
-            </div>
-
-            <p class="description">{{ site.description }}</p>
-
-            <Releases
-                :releases="releases"
-                :context="site.name"
-            />
-        </div>
-    </div>
-</template>
-
-<script>
-import FilterBar from '../header/filter-bar.vue';
-import Releases from '../releases/releases.vue';
-
-async function fetchSite() {
-    this.site = await this.$store.dispatch('fetchSites', { siteSlug: this.$route.params.siteSlug });
-    this.releases = this.site.releases;
-}
-
-async function mounted() {
-    await this.fetchSite();
-
-    this.pageTitle = this.site.name;
-}
-
-export default {
-    components: {
-        FilterBar,
-        Releases,
-    },
-    data() {
-        return {
-            site: null,
-            releases: null,
-            pageTitle: null,
-        };
-    },
-    mounted,
-    methods: {
-        fetchSite,
-    },
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.header {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-}
-
-.title {
-    display: inline-flex;
-    align-items: top;
-    margin: 0 1rem 0 0;
-
-    &:hover .icon {
-        fill: $primary;
-    }
-}
-
-.heading {
-    padding: 0;
-    margin: 0 0 1rem 0;
-}
-
-.link {
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
-    align-items: flex-end;
-}
-
-.logo {
-    width: 20rem;
-    max-height: 8rem;
-    object-fit: contain;
-    margin: 0 .5rem 1rem 0;
-}
-
-.networklogo-container {
-    display: flex;
-    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;
-    grid-gap: 1rem;
-    margin: 0 0 1rem 0;
-}
-
-.sites {
-    grid-template-columns: repeat(auto-fit, 15rem);
-}
-</style>

assets/components/tags/tags.vue

@@ -10,16 +10,6 @@
             />
         </div>
 
-        <h3>Ethnicity</h3>
-
-        <div class="tiles">
-            <Tag
-                v-for="tag in tags.ethnicity"
-                :key="`tag-${tag.id}`"
-                :tag="tag"
-            />
-        </div>
-
         <h3>Penetration</h3>
 
         <div class="tiles">
@@ -40,6 +30,16 @@
             />
         </div>
 
+        <h3>Ethnicity</h3>
+
+        <div class="tiles">
+            <Tag
+                v-for="tag in tags.ethnicity"
+                :key="`tag-${tag.id}`"
+                :tag="tag"
+            />
+        </div>
+
         <h3>Finish</h3>
 
         <div class="tiles">

assets/js/router.js

@@ -3,7 +3,7 @@ import VueRouter from 'vue-router';
 
 import Home from '../components/home/home.vue';
 import Release from '../components/releases/release.vue';
-import Site from '../components/site/site.vue';
+import Site from '../components/sites/site.vue';
 import Network from '../components/networks/network.vue';
 import Networks from '../components/networks/networks.vue';
 import Actor from '../components/actors/actor.vue';

public/css/style.css

@@ -519,28 +519,28 @@
 }
 
 /* $primary: #ff886c; */
-.header[data-v-3e57cf44] {
+.header[data-v-194630f6] {
   display: -webkit-box;
   display: flex;
   flex-wrap: wrap;
   -webkit-box-pack: justify;
           justify-content: space-between;
 }
-.title[data-v-3e57cf44] {
+.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-3e57cf44] {
+.title:hover .icon[data-v-194630f6] {
     fill: #ff6c88;
 }
-.heading[data-v-3e57cf44] {
+.heading[data-v-194630f6] {
   padding: 0;
   margin: 0 0 1rem 0;
 }
-.link[data-v-3e57cf44] {
+.link[data-v-194630f6] {
   display: -webkit-box;
   display: flex;
   flex-shrink: 0;
@@ -550,20 +550,20 @@
   -webkit-box-align: end;
           align-items: flex-end;
 }
-.logo[data-v-3e57cf44] {
+.logo[data-v-194630f6] {
   width: 20rem;
   max-height: 8rem;
   -o-object-fit: contain;
      object-fit: contain;
   margin: 0 .5rem 1rem 0;
 }
-.networklogo-container[data-v-3e57cf44] {
+.networklogo-container[data-v-194630f6] {
   display: -webkit-box;
   display: flex;
   -webkit-box-align: center;
           align-items: center;
 }
-.networklogo[data-v-3e57cf44] {
+.networklogo[data-v-194630f6] {
   color: #222;
   width: 15rem;
   max-height: 6rem;
@@ -574,13 +574,13 @@
      object-position: 100% 0;
   margin: 0 0 0 .5rem;
 }
-.sites[data-v-3e57cf44],
+.sites[data-v-194630f6],
-.scenes[data-v-3e57cf44] {
+.scenes[data-v-194630f6] {
   display: grid;
   grid-gap: 1rem;
   margin: 0 0 1rem 0;
 }
-.sites[data-v-3e57cf44] {
+.sites[data-v-194630f6] {
   grid-template-columns: repeat(auto-fit, 15rem);
 }
 
@@ -631,6 +631,32 @@
   margin: 0;
 }
 
+/* $primary: #ff886c; */
+.sites[data-v-7bebaa3e] {
+  display: grid;
+  grid-gap: 1rem;
+  padding: 1rem;
+  margin: 0;
+  grid-template-columns: 1fr;
+  overflow-y: auto;
+}
+.sites.compact[data-v-7bebaa3e] {
+    display: -webkit-box;
+    display: flex;
+    overflow-x: auto;
+}
+.sites.compact .tile[data-v-7bebaa3e] {
+      width: 15rem;
+      margin: 0 1rem 0 0;
+}
+
+/* $primary: #ff886c; */
+@media (max-width: 1200px) {
+.releases .tiles {
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+}
+}
+
 /* $primary: #ff886c; */
 .network[data-v-e2e12602] {
   display: -webkit-box;
@@ -646,49 +672,71 @@
 }
 .sidebar[data-v-e2e12602] {
   height: 100%;
+  width: 18rem;
   display: -webkit-box;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
           flex-direction: column;
-  background: #222;
+  flex-shrink: 0;
   color: #fff;
-  width: 25rem;
+  border-right: solid 1px rgba(0, 0, 0, 0.1);
   overflow: hidden;
 }
+.sidebar .title[data-v-e2e12602] {
+  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+}
 .logo[data-v-e2e12602] {
   width: 100%;
   max-height: 8rem;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: center;
+          justify-content: center;
   -o-object-fit: contain;
      object-fit: contain;
   box-sizing: border-box;
-  padding: 1rem 2rem;
-  border-bottom: solid 1px rgba(255, 255, 255, 0.075);
-  margin: 0;
-  -webkit-filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
-          filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
-}
-.sites[data-v-e2e12602] {
-  display: grid;
-  grid-gap: 1rem;
   padding: 1rem;
   margin: 0;
-  grid-template-columns: repeat(2, 0.5fr);
+  -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));
-  overflow-y: auto;
+          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] {
+  width: 100%;
+  height: 4rem;
+  display: none;
+  -webkit-box-pack: center;
+          justify-content: center;
+  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
 }
 @media (max-width: 720px) {
+.header[data-v-e2e12602] {
+    display: -webkit-box;
+    display: flex;
+}
+.sites.compact[data-v-e2e12602] {
+    display: -webkit-box;
+    display: flex;
+    padding: 0 1rem 1rem 1rem;
+}
 .network[data-v-e2e12602] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
             flex-direction: column;
 }
-.sidebar[data-v-e2e12602] {
+.logo[data-v-e2e12602] {
-    height: 20rem;
+    max-width: 20rem;
-    overflow: hidden;
+    height: 100%;
+    padding: .5rem;
 }
-.sites[data-v-e2e12602] {
+.sidebar[data-v-e2e12602] {
-    grid-template-columns: repeat(auto-fit, minmax(15rem, 0.5fr));
+    display: none;
-    overflow-y: auto;
+    height: auto;
+    width: 100%;
+    overflow: hidden;
 }
 }