彻底完善视频缩略图视图切换

KIRAKIRA-DOUGA · Jan 18, 2024 · 0db9510 · 0db9510
1 parent 5ece06a
commit 0db9510
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 46 deletions.
diff --git a/assets/styles/elements/toolbox-card.scss b/assets/styles/elements/toolbox-card.scss
@@ -37,7 +37,7 @@
 	}
 }
 
-@mixin videos-grid {
+@mixin settings-grid {
 	$min-width: 226px;
 	$gap: 12px;
 
@@ -46,7 +46,7 @@
 	grid-template-columns: repeat(auto-fill, minmax($min-width, 1fr));
 	align-items: start;
 	justify-content: space-between;
-	container: videos-grid / inline-size;
+	container: settings-grid / inline-size;
 
 	&:has(.settings-grid-item) {
 		gap: $gap;
@@ -55,16 +55,12 @@
 	> * {
 		--column: multi;
 
-		@container videos-grid (width < #{$min-width * 2 + $gap}) {
+		@container settings-grid (width < #{$min-width * 2 + $gap}) {
 			--column: single;
 		}
 
-		@container videos-grid (width < #{$min-width * 2}) {
+		@container settings-grid (width < #{$min-width * 2}) {
 			--view: list;
 		}
 	}
 }
-
-.videos-grid {
-	@include videos-grid;
-}
diff --git a/components/Thumb/ThumbGrid.vue b/components/Thumb/ThumbGrid.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+	const props = withDefaults(defineProps<{
+		view?: string;
+	}>(), {
+		view: "grid",
+	});
+</script>
+
+<template>
+	<Comp :class="view">
+		<slot></slot>
+	</Comp>
+</template>
+
+<style scoped lang="scss">
+	$gap: 12px;
+
+	:comp {
+		display: grid;
+		grid-gap: 0;
+		grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
+		align-items: start;
+		justify-content: space-between;
+		container: thumb-grid / inline-size;
+
+		@include mobile {
+			grid-template-columns: 1fr 1fr;
+		}
+
+		&:has(.settings-grid-item) {
+			gap: $gap;
+		}
+
+		&.list {
+			grid-template-columns: 1fr;
+		}
+
+		&.tile {
+			grid-template-columns: repeat(auto-fill, minmax(342px, 1fr));
+		}
+	}
+</style>
diff --git a/components/Thumb/ThumbVideo.vue b/components/Thumb/ThumbVideo.vue
@@ -76,27 +76,21 @@
 </template>
 
 <style scoped lang="scss">
-	@layer props {
-		a:comp {
-			/// 视图，可选的值为: grid | tile | list。
-			--view: grid;
-		}
-	}
-
 	a:comp {
 		@include round-large;
 		position: relative;
 		display: inline-block;
+		min-width: 0;
 		color: c(text-color);
 
 		&:any-hover:not(:active) {
 			z-index: 1;
 
 			.card {
 				@include system-card;
-				translate: 0 -6px;
 				background-color: c(surface-color);
-				backdrop-filter: none; // WARN: WTF Chromium? Again? https://bugs.chromium.org/p/chromium/issues/detail?id=1422867
+				backdrop-filter: none;
+				translate: 0 -6px;
 			}
 		}
 
@@ -107,23 +101,19 @@
 		&:active {
 			@include button-scale-pressed;
 		}
-
-		@container style(--view: list) {
-			width: 100%;
-		}
 	}
 
 	.card {
 		@include round-large;
 		padding: 8px 9px;
 
-		@container style(--view: tile) {
+		.tile & {
 			display: flex;
 			gap: 8px;
 			align-items: center;
 		}
 
-		@container style(--view: list) {
+		.list & {
 			display: flex;
 			gap: 16px;
 			align-items: center;
@@ -143,18 +133,16 @@
 			object-fit: cover;
 		}
 
-		@container style(--view: list) or style(--view: tile) {
+		.list &,
+		.tile & {
 			width: 135px;
 			margin-bottom: 0;
 		}
 	}
 
 	.text-wrapper {
+		flex-grow: 1;
 		overflow: hidden;
-
-		@container style(--view: list) {
-			width: 100%;
-		}
 	}
 
 	.title {
@@ -189,13 +177,19 @@
 		color: c(icon-color);
 		font-size: 12px;
 
+		.list & {
+			flex-direction: row;
+			gap: 14px;
+			justify-content: flex-start;
+		}
+
 		.line {
 			display: flex;
 			gap: 8px;
 			justify-content: space-between;
 
-			@container style(--view: list) {
-				flex-direction: column;
+			.list & {
+				gap: 14px;
 			}
 		}
 

diff --git a/layouts/settings.vue b/layouts/settings.vue
@@ -470,7 +470,7 @@
 			}
 
 			&[grid] {
-				@include videos-grid;
+				@include settings-grid;
 				padding: 20px;
 			}
 		}

diff --git a/layouts/user-page.vue b/layouts/user-page.vue
@@ -112,8 +112,8 @@
 </template>
 
 <style scoped lang="scss">
-	$padding-x: 100px;
-	$padding-x-tablet: 40px;
+	$padding-x: 5%;
+	$padding-x-tablet: 24px;
 	$padding-x-mobile: 16px;
 	$header-height: 134px;
 	$main-margin-top: 32px;
@@ -125,6 +125,14 @@
 		z-index: 4;
 		padding: 0 $padding-x;
 		background-color: c(main-bg);
+
+		@include tablet {
+			padding: 0 $padding-x-tablet;
+		}
+
+		@include mobile {
+			padding: 0 $padding-x-mobile;
+		}
 	}
 
 	.content {
@@ -237,12 +245,17 @@
 
 		@include tablet {
 			flex-direction: column-reverse;
+			padding: $padding-x-tablet;
 
 			.toolbox-card {
 				width: 100%;
 			}
 		}
 
+		@include mobile {
+			padding: $padding-x-mobile;
+		}
+
 		> .left,
 		> .right {
 			flex-shrink: 0;

diff --git a/pages/components.vue b/pages/components.vue
@@ -198,10 +198,10 @@
 			<Checkbox disabled checkState="unchecked">鼠鼠我呀最讨厌了</Checkbox>
 			<Checkbox disabled checkState="checked">欢迎白嫖</Checkbox>
 			<hr />
-			<div class="videos-grid">
+			<ThumbGrid>
 				<SettingsGridItem id="a" v-model="settingsGridItemSelect" title="a" />
 				<SettingsGridItem id="b" v-model="settingsGridItemSelect" title="b" />
-			</div>
+			</ThumbGrid>
 			<hr />
 			<TextBox v-model="inputValue" placeholder="小小的软软的香香的" :style="{ '--size': 'small' }" />
 			<TextBox v-model="inputValue" type="email" required placeholder="请输入正确的邮箱" />

diff --git a/pages/home.vue b/pages/home.vue
@@ -43,7 +43,7 @@
 		</TabBar>
 		<Subheader icon="upload" :badge="categoryItemCount">{{ t.latest }}</Subheader>
 		<Transition :name="transitionName" mode="out-in">
-			<div :key="resultTimestamp" class="videos-grid">
+			<ThumbGrid :key="resultTimestamp">
 				<ThumbVideo
 					v-for="video in videos?.videos"
 					:key="video.videoId"
@@ -55,7 +55,7 @@
 					:watchedCount="video.watchedCount"
 					:duration="new Duration(0, video.duration ?? 0)"
 				>{{ video.title }}</ThumbVideo>
-			</div>
+			</ThumbGrid>
 		</Transition>
 		<!-- <Pagination v-model="data.page" :pages="Math.max(1, pageCount)" :displayPageCount="12" enableArrowKeyMove /> -->
 	</div>

diff --git a/pages/search.vue b/pages/search.vue
@@ -106,7 +106,7 @@
 
 		<div class="card-container">
 			<div class="center">
-				<div class="videos-grid">
+				<ThumbGrid :view="view">
 					<ThumbVideo
 						v-for="video in videos?.videos"
 						:key="video.videoId"
@@ -117,9 +117,8 @@
 						:date="new Date(video.uploadDate || 0)"
 						:watchedCount="video.watchedCount"
 						:duration="new Duration(0, video.duration ?? 0)"
-						:style="{ '--view': view }"
 					>{{ video.title }}</ThumbVideo>
-				</div>
+				</ThumbGrid>
 			</div>
 
 			<div class="right">

diff --git a/pages/user/[uid]/favorites.vue b/pages/user/[uid]/favorites.vue
@@ -76,7 +76,7 @@
 				</div>
 			</div>
 			<main>
-				<div class="videos-grid">
+				<ThumbGrid>
 					<ThumbVideo
 						v-for="i in 5"
 						:key="i"
@@ -86,7 +86,7 @@
 						:watchedCount="233_0000"
 						:duration="new Duration(2, 33)"
 					>{{ "测试视频".repeat(10) }}</ThumbVideo>
-				</div>
+				</ThumbGrid>
 			</main>
 		</div>
 

diff --git a/pages/user/[uid]/index.vue b/pages/user/[uid]/index.vue
@@ -48,7 +48,7 @@
 <template>
 	<div class="container">
 		<div class="toolbox-card center">
-			<div class="videos-grid">
+			<ThumbGrid>
 				<ThumbVideo
 					v-for="video in userVideos?.videos"
 					:key="video.videoId"
@@ -60,7 +60,7 @@
 					:watchedCount="video.watchedCount"
 					:duration="new Duration(0, video.duration ?? 0)"
 				>{{ video.title }}</ThumbVideo>
-			</div>
+			</ThumbGrid>
 		</div>
 
 		<div class="right">

diff --git a/pages/user/[uid]/video.vue b/pages/user/[uid]/video.vue
@@ -37,7 +37,7 @@
 <template>
 	<div class="container">
 		<div class="toolbox-card center">
-			<div class="videos-grid">
+			<ThumbGrid>
 				<ThumbVideo
 					v-for="video in videos?.videos"
 					:key="video.videoId"
@@ -49,7 +49,7 @@
 					:watchedCount="video.watchedCount"
 					:duration="new Duration(0, video.duration ?? 0)"
 				>{{ video.title }}</ThumbVideo>
-			</div>
+			</ThumbGrid>
 		</div>
 
 		<div class="toolbox-card right">