Removed affiliate table in favor of direct campaign URLs.

assets/components/entities/entity.vue

@@ -41,25 +41,6 @@
 				/>
 			</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"
@@ -115,6 +96,10 @@
 				/>
 			</Scroll>
 
+			<div class="campaign-container">
+				<Campaign :entity="entity" />
+			</div>
+
 			<FilterBar
 				ref="filter"
 				:fetch-releases="fetchEntity"
@@ -143,9 +128,9 @@ import Pagination from '../pagination/pagination.vue';
 import Releases from '../releases/releases.vue';
 import Children from './children.vue';
 import Scroll from '../scroll/scroll.vue';
+import Campaign from '../campaigns/campaign.vue';
 
 async function fetchEntity(scroll = true) {
-	this.campaign = null;
 	this.entityUrl = null;
 
 	const { entity, totalCount } = await this.$store.dispatch('fetchEntityBySlugAndType', {
@@ -160,16 +145,7 @@ async function fetchEntity(scroll = true) {
 	this.totalCount = totalCount;
 
 	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;
+	this.entityUrl = entity.campaigns.find(campaign => !campaign.banner)?.url || entity.url;
 
 	if (scroll && this.$refs.filter?.$el) {
 		this.$refs.filter.$el.scrollIntoView();
@@ -194,6 +170,7 @@ export default {
 		Children,
 		Releases,
 		Scroll,
+		Campaign,
 	},
 	data() {
 		return {
@@ -202,7 +179,6 @@ export default {
 			totalCount: null,
 			limit: Number(this.$route.query.limit) || 20,
 			expanded: false,
-			campaign: null,
 			entityUrl: null,
 		};
 	},
@@ -221,7 +197,6 @@ export default {
 @import 'breakpoints';
 
 .info {
-	height: 6rem;
 	display: flex;
 	justify-content: space-between;
 	background: var(--profile);
@@ -229,15 +204,17 @@ export default {
 }
 
 .link {
-	max-width: 20rem;
+	max-width: 15rem;
 	display: flex;
 	align-items: center;
 	box-sizing: border-box;
-	padding: 1rem;
+	padding: .5rem 1rem;
 	text-decoration: none;
 }
 
 .link-child {
+	flex-shrink: 0;
+
 	.icon {
 		fill: var(--lighten);
 		margin: 0 0 0 1rem;
@@ -250,6 +227,7 @@ export default {
 
 .link-parent {
 	flex-direction: row-reverse;
+	flex-shrink: 0;
 	margin: 0 0 0 3rem;
 
 	.icon {
@@ -276,14 +254,7 @@ export default {
 
 .favicon {
 	height: 1rem;
-}
-
-.campaign {
-	height: 100%;
-}
-
-.campaign-banner {
-	height: 100%;
+	flex-shrink: 0;
 }
 
 .content-inner {
@@ -295,6 +266,12 @@ export default {
 	background: var(--profile);
 }
 
+.campaign-container {
+	background: var(--background-dim);
+	text-align: center;
+	padding: .5rem;
+}
+
 .releases {
 	flex-grow: 1;
 }