From c09b1d38478a111f69470bf8d10c5c118e3b0f0e Mon Sep 17 00:00:00 2001
From: Freeplay <freeplay@duck.com>
Date: Thu, 15 Jun 2023 16:15:37 -0400
Subject: [PATCH] i18n, banner, apps button, i don't know how v-bind in css
 works

---
 locales/en-US.yml                             |   1 +
 .../client/src/pages/welcome.entrance.a.vue   | 205 ++++++++++--------
 packages/client/src/style.scss                |  13 ++
 packages/client/src/ui/visitor/kanban.vue     |  78 ++++---
 4 files changed, 169 insertions(+), 128 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 94266a0056..6a1af99020 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -20,6 +20,7 @@ renotedBy: "Boosted by {user}"
 noNotes: "No posts"
 noNotifications: "No notifications"
 instance: "Server"
+findAnotherInstance: "Find another server"
 settings: "Settings"
 basicSettings: "Basic Settings"
 otherSettings: "Other Settings"
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index a1d049166b..d11109c9fd 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -8,107 +8,106 @@
 				:noTabCollapse="true"
 				:displayHomeButton="false"
 		/></template>
-		<div id="visitor-view">
-			<swiper
-				:round-lengths="true"
-				:touch-angle="25"
-				:threshold="10"
-				:centeredSlides="true"
-				:space-between="20"
-				:allow-touch-move="
-					!(
-						deviceKind === 'desktop' &&
-						!defaultStore.state.swipeOnDesktop
-					)
-				"
-				@swiper="setSwiperRef"
-				@slide-change="onSlideChange"
-			>
-				<swiper-slide v-slot="{ isActive }">
-					<XKanban v-if="isActive"/>
-				</swiper-slide>
-				<swiper-slide v-slot="{ isActive }">
-					<MkSpacer :content-max="800" v-if="isActive">
-						<XNotes :pagination="paginationForLocal" />
-					</MkSpacer>
-				</swiper-slide>
-				<swiper-slide v-slot="{ isActive }">
-					<MkSpacer :content-max="800" v-if="isActive">
-						<XNotes :pagination="paginationForRemote" />
-					</MkSpacer>
-				</swiper-slide>
-				<swiper-slide v-slot="{ isActive }">
-					<MkSpacer :content-max="800" v-if="isActive">
-						<XChannelList
-							key="featured"
-							:pagination="featuredPagination"
+		<swiper
+			id="visitor-view"
+			:round-lengths="true"
+			:touch-angle="25"
+			:threshold="10"
+			:centeredSlides="true"
+			:space-between="20"
+			:allow-touch-move="
+				!(
+					deviceKind === 'desktop' &&
+					!defaultStore.state.swipeOnDesktop
+				)
+			"
+			@swiper="setSwiperRef"
+			@slide-change="onSlideChange"
+		>
+			<swiper-slide v-slot="{ isActive }">
+				<XKanban v-if="isActive"/>
+			</swiper-slide>
+			<swiper-slide v-slot="{ isActive }">
+				<MkSpacer :content-max="800" v-if="isActive">
+					<XNotes :pagination="paginationForLocal" />
+				</MkSpacer>
+			</swiper-slide>
+			<swiper-slide v-slot="{ isActive }">
+				<MkSpacer :content-max="800" v-if="isActive">
+					<XNotes :pagination="paginationForRemote" />
+				</MkSpacer>
+			</swiper-slide>
+			<swiper-slide v-slot="{ isActive }">
+				<MkSpacer :content-max="800" v-if="isActive">
+					<XChannelList
+						key="featured"
+						:pagination="featuredPagination"
+					/>
+				</MkSpacer>
+			</swiper-slide>
+			<swiper-slide v-slot="{ isActive }">
+				<MkSpacer :content-max="800" v-if="isActive">
+					<MkPagination
+						v-slot="{ items }"
+						:pagination="featuredPagesPagination"
+					>
+						<MkPagePreview
+							v-for="page in items"
+							:key="page.id"
+							class="ckltabjg"
+							:page="page"
 						/>
-					</MkSpacer>
-				</swiper-slide>
-				<swiper-slide v-slot="{ isActive }">
-					<MkSpacer :content-max="800" v-if="isActive">
+					</MkPagination>
+				</MkSpacer>
+			</swiper-slide>
+			<swiper-slide v-slot="{ isActive }">
+				<MkSpacer :content-max="1200" v-if="isActive">
+					<MkFolder class="_gap">
+						<template #header
+							><i class="ph-clock ph-bold ph-lg"></i>
+							{{ i18n.ts.recentPosts }}</template
+						>
 						<MkPagination
 							v-slot="{ items }"
-							:pagination="featuredPagesPagination"
+							:pagination="recentPostsPagination"
+							:disable-auto-load="true"
 						>
-							<MkPagePreview
-								v-for="page in items"
-								:key="page.id"
-								class="ckltabjg"
-								:page="page"
-							/>
+							<div class="vfpdbgtk">
+								<MkGalleryPostPreview
+									v-for="post in items"
+									:key="post.id"
+									:post="post"
+									class="post"
+								/>
+							</div>
 						</MkPagination>
-					</MkSpacer>
-				</swiper-slide>
-				<swiper-slide v-slot="{ isActive }">
-					<MkSpacer :content-max="1200" v-if="isActive">
-						<MkFolder class="_gap">
-							<template #header
-								><i class="ph-clock ph-bold ph-lg"></i>
-								{{ i18n.ts.recentPosts }}</template
-							>
-							<MkPagination
-								v-slot="{ items }"
-								:pagination="recentPostsPagination"
-								:disable-auto-load="true"
-							>
-								<div class="vfpdbgtk">
-									<MkGalleryPostPreview
-										v-for="post in items"
-										:key="post.id"
-										:post="post"
-										class="post"
-									/>
-								</div>
-							</MkPagination>
-						</MkFolder>
-						<MkFolder class="_gap">
-							<template #header
-								><i class="ph-fire-simple ph-bold ph-lg"></i>
-								{{ i18n.ts.popularPosts }}</template
-							>
-							<MkPagination
-								v-slot="{ items }"
-								:pagination="popularPostsPagination"
-								:disable-auto-load="true"
-							>
-								<div class="vfpdbgtk">
-									<MkGalleryPostPreview
-										v-for="post in items"
-										:key="post.id"
-										:post="post"
-										class="post"
-									/>
-								</div>
-							</MkPagination>
-						</MkFolder>
-					</MkSpacer>
-				</swiper-slide>
-				<swiper-slide v-slot="{ isActive }">
-					<XUsers v-if="isActive" />
-				</swiper-slide>
-			</swiper>
-		</div>
+					</MkFolder>
+					<MkFolder class="_gap">
+						<template #header
+							><i class="ph-fire-simple ph-bold ph-lg"></i>
+							{{ i18n.ts.popularPosts }}</template
+						>
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="popularPostsPagination"
+							:disable-auto-load="true"
+						>
+							<div class="vfpdbgtk">
+								<MkGalleryPostPreview
+									v-for="post in items"
+									:key="post.id"
+									:post="post"
+									class="post"
+								/>
+							</div>
+						</MkPagination>
+					</MkFolder>
+				</MkSpacer>
+			</swiper-slide>
+			<swiper-slide v-slot="{ isActive }">
+				<XUsers v-if="isActive" />
+			</swiper-slide>
+		</swiper>
 	</MkStickyContainer>
 </template>
 
@@ -219,9 +218,11 @@ onMounted(() => {
 });
 
 let meta = $ref<DetailedInstanceMetadata>();
+let wallpaper = $ref(String);
 
 os.api("meta", { detail: true }).then((res) => {
 	meta = res;
+	wallpaper = `url("${res.backgroundImageUrl}")`
 });
 
 
@@ -261,3 +262,15 @@ const popularPostsPagination = {
 	limit: 5,
 };
 </script>
+<style lang="scss">
+#visitor-view {
+	margin-top: -55px;
+	padding-top: 55px;
+	&::before {
+		content: "";
+		position: absolute;
+		inset: 0;
+		background-image: v-bind("wallpaper");
+	}
+}
+</style>
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index dfc18ed24f..e79c03cd63 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -477,6 +477,19 @@ hr {
 	}
 }
 
+._formLinksGridFlex { // "grid", anyways display flex my beloved
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12px;
+	> ._button {
+		flex-basis: 34%;
+		flex-grow: 1;
+		min-width: max-content !important;
+		max-width: 100% !important;
+		margin: 0 !important;
+	}
+}
+
 ._flexList {
 	display: flex;
 	flex-wrap: wrap;
diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue
index 6cc3724b83..fcfa02e885 100644
--- a/packages/client/src/ui/visitor/kanban.vue
+++ b/packages/client/src/ui/visitor/kanban.vue
@@ -25,7 +25,9 @@
 					@click.stop="expanded = true"
 				>{{ i18n.ts.instanceInfo }}</MkButton>
 			</div> -->
-			<img class="banner" :src="meta.backgroundImageUrl" />
+			<div class="banner">
+				<img :src="meta.backgroundImageUrl" />
+			</div>
 			<div class="content">
 				<div class="header">
 					<img 
@@ -38,7 +40,10 @@
 						>{{ instanceName }}</MkA>
 					</h1>
 				</div>
-				<button class="_button _acrylic menu" @click="showMenu">
+				<!-- <MkA class="_buttonIcon home" :to="'/'" v-tooltip="i18n.ts.home">
+					<i class="ph-house ph-bold ph-lg"></i>
+				</MkA> -->
+				<button class="_buttonIcon menu" @click="showMenu" v-tooltip="i18n.ts.more">
 					<i class="ph-dots-three-outline ph-bold ph-lg"></i>
 				</button>
 				<div v-if="meta" class="about">
@@ -54,7 +59,7 @@
 				</div>
 
 				<section>
-					<div class="_formLinksGrid">
+					<div class="_formLinksGridFlex">
 						<MkButton
 							primary gradate
 							rounded
@@ -63,7 +68,7 @@
 							<i
 								class="ph-sign-in ph-bold"
 							></i>
-							Sign Up
+							{{ i18n.ts.signup }}
 						</MkButton>
 						<MkButton
 							rounded
@@ -72,20 +77,30 @@
 							<i
 								class="ph-sign-out ph-bold"
 							></i>
-							Log In
+							{{ i18n.ts.login }}
 						</MkButton>
 						<MkButton
 							:link="true"
 							:behavior="'browser'"
 							rounded
-							full
 							to="https://calckey.org/join/"
-							class="_full"
 						>
 							<i
 								class="ph-airplane-tilt ph-bold"
 							></i>
-							Find another server
+							{{ i18n.ts.findAnotherInstance }}
+						</MkButton>
+						<MkButton
+							v-if="!sticky"
+							:link="true"
+							:behavior="'browser'"
+							rounded
+							to="https://calckey.org/apps/"
+						>
+							<i
+								class="ph-device-mobile ph-bold"
+							></i>
+							{{ i18n.ts.apps }}
 						</MkButton>
 					</div>
 				</section>
@@ -208,12 +223,10 @@ let meta = $ref<DetailedInstanceMetadata>();
 
 let isLong = $ref(false);
 let collapsed = $ref(!isLong);
-let wallpaper = $ref();
 
 os.api("meta", { detail: true }).then((res) => {
 	meta = res;
 	isLong = meta.description && (meta.description.length > 500);
-	wallpaper = `url("${meta.wallpaper}")`
 });
 
 let announcement = $ref();
@@ -257,16 +270,20 @@ function onScroll(ev) {
 
 <style lang="scss" scoped>
 .instance-info-container {
+	margin-top: -55px;
 	&.sticky {
 		position: sticky;
 		top: 0;
 		max-height: 100vh;
 		overflow: hidden auto;	
 		min-width: 400px;
-		width: 450px;
+		width: 470px;
+		border-right: 1px solid var(--divider);
+		.content {
+			max-width: 450px;
+		}
 	}
 	margin-left: -1px;
-	border-right: 1px solid var(--divider);
 	box-shadow: 0 0 48px -24px rgba(0,0,0,0.1);
 	z-index: 9000;
 }
@@ -275,18 +292,24 @@ function onScroll(ev) {
 	flex-direction: column;
 	height: 100%;
 	background: var(--accent);
+	height: max-content;
+	min-height: 100%;
 	transition: transform .4s cubic-bezier(.5,0,0,1);
 	.banner {
 		position: sticky;
 		top: 0;
 		width: calc(100% + 2px);
 		margin-inline: -1px;
-		min-height: 250px;
-		max-height: 250px;
-		object-fit: cover;
-		object-position: center;
+		padding-top: 56.25%;
 		mask: linear-gradient(to bottom, black, calc(100% - 50px), transparent);
 		transition: min-height .4s, max-height .4s, filter .7s;
+		img {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			object-position: center;
+		}
 	}
 	> .content {
 		--margin: 32px;
@@ -300,7 +323,7 @@ function onScroll(ev) {
 		padding: 0 var(--margin);
 		text-align: center;
 		flex-grow: 1;
-		max-width: 600px;
+		// max-width: 600px;
 		margin-inline: auto;
 		width: 100%;
 		box-sizing: border-box;
@@ -324,6 +347,7 @@ function onScroll(ev) {
 			> .logo {
 				height: 90px;
 				min-width: 90px;
+				max-width: 100%;
 				border-radius: var(--radius);
 				margin-top: -5px;
 				transition: transform .4s cubic-bezier(0.5,0,0,1);
@@ -334,7 +358,7 @@ function onScroll(ev) {
 				color: var(--fgHighlighted)
 			}
 		}
-		.menu {
+		.menu, .home {
 			position: absolute;
 			top: 10px;
 			right: 10px;
@@ -343,9 +367,12 @@ function onScroll(ev) {
 			border-radius: 100px;
 			background: var(--buttonBg)
 		}
+		.home {
+			right: unset;
+			left: 10px;
+		}
 		.about {
 			position: relative;
-			font-size: 1.05em;
 			.desc {
 				display: block;
 			}
@@ -376,16 +403,3 @@ section {
 	text-align: initial;
 }
 </style>
-<style lang="scss">
-#maincontent {
-	--background-image: v-bind(wallpaper);
-}
-#visitor-view {
-	&::before {
-		content: "";
-		position: fixed;
-		inset: 0;
-		background-image: var(--background-image);
-	}
-}
-</style>