fix(web): minor cleanup on downloads page (gitbutlerapp#4610)

liyingqin · Aug 5, 2024 · fc70ef2 · fc70ef2
1 parent 9d5eded
commit fc70ef2
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 76 deletions.
diff --git a/apps/web/src/lib/utils/context.ts b/apps/web/src/lib/utils/context.ts
@@ -1,6 +1,6 @@
-// TODO: Also copied from apps/desktop; replace if/when that's factored out so
-// we do not have two of the same thing floating around.
-//
+// TODO: Copied from apps/desktop; replace if/when context helpers are
+// refactored out so we do not have two of the same thing floating around
+
 // We rely on the Svelte built-in concept of context, a global store for
 // singletons that cascades from parent to child components. This way we
 // can provide not only singletons of all services, but e.g. also

diff --git a/apps/web/src/lib/utils/persisted.ts b/apps/web/src/lib/utils/persisted.ts
diff --git a/apps/web/src/routes/downloads/+page.svelte b/apps/web/src/routes/downloads/+page.svelte
@@ -2,15 +2,14 @@
 	import { onMount } from 'svelte';
 	import { env } from '$env/dynamic/public';
 
-	let loading = true;
-	let releases: any[] = [];
-	let nightlies: any[] = [];
+	let loading = $state(true);
+	let releases: any[] = $state([]);
+	let nightlies: any[] = $state([]);
 
 	onMount(() => {
 		fetch(env.PUBLIC_APP_HOST + 'api/downloads?limit=40')
 			.then(async (response) => await response.json())
 			.then((data) => {
-				console.log(data);
 				releases = data.filter((release: any) => release.channel === 'release');
 				nightlies = data.filter((release: any) => release.channel === 'nightly');
 				loading = false;
@@ -30,12 +29,12 @@
 			<h2>Stable Release</h2>
 			{#each releases as release}
 				<div class="release">
-					<div>Version: {release.version}</div>
-					<div>SHA: {release.sha}</div>
-					<div>{release.released_at}</div>
-					<div>{release.notes}</div>
+					<div class="release__version">
+						Version: <b>{release.version}</b> <span class="release__sha">{release.sha}</span>
+					</div>
+					<div>Released: {new Date(release.released_at).toLocaleString()}</div>
+					<div class="release__notes">{release.notes}</div>
 					<div class="builds">
-						<h3>Builds</h3>
 						{#each release.builds as build}
 							<li><a href={build.url}>{build.platform}</a></li>
 						{/each}
@@ -48,14 +47,14 @@
 			<h2>Nightly Release</h2>
 			{#each nightlies as release}
 				<div class="release">
-					<div>Version: {release.version}</div>
-					<div>SHA: {release.sha}</div>
-					<div>{release.released_at}</div>
+					<div class="release__version">
+						Version: <b>{release.version}</b> <span class="release__sha">{release.sha}</span>
+					</div>
+					<div>Released: {new Date(release.released_at).toLocaleString()}</div>
 					{#if release.notes}
 						<div>{release.notes}</div>
 					{/if}
 					<div class="builds">
-						<h3>Builds</h3>
 						{#each release.builds as build}
 							<li><a href={build.url}>{build.platform}</a></li>
 						{/each}
@@ -70,17 +69,53 @@
 <style>
 	h2 {
 		margin-bottom: 1rem;
+		font-size: 1.5rem;
+	}
+
+	hr {
+		margin-block: 1rem;
+		opacity: 0.25;
+	}
+
+	.builds {
+		margin-block: 0.25rem;
+	}
+
+	.builds > * {
+		line-height: 1.5;
+	}
+
+	.release__notes {
+		margin-block: 0.5rem;
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 5;
+	}
+
+	.release__version {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.release__sha {
+		opacity: 0.5;
 	}
 
 	.releases {
 		display: flex;
-		flex-direction: row;
+		flex-wrap: nowrap;
+		gap: 1rem;
 	}
+
 	.release-lane {
+		display: flex;
+		flex-direction: column;
+		width: calc(50% - 3rem);
 		margin: 1rem;
 		padding: 1rem;
-		border: 1px solid #ccc;
+		border: 1px solid #cccccca9;
 		border-radius: 0.5rem;
-		width: 50%;
 	}
 </style>