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]: {
|
[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,
|
||||||
};
|
};
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
},
|
},
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue