8493dfe Move orgs to home, and search to header — radicle-explorer

Radicle web interface

Move orgs to home, and search to header

Alexis Sellier committed 4 years ago

commit 8493dfe52cf2d62b375d1ce1155447ae30323e75
parent 4d17a8ea49bb20005f6a7565662ef64e9fda2934

4 files changed +63 -34

modified src/App.svelte

@@ -44,6 +44,12 @@

     height: 100%;
     display: flex;
     flex-direction: column;
     background: linear-gradient(
 deg,
       var(--color-secondary-background) 0%,
       transparent 30%,
       transparent 100%
     );
   }
   .wrapper {
     display: flex;

@@ -69,7 +75,7 @@

     <div class="wrapper">
       <Router>
         <Route path="/">
           <Home />
           <Home {config} />
         </Route>
         <Route path="vesting">
           <Vesting {config} session={$session} />

modified src/Header.svelte

@@ -9,7 +9,8 @@

   import Connect from '@app/Connect.svelte';
   import type { Config } from '@app/config';
   import { Profile, ProfileType } from "@app/profile";
   import Avatar from "./Avatar.svelte";
   import Avatar from '@app/Avatar.svelte';
   import Search from '@app/Search.svelte';
   export let session: Session | null;
   export let config: Config;

@@ -29,26 +30,13 @@

     margin: 0;
     padding: 1.5rem;
   }
   header .nav {
     display: inline-block;
     height: 100%;
     margin-left: 1.5rem;
     white-space: nowrap;
   }
   header .nav a {
     display: inline-block;
     padding: 0.5rem 0.5rem;
     margin-right: 1.5rem;
     font-weight: 500;
     color: var(--color-foreground-6);
   }
   header .nav a:hover {
     color: var(--color-foreground);
   }
   header .left, header .right {
     display: flex;
     align-items: center;
   }
   .logo {
     display: flex;
   }
   .error {
     text-align: center;
     color: var(--color-negative);

@@ -63,6 +51,12 @@

   .error a:hover {
     text-decoration: none;
   }
   .search {
     height: 42px;
     width: 16rem;
     margin-left: 1rem;
     display: inline-block;
   }
   .address {
     display: flex;
     flex-direction: row;

@@ -124,10 +118,9 @@

 <header>
   <div class="left">
     <a use:link href="/"><Logo /></a>
     <div class="nav">
       <a use:link href="/orgs/">Orgs</a>
       <a use:link href="/registrations">Register</a>
     <a use:link href="/" class="logo"><Logo /></a>
     <div class="search">
       <Search />
     </div>
   </div>

added src/Search.svelte

@@ -0,0 +1,31 @@

 <script lang="ts">
   import { navigate } from 'svelte-routing';
   let input = "";
   const handleKeydown = (event: KeyboardEvent) => {
     if (event.key === 'Enter') {
       navigate(`/resolver/query?${
         new URLSearchParams({ q: input })
       }`);
     }
   };
 </script>
 <style>
   input {
     height: 100%;
     width: 100%;
     font-size: 0.875rem;
     text-overflow: ellipsis;
     margin: 0;
     padding:  0.5rem 1.25rem;
     border-style: dashed;
   }
 </style>
 <input
     size="40"
     type="text"
     bind:value={input}
     on:keydown={handleKeydown}
     placeholder="Search a name or address..." />

modified src/base/home/Index.svelte

@@ -1,23 +1,22 @@

 <script lang="ts">
   import { navigate } from 'svelte-routing';
   import type { Config } from '@app/config';
   import Orgs from '@app/base/orgs/Index.svelte';
   let input = "";
   const search = () => {
     navigate(`/resolver/query?${
       new URLSearchParams({ q: input })
     }`);
   };
   export let config: Config;
 </script>
 <style>
   main {
     width: 100%;
   }
 </style>
 <svelte:head>
   <title>Radicle &ndash; Home</title>
 </svelte:head>
 <main class="centered">
 <main>
   <div>
     <input size="40" type="text" bind:value={input} placeholder="Enter a name, address or domain..." />
     <button class="primary" on:click={search} disabled={!input}>
       Search
     </button>
     <Orgs {config} />
   </div>
 </main>