3cbf265 Don't expand search bar on mobile — radicle-explorer

Radicle web interface

Don't expand search bar on mobile

Rūdolfs Ošiņš committed 3 years ago

commit 3cbf265def0cd48151cf5fa1b59e608648ceada5
parent e0e51b234ac352b2c0b2b9bdc9713921f26dce8d

2 files changed +21 -21

modified src/App/Header.svelte

@@ -62,7 +62,9 @@

   </div>
   <div class="right">
     <Connect />
     <div class="layout-desktop">
       <Connect />
     </div>
     <Floating>
       <div slot="toggle">
         <button class="toggle" name="Settings">

@@ -71,14 +73,5 @@

       </div>
       <SettingsDropdown slot="modal" />
     </Floating>
     <div class="layout-mobile">
       <Floating>
         <div slot="toggle">
           <span style="transform: scale(1.2);">
             <Icon name="ellipsis" />
           </span>
         </div>
       </Floating>
     </div>
   </div>
 </header>

modified src/App/Header/Search.svelte

@@ -16,15 +16,14 @@

   }>();
   export let input = "";
   let loading = false;
   let shaking = false;
   let expanded = false;
   // Clears search input on user navigation.
   router.historyStore.subscribe(() => (input = ""));
   const collapsedWidth = 13;
   const expandedWidth = 20;
   function shake() {
     shaking = true;
     debounce(() => (shaking = false), 500)();

@@ -69,7 +68,7 @@

         });
       }
       dispatch("finished");
       searchBarWidth = collapsedWidth;
       expanded = false;
     } else {
       unreachable(searchResult);
     }

@@ -77,7 +76,6 @@

   }
   $: valid = input !== "";
   $: searchBarWidth = collapsedWidth;
 </script>
 <style>

@@ -106,24 +104,33 @@

   }
   .search {
     transition: all 0.2s;
     width: 13rem;
   }
   .expanded {
     width: 20rem;
   }
   @media (max-width: 720px) {
     .search {
       display: none;
     .expanded {
       width: 13rem;
     }
   }
 </style>
 <div class="search" style:width={`${searchBarWidth}rem`}>
 <div class="search" class:expanded>
   <div class="search-bar" class:shaking>
     <TextInput
       valid={input !== ""}
       {loading}
       disabled={loading}
       bind:value={input}
       on:focus={() => (searchBarWidth = expandedWidth)}
       on:blur={() =>
         input === "" ? (searchBarWidth = collapsedWidth) : undefined}
       on:focus={() => {
         expanded = true;
       }}
       on:blur={() => {
         if (input === "") {
           expanded = false;
         }
       }}
       on:submit={search}
       placeholder="Search a name…">
       <div slot="left">