Merge pull request #40 from pvdthings/dev

Release - Fix Catalog Bookmarks Scroll

apps/web/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@library_os/web",
-	"version": "0.15.1",
+	"version": "0.15.2",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

apps/web/src/lib/components/Shell/BottomNavigation.svelte

@@ -0,0 +1,9 @@
+<div class="btm-nav bg-neutral-100 border-t border-neutral-400 upward-shadow box-content lg:hidden">
+	<slot />
+</div>
+
+<style>
+	.upward-shadow {
+		box-shadow: 0 -1px 4px rgba(50, 50, 50, 0.2);
+	}
+</style>

apps/web/src/lib/components/Shell/BottomNavigationItem.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let active: boolean = undefined;
+	export let icon: string;
+	export let indicatorValue: any = undefined;
+	export let label: string;
+</script>
+
+<button class="bg-transparent" class:active on:click>
+	<div class="indicator">
+		{#if indicatorValue}
+			<span class="indicator-item badge bg-indigo-500 border-indigo-600 text-white">
+				{indicatorValue}
+			</span>
+		{/if}
+		<img src={icon} alt={label} class="w-5 h-5" />
+	</div>
+	<div class="text-xs font-display font-semibold">
+		{label}
+	</div>
+</button>

apps/web/src/lib/components/Shell/index.ts

@@ -0,0 +1,3 @@
+export { default as AppBar } from "./AppBar.svelte";
+export { default as BottomNavigation } from "./BottomNavigation.svelte";
+export { default as BottomNavigationItem } from "./BottomNavigationItem.svelte";

apps/web/src/lib/components/TextInput.svelte

@@ -1,30 +1,54 @@
-<script>
-    import { createEventDispatcher } from 'svelte';
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import XMarkIcon from '$lib/icons/x-mark.svg';
 
-    export let value = "";
-    export let customClass = "";
-    export let invalid = false;
+	export let clear: boolean = false;
+	export let value: string = '';
+	export let invalid: boolean = false;
+	export let leadingIcon: string = undefined;
 
-    const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 
-    function keyReleased(event) {
-        if (event.key === 'Enter')
-            dispatch('enter');
-    }
+	const keyReleased = (event: { key: string }) => {
+		if (event.key === 'Enter') dispatch('enter');
+	};
+
+	const onClear = () => {
+		dispatch('clear');
+	};
 </script>
 
-<input
-    {...$$props}
-    bind:value
-    on:input
-    on:change
-    on:keyup={keyReleased}
-    class:invalid
-    class="w-full px-4 py-2 pl-10 rounded-md border border-neutral-400 shadow-high outline-none {customClass}"
-/>
+<div
+	class="bg-white flex flex-row items-center px-2 rounded-md border border-neutral-400 shadow-high overflow-hidden"
+>
+	{#if leadingIcon}
+		<img src={leadingIcon} alt="" class="w-6 h-6 mr-2" />
+	{/if}
+	<input
+		{...$$props}
+		bind:value
+		on:input
+		on:change
+		on:keyup={keyReleased}
+		class:invalid
+		class="flex-grow py-2 outline-none"
+	/>
+	<button
+		class="btn btn-circle btn-sm btn-ghost"
+		class:invisible={!clear}
+		disabled={!clear}
+		on:click={onClear}
+	>
+		<img src={XMarkIcon} alt="Clear" class="w-5 h-5" />
+	</button>
+</div>
 
 <style lang="postcss">
-    .invalid {
-        @apply bg-red-200;
-    }
-</style>
+	.invalid {
+		@apply bg-red-200;
+	}
+
+	button.invisible {
+		visibility: hidden;
+	}
+</style>

apps/web/src/lib/views/Bookmarks/Bookmarks.svelte

@@ -28,5 +28,5 @@
 		</tbody>
 	</table>
 {:else}
-	<div class="min-h-12 text-lg text-center">{$t('No Bookmarks')}</div>
+	<div class="min-h-12 font-bold uppercase text-lg text-center">{$t('No Bookmarks')}</div>
 {/if}

apps/web/src/lib/views/BottomNavigationView.svelte

@@ -1,4 +1,5 @@
-<script lang='ts'>
+<script lang="ts">
+	import { BottomNavigation, BottomNavigationItem } from '$lib/components/Shell';
 	import BookOpenIcon from '$lib/icons/book-open.svg';
 	import BookmarkIcon from '$lib/icons/bookmark.svg';
 	import LightbulbIcon from '$lib/icons/lightbulb.svg';
@@ -21,54 +22,24 @@
 	};
 </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}
+<BottomNavigation>
+	<BottomNavigationItem
+		active={$activeScreen === Screen.catalog}
+		icon={$activeScreen === Screen.catalog ? SolidBookOpenIcon : BookOpenIcon}
+		label={catalogText}
 		on:click={() => switchScreen(Screen.catalog)}
-	>
-		<img
-			src={$activeScreen === Screen.catalog ? SolidBookOpenIcon : BookOpenIcon}
-			alt={catalogText}
-			class="w-5 h-5"
-		/>
-		<span class="text-xs font-display font-semibold">{catalogText}</span>
-	</button>
-	<button
-		class="bg-transparent"
-		class:active={$activeScreen === Screen.myList}
+	/>
+	<BottomNavigationItem
+		active={$activeScreen === Screen.myList}
+		icon={$activeScreen === Screen.myList ? SolidBookmarkIcon : BookmarkIcon}
+		indicatorValue={$bookmarks.length}
+		label={bookmarksText}
 		on:click={() => switchScreen(Screen.myList)}
-	>
-		<div class="indicator">
-			{#if $bookmarks.length}
-				<span class="indicator-item badge bg-indigo-500 border-indigo-600 text-white">
-					{$bookmarks.length}
-				</span>
-			{/if}
-			<img
-				src={$activeScreen === Screen.myList ? SolidBookmarkIcon : BookmarkIcon}
-				alt={bookmarksText}
-				class="w-5 h-5"
-			/>
-		</div>
-		<div class="text-xs font-display font-semibold">{bookmarksText}</div>
-	</button>
-	<button
-		class="bg-transparent"
-		class:active={$activeScreen === Screen.info}
+	/>
+	<BottomNavigationItem
+		active={$activeScreen === Screen.info}
+		icon={$activeScreen === Screen.info ? SolidLightbulbIcon : LightbulbIcon}
+		label={learnText}
 		on:click={() => switchScreen(Screen.info)}
-	>
-		<img
-			src={$activeScreen === Screen.info ? SolidLightbulbIcon : LightbulbIcon}
-			alt={learnText}
-			class="w-5 h-5"
-		/>
-		<span class="text-xs font-display font-semibold">{learnText}</span>
-	</button>
-</div>
-
-<style>
-	.upward-shadow {
-		box-shadow: 0 -1px 4px rgba(50, 50, 50, 0.2);
-	}
-</style>
+	/>
+</BottomNavigation>

apps/web/src/lib/views/CatalogView.svelte

@@ -18,7 +18,9 @@
 <hr class="border-black border-opacity-20 my-6" />
 <BorrowModal />
 {#if $filteredThings.length > 0}
-	<ThingsView />
+	<div class="pb-20 lg:pb-0">
+		<ThingsView />
+	</div>
 {:else}
 	<div class="text-lg text-center font-bold uppercase">{$t('No Results')}</div>
 {/if}

apps/web/src/lib/views/SearchInputView.svelte

@@ -2,20 +2,17 @@
 	import { TextInput } from '$lib/components';
 	import { t } from '$lib/language/translate';
 	import { searchFilter } from '$lib/stores/catalog';
-	import XMarkIcon from '$lib/icons/x-mark.svg';
 	import SearchIcon from '$lib/icons/magnifying-glass.svg';
 
 	const clearSearch = () => {
 		$searchFilter = '';
 	};
 </script>
 
-<div class="relative">
-	<img src={SearchIcon} alt="Search" class="w-6 h-6 absolute top-2.5 left-2 transform" />
-	<TextInput bind:value={$searchFilter} placeholder={$t('Input.Search')} />
-	{#if $searchFilter.length > 0}
-		<button class="btn btn-circle btn-sm btn-ghost absolute right-2 top-1.5" on:click={clearSearch}>
-			<img src={XMarkIcon} alt="Clear Search" class="w-5 h-5 absolute top-1.75 left-2.25 transform" />
-		</button>
-	{/if}
-</div>
+<TextInput
+	leadingIcon={SearchIcon}
+	bind:value={$searchFilter}
+	placeholder={$t('Input.Search')}
+	clear={$searchFilter.length > 0}
+	on:clear={clearSearch}
+/>

apps/web/src/routes/+layout.svelte

@@ -2,9 +2,9 @@
 	import '../app.css';
 	import { Head } from '$lib/components';
 	import BottomNavigationView from '$lib/views/BottomNavigationView.svelte';
-	import AppBar from '$lib/components/AppBar.svelte';
 	import HomeButton from '$lib/components/HomeButton.svelte';
 	import { Actions } from '$lib/views/Actions';
+	import { AppBar } from '$lib/components/Shell';
 </script>
 
 <Head
@@ -20,7 +20,7 @@
 		<HomeButton slot="start" />
 		<Actions slot="end" />
 	</AppBar>
-	<div class="flex-grow pt-24 lg:pt-32 pb-28 mx-3 lg:mx-auto lg:w-3/4 relative">
+	<div class="flex-grow pt-24 lg:pt-32 mx-3 lg:mx-auto lg:w-3/4 relative">
 		<slot />
 	</div>
 	<BottomNavigationView />