fix: gnoweb UI styles (gnolang#3349)

This PR aims to fix some of remaining UI bugs on gnoweb after the revamp merge. Some of: gnolang#3355 - Fixes Safari select input design and icons - Fixes input hover - Fixes ToC font style - Fixes UI details and improve CSS - Fixes Responsive with long content - Fixes Scrollbar - Fixes fonts loading strategy and size - Fixes ts issue with copy btn (quick clicks) - Fixes some A11y
omarsy · Dec 18, 2024 · c1b5599 · c1b5599
1 parent 158e545
commit c1b5599
Show file tree

Hide file tree

Showing 14 changed files with 148 additions and 141 deletions.
diff --git a/gno.land/pkg/gnoweb/components/help.gohtml b/gno.land/pkg/gnoweb/components/help.gohtml
@@ -7,27 +7,36 @@
           <h1 class="text-600 font-bold text-gray-900">{{ .RealmName }}</h1>
         </div>
         <form class="flex flex-col lg:flex-row gap-x-3 gap-y-2 text-gray-300">
-          <div class="min-w-48 border rounded-sm overflow-hidden">
+          <div class="relative min-w-48 border rounded-sm overflow-hidden text-gray-600">
             <select
               id="cmdmode"
               data-role="help-select-mode"
-              class="bg-gray-100 text-100 focus:outline-transparent text-gray-600 border-r-transparent border-r-8 block w-full px-4 py-2 lg:py-1.5 lg:px-2"
+              class="appearance-none cursor-pointer bg-gray-100 hover:bg-gray-50 text-100 outline-none block w-full px-3 py-2 lg:py-1.5 lg:px-2"
             >
               <option value="fast" selected="selected">Mode: Fast</option>
               <option value="secure">Mode: Full Security</option>
             </select>
+            <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4">
+              <use href="#ico-arrow-down"></use>
+            </svg>
           </div>
-          <div class="relative flex w-full text-100">
-            <label for="help-input-addr" class="flex gap-3 items-center bg-gray-100 rounded-l-sm border border-r-transparent px-3 text-gray-600">Key&nbsp;/&nbsp;Address</label>
-            <input type="text" data-role="help-input-addr" id="help-input-addr" class="flex h-full bottom-1 w-full rounded-r-sm border px-4 py-2 lg:py-1.5 lg:px-2 text-gray-600 focus:border-gray-300 outline-none font-mono" placeholder="ADDRESS" />
+          <div class="group relative flex w-full text-100 border rounded-sm overflow-hidden has-[:focus]:border-gray-300 hover:border-gray-300">
+            <label for="help-input-addr" class="flex gap-3 items-center bg-gray-100 px-3 text-gray-600">Key&nbsp;/&nbsp;Address</label>
+            <input type="text" data-role="help-input-addr" id="help-input-addr" class="flex h-full bottom-1 w-full border-l px-4 py-2 lg:py-1.5 lg:px-2 text-gray-600 focus:border-l-gray-300 group-hover:border-l-gray-300 outline-none font-mono" placeholder="ADDRESS" />
           </div>
         </form>
       </header>
       <aside class="col-span-1 lg:col-span-3 lg:order-2 lg:row-start-1 lg:row-span-2 relative h-full" aria-label="Index">
         <div class="sticky top-14 pt-2">
-          <div id="sidebar-summary" class="toc max-h-screen overflow-scroll no-scrollbar bg-light lg:bg-transparent rounded-sm">
-            <label for="toc-expend" class="toc-expend-btn flex font-semibold lg:mt-10 justify-between items-center bg-gray-100 border lg:border-none lg:bg-transparent px-4 py-2 lg:p-0 rounded-sm">Functions Index
-              <input id="toc-expend" type="checkbox" class="hidden">
+          <div id="sidebar-summary" class="max-h-screen overflow-scroll no-scrollbar bg-light lg:bg-transparent rounded-sm">
+            <label for="toc-expend" class="toc-expend-btn flex text-100 lg:text-200 font-normal lg:font-semibold lg:mt-10 justify-between items-center bg-gray-100 hover:bg-gray-50 cursor-pointer border lg:border-none lg:bg-transparent px-4 py-2 lg:p-0 rounded-sm">
+              Functions Index
+              <input id="toc-expend" type="checkbox" class="peer hidden">
+              <span class="flex lg:hidden gap-1.5 items-center before:content-['open'] peer-checked:before:content-['close']">
+                <svg class="toc-expend-btn_ico w-4 h-4">
+                  <use href="#ico-arrow-down"></use>
+                </svg>
+              </span>
             </label>
             <!-- Functions ToC -->
             <nav class="hidden lg:block text-100 mt-2 lg:mt-0 pb-6 lg:pb-28 px-4 lg:px-0 lg:pt-2 font-mono">
@@ -59,16 +68,17 @@
                   {{ $funcName := .FuncName }}
                   {{ range .Params }}
                     <div class="flex flex-col gap-3 items-stretch text-gray-400 mb-2">
-                      <div class="relative flex w-full border rounded-sm has-[:focus]:border-gray-300">
-                        <label for="func-{{ $funcName }}-param-{{ .Name }}" class="flex gap-3 items-center bg-gray-50 rounded-l-sm px-4 font-semibold text-gray-600">{{ .Name }}</label>
+                      <div class="group relative overflow-hidden flex w-full border rounded-sm has-[:focus]:border-gray-300 hover:border-gray-300">
+                        <label for="func-{{ $funcName }}-param-{{ .Name }}" class="flex gap-3 items-center bg-gray-50 px-4 font-semibold text-gray-600">{{ .Name }}</label>
                         <input type="text"
                           {{- if eq $data.SelectedFunc $funcName }}
                             value="{{ getSelectedArgValue $data . }}"
                           {{- end }}
+                          placeholder="parameter"
                           id="func-{{ $funcName }}-param-{{ .Name }}"
                           data-role="help-param-input"
                           data-param="{{ .Name }}"
-                          class="flex h-full bottom-1 w-full border-l rounded-r-sm p-2 focus:border-gray-300 outline-none font-mono"
+                          class="flex h-full bottom-1 w-full border-l p-2 focus:border-gray-300 group-hover:border-gray-300 text-gray-600 outline-none font-mono"
                         />
                       </div>
                     </div>
@@ -82,7 +92,7 @@
                 <button class="w-5 h-5 absolute top-2 right-2 text-gray-400" aria-label="Copy Command" data-copy-btn="help-cmd-{{ .FuncName }}">
                   <svg class="w-5 h-5 top-0" data-copy-icon>
                     <use href="#ico-copy"></use>
-                    <use href="#ico-check" class="hidden"></use>
+                    <use href="#ico-check" class="hidden text-green-600"></use>
                   </svg>
                 </button>
                 <pre class="font-mono text-gray-600 p-4 pr-10 whitespace-pre-wrap"><code><span data-code-mode="fast" class="inline" data-copy-content="help-cmd-{{ .FuncName }}">gnokey maketx call -pkgpath "{{ $.PkgPath }}" -func "{{ .FuncName }}" -gas-fee 1000000ugnot -gas-wanted 2000000 -broadcast -chainid "{{ $.ChainId }}"{{ range .Params }} -args "<span data-role="help-code-args" data-arg="{{ .Name }}" data-copy-content=""></span>"{{ end }} -remote "{{ $.Remote }}" <span data-role="help-code-address">ADDRESS</span></span><span data-code-mode="secure" class="hidden">gnokey query -remote "{{ $.Remote }}" auth/accounts/<span data-role="help-code-address">ADDRESS</span>

diff --git a/gno.land/pkg/gnoweb/components/index.gohtml b/gno.land/pkg/gnoweb/components/index.gohtml
@@ -1,4 +1,5 @@
 {{ define "index" }}
+<!DOCTYPE html>
 <html lang="en">
     {{ template "head" .HeadData }}
     <body class="min-h-screen flex flex-col">
@@ -22,6 +23,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{ .Title }}</title>
 
+    <!-- Preload -->
+    <link rel="preload" href="{{ .AssetsPath }}fonts/intervar/Intervar.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="{{ .AssetsPath }}fonts/roboto/roboto-mono-normal.woff2" as="font" type="font/woff2" crossorigin />
+
+
     <!-- Meta description -->
     <meta name="description" content="{{ .Description }}" />
 
@@ -54,8 +60,6 @@
 
 	<!-- web assets -->
     <link rel="stylesheet" href="{{ .AssetsPath }}styles.css" />
-    <link rel="preload" href="{{ .AssetsPath }}fonts/intervar/Inter.var.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="preload" href="{{ .AssetsPath }}fonts/roboto/roboto-mono-normal.woff2" as="font" type="font/woff2" crossorigin />
 </head>
 {{ end }}
 
@@ -67,7 +71,7 @@
                 <img src="/public/imgs/gnoland.svg" alt="Gno username profile pic" width="40px" height="40px" />
             </a>
 
-            <form id="header-searchbar" class="relative overflow-scroll flex items-center bg-gray-100 has-[:focus-within]:border-gray-300 border h-full border-gray-100 p-1.5 rounded w-full">
+            <form id="header-searchbar" class="relative overflow-scroll no-scrollbar flex items-center bg-gray-100 has-[:focus-within]:border-gray-300 border h-full border-gray-100 p-1.5 rounded w-full">
                 <input data-role="header-input-search" type="text" value="{{ .RealmPath }}" class="peer absolute w-full top-0 left-0 h-full bg-transparent p-1.5 text-200 outline-none text-gray-600 font-medium" />
 
                 {{ template "breadcrumb" .Breadcrumb }}
@@ -76,7 +80,7 @@
 
         <form class="sidemenu col-span-3 flex justify-end lg:justify-start gap-3 sm:gap-6 h-full text-100 text-gray-300">
             <a href="{{ .RealmPath }}">
-                <div class="group gap-1 xxl:pr-1 hover:text-gray-600 relative flex items-center h-full after:block after:absolute after:h-1 after:bg-green-600 after:left-0 after:bottom-0 {{ if (and (not (queryHas .WebQuery "source")) (not (queryHas .WebQuery "help"))) }}after:w-full text-stroke text-gray-600 is-active{{ end }}">
+                <div class="group gap-1 xxl:pr-1 hover:text-gray-600 relative flex items-center h-full after:block after:absolute after:h-1 after:bg-green-600 after:left-0 after:rounded-t-sm after:bottom-0 {{ if (and (not (queryHas .WebQuery "source")) (not (queryHas .WebQuery "help"))) }}after:w-full text-stroke text-gray-600 is-active{{ end }}">
                     <input type="radio" value="summary" name="sidemenu" id="sidemenu-meta" class="peer hidden" />
                     <svg class="group-[.is-active]:text-green-600 w-5 h-5 min-w-2 xxl:w-4.5 xxl:h-4.5 shrink-0 inline-block xl:hidden xxl:inline-block group">
                         <use href="#ico-info"></use>
@@ -86,7 +90,7 @@
             </a>
 
             <a href="{{ .RealmPath }}$source">
-                <div class="group gap-1 xxl:pr-1 hover:text-gray-600 relative flex items-center h-full after:block after:absolute after:h-1 after:bg-green-600 after:left-0 after:bottom-0 {{ if queryHas .WebQuery "source" }}after:w-full text-stroke text-gray-600 is-active{{ end }}">
+                <div class="group gap-1 xxl:pr-1 hover:text-gray-600 relative flex items-center h-full after:block after:absolute after:h-1 after:bg-green-600 after:left-0 after:rounded-t-sm after:bottom-0 {{ if queryHas .WebQuery "source" }}after:w-full text-stroke text-gray-600 is-active{{ end }}">
                     <input type="radio" value="summary" name="sidemenu" id="sidemenu-source" class="peer hidden" />
                     <svg class="group-[.is-active]:text-green-600 w-5 h-5 min-w-2 xxl:w-4.5 xxl:h-4.5 shrink-0 inline-block xl:hidden xxl:inline-block">
                         <use href="#ico-code"></use>
@@ -96,7 +100,7 @@
             </a>
 
             <a href="{{ .RealmPath }}$help">
-                <div class="group gap-1 xxl:pr-1 hover:text-gray-600 relative flex items-center h-full after:block after:absolute after:h-1 after:left-0 after:bg-green-600 after:bottom-0 {{ if queryHas .WebQuery "help" }}after:w-full text-stroke text-gray-600 is-active{{ end }}">
+                <div class="group gap-1 xxl:pr-1 hover:text-gray-600 relative flex items-center h-full after:block after:absolute after:h-1 after:left-0 after:bg-green-600 after:rounded-t-sm after:bottom-0 {{ if queryHas .WebQuery "help" }}after:w-full text-stroke text-gray-600 is-active{{ end }}">
                     <input type="radio" value="summary" name="sidemenu" id="sidemenu-docs" class="peer hidden" />
                     <svg class="group-[.is-active]:text-green-600 w-5 h-5 min-w-2 xxl:w-4.5 xxl:h-4.5 shrink-0 inline-block xl:hidden xxl:inline-block">
                         <use href="#ico-docs"></use>

diff --git a/gno.land/pkg/gnoweb/components/realm.gohtml b/gno.land/pkg/gnoweb/components/realm.gohtml
@@ -1,6 +1,5 @@
 {{ define "renderRealmToc" }}
-    <ul class="space-y-2 pt-2 pl-4">
-        {{ range .Items }}
+    <ul class="space-y-2 pt-2 pl-4">{{ range .Items }}
             <li>
                 <a class="line-clamp-2 hover:text-green-600 hover:underline" href="{{ .Anchor }}">
                     {{ .Title | noescape_bytes }}
@@ -9,18 +8,23 @@
                     {{ template "renderRealmToc" . }}
                 {{ end }}
             </li>
-        {{ end }}
-    </ul>
+        {{ end }}</ul>
 {{ end }}
 
 {{ define "renderRealm" }}
     <main class="w-full grow-[2] bg-light">
         <section class="max-w-screen-max mx-auto px-4 md:px-10 grid grid-cols-1 lg:grid-cols-10 xl:grid-cols-10 grid-flow-dense gap-x-20 xxl:gap-x-32 items-start">
             <aside class="lg:col-span-3 lg:order-2 relative h-full" aria-label="Table of Contents">
-                <div class="sticky top-14 lg:pt-2">
-                    <div id="sidebar-summary" class="toc max-h-screen overflow-scroll no-scrollbar bg-gray-50 lg:bg-transparent rounded-sm mt-8 lg:mt-0">
-                        <label for="toc-expend" class="toc-expend-btn flex font-semibold lg:mt-10 justify-between items-center bg-light border lg:border-none lg:bg-transparent px-4 py-2 lg:p-0 rounded-sm">On this page
-                            <input id="toc-expend" type="checkbox" class="hidden">
+                <div class="sticky top-14 lg:pt-2 has-[ul:empty]:hidden">
+                    <div id="sidebar-summary" class="max-h-screen overflow-scroll no-scrollbar bg-gray-50 lg:bg-transparent rounded-sm mt-8 lg:mt-0">
+                        <label for="toc-expend" class="toc-expend-btn flex text-100 lg:text-200 font-normal lg:font-semibold lg:mt-10 justify-between items-center bg-light hover:bg-gray-100 cursor-pointer border lg:border-none lg:bg-transparent lg:hover:bg-transparent px-4 py-2 lg:p-0 rounded-sm">
+                            On this page
+                            <input id="toc-expend" type="checkbox" class="peer hidden">
+                            <span class="flex lg:hidden gap-1.5 items-center before:content-['open'] peer-checked:before:content-['close']">
+                                <svg class="toc-expend-btn_ico w-4 h-4">
+                                    <use href="#ico-arrow-down"></use>
+                                </svg>
+                            </span>
                         </label>
                         <nav class="hidden lg:block text-100 mt-2 lg:mt-0 pb-6 lg:pb-28 px-4 py-2 lg:px-0 *:pl-0">
                             {{ template "renderRealmToc" .TocItems }}

diff --git a/gno.land/pkg/gnoweb/components/source.gohtml b/gno.land/pkg/gnoweb/components/source.gohtml
@@ -1,26 +1,32 @@
 {{ define "renderSource" }}
 <main class="w-full grow-[2] bg-gray-50">
-    <section class="max-w-screen-max mx-auto px-4 md:px-10 grid grid-cols-1 lg:grid-cols-10 grid-flow-dense gap-x-20 xxl:gap-x-32 items-start">
+    <section class="max-w-screen-max mx-auto px-4 md:px-10 grid auto-rows-min grid-cols-1 lg:grid-cols-10 grid-flow-dense gap-x-20 xxl:gap-x-32 items-start">
          <header class="mt-10 lg:row-start-1 row-span-1 col-span-1 lg:col-span-7 flex flex-col xl:flex-row justify-between mb-4">
                 <div class="flex items-center">
                     <h1 class="text-600 text-gray-900 font-bold">{{ .FileName }}</h1>
                 </div>
                 <div class="flex gap-8 text-gray-300 items-center justify-between">
                     <span class="text-gray-300 pt-0.5">{{ .FileSize }} · {{ .FileLines }} lines</span>
-                    <button class="flex items-center gap-1 hover:text-gray-600 pt-0.5" data-copy-btn="source-code">
-                        <svg class="w-5 h-5 xxl:w-4 xxl:h-4 shrink-0 inline-block text-gray-200" data-copy-icon>
+                    <button class="flex items-center gap-0.5 hover:text-gray-600 pt-0.5" data-copy-btn="source-code">
+                        <svg class="w-5 h-5 xxl:w-4 xxl:h-4 shrink-0 inline-block text-gray-300" data-copy-icon>
                             <use href="#ico-copy"></use>
-                            <use href="#ico-check" class="hidden"></use>
+                            <use href="#ico-check" class="hidden text-green-600"></use>
                         </svg>
                         <span class="hidden xl:inline">Copy</span>
                     </button>
                 </div>
             </header>
         <aside class="col-span-1 lg:col-span-3 lg:order-2 row-start-1 lg:row-span-2 relative h-full" aria-label="Table of Contents">
             <div class="sticky top-14 lg:pt-2">
-                <div id="sidebar-summary" class="toc max-h-screen overflow-scroll no-scrollbar bg-light lg:bg-transparent rounded-sm mt-8 lg:mt-0">
-                    <label for="toc-expend" class="toc-expend-btn flex font-semibold lg:mt-10 justify-between items-center bg-gray-100 border lg:border-none lg:bg-transparent px-4 py-2 lg:p-0 rounded-sm">Sources Files list
-                        <input id="toc-expend" type="checkbox" class="hidden" checked>
+                <div id="sidebar-summary" class="max-h-screen overflow-scroll no-scrollbar bg-light lg:bg-transparent rounded-sm mt-8 lg:mt-0">
+                    <label for="toc-expend" class="toc-expend-btn flex text-100 lg:text-200 font-normal lg:font-semibold lg:mt-10 justify-between items-center bg-gray-100 hover:bg-gray-50 cursor-pointer border lg:border-none lg:bg-transparent px-4 py-2 lg:p-0 rounded-sm">
+                        Sources Files list
+                        <input id="toc-expend" type="checkbox" class="peer hidden" checked>
+                        <span class="flex lg:hidden gap-1.5 items-center before:content-['open'] peer-checked:before:content-['close']">
+                            <svg class="toc-expend-btn_ico w-4 h-4">
+                            <use href="#ico-arrow-down"></use>
+                            </svg>
+                        </span>
                     </label>
                     <nav class="hidden lg:block text-100 mt-2 lg:mt-0 pb-6 lg:pb-28 px-4 lg:px-0 lg:pt-2 font-mono">
                         <ul class="list-none space-y-2 pt-2">