Skip to content

Commit

Permalink
fix: gnoweb UI styles (gnolang#3349)
Browse files Browse the repository at this point in the history
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
alexiscolin authored and n0izn0iz committed Dec 17, 2024
1 parent 1e87380 commit 648a09d
Showing 14 changed files with 148 additions and 141 deletions.
34 changes: 22 additions & 12 deletions gno.land/pkg/gnoweb/components/help.gohtml
Original file line number Diff line number Diff line change
@@ -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>
16 changes: 10 additions & 6 deletions gno.land/pkg/gnoweb/components/index.gohtml
Original file line number Diff line number Diff line change
@@ -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>
20 changes: 12 additions & 8 deletions gno.land/pkg/gnoweb/components/realm.gohtml
Original file line number Diff line number Diff line change
@@ -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 }}
20 changes: 13 additions & 7 deletions gno.land/pkg/gnoweb/components/source.gohtml
Original file line number Diff line number Diff line change
@@ -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">
Loading

0 comments on commit 648a09d

Please sign in to comment.