Improve ad

6 files changed, 18 insertions, 7 deletions

diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
index 9636ee053c..34085cc070 100644
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -92,7 +92,7 @@ export default defineComponent({
 					return [h(MkAd, {
 						class: 'a', // advertiseの意(ブロッカー対策)
 						key: item.id + ':ad',
-						prefer: 'horizontal',
+						prefer: ['horizontal', 'horizontal-big'],
 					}), el];
 				} else {
 					return el;
diff --git a/src/client/components/global/ad.vue b/src/client/components/global/ad.vue
index ee2a7ebe92..f88a1d2026 100644
--- a/src/client/components/global/ad.vue
+++ b/src/client/components/global/ad.vue
@@ -30,7 +30,7 @@ export default defineComponent({
 
 	props: {
 		prefer: {
-			type: String,
+			type: Array,
 			required: true
 		},
 		specify: {
@@ -50,7 +50,7 @@ export default defineComponent({
 		if (props.specify) {
 			ad = props.specify;
 		} else {
-			let ads = instance.ads.filter(ad => ad.place === props.prefer);
+			let ads = instance.ads.filter(ad => props.prefer.includes(ad.place));
 
 			if (ads.length === 0) {
 				ads = instance.ads.filter(ad => ad.place === 'square');
@@ -130,6 +130,16 @@ export default defineComponent({
 			}
 		}
 
+		&.horizontal-big {
+			padding: 8px;
+
+			> a ,
+			> a > img {
+				max-width: min(600px, 100%);
+				max-height: 250px;
+			}
+		}
+
 		&.vertical {
 			> a ,
 			> a > img {
diff --git a/src/client/pages/gallery/post.vue b/src/client/pages/gallery/post.vue
index 50f81376ec..dbac003e38 100644
--- a/src/client/pages/gallery/post.vue
+++ b/src/client/pages/gallery/post.vue
@@ -33,7 +33,7 @@
 					<MkFollowButton v-if="!$i || $i.id != post.user.id" :user="post.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
 				</div>
 			</div>
-			<MkAd prefer="horizontal"/>
+			<MkAd :prefer="['horizontal', 'horizontal-big']"/>
 			<MkContainer :max-height="300" :foldable="true" class="other">
 				<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
 				<MkPagination :pagination="otherPostsPagination" #default="{items}">
diff --git a/src/client/pages/instance/ads.vue b/src/client/pages/instance/ads.vue
index ee7114f91c..20747d6f9c 100644
--- a/src/client/pages/instance/ads.vue
+++ b/src/client/pages/instance/ads.vue
@@ -13,6 +13,7 @@
 			<div style="margin: 32px 0;">
 				<MkRadio v-model="ad.place" value="square">square</MkRadio>
 				<MkRadio v-model="ad.place" value="horizontal">horizontal</MkRadio>
+				<MkRadio v-model="ad.place" value="horizontal-big">horizontal-big</MkRadio>
 			</div>
 			<div style="margin: 32px 0;">
 				{{ $ts.priority }}
diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue
index 4e237c2186..47a458df9c 100644
--- a/src/client/pages/page.vue
+++ b/src/client/pages/page.vue
@@ -45,7 +45,7 @@
 				<div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
 				<div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
 			</div>
-			<MkAd prefer="horizontal"/>
+			<MkAd :prefer="['horizontal', 'horizontal-big']"/>
 			<MkContainer :max-height="300" :foldable="true" class="other">
 				<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
 				<MkPagination :pagination="otherPostsPagination" #default="{items}">
diff --git a/src/client/ui/default.widgets.vue b/src/client/ui/default.widgets.vue
index c475e4272c..cf5d1e07ce 100644
--- a/src/client/ui/default.widgets.vue
+++ b/src/client/ui/default.widgets.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="ddiqwdnk">
 	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
-	<MkAd class="ad" prefer="square"/>
+	<MkAd class="a" prefer="square"/>
 
 	<button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
 	<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
@@ -64,7 +64,7 @@ export default defineComponent({
 	padding-bottom: 8px;
 
 	> .widgets,
-	> .ad {
+	> .a {
 		width: 300px;
 	}