From c62395caff568facbaec141f78d70946e5750a44 Mon Sep 17 00:00:00 2001
From: Dillon Fagan <dillonfagan@pm.me>
Date: Tue, 3 Oct 2023 12:53:00 -0400
Subject: [PATCH 01/11] Remove table headers and reduce to two columns

---
 src/lib/views/CatalogView.svelte               |  2 +-
 src/lib/views/MyListView/MyListTableRow.svelte | 10 ++++------
 src/lib/views/MyListView/MyListView.svelte     |  7 -------
 3 files changed, 5 insertions(+), 14 deletions(-)
diff --git a/src/lib/views/CatalogView.svelte b/src/lib/views/CatalogView.svelte
index 6b6da53..d2ff367 100644
--- a/src/lib/views/CatalogView.svelte
+++ b/src/lib/views/CatalogView.svelte
@@ -1,6 +1,6 @@
 <script>
 	import BorrowModal from '$lib/components/BorrowModal/BorrowModal.svelte';
-import { t } from '$lib/language/translate';
+	import { t } from '$lib/language/translate';
 	import { filteredThings } from '$lib/stores/catalog';
 	import CategoryChooserView from './CategoryChooserView.svelte';
 	import SearchInputView from './SearchInputView.svelte';
diff --git a/src/lib/views/MyListView/MyListTableRow.svelte b/src/lib/views/MyListView/MyListTableRow.svelte
index a48645c..84faafc 100644
--- a/src/lib/views/MyListView/MyListTableRow.svelte
+++ b/src/lib/views/MyListView/MyListTableRow.svelte
@@ -14,7 +14,7 @@
 
 <tr>
   <td>
-    <div class="flex items-center space-x-3">
+    <div class="flex space-x-3">
       <div class="avatar">
         <div class="mask rounded-md border border-gray-300 bg-white w-14 h-14">
           <img src={imgSrc ?? BoxIcon} alt={thingName} />
@@ -23,14 +23,12 @@
       <div>
         <div class="text-base font-bold">{thingName}</div>
         <div class="text-sm">{available} {$t('Available')}</div>
+        <span class="badge badge-ghost mt-2 bg-yellow-300 border-yellow-400">{$t(category)}</span>
       </div>
     </div>
   </td>
-  <td>
-    <span class="badge badge-ghost bg-yellow-300 border-yellow-400">{$t(category)}</span>
-  </td>
-  <th class="float-right">
-    <button class="btn btn-ghost btn-circle" on:click={() => dispatch('remove')}>
+  <th>
+    <button class="btn btn-ghost btn-circle float-right" on:click={() => dispatch('remove')}>
       <img src={MinusCircleIcon} alt="Remove" class="h-6 w-6" />
     </button>
   </th>
diff --git a/src/lib/views/MyListView/MyListView.svelte b/src/lib/views/MyListView/MyListView.svelte
index 947d889..b408229 100644
--- a/src/lib/views/MyListView/MyListView.svelte
+++ b/src/lib/views/MyListView/MyListView.svelte
@@ -12,13 +12,6 @@
 
 {#if $things.length > 0}
   <table class="table">
-    <thead>
-      <tr>
-        <th>{$t('Name')}</th>
-        <th>{$t('Category')}</th>
-        <th></th>
-      </tr>
-    </thead>
     <tbody>
       {#each $things as thing}
         {@const thingName = isSpanish ? thing.spanishName : thing.name}

From c007c1e3a405ed65aa74c1320aa4221da214df19 Mon Sep 17 00:00:00 2001
From: Dillon Fagan <dillonfagan@pm.me>
Date: Tue, 3 Oct 2023 13:23:28 -0400
Subject: [PATCH 02/11] Add viewport options for iOS responsiveness

---
 src/app.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app.html b/src/app.html
index 8ab7827..e9c5f3f 100644
--- a/src/app.html
+++ b/src/app.html
@@ -4,7 +4,7 @@
 		<meta charset="utf-8" />
 		<link rel="manifest" href="%sveltekit.assets%/manifest.json" crossorigin="use-credentials">
 		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
-		<meta name="viewport" content="width=device-width" />
+		<meta name="viewport" content="width=device-width; initial-scale=1; viewport-fit=cover">
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

From 34a609e3603f954519b91c61a4bfe2d53cc1eede Mon Sep 17 00:00:00 2001
From: Dillon Fagan <dillonfagan@pm.me>
Date: Wed, 4 Oct 2023 15:25:02 -0400
Subject: [PATCH 03/11] Attempt to fix top spacing in bottom nav

---
 src/lib/views/BottomNavigationView.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/lib/views/BottomNavigationView.svelte b/src/lib/views/BottomNavigationView.svelte
index 9bc1d90..1e54b9a 100644
--- a/src/lib/views/BottomNavigationView.svelte
+++ b/src/lib/views/BottomNavigationView.svelte
@@ -15,7 +15,7 @@
 	$: infoText = $t('Info');
 </script>
 
-<div class="btm-nav bg-indigo-50 upward-shadow lg:hidden">
+<div class="btm-nav pt-safe-area bg-indigo-50 upward-shadow lg:hidden">
 	<button
 		class="bg-transparent"
 		class:active={$activeScreen === Screen.catalog}
@@ -62,6 +62,10 @@
 </div>
 
 <style>
+	.pt-safe-area {
+		padding-top: env(safe-area-inset-bottom);
+	}
+
 	.upward-shadow {
 		box-shadow: 0 -1px 4px rgba(50, 50, 50, 0.2);
 	}

From 7fad32236082fcf4dfacf1d4d411ea74888efb11 Mon Sep 17 00:00:00 2001
From: Dillon Fagan <dillonfagan@pm.me>
Date: Wed, 4 Oct 2023 15:49:46 -0400
Subject: [PATCH 04/11] Wrap bottom navigation and override inset-bottom
 padding

---
 src/lib/views/BottomNavigationView.svelte | 84 ++++++++++++-----------
 1 file changed, 43 insertions(+), 41 deletions(-)

diff --git a/src/lib/views/BottomNavigationView.svelte b/src/lib/views/BottomNavigationView.svelte
index 1e54b9a..d5f6db9 100644
--- a/src/lib/views/BottomNavigationView.svelte
+++ b/src/lib/views/BottomNavigationView.svelte
@@ -15,54 +15,56 @@
 	$: infoText = $t('Info');
 </script>
 
-<div class="btm-nav pt-safe-area bg-indigo-50 upward-shadow lg:hidden">
-	<button
-		class="bg-transparent"
-		class:active={$activeScreen === Screen.catalog}
-		on:click={() => ($activeScreen = Screen.catalog)}
-	>
-		<img
-			src={$activeScreen === Screen.catalog ? SolidBookOpenIcon : BookOpenIcon}
-			alt={catalogText}
-			width={28}
-			height={28}
-		/>
-	</button>
-	<button
-		class="bg-transparent"
-		class:active={$activeScreen === Screen.myList}
-		on:click={() => ($activeScreen = Screen.myList)}
-	>
-		<div class="indicator">
-			{#if $thingsLength}
-				<span class="indicator-item badge bg-indigo-500 border-indigo-600 text-white">
-					{$thingsLength}
-				</span> 
-			{/if}
+<div class="pb-safe-area bg-indigo-50 lg:hidden">
+	<div class="btm-nav pb-0 bg-inherit upward-shadow">
+		<button
+			class="bg-transparent"
+			class:active={$activeScreen === Screen.catalog}
+			on:click={() => ($activeScreen = Screen.catalog)}
+		>
 			<img
-				src={$activeScreen === Screen.myList ? SolidBookmarkIcon : BookmarkIcon}
-				alt={myListText}
+				src={$activeScreen === Screen.catalog ? SolidBookOpenIcon : BookOpenIcon}
+				alt={catalogText}
 				width={28}
 				height={28}
 			/>
-		</div>
-	</button>
-	<button
-		class="bg-transparent"
-		class:active={$activeScreen === Screen.info}
-		on:click={() => ($activeScreen = Screen.info)}
-	>
-		<img
-			src={$activeScreen === Screen.info ? SolidLightbulbIcon : LightbulbIcon}
-			alt={infoText}
-			width={28}
-			height={28}
-		/>
-	</button>
+		</button>
+		<button
+			class="bg-transparent"
+			class:active={$activeScreen === Screen.myList}
+			on:click={() => ($activeScreen = Screen.myList)}
+		>
+			<div class="indicator">
+				{#if $thingsLength}
+					<span class="indicator-item badge bg-indigo-500 border-indigo-600 text-white">
+						{$thingsLength}
+					</span> 
+				{/if}
+				<img
+					src={$activeScreen === Screen.myList ? SolidBookmarkIcon : BookmarkIcon}
+					alt={myListText}
+					width={28}
+					height={28}
+				/>
+			</div>
+		</button>
+		<button
+			class="bg-transparent"
+			class:active={$activeScreen === Screen.info}
+			on:click={() => ($activeScreen = Screen.info)}
+		>
+			<img
+				src={$activeScreen === Screen.info ? SolidLightbulbIcon : LightbulbIcon}
+				alt={infoText}
+				width={28}
+				height={28}
+			/>
+		</button>
+	</div>
 </div>
 
 <style>
-	.pt-safe-area {
+	.pb-safe-area {
 		padding-top: env(safe-area-inset-bottom);
 	}
 

From 13a415248d21ed58ec275d8c30089fb54fae3b32 Mon Sep 17 00:00:00 2001
From: Dillon Fagan <dillonfagan@pm.me>
Date: Wed, 4 Oct 2023 16:20:10 -0400
Subject: [PATCH 05/11] Try to fix bottom nav for PWAs

---
 src/lib/views/BottomNavigationView.svelte | 86 +++++++++++------------
 1 file changed, 40 insertions(+), 46 deletions(-)

diff --git a/src/lib/views/BottomNavigationView.svelte b/src/lib/views/BottomNavigationView.svelte
index d5f6db9..6965142 100644
--- a/src/lib/views/BottomNavigationView.svelte
+++ b/src/lib/views/BottomNavigationView.svelte
@@ -15,59 +15,53 @@
 	$: infoText = $t('Info');
 </script>
 
-<div class="pb-safe-area bg-indigo-50 lg:hidden">
-	<div class="btm-nav pb-0 bg-inherit upward-shadow">
-		<button
-			class="bg-transparent"
-			class:active={$activeScreen === Screen.catalog}
-			on:click={() => ($activeScreen = Screen.catalog)}
-		>
+<div class="btm-nav min-h-[4rem] bg-indigo-50 upward-shadow lg:hidden">
+	<button
+		class="bg-transparent"
+		class:active={$activeScreen === Screen.catalog}
+		on:click={() => ($activeScreen = Screen.catalog)}
+	>
+		<img
+			src={$activeScreen === Screen.catalog ? SolidBookOpenIcon : BookOpenIcon}
+			alt={catalogText}
+			width={28}
+			height={28}
+		/>
+	</button>
+	<button
+		class="bg-transparent"
+		class:active={$activeScreen === Screen.myList}
+		on:click={() => ($activeScreen = Screen.myList)}
+	>
+		<div class="indicator">
+			{#if $thingsLength}
+				<span class="indicator-item badge bg-indigo-500 border-indigo-600 text-white">
+					{$thingsLength}
+				</span> 
+			{/if}
 			<img
-				src={$activeScreen === Screen.catalog ? SolidBookOpenIcon : BookOpenIcon}
-				alt={catalogText}
+				src={$activeScreen === Screen.myList ? SolidBookmarkIcon : BookmarkIcon}
+				alt={myListText}
 				width={28}
 				height={28}
 			/>
-		</button>
-		<button
-			class="bg-transparent"
-			class:active={$activeScreen === Screen.myList}
-			on:click={() => ($activeScreen = Screen.myList)}
-		>
-			<div class="indicator">
-				{#if $thingsLength}
-					<span class="indicator-item badge bg-indigo-500 border-indigo-600 text-white">
-						{$thingsLength}
-					</span> 
-				{/if}
-				<img
-					src={$activeScreen === Screen.myList ? SolidBookmarkIcon : BookmarkIcon}
-					alt={myListText}
-					width={28}
-					height={28}
-				/>
-			</div>
-		</button>
-		<button
-			class="bg-transparent"
-			class:active={$activeScreen === Screen.info}
-			on:click={() => ($activeScreen = Screen.info)}
-		>
-			<img
-				src={$activeScreen === Screen.info ? SolidLightbulbIcon : LightbulbIcon}
-				alt={infoText}
-				width={28}
-				height={28}
-			/>
-		</button>
-	</div>
+		</div>
+	</button>
+	<button
+		class="bg-transparent"
+		class:active={$activeScreen === Screen.info}
+		on:click={() => ($activeScreen = Screen.info)}
+	>
+		<img
+			src={$activeScreen === Screen.info ? SolidLightbulbIcon : LightbulbIcon}
+			alt={infoText}
+			width={28}
+			height={28}
+		/>
+	</button>
 </div>
 
 <style>
-	.pb-safe-area {
-		padding-top: env(safe-area-inset-bottom);
-	}
-
 	.upward-shadow {
 		box-shadow: 0 -1px 4px rgba(50, 50, 50, 0.2);
 	}

From c48e9c84e2c9e361cad2234837c7e0c9335dc48d Mon Sep 17 00:00:00 2001
From: Dillon Fagan <dillonfagan@pm.me>
Date: Wed, 4 Oct 2023 16:33:50 -0400
Subject: [PATCH 06/11] Set a max height

---
 src/lib/views/BottomNavigationView.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/views/BottomNavigationView.svelte b/src/lib/views/BottomNavigationView.svelte
index 6965142..d2a3ea6 100644
--- a/src/lib/views/BottomNavigationView.svelte
+++ b/src/lib/views/BottomNavigationView.svelte
@@ -15,7 +15,7 @@
 	$: infoText = $t('Info');
 </script>
 
-<div class="btm-nav min-h-[4rem] bg-indigo-50 upward-shadow lg:hidden">
+<div class="btm-nav max-h-6 bg-indigo-50 upward-shadow lg:hidden">
 	<button
 		class="bg-transparent"
 		class:active={$activeScreen === Screen.catalog}

From 8b50ac7d115002927ad40245e92c5769317d5b6c Mon Sep 17 00:00:00 2001
From: Dillon Fagan <dillonfagan@pm.me>
Date: Wed, 4 Oct 2023 16:38:01 -0400
Subject: [PATCH 07/11] Shrink the nav icons

---
 src/lib/views/BottomNavigationView.svelte | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/lib/views/BottomNavigationView.svelte b/src/lib/views/BottomNavigationView.svelte
index d2a3ea6..8f294a0 100644
--- a/src/lib/views/BottomNavigationView.svelte
+++ b/src/lib/views/BottomNavigationView.svelte
@@ -15,7 +15,7 @@
 	$: infoText = $t('Info');
 </script>
 
-<div class="btm-nav max-h-6 bg-indigo-50 upward-shadow lg:hidden">
+<div class="btm-nav bg-indigo-50 upward-shadow lg:hidden">
 	<button
 		class="bg-transparent"
 		class:active={$activeScreen === Screen.catalog}
@@ -24,8 +24,7 @@
 		<img
 			src={$activeScreen === Screen.catalog ? SolidBookOpenIcon : BookOpenIcon}
 			alt={catalogText}
-			width={28}
-			height={28}
+			class="w-5 h-5"
 		/>
 	</button>
 	<button
@@ -42,8 +41,7 @@
 			<img
 				src={$activeScreen === Screen.myList ? SolidBookmarkIcon : BookmarkIcon}
 				alt={myListText}
-				width={28}
-				height={28}
+				class="w-5 h-5"
 			/>
 		</div>
 	</button>
@@ -55,8 +53,7 @@
 		<img
 			src={$activeScreen === Screen.info ? SolidLightbulbIcon : LightbulbIcon}
 			alt={infoText}
-			width={28}
-			height={28}
+			class="w-5 h-5"
 		/>
 	</button>
 </div>

From dce58764dd637209bef42fc2b988b0d3a8dc1744 Mon Sep 17 00:00:00 2001
From: Dillon Fagan <dillonfagan@pm.me>
Date: Wed, 4 Oct 2023 16:49:35 -0400
Subject: [PATCH 08/11] Add extra small labels

---
 src/lib/views/BottomNavigationView.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/views/BottomNavigationView.svelte b/src/lib/views/BottomNavigationView.svelte
index 8f294a0..2165520 100644
--- a/src/lib/views/BottomNavigationView.svelte
+++ b/src/lib/views/BottomNavigationView.svelte
@@ -26,6 +26,7 @@
 			alt={catalogText}
 			class="w-5 h-5"
 		/>
+		<span class="text-xs font-display font-semibold">Catalog</span>
 	</button>
 	<button
 		class="bg-transparent"
@@ -36,7 +37,7 @@
 			{#if $thingsLength}
 				<span class="indicator-item badge bg-indigo-500 border-indigo-600 text-white">
 					{$thingsLength}
-				</span> 
+				</span>
 			{/if}
 			<img
 				src={$activeScreen === Screen.myList ? SolidBookmarkIcon : BookmarkIcon}
@@ -44,6 +45,7 @@
 				class="w-5 h-5"
 			/>
 		</div>
+		<div class="text-xs font-display font-semibold">Bookmarks</div>
 	</button>
 	<button
 		class="bg-transparent"
@@ -55,6 +57,7 @@
 			alt={infoText}
 			class="w-5 h-5"
 		/>
+		<span class="text-xs font-display font-semibold">Learn</span>
 	</button>
 </div>
 

From 5432b157f5da43c8ae0cf61051ae2ae62893904b Mon Sep 17 00:00:00 2001
From: Dillon Fagan <dillonfagan@pm.me>
Date: Wed, 4 Oct 2023 20:03:37 -0400
Subject: [PATCH 09/11] Box content sizing might solve the problem

---
 src/lib/views/BottomNavigationView.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/lib/views/BottomNavigationView.svelte b/src/lib/views/BottomNavigationView.svelte
index 2165520..55bf8e7 100644
--- a/src/lib/views/BottomNavigationView.svelte
+++ b/src/lib/views/BottomNavigationView.svelte
@@ -15,7 +15,7 @@
 	$: infoText = $t('Info');
 </script>
 
-<div class="btm-nav bg-indigo-50 upward-shadow lg:hidden">
+<div class="btm-nav pb-0 bg-indigo-50 upward-shadow box-content inset-bottom lg:hidden">
 	<button
 		class="bg-transparent"
 		class:active={$activeScreen === Screen.catalog}
@@ -62,6 +62,10 @@
 </div>
 
 <style>
+	.inset-bottom {
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+
 	.upward-shadow {
 		box-shadow: 0 -1px 4px rgba(50, 50, 50, 0.2);
 	}

From b827196a3b3a2e63c4ea395141bb19452251cded Mon Sep 17 00:00:00 2001
From: Dillon Fagan <dillonfagan@pm.me>
Date: Wed, 4 Oct 2023 20:04:30 -0400
Subject: [PATCH 10/11] Remove padding overrides

---
 src/lib/views/BottomNavigationView.svelte | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/lib/views/BottomNavigationView.svelte b/src/lib/views/BottomNavigationView.svelte
index 55bf8e7..926ac13 100644
--- a/src/lib/views/BottomNavigationView.svelte
+++ b/src/lib/views/BottomNavigationView.svelte
@@ -15,7 +15,7 @@
 	$: infoText = $t('Info');
 </script>
 
-<div class="btm-nav pb-0 bg-indigo-50 upward-shadow box-content inset-bottom lg:hidden">
+<div class="btm-nav bg-indigo-50 upward-shadow box-content lg:hidden">
 	<button
 		class="bg-transparent"
 		class:active={$activeScreen === Screen.catalog}
@@ -62,10 +62,6 @@
 </div>
 
 <style>
-	.inset-bottom {
-		padding-bottom: env(safe-area-inset-bottom);
-	}
-
 	.upward-shadow {
 		box-shadow: 0 -1px 4px rgba(50, 50, 50, 0.2);
 	}

From 45a336369fe34036d365d833b7b29b67acb9ba72 Mon Sep 17 00:00:00 2001
From: Dillon Fagan <dillonfagan@pm.me>
Date: Wed, 4 Oct 2023 20:12:45 -0400
Subject: [PATCH 11/11] Add Spanish translations to nav labels

---
 src/lib/language/translations.ts          |  8 ++++----
 src/lib/views/BottomNavigationView.svelte | 14 +++++++-------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/lib/language/translations.ts b/src/lib/language/translations.ts
index 579d68e..2039137 100644
--- a/src/lib/language/translations.ts
+++ b/src/lib/language/translations.ts
@@ -32,8 +32,8 @@ export default {
         "Wednesday": "Wednesday",
         "Saturday": "Saturday",
         "Catalog": "Catalog",
-        "My List": "My List",
-        "Info": "Info",
+        "Bookmarks": "Bookmarks",
+        "Learn": "Learn",
         "Bookmarked": "Bookmarked",
         "No Bookmarks": "No Bookmarks",
         "It's not loading!": "It's not loading!"
@@ -72,8 +72,8 @@ export default {
         "Automotive": "Automotor",
         "Health": "Salud",
         "Catalog": "Catálago",
-        "My List": "Mi lista",
-        "Info": "Información",
+        "Bookmarks": "Marcadores",
+        "Learn": "Aprende",
         "Bookmarked": "Marcado",
         "No Bookmarks": "No hay marcadores",
         "It's not loading!": "¡No se está cargando!"
diff --git a/src/lib/views/BottomNavigationView.svelte b/src/lib/views/BottomNavigationView.svelte
index 926ac13..4d5150a 100644
--- a/src/lib/views/BottomNavigationView.svelte
+++ b/src/lib/views/BottomNavigationView.svelte
@@ -11,8 +11,8 @@
 	import { thingsLength } from '$lib/stores/myList';
 
 	$: catalogText = $t('Catalog');
-	$: myListText = $t('My List');
-	$: infoText = $t('Info');
+	$: bookmarksText = $t('Bookmarks');
+	$: learnText = $t('Learn');
 </script>
 
 <div class="btm-nav bg-indigo-50 upward-shadow box-content lg:hidden">
@@ -26,7 +26,7 @@
 			alt={catalogText}
 			class="w-5 h-5"
 		/>
-		<span class="text-xs font-display font-semibold">Catalog</span>
+		<span class="text-xs font-display font-semibold">{catalogText}</span>
 	</button>
 	<button
 		class="bg-transparent"
@@ -41,11 +41,11 @@
 			{/if}
 			<img
 				src={$activeScreen === Screen.myList ? SolidBookmarkIcon : BookmarkIcon}
-				alt={myListText}
+				alt={bookmarksText}
 				class="w-5 h-5"
 			/>
 		</div>
-		<div class="text-xs font-display font-semibold">Bookmarks</div>
+		<div class="text-xs font-display font-semibold">{bookmarksText}</div>
 	</button>
 	<button
 		class="bg-transparent"
@@ -54,10 +54,10 @@
 	>
 		<img
 			src={$activeScreen === Screen.info ? SolidLightbulbIcon : LightbulbIcon}
-			alt={infoText}
+			alt={learnText}
 			class="w-5 h-5"
 		/>
-		<span class="text-xs font-display font-semibold">Learn</span>
+		<span class="text-xs font-display font-semibold">{learnText}</span>
 	</button>
 </div>
 
