60ac86c Improve seeds dropdown — radicle-explorer

Radicle web interface

Improve seeds dropdown

Alexis Sellier committed 4 years ago

commit 60ac86c3d7b8baf4b70a9dc39b4615a64b3a10f7
parent e865fcbd3014b8695a8f6cbe0c70eec3c027426c

3 files changed +34 -38

modified src/Header.svelte

@@ -52,16 +52,22 @@

     margin-left: 1.5rem;
     white-space: nowrap;
   }
   header .nav a {
   header .nav .nav-link {
     display: inline-block;
     padding: 0.5rem 0.5rem;
     margin-right: 1.5rem;
     font-weight: 500;
     cursor: pointer;
     user-select: none;
     color: var(--color-foreground-6);
   }
   header .nav a:hover {
   header .nav .nav-link:hover {
     color: var(--color-foreground);
   }
   header .nav .seeds-container {
     display: inline-block;
   }
   .logo {
     display: flex;
   }

@@ -123,11 +129,6 @@

   div.toggle {
     display: none;
   }
   @media(max-width: 800px) {
     .balance + .seeds {
       display: none;
     }
   }
   @media(max-width: 720px) {
     .network, .search, header .nav, .balance {
       display: none;

@@ -164,8 +165,17 @@

       <Search />
     </div>
     <div class="nav">
       <a use:link href="/orgs/">Orgs</a>
       <a use:link href="/registrations">Register</a>
       <a use:link class="nav-link" href="/orgs/">Orgs</a>
       <a use:link class="nav-link" href="/registrations">Register</a>
       {#if session && Object.keys(session.siwe).length > 0}
         <span class="seeds-container">
           <span class="nav-link" on:click={toggleDropdown}>
             Seeds
           </span>
           <SeedDropdown seeds={session.siwe} visible={seedDropdown} {config} />
         </span>
       {/if}
     </div>
   </div>

@@ -187,12 +197,6 @@

         {/if}
       </span>
       {#if session && Object.keys(session.siwe).length > 0}
         <div class="seeds">
           <SeedDropdown seeds={session.siwe} {toggleDropdown} {seedDropdown} {config} />
         </div>
       {/if}
       <button class="address outline small"
         on:click={() => disconnectWallet(config)}
         on:mouseover={() => sessionButtonHover = true}

modified src/SeedDropdown.svelte

@@ -6,8 +6,7 @@

   import type { SeedSession } from "@app/siwe";
   export let seeds: { [key: string]: SeedSession };
   export let seedDropdown = false;
   export let toggleDropdown: () => void;
   export let visible = false;
   export let config: Config;
   // When a user signs into a new seed we want to update the seed listing

@@ -22,26 +21,16 @@

 </script>
 <style>
   .selector {
     margin-left: 2rem;
   }
 </style>
 <div class="selector">
   <span>
     <button class="seed outline small" on:click={toggleDropdown}>
       Seeds
     </button>
     {#await formatSeeds() then items}
       <Dropdown
         {items}
         selected={null}
         visible={seedDropdown}
         on:select={(item) => {
           seedDropdown = false;
           navigate(`/seeds/${item.detail}`);
         }}
       />
     {/await}
   </span>
 </div>
 {#await formatSeeds() then items}
   <Dropdown
     {items}
     selected={null}
     {visible}
     on:select={(item) => {
       visible = false;
       navigate(`/seeds/${item.detail}`);
     }}
   />
 {/await}

modified src/base/seeds/View.svelte

@@ -76,6 +76,9 @@

       width: 100%;
       padding: 1.5rem;
     }
     .signed-in {
       display: none;
     }
     .fields {
       grid-template-columns: 5rem auto;
     }