Improve ad

This commit is contained in:
syuilo 2021-05-05 19:05:19 +09:00
parent d9799f128a
commit 1dd4570d6d
6 changed files with 18 additions and 7 deletions

View file

@ -92,7 +92,7 @@ export default defineComponent({
return [h(MkAd, { return [h(MkAd, {
class: 'a', // advertise() class: 'a', // advertise()
key: item.id + ':ad', key: item.id + ':ad',
prefer: 'horizontal', prefer: ['horizontal', 'horizontal-big'],
}), el]; }), el];
} else { } else {
return el; return el;

View file

@ -30,7 +30,7 @@ export default defineComponent({
props: { props: {
prefer: { prefer: {
type: String, type: Array,
required: true required: true
}, },
specify: { specify: {
@ -50,7 +50,7 @@ export default defineComponent({
if (props.specify) { if (props.specify) {
ad = props.specify; ad = props.specify;
} else { } 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) { if (ads.length === 0) {
ads = instance.ads.filter(ad => ad.place === 'square'); 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 { &.vertical {
> a , > a ,
> a > img { > a > img {

View file

@ -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"/> <MkFollowButton v-if="!$i || $i.id != post.user.id" :user="post.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
</div> </div>
</div> </div>
<MkAd prefer="horizontal"/> <MkAd :prefer="['horizontal', 'horizontal-big']"/>
<MkContainer :max-height="300" :foldable="true" class="other"> <MkContainer :max-height="300" :foldable="true" class="other">
<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template> <template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
<MkPagination :pagination="otherPostsPagination" #default="{items}"> <MkPagination :pagination="otherPostsPagination" #default="{items}">

View file

@ -13,6 +13,7 @@
<div style="margin: 32px 0;"> <div style="margin: 32px 0;">
<MkRadio v-model="ad.place" value="square">square</MkRadio> <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">horizontal</MkRadio>
<MkRadio v-model="ad.place" value="horizontal-big">horizontal-big</MkRadio>
</div> </div>
<div style="margin: 32px 0;"> <div style="margin: 32px 0;">
{{ $ts.priority }} {{ $ts.priority }}

View file

@ -45,7 +45,7 @@
<div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div> <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 v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
</div> </div>
<MkAd prefer="horizontal"/> <MkAd :prefer="['horizontal', 'horizontal-big']"/>
<MkContainer :max-height="300" :foldable="true" class="other"> <MkContainer :max-height="300" :foldable="true" class="other">
<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template> <template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
<MkPagination :pagination="otherPostsPagination" #default="{items}"> <MkPagination :pagination="otherPostsPagination" #default="{items}">

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="ddiqwdnk"> <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"/> <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-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> <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; padding-bottom: 8px;
> .widgets, > .widgets,
> .ad { > .a {
width: 300px; width: 300px;
} }