Added parent-child relations to network, showing parent network in sidebar. Added Burning Angel using Gamma API.

assets/components/networks/network.vue

@@ -7,10 +7,10 @@
 
         <div
             class="network"
-            :class="{ nosites: sites.length === 0 }"
+            :class="{ nosites: sites.length === 0 && networks.length === 0 }"
         >
             <div
-                v-show="sites.length > 0"
+                v-show="sites.length > 0 || networks.length > 0"
                 class="sidebar"
                 :class="{ expanded }"
             >
@@ -37,9 +37,21 @@
                     :sites="sites"
                     :class="{ expanded }"
                 />
+
+                <Network
+                    v-for="childNetwork in networks"
+                    :key="`network-${childNetwork.id}`"
+                    :network="childNetwork"
+                />
+
+                <Network
+                    v-if="network.parent"
+                    :network="network.parent"
+                    class="parent"
+                />
             </div>
 
-            <template v-if="sites.length > 0">
+            <template v-if="sites.length > 0 || networks.length > 0">
                 <span
                     v-show="!expanded"
                     class="expand expand-sidebar noselect"
@@ -55,7 +67,7 @@
 
             <div
                 class="header"
-                :class="{ hideable: sites.length > 0 }"
+                :class="{ hideable: sites.length > 0 || networks.length > 0 }"
             >
                 <a
                     v-tooltip.bottom="`Go to ${network.url}`"
@@ -72,7 +84,7 @@
             </div>
 
             <div class="content-inner">
-                <template v-if="sites.length > 0">
+                <template v-if="sites.length > 0 || networks.length > 0">
                     <span
                         v-show="expanded"
                         class="expand collapse-header noselect"
@@ -108,6 +120,7 @@
 import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';
 import Sites from '../sites/sites.vue';
+import Network from '../tile/network.vue';
 
 async function fetchNetwork() {
     this.network = await this.$store.dispatch('fetchNetworks', this.$route.params.networkSlug);
@@ -119,6 +132,7 @@ async function fetchNetwork() {
         }));
     }
 
+    this.networks = this.network.networks;
     this.sites = this.network.sites
         .filter(site => !site.independent);
 
@@ -135,11 +149,13 @@ export default {
         FilterBar,
         Releases,
         Sites,
+        Network,
     },
     data() {
         return {
             network: null,
             sites: [],
+            networks: [],
             studios: [],
             releases: [],
             pageTitle: null,
@@ -212,6 +228,15 @@ export default {
     filter: $logo-highlight;
 }
 
+.parent {
+    display: inline-block;
+    height: 3rem;
+
+    :before {
+        content: 'Part of';
+    }
+}
+
 .header {
     width: 100%;
     display: flex;

assets/components/sites/sites.vue

@@ -38,6 +38,7 @@ export default {
 .sites {
     overflow: hidden;
     display: flex;
+    flex-grow: 1;
 
     &.compact:not(.expanded) {
         flex-direction: row;

assets/components/tile/network.vue

@@ -27,14 +27,15 @@ export default {
 @import 'theme';
 
 .tile {
+    height: 6rem;
     background: $profile;
     display: flex;
+    flex-shrink: 0;
     flex-direction: column;
     align-items: center;
     box-sizing: border-box;
     padding: .5rem 1rem;
     box-shadow: 0 0 3px rgba(0, 0, 0, .25);
-    height: 100%;
     text-align: center;
 }
 
@@ -44,7 +45,7 @@ export default {
 
 .logo {
     width: 100%;
-    height: 5rem;
+    height: 100%;
     color: $text;
     display: flex;
     align-items: center;

assets/components/tile/site.vue

@@ -27,15 +27,16 @@ export default {
 @import 'theme';
 
 .tile {
+    height: 6rem;
     background: $tile;
     display: flex;
+    flex-shrink: 0;
     flex-direction: column;
     align-items: center;
     box-sizing: border-box;
     padding: .5rem 1rem;
     border-radius: .25rem;
     box-shadow: 0 0 3px rgba(0, 0, 0, .25);
-    height: 100%;
     text-align: center;
 }
 

assets/js/curate.js

@@ -57,9 +57,12 @@ function curateNetwork(network, releases) {
         name: network.name,
         slug: network.slug,
         url: network.url,
+        networks: [],
     };
 
+    if (network.parent) curatedNetwork.parent = curateNetwork(network.parent);
     if (network.sites) curatedNetwork.sites = network.sites.map(site => curateSite(site, curatedNetwork));
+    if (network.networks) curatedNetwork.networks = network.networks.map(subNetwork => curateNetwork(subNetwork));
     if (network.studios) curatedNetwork.studios = network.studios;
     if (releases) curatedNetwork.releases = releases.map(release => curateRelease(release));
 

assets/js/networks/actions.js

@@ -18,6 +18,14 @@ function initNetworksActions(store, _router) {
                     name
                     slug
                     url
+                    networks: childNetworks(
+                        orderBy: NAME_ASC,
+                    ) {
+                        id
+                        name
+                        slug
+                        url
+                    }
                     sites(
                         orderBy: [PRIORITY_DESC, NAME_ASC],
                         filter: {
@@ -45,12 +53,23 @@ function initNetworksActions(store, _router) {
                         slug
                         url
                     }
+                    parent {
+                        id
+                        name
+                        slug
+                        url
+                    }
                 }
                 releases(
                     first: $limit,
                     orderBy: $orderBy,
                     filter: {
-                        site: { network: { slug: { equalTo: $networkSlug } } }
+                        site: {
+                            or: [
+                                { network: { slug: { equalTo: $networkSlug } } },
+                                { network: { parent: { slug: { equalTo: $networkSlug } } } }
+                            ]
+                        }
                         date: {
                             lessThan: $before,
                             greaterThan: $after,