discover page styling (#511)

modules/desktop/src/components/discover-packages/discover-packages.svelte

@@ -21,15 +21,15 @@
 		.sort((a, b) => {
 			return a.manual_sorting - b.manual_sorting;
 		});
-  console.log("test",packages)
+	console.log("test", packages);
 </script>
 
 <div class="relative h-full w-full">
-	<ul class="grid grid-cols-2 bg-black"  on:scroll={onScroll}>
+	<ul class="flex flex-col items-stretch" on:scroll={onScroll}>
 		{#if packages.length > 0}
-			{#each packages as pkg}
+			{#each packages as pkg, idx}
-        <div class="z-1 p-1" class:col-span-2={["left", "right"].includes(pkg.card_layout)}>
+				<div class="z-1 p-1">
-          <Package tab={packageFilter} {pkg} layout="{pkg.card_layout}"/>
+					<Package tab={packageFilter} {pkg} layout={idx % 2 === 0 ? "left" : "right"} />
 				</div>
 			{/each}
 		{:else}

modules/desktop/src/components/package-card/bg-image.svelte

@@ -3,7 +3,7 @@
 	import { onMount } from "svelte";
 	import { packagesStore } from "$libs/stores";
 
-	let clazz = '';
+	let clazz = "";
 	export { clazz as class };
 
 	export let layout: "bottom" | "right" | "left" | "none" = "bottom";
@@ -11,10 +11,10 @@
 	export let pkg: GUIPackage;
 
 	const defaultImgUrl = "/images/default-thumb.jpg";
-  let loadedImg = "";
+	$: loadedImg = "";
 	let loaded = false;
 
-  const loadImage = async (url:string): Promise<string> => {
+	const loadImage = async (url: string): Promise<string> => {
 		const image = new Image();
 		image.src = url;
 		return new Promise((resolve, reject) => {
@@ -32,14 +32,13 @@
 	};
 
 	const recachePkg = async () => {
-    const url = await packagesStore.cachePkgImage(pkg)
+		const url = await packagesStore.cachePkgImage(pkg);
 		loadImage(url);
-  }
+	};
 
 	onMount(() => {
 		if (pkg.cached_image_url) {
-      loadImage(pkg.cached_image_url)
+			loadImage(pkg.cached_image_url).catch(() => {
-        .catch(() => {
 				if (pkg.thumb_image_url) {
 					loadImage(pkg.thumb_image_url);
 					recachePkg();
@@ -52,14 +51,23 @@
 </script>
 
 <section class="bg-black {clazz} {layout}">
-	<i class="logo icon-tea-logo-iconasset-1 text-gray text-3xl animate-pulse {layout}"/>	
+	<i class="logo icon-tea-logo-iconasset-1 text-gray animate-pulse text-3xl {layout}" />
-  <div class="bg-center transition-all opacity-0 duration-500" class:opacity-100={loaded} style="background-image: url({loadedImg})">
+	<div
+		class="bg-center opacity-0 transition-all duration-500"
+		class:opacity-100={loaded}
+		style="background-image: url({loadedImg})"
+	>
 		<!-- dup image: save processing power instead of computing the blur across all the HTML layers -->
 		{#if layout !== "none"}
-		<aside class="blur-sm {layout} transition-all opacity-0 duration-500" class:opacity-100={loaded}>
+			<!-- TODO: TALK TO NEIL -->
+			<aside
+				class="blur-sm {layout} opacity-0 transition-all duration-500"
+				class:opacity-100={loaded}
+			>
 				<figure class="bg-center" style="background-image: url({loadedImg})" />
 			</aside>
 		{/if}
+	</div>
 </section>
 
 <style>
@@ -117,7 +125,7 @@
 	aside.left {
 		left: 0px;
 		height: 100%;
-		width: 40%;
+		width: 60%;
 	}
 
 	aside.right {
@@ -134,17 +142,22 @@
 		background-size: cover;
 		background-repeat: no-repeat;
 	}
+
 	aside.bottom figure {
 		left: 0px;
 	}
+
 	aside.right figure {
 		height: 100%;
-		width: 150%;
+		/* the overlay is 60% of the image, so we need to oversize the background image back to 100% */
+		width: 166.6666666%;
 		right: 0px;
 	}
+
 	aside.left figure {
 		height: 100%;
-		width: 250%;
+		/* the overlay is 60% of the image, so we need to oversize the background image back to 100% */
+		width: 166.66666666%;
 		left: 0px;
 	}
 </style>

modules/desktop/src/components/package-card/package-card.svelte

@@ -42,19 +42,23 @@
 			</div>
 			<div class="content-container absolute bottom-0 w-full {layout}">
 				<article class="card-thumb-label relative">
+					{#if layout === "bottom"}
 						<h3 class="text-bold font-mona line-clamp-1 text-2xl font-bold text-white">
 							{fixPackageName(pkg.name)}
 						</h3>
 						<p class="line-clamp-2 h-[32px] text-xs font-thin lowercase">{pkg.desc ?? ""}</p>
-				</article>
-				<div class="relative mt-3.5 flex w-full">
-					<div class="install-button" on:mousedown={preventPropagation}>
-						{#if pkg.state === PackageStates.INSTALLED}
-							<div>
-								<PackageInstalledBadge version={pkg.version} />
-							</div>
 					{:else}
-							<div on:mousedown={preventPropagation}>
+						<h3 class="text-bold font-mona line-clamp-1 mb-4 text-3xl font-bold text-white">
+							{fixPackageName(pkg.name)}
+						</h3>
+						<p class="line-clamp-10 h-[160px] text-xs font-thin lowercase">{pkg.desc ?? ""}</p>
+					{/if}
+				</article>
+				<div class="relative mt-3.5 w-full">
+					<div class="install-button {layout}" on:mousedown={preventPropagation}>
+						{#if pkg.state === PackageStates.INSTALLED}
+							<PackageInstalledBadge version={pkg.version} />
+						{:else}
 							<PackageInstallButton
 								{pkg}
 								onClick={(evt) => {
@@ -63,7 +67,6 @@
 									onClickCTA();
 								}}
 							/>
-							</div>
 						{/if}
 					</div>
 				</div>
@@ -96,9 +99,6 @@
 		background-size: cover;
 		box-sizing: border-box;
 	}
-	section.right {
-		height: 220px;
-	}
 
 	section.active::before {
 		position: absolute;
@@ -125,19 +125,23 @@
 		padding: 28px 14px;
 		justify-content: center;
 	}
+
 	.content-container.bottom {
 		left: 0px;
 	}
 
 	.content-container.left {
 		height: 100%;
-		width: 40%;
+		width: 60%;
 		left: 0px;
+		padding: 28px 28px;
 	}
+
 	.content-container.right {
 		height: 100%;
 		width: 60%;
 		right: 0px;
+		padding: 28px 28px;
 	}
 
 	.hint-container {
@@ -172,8 +176,12 @@
 		color: #e1e1e1;
 	}
 
-	.package-card {
+	.package-card.right {
-		background-size: cover;
+		min-width: 550px;
+	}
+
+	.package-card.left {
+		min-width: 550px;
 	}
 
 	.package-card:hover .hint {
@@ -190,17 +198,21 @@
 	}
 
 	.install-button {
+		width: 160px;
+	}
+
+	.install-button.bottom {
 		min-width: 100%;
 	}
 
 	@media screen and (min-width: 650px) {
-		.install-button {
+		.install-button.bottom {
 			min-width: 60%;
 		}
 	}
 
 	@media screen and (min-width: 1000px) {
-		.install-button {
+		.install-button.bottom {
 			min-width: 50%;
 		}
 	}