fix(watchtime): style improvements

Greasy-Projects · May 12, 2024 · 56517a2 · 56517a2
1 parent d425a5d
commit 56517a2
Showing 1 changed file with 17 additions and 15 deletions.
diff --git a/components/WatchTime.vue b/components/WatchTime.vue
@@ -18,7 +18,7 @@ const fadeThing = ref();
 const handleScroll = () => {
 	const scrollTop = scrollContainer.value.scrollTop;
 	const maxHeight = 3;
-	const minHeight = 1.25;
+	const minHeight = 0.5;
 
 	const height = Math.min(
 		Math.max(
@@ -35,31 +35,33 @@ const handleScroll = () => {
 <template>
 	<div
 		v-if="watchtime"
-		class="flex relative flex-col h-full max-h-5xl p-6 pt-18 pb-2 justify-between bg-secondary rounded-xl"
+		class="flex relative flex-col h-full max-h-3xl pt-0 p-6 pb-2 justify-between bg-secondary rounded-xl"
 	>
-		<div class="absolute top-6 left-0 flex w-full justify-center items-center">
-			<h1
-				class="font-bold z-10 text-[clamp(1.5rem,10cqw,3.75rem)] lg:text-[clamp(2.5rem,5cqw,3.75rem)] font-bebas"
-			>
-				{{ title }}
-			</h1>
+		<div class="relative mt-6 w-full justify-center items-center">
+			<div class="flex justify-center">
+				<h1
+					class="font-bold z-10 text-[clamp(1.5rem,9cqw,3.75rem)] lg:text-[clamp(2.5rem,5cqw,3.75rem)] font-bebas"
+				>
+					{{ title }}
+				</h1>
+			</div>
+			<div
+				ref="fadeThing"
+				class="absolute z-5 w-full h-1 pointer-events-none bg-gradient-to-b from-secondary to-transparent"
+			></div>
 		</div>
-		<div
-			ref="fadeThing"
-			class="absolute top-18 z-5 left-.5% w-99% h-5 rounded-b-full pointer-events-none bg-gradient-to-b from-secondary to-transparent"
-		></div>
 		<div
 			ref="scrollContainer"
-			class="overflow-scroll [&>:nth-child(-n+3)]:border-(4 inline-solid) [&>:nth-child(1)]:border-( [#ffa376]) [&>:nth-child(2)]:border-( [#fea894]) [&>:nth-child(3)]:border-( [#ff7e6c]) snap-y snap-mandatory space-y-3 py-6"
+			class="overflow-scroll pt-2.5 pb-6 [&>:nth-child(-n+3)]:border-(4 inline-solid) [&>:nth-child(1)]:border-( [#ffa376]) [&>:nth-child(2)]:border-( [#fea894]) [&>:nth-child(3)]:border-( [#ff7e6c]) snap-y snap-mandatory space-y-3"
 			@scroll="handleScroll"
 		>
 			<div
 				v-for="user of watchtime"
 				:key="user.displayName"
-				class="bg-button snap-start scroll-my-10 items-center justify-between pr-10 rounded-full p-2 flex"
+				class="bg-button snap-start scroll-my-9	 items-center justify-between pr-5 sm:pr-10 rounded-full p-2 flex"
 			>
 				<img class="size-15 rounded-full" :src="user.avatar ?? undefined" />
-				<p class="font-bold text-[clamp(.3rem,3cqw,1.25rem)]">
+				<p class="font-bold text-[clamp(.3rem,3.5cqw,1.25rem)]">
 					{{ user.displayName }}
 				</p>
 				<h1 class="font-bebas font-bold text-[clamp(.3rem,4.5cqw,1.50rem)]">