161sh/jointrashposs
1
0
Fork 0
mirror of https://iceshrimp.dev/Crimekillz/jointrashposs.git synced 2024-11-22 08:53:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

enhance(ServerFinder): サーバー一覧（グリッド）は全幅表示するように

Browse Source
This commit is contained in:
kakkokari-gtyih 2024-02-15 21:15:46 +09:00
parent b61e75c204
commit 6a33b91300
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/servers/Finder.vue
View File

@ -1,5 +1,11 @@
<template> <template>
<div class="container mx-auto max-w-screen-xl px-6 grid server-list gap-8"> <div
class="px-6 grid server-list gap-8"
:class="[
(v_view === 'list') && 'container mx-auto max-w-screen-xl',
(v_view === 'grid') && 'mx-auto max-w-[2560px]',
]"
>
<aside <aside
class="fixed z-50 transition-transform -mx-6 w-full bg-slate-200 dark:bg-slate-800 bottom-0 rounded-t-xl lg:translate-y-0 lg:shadow-none lg:bg-transparent dark:lg:bg-transparent lg:mx-0 lg:relative" class="fixed z-50 transition-transform -mx-6 w-full bg-slate-200 dark:bg-slate-800 bottom-0 rounded-t-xl lg:translate-y-0 lg:shadow-none lg:bg-transparent dark:lg:bg-transparent lg:mx-0 lg:relative"
:class="sortOpen ? 'translate-y-0' : 'translate-y-[calc(100%-3rem)]'" :class="sortOpen ? 'translate-y-0' : 'translate-y-[calc(100%-3rem)]'"
@ -84,7 +90,7 @@
<div <div
class="grid gap-4" class="grid gap-4"
:class="[ :class="[
(v_view === 'grid') && 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2', (v_view === 'grid') && 'grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5',
(v_view === 'list') && 'grid-cols-1', (v_view === 'list') && 'grid-cols-1',
]" ]"
> >
@ -114,10 +120,10 @@
</div> </div>
</div> </div>
<button <button
v-if="f_limit < filteredInstances.length" @click="f_limit += 24" v-if="f_limit < filteredInstances.length" @click="f_limit += 60"
class="btn btn-outline-primary btn-lg block px-4" class="btn btn-outline-primary btn-lg block px-4"
:class="[ :class="[
(v_view === 'grid') && 'sm:col-span-2 md:col-span-2 lg:col-span-2' (v_view === 'grid') && 'sm:col-span-2 xl:col-span-3 2xl:col-span-4 3xl:col-span-5'
]" ]"
> >
<ArrowIco class="mr-1" />{{ $t('_servers._list.showMore') }} <ArrowIco class="mr-1" />{{ $t('_servers._list.showMore') }}
@ -172,14 +178,14 @@ const f_orderBy = ref<MiHubSFStorage['f_orderBy']>(savedSettings?.f_orderBy ?? '
const f_order = ref<MiHubSFStorage['f_order']>(savedSettings?.f_order ?? 'desc'); const f_order = ref<MiHubSFStorage['f_order']>(savedSettings?.f_order ?? 'desc');
const f_registerAcceptance = ref<MiHubSFStorage['f_registerAcceptance']>(savedSettings?.f_registerAcceptance || null); const f_registerAcceptance = ref<MiHubSFStorage['f_registerAcceptance']>(savedSettings?.f_registerAcceptance || null);
const f_limit = ref<number>(24); const f_limit = ref<number>(60);
const v_view = ref<MiHubSFStorage['v_view']>(savedSettings?.v_view ?? 'grid'); const v_view = ref<MiHubSFStorage['v_view']>(savedSettings?.v_view ?? 'grid');
// ▲フォームデータ初期化▲ // ▲フォームデータ初期化▲
// ▼フォームデータ保存処理▼ // ▼フォームデータ保存処理▼
watch([f_langs, f_orderBy, f_order, f_registerAcceptance, v_view], (to, from) => { watch([f_langs, f_orderBy, f_order, f_registerAcceptance, v_view], (to, from) => {
f_limit.value = 24; f_limit.value = 60;
const newSettings: MiHubSFStorage = { const newSettings: MiHubSFStorage = {
f_langs: to[0], f_langs: to[0],

8
pages/servers/index.vue
View File

@ -34,6 +34,7 @@
</GHero> </GHero>
<div class="pb-12 lg:mt-12 pt-6 bg-white dark:bg-slate-950 min-h-screen"> <div class="pb-12 lg:mt-12 pt-6 bg-white dark:bg-slate-950 min-h-screen">
<ClientOnly> <ClientOnly>
<Suspense>
<ServersFinder @load="setServerStats" /> <ServersFinder @load="setServerStats" />
<template #fallback> <template #fallback>
<div class="container mx-auto max-w-screen-xl p-6"> <div class="container mx-auto max-w-screen-xl p-6">
@ -41,6 +42,13 @@
<p class="text-center">{{ $t('loading') }}</p> <p class="text-center">{{ $t('loading') }}</p>
</div> </div>
</template> </template>
</Suspense>
<template #fallback>
<div class="container mx-auto max-w-screen-xl p-6">
<MkLoading class="mx-auto text-accent-600"></MkLoading>
<p class="text-center">{{ $t('loading') }}</p>
</div>
</template>
</ClientOnly> </ClientOnly>
</div> </div>
</div> </div>