Added rudimentary affiliate banner setup. Separated login and signup disable. Added various tag photos.

assets/components/entities/entity.vue

@@ -5,7 +5,7 @@
 	>
 		<div class="info">
 			<a
-				:href="entity.url"
+				:href="entityUrl"
 				target="_blank"
 				rel="noopener"
 				class="link link-child"
@@ -41,6 +41,25 @@
 				/>
 			</a>
 
+			<a
+				v-if="campaign"
+				:href="campaign.affiliate.url"
+				target="_blank"
+				class="campaign"
+			>
+				<img
+					v-if="campaign.banner.entity.type === 'network'"
+					:src="`/img/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.jpeg`"
+					class="campaign-banner"
+				>
+
+				<img
+					v-if="campaign.banner.entity.type === 'channel' && campaign.banner.entity.parent?.type === 'network'"
+					:src="`/img/banners/${campaign.banner.entity.parent.slug}/${campaign.banner.entity.slug}/${campaign.banner.id}.jpeg`"
+					class="campaign-banner"
+				>
+			</a>
+
 			<ul
 				v-if="entity.tags.length > 0"
 				class="tags"
@@ -72,6 +91,8 @@
 					v-else
 					class="name parent-name"
 				>{{ entity.parent.name }}</h3>
+
+				<Icon icon="device_hub" />
 			</router-link>
 		</div>
 
@@ -124,6 +145,9 @@ import Children from './children.vue';
 import Scroll from '../scroll/scroll.vue';
 
 async function fetchEntity(scroll = true) {
+	this.campaign = null;
+	this.entityUrl = null;
+
 	const { entity, totalCount } = await this.$store.dispatch('fetchEntityBySlugAndType', {
 		entitySlug: this.$route.params.entitySlug,
 		entityType: this.$route.name,
@@ -137,6 +161,16 @@ async function fetchEntity(scroll = true) {
 
 	this.pageTitle = entity.name;
 
+	const channelBannerCampaigns = entity.campaigns.filter(campaign => campaign.banner);
+	const networkBannerCampaigns = entity.parent?.campaigns.filter(campaign => campaign.banner);
+	const bannerCampaigns = channelBannerCampaigns.length > 0 ? channelBannerCampaigns : networkBannerCampaigns;
+
+	if (bannerCampaigns.length > 0) {
+		this.campaign = bannerCampaigns[Math.floor(Math.random() * bannerCampaigns.length)];
+	}
+
+	this.entityUrl = entity.campaigns.find(campaign => !campaign.banner)?.affiliate.url || entity.url;
+
 	if (scroll && this.$refs.filter?.$el) {
 		this.$refs.filter.$el.scrollIntoView();
 	}
@@ -168,6 +202,8 @@ export default {
 			totalCount: null,
 			limit: Number(this.$route.query.limit) || 20,
 			expanded: false,
+			campaign: null,
+			entityUrl: null,
 		};
 	},
 	watch: {
@@ -185,6 +221,7 @@ export default {
 @import 'breakpoints';
 
 .info {
+	height: 6rem;
 	display: flex;
 	justify-content: space-between;
 	background: var(--profile);
@@ -214,6 +251,13 @@ export default {
 .link-parent {
 	flex-direction: row-reverse;
 	margin: 0 0 0 3rem;
+
+	.icon {
+		width: 1.25rem;
+		height: 1.25rem;
+		fill: var(--lighten);
+		margin: 0 .5rem 0 0;
+	}
 }
 
 .logo {
@@ -223,7 +267,7 @@ export default {
 }
 
 .logo-child {
-	height: 2rem;
+	height: 3rem;
 }
 
 .logo-parent {
@@ -234,6 +278,14 @@ export default {
 	height: 1rem;
 }
 
+.campaign {
+	height: 100%;
+}
+
+.campaign-banner {
+	height: 100%;
+}
+
 .content-inner {
 	display: flex;
 	flex-direction: column;