diff options
| author | かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> | 2024-12-16 08:57:37 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-12-16 08:57:37 +0900 |
| commit | 5a2b29a3b4c8acda1851f09af771fbba97f380c5 (patch) | |
| tree | 88e93c6cbe046df554c71ed59432a51cb11dd6c6 /packages/frontend | |
| parent | misskey-js: APIClientにURL末尾の/を除去する処理を追加 (#15132) (diff) | |
| download | misskey-5a2b29a3b4c8acda1851f09af771fbba97f380c5.tar.gz misskey-5a2b29a3b4c8acda1851f09af771fbba97f380c5.tar.bz2 misskey-5a2b29a3b4c8acda1851f09af771fbba97f380c5.zip | |
enhance(frontend): PC画面でチャンネルが複数列で表示されるように (#15129)
* チャンネル一覧の列を最大3列にした (Otaku-Social#13)
* fix
* fix
* fix
* :art:
* fix
* :art:
* Update Changelog
* Update Changelog
* 要らない_marginを消す
---------
Co-authored-by: tmorio <morikapusan@morikapu-denki.com>
Diffstat (limited to 'packages/frontend')
| -rw-r--r-- | packages/frontend/src/components/MkChannelPreview.vue | 2 | ||||
| -rw-r--r-- | packages/frontend/src/pages/channels.vue | 35 |
2 files changed, 31 insertions, 6 deletions
diff --git a/packages/frontend/src/components/MkChannelPreview.vue b/packages/frontend/src/components/MkChannelPreview.vue index c470042b79..f79989d882 100644 --- a/packages/frontend/src/components/MkChannelPreview.vue +++ b/packages/frontend/src/components/MkChannelPreview.vue @@ -125,7 +125,9 @@ const bannerStyle = computed(() => { position: absolute; top: 16px; left: 16px; + max-width: calc(100% - 32px); padding: 12px 16px; + box-sizing: border-box; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 1.2em; diff --git a/packages/frontend/src/pages/channels.vue b/packages/frontend/src/pages/channels.vue index bde1650754..6830c1ace4 100644 --- a/packages/frontend/src/pages/channels.vue +++ b/packages/frontend/src/pages/channels.vue @@ -6,9 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <MkStickyContainer> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> - <MkSpacer :contentMax="700"> + <MkSpacer :contentMax="1200"> <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> - <div v-if="tab === 'search'" key="search"> + <div v-if="tab === 'search'" key="search" :class="$style.searchRoot"> <div class="_gaps"> <MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search" @enter="search"> <template #prefix><i class="ti ti-search"></i></template> @@ -27,23 +27,31 @@ SPDX-License-Identifier: AGPL-3.0-only </div> <div v-if="tab === 'featured'" key="featured"> <MkPagination v-slot="{items}" :pagination="featuredPagination"> - <MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/> + <div :class="$style.root"> + <MkChannelPreview v-for="channel in items" :key="channel.id" :channel="channel"/> + </div> </MkPagination> </div> <div v-else-if="tab === 'favorites'" key="favorites"> <MkPagination v-slot="{items}" :pagination="favoritesPagination"> - <MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/> + <div :class="$style.root"> + <MkChannelPreview v-for="channel in items" :key="channel.id" :channel="channel"/> + </div> </MkPagination> </div> <div v-else-if="tab === 'following'" key="following"> <MkPagination v-slot="{items}" :pagination="followingPagination"> - <MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/> + <div :class="$style.root"> + <MkChannelPreview v-for="channel in items" :key="channel.id" :channel="channel"/> + </div> </MkPagination> </div> <div v-else-if="tab === 'owned'" key="owned"> <MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton> <MkPagination v-slot="{items}" :pagination="ownedPagination"> - <MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/> + <div :class="$style.root"> + <MkChannelPreview v-for="channel in items" :key="channel.id" :channel="channel"/> + </div> </MkPagination> </div> </MkHorizontalSwipe> @@ -85,6 +93,7 @@ onMounted(() => { const featuredPagination = { endpoint: 'channels/featured' as const, + limit: 10, noPaging: true, }; const favoritesPagination = { @@ -157,3 +166,17 @@ definePageMetadata(() => ({ icon: 'ti ti-device-tv', })); </script> + +<style lang="scss" module> +.searchRoot { + width: 100%; + max-width: 700px; + margin: 0 auto; +} + +.root { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); + gap: var(--MI-margin); +} +</style> |