style: responsive

gnolang · Dec 15, 2024 · c9719ef · c9719ef
1 parent edceea3
commit c9719ef
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 88 deletions.
diff --git a/gno.land/pkg/gnoweb/Makefile b/gno.land/pkg/gnoweb/Makefile
@@ -68,7 +68,7 @@ fmt:
 # Run the development dependencies in parallel
 dev:
 	@echo "-- starting development tools"
-	@PUBLIC_DIR=$(cache_dir)/public $(MAKE) -j 3 \
+	$(MAKE) -j 3 \
 		dev.gnoweb \
 		dev.ts \
 		dev.css
@@ -81,7 +81,7 @@ dev.gnoweb: generate
 
 # Tailwind CSS in development mode
 dev.css: generate | $(PUBLIC_DIR)
-	npx -y tailwindcss@$(tw_version) -c $(tw_config_path) --verbose -i $(input_css) -o $(output_css) --watch \
+	npx -y tailwindcss@$(tw_version) -c $(tw_config_path) --verbose -i $(input_css) -o $(output_css) --minify --watch \
 		2>&1 | $(run_logname) tailwind
 
 # XXX: add versioning on esbuild

diff --git a/gno.land/pkg/gnoweb/components/help.gohtml b/gno.land/pkg/gnoweb/components/help.gohtml
@@ -1,14 +1,38 @@
 {{ define "renderHelp" }}
 {{ $data := . }}
 <main class="w-full grow-[2] bg-gray-50">
-  <section class="max-w-screen-max mx-auto px-10 grid grid-cols-10 grid-flow-dense gap-8 xxl:gap-20 items-start min-h-full">
-    <aside id="sidebar" class="relative h-full" aria-label="Index">
+  <section class="max-w-screen-max mx-auto px-4 md:px-10 grid grid-cols-1 md:grid-cols-10 grid-flow-dense gap-x-8 xxl:gap-x-20 items-start min-h-full">
+
+    <header class="mt-10 row-span-1 md:col-span-7 flex flex-col xl:flex-row gap-3 md:justify-between mb-10 lg:mb-6">
+        <div class="flex items-center gap-8">
+          <h1 class="text-600 font-bold">{{ .RealmName }}</h1>
+        </div>
+        <form class="flex flex-col md:flex-row gap-3 text-gray-300">
+          <div class="min-w-48">
+            <select
+              id="cmdmode"
+              data-role="help-select-mode"
+              class="bg-gray-100 text-gray-700 text-sm border-r-transparent border-r-8 rounded-sm focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+            >
+              <option value="fast" selected="selected">Mode: Fast</option>
+              <option value="secure">Mode: Full Security</option>
+            </select>
+          </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 px-4 font-bold 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 p-2.5 focus:border-gray-600 outline-none font-mono" placeholder="ADDRESS" />
+          </div>
+        </form>
+    </header>
+
+    <aside class="col-span-1 md:col-span-3 md:order-2 row-start-2 relative h-full" aria-label="Index">
       <div class="sticky top-16 pt-0.5">
-        <div id="sidebar-summary" class="toc max-h-screen overflow-scroll no-scrollbar">
-          <span class="block text-gray-300 font-semibold mt-10">Functions Index</span>
+        <div id="sidebar-summary" class="max-h-screen overflow-scroll no-scrollbar">
+          <span class="block text-gray-300 font-semibold">Functions Index</span>
 
           <!-- Functions ToC -->
-          <nav class="text-100 font-mono pb-28">
+          <nav class="text-100 font-mono pb-8 md:pb-28">
             <ul class="list-none space-y-1.5 pt-2">
               {{ range .Functions }}
               <li>
@@ -40,29 +64,7 @@
       </div>
     </aside>
 
-    <section id="data" class="code-content mt-10 pb-24 text-gray-900">
-      <div class="flex justify-between mb-3">
-        <div class="flex items-center gap-8">
-          <h1 class="text-600 font-bold">{{ .RealmName }}</h1>
-        </div>
-        <div class="flex gap-3 text-gray-300">
-          <form class="min-w-48 mx-auto">
-            <select
-              id="cmdmode"
-              data-role="help-select-mode"
-              class="bg-gray-100 text-gray-700 text-sm border-r-transparent border-r-8 rounded-sm focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-            >
-              <option value="fast" selected="selected">Mode: Fast</option>
-              <option value="secure">Mode: Full Security</option>
-            </select>
-          </form>
-
-          <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 px-4 font-bold 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 p-2 focus:border-gray-600 outline-none font-mono" placeholder="ADDRESS" />
-          </div>
-        </div>
-      </div>
+    <section id="data" class="col-span-1 md:col-span-7 md:row-start-2 pb-24 text-gray-900">
 
       <!-- Function Content -->
       {{ range .Functions }}

diff --git a/gno.land/pkg/gnoweb/components/index.go b/gno.land/pkg/gnoweb/components/index.go
@@ -25,7 +25,8 @@ type HeaderData struct {
 }
 
 type FooterData struct {
-	Analytics bool
+	Analytics  bool
+	AssetsPath string
 }
 
 type IndexData struct {

diff --git a/gno.land/pkg/gnoweb/components/index.gohtml b/gno.land/pkg/gnoweb/components/index.gohtml
@@ -53,32 +53,32 @@
     <link rel="stylesheet" href="{{ .ChromaPath }}" />
 
 		<!-- web assets -->
-    <link rel="stylesheet" href="{{ .AssetsPath }}/styles.css" />
+    <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 }}
 
 {{ define "header" }}
 <header class="main-header sticky top-0 bg-light border-b border-gray-400 text-100 z-max">
-    <nav aria-label="Realm navigation" class="max-w-screen-max mx-auto px-10 grid grid-cols-10 grid-flow-dense gap-8 xxl:gap-20 items-center">
-        <div class="main-navigation flex items-center gap-1 col-span-7 max-w-screen-max h-full py-2">
+    <nav aria-label="Realm navigation" class="max-w-screen-max mx-auto px-4 md:px-10 grid grid-cols-10 grid-flow-dense gap-4 md:gap-8 xxl:gap-20 items-center">
+        <div class="main-navigation flex items-center gap-1 col-span-7  max-w-screen-max h-full py-2">
             <a href="/" class="rounded border border-gray-100 cursor-pointer h-10 w-10 shrink-0">
                 <img src="/public/imgs/gnoland.svg" alt="Gno username profile pic" width="40px" height="40px" />
             </a>
 
-            <form id="header-searchbar" class="relative flex items-center bg-gray-100 border h-full border-gray-100 p-1.5 rounded w-full">
+            <form id="header-searchbar" class="relative overflow-scroll flex items-center bg-gray-100 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 focus-within:outline-gray-300 focus-within:outline-2" />
 
                 {{ template "breadcrumb" .Breadcrumb }}
             </form>
         </div>
 
-        <form class="sidemenu col-span-3 flex justify-start gap-6 h-full text-100 text-gray-300">
+        <form class="sidemenu col-span-3 md:col-span-2 flex justify-end md:justify-start gap-3 sm:gap-6 h-full text-100 text-gray-300">
             <a href="{{ .RealmPath }}">
                 <div class="gap-1 hover:text-gray-600 relative flex items-center h-full after:block after:absolute after:h-1 after:bg-green-600 after:bottom-0 {{ if (and (not (queryHas .WebQuery "source")) (not (queryHas .WebQuery "help"))) }}after:w-full text-stroke text-gray-600{{ end }}">
                     <input type="radio" value="summary" name="sidemenu" id="sidemenu-meta" class="peer hidden" />
-                    <svg class="w-5 h-5 xxl:w-4 xxl:h-4 shrink-0 inline-block xl:hidden xxl:inline-block">
+                    <svg class="w-5 h-5 min-w-2 xxl:w-4 xxl:h-4 shrink-0 inline-block xl:hidden xxl:inline-block">
                         <use href="#ico-info"></use>
                     </svg>
                     <span class="hidden xl:inline pr-px">Content</span>
@@ -88,7 +88,7 @@
             <a href="{{ .RealmPath }}$source">
                 <div class="gap-1 hover:text-gray-600 relative flex items-center h-full after:block after:absolute after:h-1 after:bg-green-600 after:bottom-0 {{ if queryHas .WebQuery "source" }}after:w-full text-stroke text-gray-600{{ end }}">
                     <input type="radio" value="summary" name="sidemenu" id="sidemenu-source" class="peer hidden" />
-                    <svg class="w-5 h-5 xxl:w-4 xxl:h-4 shrink-0 inline-block xl:hidden xxl:inline-block">
+                    <svg class="w-5 h-5 min-w-2 xxl:w-4 xxl:h-4 shrink-0 inline-block xl:hidden xxl:inline-block">
                         <use href="#ico-code"></use>
                     </svg>
                     <span class="hidden xl:inline pr-px">Source</span>
@@ -98,7 +98,7 @@
             <a href="{{ .RealmPath }}$help">
                 <div class="gap-1 hover:text-gray-600 relative flex items-center h-full inline-flex gap-1 items-center cursor-pointer after:block after:absolute after:h-1 after:bg-green-600 after:bottom-0 {{ if queryHas .WebQuery "help" }}after:w-full text-stroke text-gray-600{{ end }}">
                     <input type="radio" value="summary" name="sidemenu" id="sidemenu-docs" class="peer hidden" />
-                    <svg class="w-5 h-5 xxl:w-4 xxl:h-4 shrink-0 inline-block xl:hidden xxl:inline-block">
+                    <svg class="w-5 h-5 min-w-2 xxl:w-4 xxl:h-4 shrink-0 inline-block xl:hidden xxl:inline-block">
                         <use href="#ico-docs"></use>
                     </svg>
                     <span class="hidden xl:inline pr-px">Docs</span>
@@ -115,12 +115,12 @@
 
 {{ define "footer" }}
 <footer class="w-full text-100 py-1.5 border-t border-gray-300">
-    <nav class="max-w-screen-max mx-auto px-10 grid grid-cols-4 justify-between items-start xl:items-center gap-2 xl:gap-20 pt-2 xl:pt-0">
+    <nav class="max-w-screen-max mx-auto px-4 md:px-10 mb-8 md:mb-0 grid grid-cols-1 md:grid-cols-4 justify-between items-start xl:items-center gap-2 xl:gap-20 pt-2 xl:pt-0">
         <!-- Footer Navigation -->
-        <div class="col-span-1">
-            <a class="block h-4" href="">{{ template "logosvg" }}</a>
+        <div class="col-span-1 pb-8">
+            <a class="block h-6 md:h-4" href="">{{ template "logosvg" }}</a>
         </div>
-        <div class="flex justify-between col-span-3">
+        <div class="flex justify-between md:col-span-3">
             <ul aria-label="Footer navigation" class="flex flex-col xl:flex-row gap-4 xl:gap-6">
                 <li><a href="/about">About</a></li>
                 <li><a href="https://docs.gno.land/">Docs</a></li>
@@ -141,7 +141,7 @@
         </div>
     </nav>
 </footer>
-<script type="module" src="/public/js/index.js"></script>
+<script type="module" src="{{ .AssetsPath }}js/index.js"></script>
 {{- if .Analytics -}} {{- template "analytics" }} {{- end -}}
 
 {{- end }}

diff --git a/gno.land/pkg/gnoweb/components/realm.gohtml b/gno.land/pkg/gnoweb/components/realm.gohtml
@@ -15,12 +15,12 @@
 
 {{ define "renderRealm" }}
 <main class="w-full grow-[2] bg-light">
-    <section class="max-w-screen-max mx-auto px-10 grid grid-cols-10 grid-flow-dense gap-8 xxl:gap-20 items-start">
-        <aside id="sidebar" class="relative h-full" aria-label="Table of Contents">
+    <section class="max-w-screen-max mx-auto px-4 md:px-10 grid grid-cols-1 md:grid-cols-10 grid-flow-dense gap-x-8 xxl:gap-x-20 items-start">
+        <aside class="md:col-span-3 md:order-2 relative h-full" aria-label="Table of Contents">
             <div class="sticky top-16">
                 <div id="sidebar-summary" class="toc max-h-screen overflow-scroll no-scrollbar">
                     <span class="block text-gray-300 font-semibold mt-16">Content</span>
-                    <nav class="text-100 pb-28">
+                    <nav class="text-100 md:pb-28">
                         {{ template "renderRealmToc" .TocItems }}
                     </nav>
                 </div>
@@ -38,7 +38,7 @@
                 </div>
             </div>
         </aside>
-        <article class="realm-content mt-4 pb-24">
+        <article class="realm-content md:col-span-7 mt-4 pb-24">
             <!-- Realm Content -->
             {{ .Content }}
         </article>

diff --git a/gno.land/pkg/gnoweb/components/source.gohtml b/gno.land/pkg/gnoweb/components/source.gohtml
@@ -1,11 +1,26 @@
 {{ define "renderSource" }}
 <main class="w-full grow-[2] bg-gray-50">
-    <section class="max-w-screen-max mx-auto px-10 grid grid-cols-10 grid-flow-dense gap-8 xxl:gap-20 items-start">
-        <aside id="sidebar" class="relative h-full" aria-label="Table of Contents">
-            <div class="sticky top-16 pt-0.5">
+    <section class="max-w-screen-max mx-auto px-4 md:px-10 grid grid-cols-1 md:grid-cols-10 grid-flow-dense gap-x-8 xxl:gap-x-20 items-start">
+         <header class="mt-10 md:row-start-1 row-span-1 col-span-1 md:col-span-7 flex flex-col xl:flex-row gap-1 justify-between mb-6 md:mb-10 lg:mb-6">
+                <div class="flex items-center">
+                    <h1 class="text-600 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>
+                            <use href="#ico-copy"></use>
+                            <use href="#ico-check" class="hidden"></use>
+                        </svg>
+                        <span class="hidden xl:inline">Copy</span>
+                    </button>
+                </div>
+            </header>
+        <aside class="mt-10 col-span-1 md:col-span-3 md:order-2 row-start-1 md:row-span-2 relative h-full" aria-label="Table of Contents">
+            <div class="sticky top-16 pt-2">
                 <div id="sidebar-summary" class="toc max-h-screen overflow-scroll no-scrollbar">
-                    <span class="block text-gray-300 font-semibold mt-10">Sources Files list</span>
-                    <nav class="text-100 font-mono pb-28">
+                    <span class="block text-gray-300 font-semibold">Sources Files list</span>
+                    <nav class="text-100 font-mono md:pb-28">
                         <ul class="list-none space-y-1.5 pt-2">
                             {{ $pkgpath := .PkgPath }}
                             {{ range .Files }}
@@ -24,23 +39,7 @@
             </div>
         </aside>
 
-        <article class="code-content mt-10 pb-24 text-gray-900">
-            <div class="flex justify-between mb-3">
-                <div class="flex items-center gap-8">
-                    <h1 class="text-600 font-bold">{{ .FileName }}</h1>
-                    <span class="text-gray-300 pt-0.5">{{ .FileSize }} · {{ .FileLines }} lines</span>
-                </div>
-                <div class="flex gap-4 text-gray-300">
-                    <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>
-                            <use href="#ico-copy"></use>
-                            <use href="#ico-check" class="hidden"></use>
-                        </svg>
-                        <span class="hidden xl:inline">Copy</span>
-                    </button>
-                </div>
-            </div>
-
+        <article class="col-span-1 md:col-span-7 md:row-start-2 pb-24 text-gray-900">
             <div class="source-code font-mono" data-copy-content="source-code">
                 {{ .FileSource }}
             </div> 

diff --git a/gno.land/pkg/gnoweb/frontend/css/input.css b/gno.land/pkg/gnoweb/frontend/css/input.css
@@ -264,19 +264,6 @@
     @apply text-green-600;
   }
 
-  /* table of content */
-  #sidebar {
-    @apply col-span-3 order-2;
-  }
-  #sidebar + .realm-content,
-  #sidebar + .code-content {
-    @apply col-span-7;
-  }
-  .realm-content,
-  .code-content {
-    @apply col-span-4;
-  }
-
   /* sidebar */
   .main-header:has(#sidemenu-summary:checked) + main #sidebar #sidebar-summary,
   .main-header:has(#sidemenu-source:checked) + main #sidebar #sidebar-source,
@@ -287,11 +274,11 @@
 
   :is(.main-header:has(#sidemenu-source:checked), .main-header:has(#sidemenu-docs:checked), .main-header:has(#sidemenu-meta:checked)) + main .realm-content,
   :is(.main-header:has(#sidemenu-source:checked), .main-header:has(#sidemenu-docs:checked), .main-header:has(#sidemenu-meta:checked)) .main-navigation {
-    @apply col-span-6;
+    @apply md:col-span-6;
   }
   :is(.main-header:has(#sidemenu-source:checked), .main-header:has(#sidemenu-docs:checked), .main-header:has(#sidemenu-meta:checked)) + main #sidebar,
   :is(.main-header:has(#sidemenu-source:checked), .main-header:has(#sidemenu-docs:checked), .main-header:has(#sidemenu-meta:checked)) .sidemenu {
-    @apply col-span-4;
+    @apply md:col-span-4;
   }
   :is(.main-header:has(#sidemenu-source:checked), .main-header:has(#sidemenu-docs:checked), .main-header:has(#sidemenu-meta:checked)) + main #sidebar::before {
     @apply absolute block content-[''] top-0 w-[50vw] h-full -left-7 bg-gray-100 z-min;

diff --git a/gno.land/pkg/gnoweb/frontend/js/index.ts b/gno.land/pkg/gnoweb/frontend/js/index.ts
@@ -29,7 +29,7 @@
         console.error(`Error while loading script ${path}:`, err);
       }
     } else {
-      console.info(`Module not loaded: no element matches selector "${selector}"`);
+      console.info(`Modulee not loaded: no element matches selector "${selector}"`);
     }
   };
 

diff --git a/gno.land/pkg/gnoweb/handler.go b/gno.land/pkg/gnoweb/handler.go
@@ -81,6 +81,7 @@ func (h *WebHandler) Get(w http.ResponseWriter, r *http.Request) {
 	indexData.HeadData.AssetsPath = h.static.AssetsPath
 	indexData.HeadData.ChromaPath = h.static.ChromaPath
 	indexData.FooterData.Analytics = h.static.Analytics
+	indexData.FooterData.AssetsPath = h.static.AssetsPath
 
 	// Render the page body into the buffer
 	var status int

diff --git a/gno.land/pkg/gnoweb/public/js/index.js b/gno.land/pkg/gnoweb/public/js/index.js