Merge pull request #31 from pvdthings/ui-fixes

UI fixes
pvdthings · Jul 7, 2024 · 8c3972f · 8c3972f
2 parents a8e5b5f + 3b7bff4
commit 8c3972f
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 28 deletions.
diff --git a/apps/web/src/app.css b/apps/web/src/app.css
@@ -5,11 +5,11 @@
 @tailwind utilities;
 
 :root {
-    @apply bg-neutral-200;
     font-family: 'Roboto Mono', monospace;
 }
 
 body {
+    @apply bg-neutral-200;
     @apply font-body;
 }
 

diff --git a/apps/web/src/lib/components/Modal/Modal.svelte b/apps/web/src/lib/components/Modal/Modal.svelte
@@ -19,7 +19,7 @@
   };
 </script>
 
-<dialog bind:this={dialog} class="modal modal-bottom sm:modal-middle">
+<dialog bind:this={dialog} class="modal modal-bottom sm:modal-middle modal-responsive">
   <div class="modal-box relative">
     <button class="btn btn-circle btn-ghost outline-none absolute right-2 top-2" on:click={closeModal}>
       <img src={CloseIcon} alt="Close" height="24" width="24" />
@@ -29,4 +29,10 @@
     {/if}
     <slot />
   </div>
-</dialog>
+</dialog>
+
+<style>
+  .modal-responsive {
+    padding-bottom: env(safe-area-inset-bottom, 0);
+  }
+</style>
diff --git a/apps/web/src/lib/components/things/ThingCard.svelte b/apps/web/src/lib/components/things/ThingCard.svelte
@@ -12,7 +12,7 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-	class="h-max relative flex flex-col bg-white border border-neutral-400 rounded-md shadow-low overflow-hidden cursor-pointer"
+	class="h-max relative flex flex-col bg-white border border-neutral-400 rounded-md shadow-low overflow-hidden cursor-pointer outline-none"
 	on:click
 	role="button"
 	tabindex="-1"

diff --git a/apps/web/src/lib/components/things/ThingCardView.svelte b/apps/web/src/lib/components/things/ThingCardView.svelte
@@ -5,6 +5,7 @@
 	import ThingCard from './ThingCard.svelte';
 	import { Modal } from '../Modal';
 	import ThingDetails from './ThingDetails.svelte';
+	import { vibrate } from '$lib/utils/haptics';
 
 	export let thing: Thing;
 
@@ -26,6 +27,7 @@
 	remainingStock={thing.available}
 	on:click={() => {
     showModal = true;
+		vibrate();
   }}
 />
 

diff --git a/apps/web/src/lib/components/things/ThingDetails.svelte b/apps/web/src/lib/components/things/ThingDetails.svelte
@@ -26,7 +26,7 @@
   };
 </script>
 
-<div class="rounded-md overflow-hidden lg:text-lg border border-neutral-400 flex flex-row items-stretch">
+<div class="rounded-md overflow-hidden text-lg border border-neutral-400 flex flex-row items-stretch">
   <div class="px-2 py-1 flex flex-row items-center flex-grow-0 border-r border-neutral-400 {stockContainerStyle(thing.available)}">
     {thing.available} / {thing.stock}
   </div>

diff --git a/apps/web/src/lib/utils/haptics.ts b/apps/web/src/lib/utils/haptics.ts
@@ -0,0 +1,3 @@
+export const vibrate = () => {
+  navigator.vibrate(100);
+};
diff --git a/apps/web/src/lib/views/Bookmarks/Bookmarks.svelte b/apps/web/src/lib/views/Bookmarks/Bookmarks.svelte
@@ -27,5 +27,5 @@
 		</tbody>
 	</table>
 {:else}
-	<div class="text-lg min-h-10 flex flex-col items-center">{$t('No Bookmarks')}</div>
+	<div class="min-h-12 text-lg text-center">{$t('No Bookmarks')}</div>
 {/if}
diff --git a/apps/web/src/lib/views/BottomNavigationView.svelte b/apps/web/src/lib/views/BottomNavigationView.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang='ts'>
 	import BookOpenIcon from '$lib/icons/book-open.svg';
 	import BookmarkIcon from '$lib/icons/bookmark.svg';
 	import LightbulbIcon from '$lib/icons/lightbulb.svg';
@@ -9,17 +9,23 @@
 	import { t } from '$lib/language/translate';
 	import { activeScreen, Screen } from '$lib/stores/app';
 	import { bookmarks } from '$lib/stores/bookmarks';
+	import { vibrate } from '$lib/utils/haptics';
 
 	$: catalogText = $t('Catalog');
 	$: bookmarksText = $t('Bookmarks');
 	$: learnText = $t('Learn');
+
+	const switchScreen = (screen: Screen) => {
+		$activeScreen = screen;
+		vibrate();
+	};
 </script>
 
 <div class="btm-nav bg-neutral-100 border-t border-neutral-400 upward-shadow box-content lg:hidden">
 	<button
 		class="bg-transparent"
 		class:active={$activeScreen === Screen.catalog}
-		on:click={() => ($activeScreen = Screen.catalog)}
+		on:click={() => switchScreen(Screen.catalog)}
 	>
 		<img
 			src={$activeScreen === Screen.catalog ? SolidBookOpenIcon : BookOpenIcon}
@@ -31,7 +37,7 @@
 	<button
 		class="bg-transparent"
 		class:active={$activeScreen === Screen.myList}
-		on:click={() => ($activeScreen = Screen.myList)}
+		on:click={() => switchScreen(Screen.myList)}
 	>
 		<div class="indicator">
 			{#if $bookmarks.length}
@@ -50,7 +56,7 @@
 	<button
 		class="bg-transparent"
 		class:active={$activeScreen === Screen.info}
-		on:click={() => ($activeScreen = Screen.info)}
+		on:click={() => switchScreen(Screen.info)}
 	>
 		<img
 			src={$activeScreen === Screen.info ? SolidLightbulbIcon : LightbulbIcon}

diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
@@ -15,12 +15,12 @@
 	url="https://web.pvdthings.coop"
 	twitterHandle="@pvdthings"
 />
-<main class="flex flex-col w-full">
+<main class="flex flex-col w-full min-h-screen">
 	<AppBar>
 		<HomeButton slot="start" />
 		<Actions slot="end" />
 	</AppBar>
-	<div class="flex-grow pt-24 lg:pt-32 pb-20">
+	<div class="flex-grow pt-24 lg:pt-32 pb-20 mx-3 lg:mx-auto lg:w-3/4 relative">
 		<slot />
 	</div>
 	<BottomNavigationView />

diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
@@ -18,22 +18,18 @@
 	});
 </script>
 
-<div class="mx-3 lg:mx-auto lg:w-3/4">
-	{#if !data}
-		<LoadingIndicator />
-	{:else}
-		<div id="AppView" class="relative">
-			{#if $activeScreen === Screen.catalog}
-				<CatalogView />
-			{/if}
+{#if !data}
+	<LoadingIndicator />
+{:else}
+	{#if $activeScreen === Screen.catalog}
+		<CatalogView />
+	{/if}
 
-			{#if $activeScreen === Screen.myList}
-				<Bookmarks />
-			{/if}
+	{#if $activeScreen === Screen.myList}
+		<Bookmarks />
+	{/if}
 
-			{#if $activeScreen === Screen.info}
-				<InfoView />
-			{/if}
-		</div>
+	{#if $activeScreen === Screen.info}
+		<InfoView />
 	{/if}
-</div>
+{/if}