From 5a2b29a3b4c8acda1851f09af771fbba97f380c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 16 Dec 2024 08:57:37 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20PC=E7=94=BB=E9=9D=A2?=
 =?UTF-8?q?=E3=81=A7=E3=83=81=E3=83=A3=E3=83=B3=E3=83=8D=E3=83=AB=E3=81=8C?=
 =?UTF-8?q?=E8=A4=87=E6=95=B0=E5=88=97=E3=81=A7=E8=A1=A8=E7=A4=BA=E3=81=95?=
 =?UTF-8?q?=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=20(#15129)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* チャンネル一覧の列を最大3列にした (Otaku-Social#13)

* fix

* fix

* fix

* :art:

* fix

* :art:

* Update Changelog

* Update Changelog

* 要らない_marginを消す

---------

Co-authored-by: tmorio <morikapusan@morikapu-denki.com>
---
 CHANGELOG.md                                  |  2 ++
 .../src/components/MkChannelPreview.vue       |  2 ++
 packages/frontend/src/pages/channels.vue      | 35 +++++++++++++++----
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6b9ae480af53..4293c94376f0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@
 -
 
 ### Client
+- Enhance: PC画面でチャンネルが複数列で表示されるように  
+  (Cherry-picked from https://github.com/Otaku-Social/maniakey/pull/13)
 - Fix: 画面サイズが変わった際にナビゲーションバーが自動で折りたたまれない問題を修正
 - Fix: サーバー情報メニューに区切り線が不足していたのを修正
 - Fix: ノートがログインしているユーザーしか見れない場合にログインダイアログを閉じるとその後の動線がなくなる問題を修正
diff --git a/packages/frontend/src/components/MkChannelPreview.vue b/packages/frontend/src/components/MkChannelPreview.vue
index c470042b79ac..f79989d88254 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 bde1650754ab..6830c1ace475 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>