31691b3e34fde66da832bea9fcce8fd5972728d3
- Author
- TheEdgeOfRage <git@theedgeofrage.com>
- Committer
- TheEdgeOfRage <git@theedgeofrage.com>
- Date
Message
Make UI nicer
Diff
This diff is truncated to protect this page.
1diff --git a/pkg/web/pages/assets/site.css b/pkg/web/pages/assets/site.css
2index 5f5fd06995083f78d7da864c2f032b4387edc7f8..491b93507d6a74f18eebeae38db6556c999b0eca 100644
3--- a/pkg/web/pages/assets/site.css
4+++ b/pkg/web/pages/assets/site.css
5@@ -1,224 +1,290 @@
6+:root {
7+ --bg: #282828;
8+ --bg-hard: #1d2021;
9+ --surface: #32302f;
10+ --surface-raised: #3c3836;
11+ --surface-hover: #504945;
12+ --border: #665c54;
13+ --text: #ebdbb2;
14+ --muted: #a89984;
15+ --blue: #83a598;
16+ --aqua: #8ec07c;
17+ --green: #b8bb26;
18+ --yellow: #fabd2f;
19+ --orange: #fe8019;
20+ --red: #fb4934;
21+}
22+
23+* { box-sizing: border-box; }
24+
25 body {
26- margin: 0 auto;
27- max-width: 72rem;
28- padding: 1rem;
29- color: #1f2937;
30- font-family: system-ui, sans-serif;
31- line-height: 1.5;
32+ background: var(--bg);
33+ color: var(--text);
34+ font-family: Inter, ui-sans-serif, system-ui, sans-serif;
35+ line-height: 1.55;
36+ margin: 0;
37 }
38
39 .site-header {
40- border-bottom: 1px solid #d1d5db;
41- margin-bottom: 2rem;
42- padding-bottom: 1rem;
43-}
44-
45-.site-name {
46- color: inherit;
47- font-weight: 700;
48- text-decoration: none;
49+ background: var(--bg-hard);
50+ border-bottom: 1px solid var(--border);
51 }
52
53-a {
54- color: #075985;
55-}
56-
57-a:focus-visible {
58- border-radius: 0.15rem;
59- outline: 3px solid #f59e0b;
60- outline-offset: 3px;
61+.site-nav,
62+.page-shell {
63+ margin: 0 auto;
64+ max-width: 74rem;
65+ padding-left: 1.25rem;
66+ padding-right: 1.25rem;
67 }
68
69-.profile,
70-.repository-card {
71- border: 1px solid #d1d5db;
72- border-radius: 0.35rem;
73- margin: 1rem 0;
74- padding: 1rem;
75-}
76+.site-nav { min-height: 4rem; display: flex; align-items: center; }
77+.page-shell { padding-bottom: 3rem; padding-top: 2.5rem; }
78
79-.repository-list {
80- display: grid;
81- gap: 1rem;
82- list-style: none;
83- margin: 1rem 0;
84- padding: 0;
85+.site-name,
86+.file-link,
87+.button,
88+.repository-tabs a {
89+ align-items: center;
90+ display: inline-flex;
91+ gap: 0.45rem;
92 }
93
94-.repository-card h3,
95-.repository-card p {
96- margin: 0;
97+.site-name {
98+ color: var(--text);
99+ font-size: 1.08rem;
100+ font-weight: 750;
101+ text-decoration: none;
102 }
103
104-.repository-card p + p,
105diff --git a/pkg/web/pages/templates/history.gohtml b/pkg/web/pages/templates/history.gohtml
106index df92a1705fcc67abc8f101f461cd1dcf60a386c0..0107b901ec97984887cafefd71d29d7634419913 100644
107--- a/pkg/web/pages/templates/history.gohtml
108+++ b/pkg/web/pages/templates/history.gohtml
109@@ -7,14 +7,16 @@
110 <link rel="stylesheet" href="/@/assets/site.css">
111 </head>
112 <body>
113- <header class="site-header"><nav aria-label="Primary"><a class="site-name" href="/">{{ .ServerName }}</a></nav></header>
114- <main>
115- <p><a href="{{ .OverviewURL }}">{{ .Repository }}</a> / <code>{{ .Ref }}</code></p>
116- <h1>Commits</h1>
117- <ol class="commit-list">{{ range .Entries }}
118- <li><article><h2><a href="{{ .URL }}">{{ .Subject }}</a></h2><p><code>{{ .ShortHash }}</code> · {{ .Author }} · <time>{{ .Date }}</time></p></article></li>
119- {{ else }}<li>No commits found.</li>{{ end }}</ol>
120- {{ if or .PreviousURL .NextURL }}<nav aria-label="Commit history pages">{{ if .PreviousURL }}<a href="{{ .PreviousURL }}">Previous</a>{{ end }} {{ if .NextURL }}<a href="{{ .NextURL }}">Next</a>{{ end }}</nav>{{ end }}
121+ {{ template "site-header" . }}
122+ <main class="page-shell">
123+ <nav class="breadcrumb" aria-label="Breadcrumb"><a href="{{ .OverviewURL }}">{{ .Repository }}</a><span aria-hidden="true">/</span><code>{{ .Ref }}</code></nav>
124+ <section class="panel history-panel">
125+ <div class="section-heading"><div><p class="eyebrow">Repository history</p><h1>Commits</h1></div></div>
126+ <ol class="commit-list">{{ range .Entries }}
127+ <li><article><h2><a href="{{ .URL }}">{{ .Subject }}</a></h2><p><code>{{ .ShortHash }}</code><span>·</span>{{ .Author }}<span>·</span><time>{{ .Date }}</time></p></article></li>
128+ {{ else }}<li class="empty-state">No commits found.</li>{{ end }}</ol>
129diff --git a/pkg/web/pages/templates/home.gohtml b/pkg/web/pages/templates/home.gohtml
130index 3cefb5f3c459c1c1d1329bcb50971dfc51a32c77..4f895fa534401cf009dcfc0f3d5626fd2e30e090 100644
131--- a/pkg/web/pages/templates/home.gohtml
132+++ b/pkg/web/pages/templates/home.gohtml
133@@ -7,12 +7,8 @@
134 <link rel="stylesheet" href="/@/assets/site.css">
135 </head>
136 <body>
137- <header class="site-header">
138- <nav aria-label="Primary">
139- <a class="site-name" href="/">{{ .ServerName }}</a>
140- </nav>
141- </header>
142- <main>
143+ {{ template "site-header" . }}
144+ <main class="page-shell">
145 {{ template "home-content" . }}
146 </main>
147 </body>
148@@ -21,31 +17,43 @@
149 {{ define "home" }}{{ template "base" . }}{{ end }}
150
151 {{ define "home-content" }}
152- <h1>Public projects</h1>
153+ <section class="page-intro">
154+ <p class="eyebrow">Explore</p>
155+ <h1>Public projects</h1>
156+ <p>Browse repositories, source code, and project history.</p>
157+ </section>
158 {{ if .Profile }}
159- <section class="profile" aria-labelledby="profile-heading">
160+ <section class="panel profile" aria-labelledby="profile-heading">
161 <h2 id="profile-heading">About {{ .ServerName }}</h2>
162 <div class="markdown">{{ .Profile }}</div>
163 </section>
164 {{ end }}
165- <section aria-labelledby="projects-heading">
166- <h2 id="projects-heading">Projects</h2>
167+ <section class="project-section" aria-labelledby="projects-heading">
168+ <div class="section-heading">
169+ <div><p class="eyebrow">Repositories</p><h2 id="projects-heading">Projects</h2></div>
170+ {{ if .Cards }}<span class="item-count">{{ len .Cards }} available</span>{{ end }}
171+ </div>
172 {{ if .Cards }}
173 <ul class="repository-list">
174 {{ range .Cards }}
175 <li>
176 <article class="repository-card">
177- <h3><a href="{{ .URL }}">{{ .Title }}</a></h3>
178- {{ if ne .Title .Name }}<p class="repository-name">{{ .Name }}</p>{{ end }}
179- {{ if .Description }}<p>{{ .Description }}</p>{{ end }}
180- <p class="build-status">Build status: <span class="status-badge {{ .BuildStatus.Class }}">{{ .BuildStatus.Label }}</span></p>
181- {{ if .UpdatedAt }}<p class="updated">Updated <time>{{ .UpdatedAt }}</time></p>{{ end }}
182+ <div class="repository-card-content">
183+ <h3><a href="{{ .URL }}">{{ .Title }}</a></h3>
184+ {{ if ne .Title .Name }}<p class="repository-name">{{ .Name }}</p>{{ end }}
185+ {{ if .Description }}<p class="repository-description">{{ .Description }}</p>{{ end }}
186+ </div>
187+ <div class="repository-card-meta">
188+ <span class="build-status">Build status: <span class="status-badge {{ .BuildStatus.Class }}">{{ .BuildStatus.Label }}</span></span>
189+ {{ if .UpdatedAt }}<time class="updated">Updated {{ .UpdatedAt }}</time>{{ end }}
190+ </div>
191+ <div class="card-actions"><a class="button button-secondary" href="{{ .URL }}">{{ template "icon-arrow-right" }}<span>Open project</span></a></div>
192 </article>
193 </li>
194 {{ end }}
195 </ul>
196 {{ else }}
197- <p>No public projects are available.</p>
198+ <p class="empty-state">No public projects are available.</p>
199 {{ end }}
200 </section>
201 {{ end }}
202diff --git a/pkg/web/pages/templates/icons.gohtml b/pkg/web/pages/templates/icons.gohtml
203new file mode 100644
204index 0000000000000000000000000000000000000000..8147f63351502a640aa498fbd016843a4c26712f
205--- /dev/null
206+++ b/pkg/web/pages/templates/icons.gohtml
207@@ -0,0 +1,10 @@
208+{{ define "site-header" }}<header class="site-header"><nav class="site-nav" aria-label="Primary"><a class="site-name" href="/">{{ template "icon-layers" }}<span>{{ .ServerName }}</span></a></nav></header>{{ end }}
209+
210+{{ define "icon-layers" }}<svg class="icon" aria-hidden="true" viewBox="0 0 24 24"><path d="m12 3 9 5-9 5-9-5 9-5Z"/><path d="m3 12 9 5 9-5"/><path d="m3 17 9 5 9-5"/></svg>{{ end }}
211+{{ define "icon-folder" }}<svg class="icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 6a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Z"/></svg>{{ end }}
212+{{ define "icon-history" }}<svg class="icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 3v6h6"/><path d="M12 7v5l3 2"/></svg>{{ end }}
213+{{ define "icon-branch" }}<svg class="icon" aria-hidden="true" viewBox="0 0 24 24"><circle cx="6" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><path d="M6 8v8a2 2 0 0 0 2 2h8"/><path d="M18 16V8a2 2 0 0 0-2-2H8"/></svg>{{ end }}
214+{{ define "icon-download" }}<svg class="icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/></svg>{{ end }}
215+{{ define "icon-arrow-left" }}<svg class="icon" aria-hidden="true" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>{{ end }}
216+{{ define "icon-arrow-right" }}<svg class="icon" aria-hidden="true" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>{{ end }}
217+{{ define "icon-file" }}<svg class="icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/></svg>{{ end }}
218diff --git a/pkg/web/pages/templates/repository.gohtml b/pkg/web/pages/templates/repository.gohtml
219index 97c4bbbac34d12ae49421c6ff0724399fb0538ed..2f03404e2d4070e6ad6a5dfadcdcc2e5f329d25d 100644
220--- a/pkg/web/pages/templates/repository.gohtml
221+++ b/pkg/web/pages/templates/repository.gohtml
222@@ -7,29 +7,33 @@
223 <link rel="stylesheet" href="/@/assets/site.css">
224 </head>
225 <body>
226- <header class="site-header"><nav aria-label="Primary"><a class="site-name" href="/">{{ .ServerName }}</a></nav></header>
227- <main>
228+ {{ template "site-header" . }}
229+ <main class="page-shell">
230 <article>
231- <h1>{{ .Title }}</h1>
232- {{ if ne .Title .Repository }}<p class="repository-name">{{ .Repository }}</p>{{ end }}
233- {{ if .Description }}<p>{{ .Description }}</p>{{ end }}
234- <p class="build-status">Build status: <span class="status-badge {{ .BuildStatus.Class }}">{{ .BuildStatus.Label }}</span></p>
235+ <header class="repository-hero">
236+ <p class="eyebrow">Repository</p>
237+ <h1>{{ .Title }}</h1>
238+ {{ if ne .Title .Repository }}<p class="repository-name">{{ .Repository }}</p>{{ end }}
239+ {{ if .Description }}<p class="repository-description">{{ .Description }}</p>{{ end }}
240+ <div class="repository-meta"><span class="status-badge {{ .BuildStatus.Class }}">{{ .BuildStatus.Label }}</span>{{ if not .Empty }}<span>Default ref <code>{{ .Ref }}</code></span>{{ end }}</div>
241+ </header>
242 {{ if .Empty }}
243- <p>This repository is empty.</p>
244+ <p class="empty-state">This repository is empty.</p>
245 {{ else }}
246- <p>Default ref: <code>{{ .Ref }}</code></p>
247 <nav class="repository-tabs" aria-label="Repository navigation">
248- <a href="{{ .TreeURL }}">Files</a>
249- <a href="{{ .CommitsURL }}">Commits</a>
250- <a href="{{ .RefsURL }}">Branches and tags</a>
251+ <a href="{{ .TreeURL }}">{{ template "icon-folder" }}<span>Files</span></a>
252+ <a href="{{ .CommitsURL }}">{{ template "icon-history" }}<span>Commits</span></a>
253+ <a href="{{ .RefsURL }}">{{ template "icon-branch" }}<span>Branches and tags</span></a>
254 </nav>
255 {{ end }}
256- <section aria-labelledby="clone-heading">
257- <h2 id="clone-heading">Clone</h2>
258- <label class="clone-control">SSH <input class="clone-url" readonly value="{{ .SSHCloneURL }}" aria-label="SSH clone URL"></label>
259- <label class="clone-control">HTTP <input class="clone-url" readonly value="{{ .HTTPCloneURL }}" aria-label="HTTP clone URL"></label>
260+ <section class="panel clone-panel" aria-labelledby="clone-heading">
261+ <div class="section-heading"><div><p class="eyebrow">Get started</p><h2 id="clone-heading">Clone</h2></div></div>
262+ <div class="clone-grid">
263+ <label class="clone-control"><span>SSH</span><input class="clone-url" readonly value="{{ .SSHCloneURL }}" aria-label="SSH clone URL"></label>
264+ <label class="clone-control"><span>HTTP</span><input class="clone-url" readonly value="{{ .HTTPCloneURL }}" aria-label="HTTP clone URL"></label>
265+ </div>
266 </section>
267- {{ if .Readme }}<section aria-labelledby="readme-heading"><h2 id="readme-heading">README</h2><div class="markdown">{{ .Readme }}</div></section>{{ end }}