Skip to content

Commit 0408d6f

Browse files
authored
fix: gnoweb UI styles (#3349)
This PR aims to fix some of remaining UI bugs on gnoweb after the revamp merge. Some of: #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
1 parent 9855f53 commit 0408d6f

File tree

14 files changed

+148
-141
lines changed

14 files changed

+148
-141
lines changed

gno.land/pkg/gnoweb/components/help.gohtml

+22-12
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,36 @@
77
<h1 class="text-600 font-bold text-gray-900">{{ .RealmName }}</h1>
88
</div>
99
<form class="flex flex-col lg:flex-row gap-x-3 gap-y-2 text-gray-300">
10-
<div class="min-w-48 border rounded-sm overflow-hidden">
10+
<div class="relative min-w-48 border rounded-sm overflow-hidden text-gray-600">
1111
<select
1212
id="cmdmode"
1313
data-role="help-select-mode"
14-
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"
14+
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"
1515
>
1616
<option value="fast" selected="selected">Mode: Fast</option>
1717
<option value="secure">Mode: Full Security</option>
1818
</select>
19+
<svg class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4">
20+
<use href="#ico-arrow-down"></use>
21+
</svg>
1922
</div>
20-
<div class="relative flex w-full text-100">
21-
<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>
22-
<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" />
23+
<div class="group relative flex w-full text-100 border rounded-sm overflow-hidden has-[:focus]:border-gray-300 hover:border-gray-300">
24+
<label for="help-input-addr" class="flex gap-3 items-center bg-gray-100 px-3 text-gray-600">Key&nbsp;/&nbsp;Address</label>
25+
<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" />
2326
</div>
2427
</form>
2528
</header>
2629
<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">
2730
<div class="sticky top-14 pt-2">
28-
<div id="sidebar-summary" class="toc max-h-screen overflow-scroll no-scrollbar bg-light lg:bg-transparent rounded-sm">
29-
<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
30-
<input id="toc-expend" type="checkbox" class="hidden">
31+
<div id="sidebar-summary" class="max-h-screen overflow-scroll no-scrollbar bg-light lg:bg-transparent rounded-sm">
32+
<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">
33+
Functions Index
34+
<input id="toc-expend" type="checkbox" class="peer hidden">
35+
<span class="flex lg:hidden gap-1.5 items-center before:content-['open'] peer-checked:before:content-['close']">
36+
<svg class="toc-expend-btn_ico w-4 h-4">
37+
<use href="#ico-arrow-down"></use>
38+
</svg>
39+
</span>
3140
</label>
3241
<!-- Functions ToC -->
3342
<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 @@
5968
{{ $funcName := .FuncName }}
6069
{{ range .Params }}
6170
<div class="flex flex-col gap-3 items-stretch text-gray-400 mb-2">
62-
<div class="relative flex w-full border rounded-sm has-[:focus]:border-gray-300">
63-
<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>
71+
<div class="group relative overflow-hidden flex w-full border rounded-sm has-[:focus]:border-gray-300 hover:border-gray-300">
72+
<label for="func-{{ $funcName }}-param-{{ .Name }}" class="flex gap-3 items-center bg-gray-50 px-4 font-semibold text-gray-600">{{ .Name }}</label>
6473
<input type="text"
6574
{{- if eq $data.SelectedFunc $funcName }}
6675
value="{{ getSelectedArgValue $data . }}"
6776
{{- end }}
77+
placeholder="parameter"
6878
id="func-{{ $funcName }}-param-{{ .Name }}"
6979
data-role="help-param-input"
7080
data-param="{{ .Name }}"
71-
class="flex h-full bottom-1 w-full border-l rounded-r-sm p-2 focus:border-gray-300 outline-none font-mono"
81+
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"
7282
/>
7383
</div>
7484
</div>
@@ -82,7 +92,7 @@
8292
<button class="w-5 h-5 absolute top-2 right-2 text-gray-400" aria-label="Copy Command" data-copy-btn="help-cmd-{{ .FuncName }}">
8393
<svg class="w-5 h-5 top-0" data-copy-icon>
8494
<use href="#ico-copy"></use>
85-
<use href="#ico-check" class="hidden"></use>
95+
<use href="#ico-check" class="hidden text-green-600"></use>
8696
</svg>
8797
</button>
8898
<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>

gno.land/pkg/gnoweb/components/index.gohtml

+10-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{{ define "index" }}
2+
<!DOCTYPE html>
23
<html lang="en">
34
{{ template "head" .HeadData }}
45
<body class="min-h-screen flex flex-col">
@@ -22,6 +23,11 @@
2223
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
2324
<title>{{ .Title }}</title>
2425

26+
<!-- Preload -->
27+
<link rel="preload" href="{{ .AssetsPath }}fonts/intervar/Intervar.woff2" as="font" type="font/woff2" crossorigin />
28+
<link rel="preload" href="{{ .AssetsPath }}fonts/roboto/roboto-mono-normal.woff2" as="font" type="font/woff2" crossorigin />
29+
30+
2531
<!-- Meta description -->
2632
<meta name="description" content="{{ .Description }}" />
2733

@@ -54,8 +60,6 @@
5460

5561
<!-- web assets -->
5662
<link rel="stylesheet" href="{{ .AssetsPath }}styles.css" />
57-
<link rel="preload" href="{{ .AssetsPath }}fonts/intervar/Inter.var.woff2" as="font" type="font/woff2" crossorigin />
58-
<link rel="preload" href="{{ .AssetsPath }}fonts/roboto/roboto-mono-normal.woff2" as="font" type="font/woff2" crossorigin />
5963
</head>
6064
{{ end }}
6165

@@ -67,7 +71,7 @@
6771
<img src="/public/imgs/gnoland.svg" alt="Gno username profile pic" width="40px" height="40px" />
6872
</a>
6973

70-
<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">
74+
<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">
7175
<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" />
7276

7377
{{ template "breadcrumb" .Breadcrumb }}
@@ -76,7 +80,7 @@
7680

7781
<form class="sidemenu col-span-3 flex justify-end lg:justify-start gap-3 sm:gap-6 h-full text-100 text-gray-300">
7882
<a href="{{ .RealmPath }}">
79-
<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 }}">
83+
<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 }}">
8084
<input type="radio" value="summary" name="sidemenu" id="sidemenu-meta" class="peer hidden" />
8185
<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">
8286
<use href="#ico-info"></use>
@@ -86,7 +90,7 @@
8690
</a>
8791

8892
<a href="{{ .RealmPath }}$source">
89-
<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 }}">
93+
<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 }}">
9094
<input type="radio" value="summary" name="sidemenu" id="sidemenu-source" class="peer hidden" />
9195
<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">
9296
<use href="#ico-code"></use>
@@ -96,7 +100,7 @@
96100
</a>
97101

98102
<a href="{{ .RealmPath }}$help">
99-
<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 }}">
103+
<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 }}">
100104
<input type="radio" value="summary" name="sidemenu" id="sidemenu-docs" class="peer hidden" />
101105
<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">
102106
<use href="#ico-docs"></use>

gno.land/pkg/gnoweb/components/realm.gohtml

+12-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{{ define "renderRealmToc" }}
2-
<ul class="space-y-2 pt-2 pl-4">
3-
{{ range .Items }}
2+
<ul class="space-y-2 pt-2 pl-4">{{ range .Items }}
43
<li>
54
<a class="line-clamp-2 hover:text-green-600 hover:underline" href="{{ .Anchor }}">
65
{{ .Title | noescape_bytes }}
@@ -9,18 +8,23 @@
98
{{ template "renderRealmToc" . }}
109
{{ end }}
1110
</li>
12-
{{ end }}
13-
</ul>
11+
{{ end }}</ul>
1412
{{ end }}
1513

1614
{{ define "renderRealm" }}
1715
<main class="w-full grow-[2] bg-light">
1816
<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">
1917
<aside class="lg:col-span-3 lg:order-2 relative h-full" aria-label="Table of Contents">
20-
<div class="sticky top-14 lg:pt-2">
21-
<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">
22-
<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
23-
<input id="toc-expend" type="checkbox" class="hidden">
18+
<div class="sticky top-14 lg:pt-2 has-[ul:empty]:hidden">
19+
<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">
20+
<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">
21+
On this page
22+
<input id="toc-expend" type="checkbox" class="peer hidden">
23+
<span class="flex lg:hidden gap-1.5 items-center before:content-['open'] peer-checked:before:content-['close']">
24+
<svg class="toc-expend-btn_ico w-4 h-4">
25+
<use href="#ico-arrow-down"></use>
26+
</svg>
27+
</span>
2428
</label>
2529
<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">
2630
{{ template "renderRealmToc" .TocItems }}

gno.land/pkg/gnoweb/components/source.gohtml

+13-7
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,32 @@
11
{{ define "renderSource" }}
22
<main class="w-full grow-[2] bg-gray-50">
3-
<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">
3+
<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">
44
<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">
55
<div class="flex items-center">
66
<h1 class="text-600 text-gray-900 font-bold">{{ .FileName }}</h1>
77
</div>
88
<div class="flex gap-8 text-gray-300 items-center justify-between">
99
<span class="text-gray-300 pt-0.5">{{ .FileSize }} · {{ .FileLines }} lines</span>
10-
<button class="flex items-center gap-1 hover:text-gray-600 pt-0.5" data-copy-btn="source-code">
11-
<svg class="w-5 h-5 xxl:w-4 xxl:h-4 shrink-0 inline-block text-gray-200" data-copy-icon>
10+
<button class="flex items-center gap-0.5 hover:text-gray-600 pt-0.5" data-copy-btn="source-code">
11+
<svg class="w-5 h-5 xxl:w-4 xxl:h-4 shrink-0 inline-block text-gray-300" data-copy-icon>
1212
<use href="#ico-copy"></use>
13-
<use href="#ico-check" class="hidden"></use>
13+
<use href="#ico-check" class="hidden text-green-600"></use>
1414
</svg>
1515
<span class="hidden xl:inline">Copy</span>
1616
</button>
1717
</div>
1818
</header>
1919
<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">
2020
<div class="sticky top-14 lg:pt-2">
21-
<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">
22-
<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
23-
<input id="toc-expend" type="checkbox" class="hidden" checked>
21+
<div id="sidebar-summary" class="max-h-screen overflow-scroll no-scrollbar bg-light lg:bg-transparent rounded-sm mt-8 lg:mt-0">
22+
<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">
23+
Sources Files list
24+
<input id="toc-expend" type="checkbox" class="peer hidden" checked>
25+
<span class="flex lg:hidden gap-1.5 items-center before:content-['open'] peer-checked:before:content-['close']">
26+
<svg class="toc-expend-btn_ico w-4 h-4">
27+
<use href="#ico-arrow-down"></use>
28+
</svg>
29+
</span>
2430
</label>
2531
<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">
2632
<ul class="list-none space-y-2 pt-2">

0 commit comments

Comments
 (0)