97e3226 Add descriptions to registration fields — radicle-explorer

Radicle web interface

Add descriptions to registration fields

Alexis Sellier committed 4 years ago

commit 97e3226e874c6943b56288b71563b51b958cb6b7
parent cd1104c6a2817f5e27e2995cbde484e62d5ef9e0

2 files changed +23 -1

modified src/Form.svelte

@@ -4,6 +4,7 @@

     value: string | null;
     label?: string;
     placeholder?: string;
     description: string;
     resolve?: boolean;
     editable: boolean;
   }

@@ -37,7 +38,7 @@

   .fields {
     display: grid;
     grid-template-columns: auto auto;
     grid-gap: 1.5rem;
     grid-gap: 1rem 1.5rem;
   }
   .fields > div {
     justify-self: start;

@@ -55,6 +56,11 @@

     white-space: nowrap;
   }
   .description {
     padding-left: 1rem;
     max-width: 32rem;
   }
   input.field {
     border-radius: 1rem;
     overflow: hidden;

@@ -71,6 +77,9 @@

   .label {
     border: 1px solid transparent;
     padding: 0.25rem;
     height: 100%;
     display: block;
   }
   .actions {

@@ -112,6 +121,9 @@

           {/if}
         </span>
       {/if}
       <div class="description text-small faded">
         {field.description}
       </div>
     </div>
   {/each}
 </div>

modified src/base/registrations/View.svelte

@@ -45,20 +45,30 @@

         if (r) {
           fields = [
             { name: "owner", placeholder: "",
               description: "The owner and controller of this name.",
               value: r.owner, resolve: true, editable: false },
             { name: "address", placeholder: "Ethereum address, eg. 0x4a9cf21...bc91",
               description: "The address this name resolves to. "
               + "For this name to be correctly associated with the address, "
               + "a reverse entry should also be set on the address.",
               value: r.address, editable: true },
             { name: "url", label: "URL", placeholder: "https://acme.org",
               description: "A homepage or other URL associated with this name.",
               value: r.url,editable: true },
             { name: "avatar", placeholder: "https://acme.org/avatar.png",
               description: "An avatar or square image associated with this name.",
               value: r.avatar, editable: true },
             { name: "twitter", placeholder: "Twitter username, eg. 'acme'",
               description: "The Twitter handle associated with this name.",
               value: r.twitter, editable: true },
             { name: "github", label: "GitHub", placeholder: "GitHub username, eg. 'acme'",
               description: "The GitHub username associated with this name.",
               value: r.github, editable: true },
             { name: "seed.id", label: "Seed ID", placeholder: "hynkyn...3nrzc@seed.acme.org:8887",
               description: "The ID of a Radicle Link node that hosts entities associated with this name.",
               value: r.seedId, editable: true },
             { name: "seed.api", label: "Seed API", placeholder: "https://seed.acme.org:8888",
               description: "The HTTP address of a node that serves Radicle entities over HTTP.",
               value: r.seedApi, editable: true },
           ];
           state = { status: Status.Found, registration: r };