Improved release detail bar behavior.

assets/components/entities/children.vue

@@ -25,6 +25,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'theme';
+
 .children {
 	display: flex;
 	box-sizing: border-box;
@@ -53,4 +55,10 @@ export default {
 		display: none;
 	}
 }
+
+@media(max-width: $breakpoint0) {
+	.children.expanded {
+		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+	}
+}
 </style>

assets/components/entities/entity.vue

@@ -4,35 +4,42 @@
 		class="entity content"
 	>
 		<div class="info">
-			<template v-if="entity.hasLogo">
-				<img
-					v-if="$route.name === 'network'"
-					class="logo"
-					:src="`/img/logos/${entity.slug}/thumbs/network.png`"
-				>
+			<a
+				:href="entity.url"
+				target="_blank"
+				rel="noopener"
+				class="link link-child"
+			>
+				<template v-if="entity.hasLogo">
+					<img
+						v-if="$route.name === 'network'"
+						class="logo logo-child"
+						:src="`/img/logos/${entity.slug}/thumbs/network.png`"
+					>
 
-				<img
-					v-else-if="entity.parent"
-					class="logo"
-					:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
-				>
+					<img
+						v-else-if="entity.parent"
+						class="logo logo-child"
+						:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
+					>
 
-				<img
+					<img
+						v-else
+						class="logo logo-child"
+						:src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`"
+					>
+				</template>
+
+				<h2
 					v-else
-					class="logo"
-					:src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`"
-				>
-			</template>
-
-			<h2
-				v-else
-				class="name"
-			>{{ entity.name }}</h2>
+					class="name"
+				>{{ entity.name }}</h2>
+			</a>
 
 			<router-link
 				v-if="entity.parent"
 				:to="`/${entity.parent.type}/${entity.parent.slug}`"
-				class="link parent-link"
+				class="link link-parent"
 			>
 				<img
 					v-if="entity.parent.hasLogo"
@@ -160,6 +167,15 @@ export default {
 		display: flex;
 		align-items: center;
 		text-decoration: none;
+		flex-grow: 1;
+	}
+
+	.link-child {
+		margin: 0 2rem 0 0;
+	}
+
+	.link-parent {
+		flex-direction: row-reverse;
 	}
 }
 
@@ -176,7 +192,7 @@ export default {
 	display: flex;
 	align-items: center;
 	padding: 0;
-	margin: 0;
+	white-space: nowrap;
 	font-size: 1.5rem;
 }