display search bar in full width on small screens

immich-app · Apr 16, 2024 · e48df70 · e48df70
1 parent 7076ec9
commit e48df70
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 31 deletions.
diff --git a/web/src/app.html b/web/src/app.html
@@ -5,7 +5,7 @@
     <!-- metadata:tags -->
 
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
     <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />

diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -10,7 +10,7 @@
   import { isSideBarOpen } from '$lib/stores/side-bar.store';
   import { clickOutside } from '$lib/utils/click-outside';
   import { logout } from '@immich/sdk';
-  import { mdiMenu, mdiTrayArrowUp, mdiWrench } from '@mdi/js';
+  import { mdiMagnify, mdiMenu, mdiTrayArrowUp, mdiWrench } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import { fade, fly } from 'svelte/transition';
   import { md } from '$lib/utils/media-breakpoint';
@@ -26,6 +26,8 @@
   let shouldShowAccountInfo = false;
   let shouldShowAccountInfoPanel = false;
   let showLogoText = false;
+  let showSearchBar = false;
+  let isSearchBarFullWidth = true;
 
   const dispatch = createEventDispatcher<{
     uploadClicked: void;
@@ -40,12 +42,27 @@
     }
     resetSavedUser();
   };
+
+  const onSmallScreenDisplay = () => {
+    showLogoText = false;
+    isSearchBarFullWidth = true;
+  };
+
+  const onMediumScreenDisplay = () => {
+    showLogoText = true;
+    isSearchBarFullWidth = false;
+    showSearchBar = false;
+  };
 </script>
 
 <section id="dashboard-navbar" class="fixed z-[900] h-[var(--navbar-height)] w-screen text-sm">
   <SkipLink>Skip to content</SkipLink>
   <div
-    class="grid h-full grid-cols-[min-content_theme(spacing.18)_auto] items-center border-b bg-immich-bg py-2 dark:border-b-immich-dark-gray dark:bg-immich-dark-bg md:grid-cols-[min-content_theme(spacing.40)_auto]"
+    class="relative grid h-full grid-cols-[min-content_theme(spacing.18)_auto] items-center border-b bg-immich-bg py-2 dark:border-b-immich-dark-gray dark:bg-immich-dark-bg md:grid-cols-[min-content_theme(spacing.40)_auto]"
+    use:md={{
+      match: onMediumScreenDisplay,
+      unmatch: onSmallScreenDisplay,
+    }}
   >
     <div class="flex">
       <div class="ml-4 lg:hidden" id="sidebar-toggle-button">
@@ -54,34 +71,25 @@
         </IconButton>
       </div>
     </div>
-    <a
-      data-sveltekit-preload-data="hover"
-      class="ml-4"
-      href={AppRoute.PHOTOS}
-      use:md={{
-        match: () => (showLogoText = true),
-        unmatch: () => (showLogoText = false),
-      }}
-    >
+    <a data-sveltekit-preload-data="hover" class="ml-4" href={AppRoute.PHOTOS}>
       <ImmichLogo class="w-[72%] md:w-[92%]" noText={!showLogoText} />
     </a>
-    <div class="flex justify-between gap-16 pr-6">
-      <div class="hidden w-full max-w-5xl flex-1 pl-4 sm:block">
-        {#if $featureFlags.search}
-          <SearchBar grayTheme={true} />
+
+    <div class="flex justify-between gap-6 pr-6">
+      <div class="{isSearchBarFullWidth ? 'flex' : 'hidden'} sm:flex sm:w-full max-w-5xl pl-4 lg:pl-24">
+        {#if $featureFlags.search && (!isSearchBarFullWidth || showSearchBar)}
+          <SearchBar grayTheme fullWidth={isSearchBarFullWidth} bind:isOpen={showSearchBar} />
         {/if}
       </div>
 
       <section class="flex place-items-center justify-end gap-2 max-sm:w-full">
-        {#if $featureFlags.search}
-          <a href={AppRoute.SEARCH} id="search-button" class="pl-4 sm:hidden">
-            <IconButton title="Search">
-              <div class="flex gap-2">
-                <Icon path={mdiMagnify} size="1.5em" />
-              </div>
-            </IconButton>
-          </a>
-        {/if}
+        <div class="pl-4 sm:hidden">
+          <IconButton title="Search" on:click={() => (showSearchBar = true)}>
+            <div class="flex gap-2">
+              <Icon path={mdiMagnify} size="1.5em" />
+            </div>
+          </IconButton>
+        </div>
 
         <div class="hidden sm:flex place-items-center justify-end gap-2">
           <ThemeButton />

diff --git a/web/src/lib/components/shared-components/search-bar/search-bar.svelte b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
@@ -10,19 +10,30 @@
   import SearchFilterBox from './search-filter-box.svelte';
   import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
   import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
-  import { handlePromiseError } from '$lib/utils';
+  import { asyncTimeout, handlePromiseError } from '$lib/utils';
   import { shortcuts } from '$lib/utils/shortcut';
   import { focusOutside } from '$lib/utils/focus-outside';
+  import { tick } from 'svelte';
+  import { fly, type FlyParams } from 'svelte/transition';
 
   export let value = '';
-  export let grayTheme: boolean;
+  export let grayTheme = false;
   export let searchQuery: MetadataSearchDto | SmartSearchDto = {};
+  export let fullWidth = false;
+  export let isOpen = false;
 
   let input: HTMLInputElement;
 
   let showHistory = false;
   let showFilter = false;
-  $: showClearIcon = value.length > 0;
+
+  $: showClearIcon = fullWidth || value.length > 0;
+
+  $: searchBarClasses = fullWidth ? 'absolute inset-x-2.5 top-2.5' : 'relative block w-full';
+
+  $: if (fullWidth && isOpen && input) {
+    input.focus();
+  }
 
   const onSearch = async (payload: SmartSearchDto | MetadataSearchDto) => {
     const params = getMetadataSearchQuery(payload);
@@ -38,6 +49,12 @@
     $savedSearchTerms = $savedSearchTerms.filter((item) => item !== searchTerm);
   };
 
+  const onClearIconClick = () => {
+    if (value.length === 0) {
+      onFocusOut();
+    }
+  };
+
   const saveSearchTerm = (saveValue: string) => {
     $savedSearchTerms = [saveValue, ...$savedSearchTerms];
 
@@ -64,26 +81,37 @@
     showHistory = false;
     $isSearchEnabled = false;
     showFilter = false;
+    isOpen = false;
   };
 
   const onHistoryTermClick = async (searchTerm: string) => {
     const searchPayload = { query: searchTerm };
     await onSearch(searchPayload);
   };
 
-  const onFilterClick = () => {
+  const onFilterClick = async () => {
     showFilter = !showFilter;
     value = '';
 
     if (showFilter) {
       showHistory = false;
+    } else {
+      await tick();
+      input.focus();
     }
   };
 
   const onSubmit = () => {
     handlePromiseError(onSearch({ query: value }));
     saveSearchTerm(value);
   };
+
+  const animate = (node: Element, args?: FlyParams) => {
+    if (fullWidth) {
+      return fly(node, args);
+    }
+    return {};
+  };
 </script>
 
 <svelte:window
@@ -94,7 +122,16 @@
   ]}
 />
 
-<div class="w-full relative" use:clickOutside={{ onOutclick: onFocusOut }} use:focusOutside={{ onFocusOut }}>
+<div
+  id="search-bar"
+  class={searchBarClasses}
+  transition:animate={{
+    x: '50%',
+    duration: 350,
+  }}
+  use:clickOutside={{ onOutclick: onFocusOut }}
+  use:focusOutside={{ onFocusOut }}
+>
   <form
     draggable="false"
     autocomplete="off"
@@ -119,7 +156,7 @@
           : 'dark:bg-immich-dark-bg'} px-14 py-4 text-immich-fg/75 dark:text-immich-dark-fg {(showHistory &&
           $savedSearchTerms.length > 0) ||
         showFilter
-          ? 'rounded-t-3xl border  border-gray-200 bg-white dark:border-gray-800'
+          ? 'rounded-t-3xl border border-gray-200 bg-white opacity-100 dark:border-gray-800'
           : 'rounded-3xl border border-transparent bg-gray-200'}"
         placeholder="Search your photos"
         required
@@ -147,6 +184,7 @@
       <div class="absolute inset-y-0 right-0 flex items-center pr-4">
         <button
           type="reset"
+          on:click={onClearIconClick}
           class="rounded-full p-2 hover:bg-immich-primary/5 active:bg-immich-primary/10 dark:text-immich-dark-fg/75 dark:hover:bg-immich-dark-primary/25 dark:active:bg-immich-dark-primary/[.35]"
         >
           <Icon ariaLabel="clear" path={mdiClose} size="1.5em" />