Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: gnoweb UI styles #3349

Merged
merged 25 commits into from
Dec 17, 2024
Merged

fix: gnoweb UI styles #3349

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
8cdd63a
fix: revamp UI styles
alexiscolin Dec 17, 2024
d765f38
style: hover and sprite
alexiscolin Dec 17, 2024
3af29bd
fix: input text hover
alexiscolin Dec 17, 2024
db85cf1
fix: select text
alexiscolin Dec 17, 2024
15e45f4
style: round active tab
alexiscolin Dec 17, 2024
8566e04
style: input placeholder
alexiscolin Dec 17, 2024
823ebd6
style: spacing
alexiscolin Dec 17, 2024
1f51a68
chore: generate
alexiscolin Dec 17, 2024
3d30b55
fix: nav path scrollbar
alexiscolin Dec 17, 2024
2d8afc1
style: long word rwd
alexiscolin Dec 17, 2024
2ef2488
Merge branch 'master' into fix/gnoweb-ui-style
alexiscolin Dec 17, 2024
b76312e
style: global margin-top
alexiscolin Dec 17, 2024
551e663
Merge branch 'master' into fix/gnoweb-ui-style
alexiscolin Dec 17, 2024
c5c75ad
style: list space
alexiscolin Dec 17, 2024
8826495
style: copy color i11y
alexiscolin Dec 17, 2024
87a1993
fix: multi copy
alexiscolin Dec 17, 2024
bdc64a6
chore: generate
alexiscolin Dec 17, 2024
a9fece2
fix: improve font loading
alexiscolin Dec 17, 2024
8abe1fe
chore: generate
alexiscolin Dec 17, 2024
d087f9d
fix: doctype
alexiscolin Dec 17, 2024
b34a9bd
style: fon load strategy
alexiscolin Dec 17, 2024
6d6f8e0
chore: generate
alexiscolin Dec 17, 2024
2b2bf9c
fix: copy btn
alexiscolin Dec 17, 2024
74cbb07
feat: svg a11y and remove empty toc
alexiscolin Dec 17, 2024
74d1fe4
style: source grid row
alexiscolin Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 22 additions & 12 deletions gno.land/pkg/gnoweb/components/help.gohtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
16 changes: 10 additions & 6 deletions gno.land/pkg/gnoweb/components/index.gohtml
View file
Open in desktop
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">
Expand All @@ -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 }}" />

Expand Down Expand Up @@ -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 }}

Expand All @@ -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 }}
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
20 changes: 12 additions & 8 deletions gno.land/pkg/gnoweb/components/realm.gohtml
View file
Open in desktop
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 }}
Expand All @@ -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 }}
Expand Down
20 changes: 13 additions & 7 deletions gno.land/pkg/gnoweb/components/source.gohtml
View file
Open in desktop
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">
Expand Down
Loading
Loading