Clean up home animations, make all pages mobile-friendly, add basic e…

…rror boundary page (#43) * Fix typing animation, make homepage mobile-ready * Clean up dashboard page for mobile * Clean up model view page for mobile * Add basic error boundary page * Fmt and lint
KittyCAD · Nov 2, 2023 · 36ee4b1 · 36ee4b1
1 parent f078702
commit 36ee4b1
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 34 deletions.
diff --git a/src/components/GenerationListItem.svelte b/src/components/GenerationListItem.svelte
@@ -51,34 +51,38 @@
 
 <div>
 	<div class="grid md:grid-cols-2 lg:grid-cols-3 border items-stretch">
-		<h3 class="font-normal font-mono lg:col-span-2 px-2 py-6 lg:px-4 lg:py-16 border-r">
+		<h3 class="font-normal font-mono lg:col-span-2 px-2 py-6 lg:px-4 lg:py-16 border-r box-border">
 			<span class="block text-sm uppercase text-chalkboard-70 dark:text-chalkboard-40"
 				>Your Prompt</span
 			>
 			<span class="sr-only">: </span>
 			<span class="block text-lg">"{data.prompt}"</span>
 		</h3>
 		{#if data.outputs && data.status === 'completed'}
-			<div class="relative">
+			<div class="relative min-h-[33vh] border-t md:border-t-0">
 				{#if shouldRenderModel}
 					<Canvas>
-						<ModelPreviewer dataUrl={gltfUrl} />
+						<ModelPreviewer dataUrl={gltfUrl} enableZoom={false} />
 					</Canvas>
 				{/if}
 			</div>
 		{:else if data.status === 'failed'}
-			<div class="failed dark:dark relative overflow-hidden flex items-center justify-center p-2">
+			<div
+				class="failed dark:dark relative overflow-hidden min-h-[33vh] border-t flex items-center justify-center p-2"
+			>
 				<p class="font-mono text-xs text-destroy-50">{data.error}</p>
 			</div>
 		{:else}
-			<div class="shimmer-skeleton relative overflow-hidden flex items-center justify-center">
+			<div
+				class="shimmer-skeleton relative overflow-hidden min-h-[33vh] border-t flex items-center justify-center"
+			>
 				<p class="font-mono text-sm text-energy-50">Generating...</p>
 			</div>
 		{/if}
 	</div>
-	<div class="grid grid-cols-2 lg:grid-cols-3 border border-t-0 items-stretch">
+	<div class="grid md:grid-cols-2 lg:grid-cols-3 border border-t-0 items-stretch">
 		<dl
-			class="m-0 px-4 py-1 lg:col-span-2 flex items-center justify-between text-xs font-mono text-chalkboard-70 dark:text-chalkboard-40 border-r"
+			class="m-0 px-2 md:px-4 py-1 lg:col-span-2 flex flex-col md:flex-row md:items-center order-1 md:order-none justify-between text-xs font-mono text-chalkboard-70 dark:text-chalkboard-40 border-r"
 		>
 			<div class="flex gap-2">
 				<dt>Submitted</dt>
@@ -92,11 +96,11 @@
 			{/if}
 		</dl>
 		{#if data.outputs && data.status === 'completed'}
-			<ul class="m-0 p-0 flex items-stretch">
+			<ul class="m-0 p-0 flex flex-col md:flex-row items-stretch">
 				<li class="contents">
 					<a
 						href={`view/${data.id}`}
-						class="link font-mono flex-auto border-r reverse border-chalkboard-70 dark:border-chalkboard-40"
+						class="link font-mono flex-auto md:border-r reverse border-chalkboard-70 dark:border-chalkboard-40"
 						>View</a
 					>
 				</li>
@@ -105,7 +109,8 @@
 		{:else if data.error}
 			<button
 				on:click={retry(data.prompt)}
-				class="link w-full justify-center flex items-center text-center">Retry Prompt</button
+				class="link w-full justify-center flex items-center text-center border-b md:border-b-0"
+				>Retry Prompt</button
 			>
 		{/if}
 	</div>

diff --git a/src/components/ModelPreviewer.svelte b/src/components/ModelPreviewer.svelte
@@ -2,8 +2,10 @@
 	import * as THREE from 'three'
 	import { T, useThrelte } from '@threlte/core'
 	import { GLTF, OrbitControls, interactivity, useGltf } from '@threlte/extras'
+
 	export let dataUrl: string
 	export let pausable = true
+	export let enableZoom = true
 
 	const { size: threlteSize } = useThrelte()
 
@@ -49,6 +51,7 @@
 	<OrbitControls
 		enableDamping
 		autoRotate={shouldAutoRotate}
+		{enableZoom}
 		on:start={disableAutoRotate}
 		on:end={reenableAutoRotate}
 	/>

diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
@@ -24,6 +24,6 @@
 		@apply bg-chalkboard-10 dark:bg-chalkboard-100;
 		@apply mx-5 lg:mx-auto mt-2 lg:mt-4 max-w-5xl;
 		@apply sticky z-10 top-0 flex justify-between items-center;
-		@apply border px-4 py-1;
+		@apply border px-2 md:px-4 py-1;
 	}
 </style>
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { page } from '$app/stores'
+	import { browser } from '$app/environment'
+
+	function goBack() {
+		if (browser) {
+			window.history.back()
+		}
+	}
+</script>
+
+<h1 class="text-4xl mt-24">
+	Error: {$page.status}
+</h1>
+<p>{$page.error ? $page.error.message : 'Something went wrong'}</p>
+<div class="my-8 flex flex-col md:flex-row gap-4">
+	<button on:click={goBack}>🔙 Go back</button>
+	<a href="/">🏠 Go to home</a>
+</div>
+
+<style lang="postcss">
+	a,
+	button {
+		@apply border border-solid font-mono;
+		@apply px-6 py-2 text-center;
+	}
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -12,60 +12,86 @@
 	]
 </script>
 
-<section class="mx-auto max-w-5xl my-48">
+<section class="mx-auto max-w-5xl my-12 md:my-48">
 	<div class="grid lg:grid-cols-2 gap-0 items-stretch min-h-[33vh]">
-		<h1 class="text-7xl py-12 self-center pl-4">
+		<h1
+			class="-order-1 md:order-none col-span-2 md:col-span-1 text-5xl md:text-7xl py-6 md:py-12 self-center pl-2 md:pl-4"
+		>
 			Text to <span class="text-stroke text-stroke-chalkboard-100 dark:text-stroke-chalkboard-20"
 				>CAD</span
 			>
 		</h1>
-		<div class="relative border border-b-0">
-			<div class="absolute inset-0 -top-full">
+		<div class="z-10 relative border md:border-b-0 col-span-2 md:col-span-1 min-h-[25vh]">
+			<div
+				class="animate-reveal absolute inset-0 -top-1/3 opacity-80 md:opacity-100 md:-top-full"
+				style={`--delay-steps: ${examples[0].prompt.length}`}
+			>
 				<Canvas>
 					<ModelPreviewer dataUrl={examples[0].model} pausable={false} />
 				</Canvas>
 			</div>
 		</div>
 		<div
-			class="w-full flex items-center justify-start col-span-2 text-4xl font-mono border py-4 px-6"
+			class="-order-1 md:order-none w-full flex items-center justify-start col-span-2 text-lg md:text-4xl font-mono border border-b-0 md:border-b py-4 px-2 md:px-6"
 		>
 			<div
-				class="typing-animation block text-chalkboard-70 dark:text-chalkboard-40"
-				style={`--steps: ${examples[0].prompt.length - 1}`}
+				class="typing-animation block text-chalkboard-70 dark:text-chalkboard-50"
+				style={`--steps: ${examples[0].prompt.length}`}
 			>
 				<div class="block w-fit">{examples[0].prompt}</div>
 			</div>
 		</div>
-		<div class="col-span-2 flex items-center border border-t-0">
-			<p class="flex-1 pl-4 py-2 text-chalkboard-70 dark:text-chalkboard-40">
+		<div class="col-span-2 flex flex-col md:flex-row items-center border border-t-0">
+			<p class="flex-1 pl-2 md:pl-4 py-2 text-chalkboard-70 dark:text-chalkboard-40">
 				Create B-Rep CAD files and meshes from natural language prompts. Powered by KittyCAD.
 			</p>
 			<a
 				href={paths.SIGN_IN($page.url.origin.concat(paths.DASHBOARD))}
-				class="self-stretch flex items-center justify-center text-center bg-energy-10/70 px-4 py-2 dark:bg-energy-40 border-0 border-l font-mono hover:bg-energy-10 dark:hover:bg-energy-20"
+				class="self-stretch flex items-center justify-center text-center bg-energy-10/70 px-2 md:px-4 py-2 dark:bg-energy-60 border-0 border-t md:border-t-0 md:border-l font-mono hover:bg-energy-10 dark:hover:bg-energy-50 dark:hover:text-chalkboard-10"
 				>Sign in to get started</a
 			>
 		</div>
 	</div>
 </section>
 
 <style lang="postcss">
+	section {
+		--step-timing: 0.08s;
+	}
+
 	.typing-animation {
-		--_cursor-width: 0.15em;
+		position: relative;
 		overflow: hidden; /* Ensures the content is not revealed until the animation */
-		border-right: var(--_cursor-width) solid theme('colors.energy.40'); /* The typwriter cursor */
 		white-space: nowrap; /* Keeps the content on a single line */
-		letter-spacing: var(--_cursor-width); /* Adjust as needed */
-		animation: typing calc(var(--step-timing, 0.1s) * var(--steps, 20)) steps(var(--steps, 20), end),
+		width: max-content;
+	}
+
+	.typing-animation::before {
+		content: '';
+		position: absolute;
+		@apply bg-chalkboard-10 dark:bg-chalkboard-100;
+		@apply absolute inset-0;
+		--_final-width: 100%;
+		animation: typewriter calc(var(--step-timing) * calc(var(--steps, 20) - 1))
+			steps(var(--steps, 20), end) forwards;
+	}
+
+	.typing-animation::after {
+		content: '';
+		@apply absolute inset-y-0;
+		right: -1ch;
+		left: 1ch;
+		border-left: solid 1ch;
+		@apply border-l-energy-10 dark:border-l-energy-60;
+		--_final-width: calc(100% - 1ch);
+		animation: typewriter calc(var(--step-timing) * calc(var(--steps, 20) - 1))
+				steps(var(--steps, 20), end) forwards,
 			blink-caret 0.85s step-end infinite;
 	}
 
-	@keyframes typing {
-		from {
-			width: 0;
-		}
+	@keyframes typewriter {
 		to {
-			width: 100%;
+			left: var(--_final-width, 0px);
 		}
 	}
 
@@ -74,4 +100,17 @@
 			border-color: transparent;
 		}
 	}
+
+	.animate-reveal {
+		translate: 0 12px;
+		opacity: 0;
+		animation: reveal 0.8s calc(var(--step-timing) * calc(var(--steps, 20) + 8)) ease-out forwards;
+	}
+
+	@keyframes reveal {
+		to {
+			translate: 0 0;
+			opacity: 1;
+		}
+	}
 </style>
diff --git a/src/routes/view/[modelId]/+page.server.ts b/src/routes/view/[modelId]/+page.server.ts
@@ -1,6 +1,6 @@
 import { endpoints, type PromptResponse } from '$lib/endpoints'
 import type { Models } from '@kittycad/lib'
-import { redirect } from '@sveltejs/kit'
+import { error, redirect } from '@sveltejs/kit'
 
 type LoadResponse = {
 	status: number
@@ -26,6 +26,13 @@ export const load = async ({ cookies, params }) => {
 
 	const body = (await response.json()) as Models['TextToCad_type']
 
+	if (response.status >= 400 && response.status < 500) {
+		throw error(
+			response.status,
+			'Model could not be found or you do not have permission to view it'
+		)
+	}
+
 	return {
 		status: response.status,
 		body

diff --git a/src/routes/view/[modelId]/+page.svelte b/src/routes/view/[modelId]/+page.svelte
@@ -12,7 +12,7 @@
 	}`
 </script>
 
-<p class="font-display font-bold text-3xl ml-4 mb-16">
+<p class="font-display font-bold text-3xl ml-4 mb-8 md:mb-16">
 	Text to <span class="text-stroke text-stroke-chalkboard-100 dark:text-stroke-chalkboard-20"
 		>CAD</span
 	>
@@ -23,7 +23,7 @@
 	>⬅ Back to home</a
 >
 <div>
-	<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 border items-stretch">
+	<div class="grid md:grid-cols-3 lg:grid-cols-4 border items-stretch">
 		<h1
 			class="font-normal font-mono md:col-span-2 lg:col-span-3 border-r px-2 py-6 lg:px-4 lg:py-16"
 		>
@@ -46,7 +46,7 @@
 		</Canvas>
 	</div>
 	<div
-		class="w-full flex items-center justify-between px-2 lg:px-4 py-1 border border-t-0 text-xs font-mono text-chalkboard-70 dark:text-chalkboard-40"
+		class="w-full flex flex-col md:flex-row md:items-center justify-between px-2 lg:px-4 py-1 border border-t-0 text-xs font-mono text-chalkboard-70 dark:text-chalkboard-40"
 	>
 		<p>Submitted {data.body?.created_at}</p>
 		<p>Completed {data.body?.completed_at}</p>