tweak style

This commit is contained in:
syuilo 2021-07-29 23:59:45 +09:00
parent 0d276d0d61
commit b1e6a33d6b
6 changed files with 36 additions and 11 deletions

View file

@ -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,
};

View file

@ -282,7 +282,6 @@ export default defineComponent({
share: {
title: this.user.name,
},
menu: () => getUserMenu(this.user),
} : null),
user: null,
error: null,

View file

@ -94,7 +94,11 @@ export default (opts) => ({
for (let i = 0; i < items.length; i++) {
const item = items[i];
markRaw(item);
if (i === 3) item._shouldInsertAd_ = true;
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();
@ -133,7 +137,11 @@ export default (opts) => ({
for (let i = 0; i < items.length; i++) {
const item = items[i];
markRaw(item);
if (i === 10) item._shouldInsertAd_ = true;
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();

View file

@ -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: {
@ -66,7 +72,15 @@ export default defineComponent({
return [el, separator];
} else {
return el;
if (this.ad && item._shouldInsertAd_) {
return [h(MkAd, {
class: 'a', // advertise()
key: item.id + ':ad',
prefer: ['horizontal', 'horizontal-big'],
}), el];
} else {
return el;
}
}
}));
},

View file

@ -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) {

View file

@ -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>