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]: { [symbols.PAGE_INFO]: {
title: computed(() => this.folder ? this.folder.name : this.$ts.drive), title: computed(() => this.folder ? this.folder.name : this.$ts.drive),
icon: 'fas fa-cloud', icon: 'fas fa-cloud',
menu: () => this.$refs.drive.getMenu()
}, },
folder: null, folder: null,
}; };

View file

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

View file

@ -94,7 +94,11 @@ export default (opts) => ({
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
const item = items[i]; const item = items[i];
markRaw(item); 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))) { if (!this.pagination.noPaging && (items.length > (this.pagination.limit || 10))) {
items.pop(); items.pop();
@ -133,7 +137,11 @@ export default (opts) => ({
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
const item = items[i]; const item = items[i];
markRaw(item); 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) { if (items.length > SECOND_FETCH_LIMIT) {
items.pop(); items.pop();

View file

@ -1,17 +1,23 @@
<script lang="ts"> <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({ export default defineComponent({
props: { props: {
items: { items: {
type: Array, type: Array as PropType<{ id: string; createdAt: string; _shouldInsertAd_: boolean; }[]>,
required: true, required: true,
}, },
reversed: { reversed: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false
} },
ad: {
type: Boolean,
required: false,
default: false
},
}, },
methods: { methods: {
@ -66,7 +72,15 @@ export default defineComponent({
return [el, separator]; return [el, separator];
} else { } 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> <MkA to="/my/favorites" class="item"><i class="fas fa-star icon"></i>{{ $ts.favorites }}</MkA>
</div> </div>
</div> </div>
<MkAd class="a" prefer="square"/>
</div> </div>
<footer class="footer"> <footer class="footer">
<div class="left"> <div class="left">
@ -351,7 +352,7 @@ export default defineComponent({
flex-direction: column; flex-direction: column;
width: 250px; width: 250px;
height: 100vh; height: 100vh;
border-right: solid 0.5px var(--divider); border-right: solid 4px var(--divider);
> .header, > .footer { > .header, > .footer {
$padding: 8px; $padding: 8px;
@ -498,6 +499,10 @@ export default defineComponent({
} }
} }
} }
> .a {
margin: 12px;
}
} }
} }
@ -591,7 +596,7 @@ export default defineComponent({
> .side { > .side {
width: 350px; width: 350px;
border-left: solid 0.5px var(--divider); border-left: solid 4px var(--divider);
&.widgets.sideViewOpening { &.widgets.sideViewOpening {
@media (max-width: 1400px) { @media (max-width: 1400px) {

View file

@ -16,7 +16,7 @@
</MkButton> </MkButton>
</div> </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"/> <XNote :note="note" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
</XList> </XList>