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;

assets/components/releases/release.vue

@@ -81,18 +81,6 @@
                         <span class="chain">presents</span>
 
                         <a
-                            v-if="release.studio"
-                            :href="`/site/${release.studio.slug}`"
-                        >
-                            <img
-                                :src="`/img/logos/${release.network.slug}/${release.studio.slug}.png`"
-                                :title="release.studio.name"
-                                class="logo logo-site"
-                            >
-                        </a>
-
-                        <a
-                            v-else
                             :href="`/site/${release.site.slug}`"
                         >
                             <img

assets/css/_theme.scss

@@ -31,7 +31,7 @@ $profile: #222;
 $tile: #2a2a2a;
 
 $link: #cc4466;
-$empty: #222;
+$empty: #333;
 
 $male: #0af;
 $female: #f0a;

assets/js/curate.js

@@ -32,15 +32,12 @@ function curateSite(site, network) {
         name: site.name,
         slug: site.slug,
         url: site.url,
+        independent: site.independent,
     };
 
     if (site.releases) curatedSite.releases = site.releases.map(release => curateRelease(release));
     if (site.network || network) curatedSite.network = site.network || network;
 
-    if (site.parameters) {
-        curatedSite.independent = !!JSON.parse(site.parameters).independent;
-    }
-
     return curatedSite;
 }
 
@@ -60,10 +57,6 @@ function curateNetwork(network) {
         curatedNetwork.studios = network.studios;
     }
 
-    if (network.parameters) {
-        curatedNetwork.parameters = JSON.parse(network.parameters);
-    }
-
     return curatedNetwork;
 }
 

assets/js/fragments.js

@@ -4,6 +4,7 @@ const siteFragment = `
       name
       slug
       url
+      independent
       network {
         id
         name
@@ -19,6 +20,7 @@ const sitesFragment = `
       name
       slug
       url
+      independent
       network {
         id
         name

assets/js/networks/actions.js

@@ -21,8 +21,8 @@ function initNetworksActions(store, _router) {
                       name
                       slug
                       url
+                      independent
                       ${releasesFragment}
-                      parameters
                       network {
                         id
                         name

public/css/style.css

@@ -292,7 +292,7 @@
 /* $primary: #ff886c; */
 /* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
 .banner[data-v-42bb19c4] {
-  background: #222;
+  background: #333;
   flex-shrink: 0;
   white-space: nowrap;
   overflow-x: auto;
@@ -684,6 +684,11 @@
           justify-content: stretch;
   overflow-y: auto;
 }
+.network.nosites[data-v-e2e12602] {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+            flex-direction: column;
+}
 .content-inner[data-v-e2e12602] {
   padding: 0;
 }
@@ -723,13 +728,22 @@
 .header[data-v-e2e12602] {
   width: 100%;
   height: 3rem;
-  display: none;
+  display: -webkit-box;
+  display: flex;
   flex-shrink: 0;
   -webkit-box-pack: center;
           justify-content: center;
   border-bottom: solid 1px rgba(0, 0, 0, 0.1);
   background: #222;
 }
+.header.hideable[data-v-e2e12602] {
+    display: none;
+}
+.header .logo[data-v-e2e12602] {
+    max-width: 20rem;
+    height: 100%;
+    padding: .5rem;
+}
 .sites.compact[data-v-e2e12602] {
   display: none;
   background: #222;
@@ -746,7 +760,8 @@
   font-weight: bold;
 }
 @media (max-width: 720px) {
-.header[data-v-e2e12602] {
+.header[data-v-e2e12602],
+  .header.hideable[data-v-e2e12602] {
     display: -webkit-box;
     display: flex;
 }
@@ -765,11 +780,6 @@
     -webkit-box-direction: normal;
             flex-direction: column;
 }
-.logo[data-v-e2e12602] {
-    max-width: 20rem;
-    height: 100%;
-    padding: .5rem;
-}
 .sidebar[data-v-e2e12602] {
     display: none;
     height: auto;

src/web/plugins/plugins.js

@@ -1,7 +1,9 @@
 'use strict';
 
 const ActorPlugins = require('./actors');
+const SitePlugins = require('./sites');
 
 module.exports = {
     ActorPlugins,
+    SitePlugins,
 };

src/web/plugins/sites.js

@@ -0,0 +1,26 @@
+'use strict';
+
+const { makeExtendSchemaPlugin, gql } = require('graphile-utils');
+
+const schemaExtender = makeExtendSchemaPlugin(_build => ({
+    typeDefs: gql`
+        extend type Site {
+            independent: Boolean @requires(columns: ["parameters"])
+        }
+    `,
+    resolvers: {
+        Site: {
+            independent(parent, _args, _context, _info) {
+                if (!parent.parameters) {
+                    return false;
+                }
+
+                const parameters = JSON.parse(parent.parameters);
+
+                return !!parameters.independent;
+            },
+        },
+    },
+}));
+
+module.exports = [schemaExtender];

src/web/server.js

@@ -11,7 +11,7 @@ const PgConnectionFilterPlugin = require('postgraphile-plugin-connection-filter'
 const PgSimplifyInflectorPlugin = require('@graphile-contrib/pg-simplify-inflector');
 const PgOrderByRelatedPlugin = require('@graphile-contrib/pg-order-by-related');
 
-const { ActorPlugins } = require('./plugins/plugins');
+const { ActorPlugins, SitePlugins } = require('./plugins/plugins');
 
 const {
     fetchReleases,
@@ -56,6 +56,7 @@ function initServer() {
                 PgConnectionFilterPlugin,
                 PgOrderByRelatedPlugin,
                 ...ActorPlugins,
+                ...SitePlugins,
             ],
         },
     ));