tweak style
This commit is contained in:
parent
0d276d0d61
commit
b1e6a33d6b
6 changed files with 36 additions and 11 deletions
|
@ -20,7 +20,6 @@ export default defineComponent({
|
|||
[symbols.PAGE_INFO]: {
|
||||
title: computed(() => this.folder ? this.folder.name : this.$ts.drive),
|
||||
icon: 'fas fa-cloud',
|
||||
menu: () => this.$refs.drive.getMenu()
|
||||
},
|
||||
folder: null,
|
||||
};
|
||||
|
|
|
@ -282,7 +282,6 @@ export default defineComponent({
|
|||
share: {
|
||||
title: this.user.name,
|
||||
},
|
||||
menu: () => getUserMenu(this.user),
|
||||
} : null),
|
||||
user: null,
|
||||
error: null,
|
||||
|
|
|
@ -94,8 +94,12 @@ export default (opts) => ({
|
|||
for (let i = 0; i < items.length; i++) {
|
||||
const item = items[i];
|
||||
markRaw(item);
|
||||
if (this.pagination.reversed) {
|
||||
if (i === items.length - 2) item._shouldInsertAd_ = true;
|
||||
} else {
|
||||
if (i === 3) item._shouldInsertAd_ = true;
|
||||
}
|
||||
}
|
||||
if (!this.pagination.noPaging && (items.length > (this.pagination.limit || 10))) {
|
||||
items.pop();
|
||||
this.items = this.pagination.reversed ? [...items].reverse() : items;
|
||||
|
@ -133,8 +137,12 @@ export default (opts) => ({
|
|||
for (let i = 0; i < items.length; i++) {
|
||||
const item = items[i];
|
||||
markRaw(item);
|
||||
if (this.pagination.reversed) {
|
||||
if (i === items.length - 9) item._shouldInsertAd_ = true;
|
||||
} else {
|
||||
if (i === 10) item._shouldInsertAd_ = true;
|
||||
}
|
||||
}
|
||||
if (items.length > SECOND_FETCH_LIMIT) {
|
||||
items.pop();
|
||||
this.items = this.pagination.reversed ? [...items].reverse().concat(this.items) : this.items.concat(items);
|
||||
|
|
|
@ -1,17 +1,23 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent, h, TransitionGroup } from 'vue';
|
||||
import { defineComponent, h, PropType, TransitionGroup } from 'vue';
|
||||
import MkAd from '@client/components/global/ad.vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
type: Array as PropType<{ id: string; createdAt: string; _shouldInsertAd_: boolean; }[]>,
|
||||
required: true,
|
||||
},
|
||||
reversed: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
ad: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
@ -65,9 +71,17 @@ export default defineComponent({
|
|||
]));
|
||||
|
||||
return [el, separator];
|
||||
} else {
|
||||
if (this.ad && item._shouldInsertAd_) {
|
||||
return [h(MkAd, {
|
||||
class: 'a', // advertiseの意(ブロッカー対策)
|
||||
key: item.id + ':ad',
|
||||
prefer: ['horizontal', 'horizontal-big'],
|
||||
}), el];
|
||||
} else {
|
||||
return el;
|
||||
}
|
||||
}
|
||||
}));
|
||||
},
|
||||
});
|
||||
|
|
|
@ -55,6 +55,7 @@
|
|||
<MkA to="/my/favorites" class="item"><i class="fas fa-star icon"></i>{{ $ts.favorites }}</MkA>
|
||||
</div>
|
||||
</div>
|
||||
<MkAd class="a" prefer="square"/>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="left">
|
||||
|
@ -351,7 +352,7 @@ export default defineComponent({
|
|||
flex-direction: column;
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
border-right: solid 0.5px var(--divider);
|
||||
border-right: solid 4px var(--divider);
|
||||
|
||||
> .header, > .footer {
|
||||
$padding: 8px;
|
||||
|
@ -498,6 +499,10 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .a {
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -591,7 +596,7 @@ export default defineComponent({
|
|||
|
||||
> .side {
|
||||
width: 350px;
|
||||
border-left: solid 0.5px var(--divider);
|
||||
border-left: solid 4px var(--divider);
|
||||
|
||||
&.widgets.sideViewOpening {
|
||||
@media (max-width: 1400px) {
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
</MkButton>
|
||||
</div>
|
||||
|
||||
<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
|
||||
<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :ad="true">
|
||||
<XNote :note="note" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
|
||||
</XList>
|
||||
|
||||
|
|
Loading…
Reference in a new issue