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;
 }