chore(client): tweak explore page
This commit is contained in:
parent
170b1b89ba
commit
0bcfa2d04f
|
@ -1,5 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<MkSpacer :content-max="1200">
|
<MkSpacer :content-max="1200">
|
||||||
|
<MkTab v-model="origin" style="margin-bottom: var(--margin);">
|
||||||
|
<option value="local">{{ $ts.local }}</option>
|
||||||
|
<option value="remote">{{ $ts.remote }}</option>
|
||||||
|
</MkTab>
|
||||||
<div v-if="origin === 'local'">
|
<div v-if="origin === 'local'">
|
||||||
<template v-if="tag == null">
|
<template v-if="tag == null">
|
||||||
<MkFolder class="_gap" persist-key="explore-pinned-users">
|
<MkFolder class="_gap" persist-key="explore-pinned-users">
|
||||||
|
@ -57,16 +61,17 @@
|
||||||
import { computed, watch } from 'vue';
|
import { computed, watch } from 'vue';
|
||||||
import XUserList from '@/components/user-list.vue';
|
import XUserList from '@/components/user-list.vue';
|
||||||
import MkFolder from '@/components/ui/folder.vue';
|
import MkFolder from '@/components/ui/folder.vue';
|
||||||
|
import MkTab from '@/components/tab.vue';
|
||||||
import number from '@/filters/number';
|
import number from '@/filters/number';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
import { instance } from '@/instance';
|
import { instance } from '@/instance';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
origin: 'local' | 'remote';
|
|
||||||
tag?: string;
|
tag?: string;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
|
let origin = $ref('local');
|
||||||
let tagsEl = $ref<InstanceType<typeof MkFolder>>();
|
let tagsEl = $ref<InstanceType<typeof MkFolder>>();
|
||||||
let tagsLocal = $ref([]);
|
let tagsLocal = $ref([]);
|
||||||
let tagsRemote = $ref([]);
|
let tagsRemote = $ref([]);
|
||||||
|
|
|
@ -5,11 +5,8 @@
|
||||||
<div v-if="tab === 'featured'">
|
<div v-if="tab === 'featured'">
|
||||||
<XFeatured/>
|
<XFeatured/>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="tab === 'localUsers'">
|
<div v-else-if="tab === 'users'">
|
||||||
<XUsers origin="local"/>
|
<XUsers/>
|
||||||
</div>
|
|
||||||
<div v-else-if="tab === 'remoteUsers'">
|
|
||||||
<XUsers origin="remote"/>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="tab === 'search'">
|
<div v-else-if="tab === 'search'">
|
||||||
<MkSpacer :content-max="1200">
|
<MkSpacer :content-max="1200">
|
||||||
|
@ -75,13 +72,9 @@ const headerTabs = $computed(() => [{
|
||||||
icon: 'fas fa-bolt',
|
icon: 'fas fa-bolt',
|
||||||
title: i18n.ts.featured,
|
title: i18n.ts.featured,
|
||||||
}, {
|
}, {
|
||||||
key: 'localUsers',
|
key: 'users',
|
||||||
icon: 'fas fa-users',
|
icon: 'fas fa-users',
|
||||||
title: i18n.ts.users,
|
title: i18n.ts.users,
|
||||||
}, {
|
|
||||||
key: 'remoteUsers',
|
|
||||||
icon: 'fas fa-users',
|
|
||||||
title: i18n.ts.remote,
|
|
||||||
}, {
|
}, {
|
||||||
key: 'search',
|
key: 'search',
|
||||||
title: i18n.ts.search,
|
title: i18n.ts.search,
|
||||||
|
|
Loading…
Reference in New Issue