chore(client): tweak explore page

This commit is contained in:
syuilo 2022-07-13 18:09:41 +09:00
parent 170b1b89ba
commit 0bcfa2d04f
2 changed files with 9 additions and 11 deletions

View file

@ -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([]);

View file

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