feat: implement mobile-first HTMX templates and CSS
Build all frontend views using Go html/template with HTMX interactions and mobile-first CSS with dark mode and iPhone safe areas. Templates: - layout.html: base layout with fixed bottom nav (Dashboard, Issues, PRs, Settings) - dashboard.html: card-based triage view with priority indicators - issues.html: issue list with filter bar (org, state) and infinite scroll - pulls.html: PR list with diff stats and merge status - issue_detail.html: issue detail with comments, label assignment - pull_detail.html: PR detail with diff stats and review form - create_issue.html: issue creation form with searchable repo selector CSS (static/style.css): - Mobile-first dark mode with CSS variables - iPhone safe areas via env(safe-area-inset-bottom) - Responsive: 2-column grid at 640px+ breakpoint - Light mode support via prefers-color-scheme - Card, label, badge, form, button component styles - HTMX loading indicator and spinner animation - Reduced motion support HTMX patterns: - hx-get with hx-target for SPA-like navigation - hx-trigger="revealed" for infinite scroll - hx-post with hx-swap for inline form actions - Filter bar with hx-trigger="change" and hx-include Closes leeworks-agents/gitea-mobile#5 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
agent-company
@@ -103,46 +103,7 @@ var basePage = template.Must(template.New("base").Parse(`<!DOCTYPE html>
|
||||
<link rel="manifest" href="/static/manifest.json">
|
||||
<link rel="apple-touch-icon" href="/static/icon-192.png">
|
||||
<title>{{.Title}} — Gitea Mobile</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
background: #0d1117; color: #e6edf3;
|
||||
padding-bottom: calc(60px + env(safe-area-inset-bottom));
|
||||
}
|
||||
.content { padding: 1rem; padding-top: max(1rem, env(safe-area-inset-top)); }
|
||||
h1 { font-size: 1.25rem; margin-bottom: 1rem; }
|
||||
.card {
|
||||
background: #161b22; border: 1px solid #30363d; border-radius: 8px;
|
||||
padding: 0.75rem; margin-bottom: 0.5rem;
|
||||
}
|
||||
.card-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; }
|
||||
.card-meta { font-size: 0.75rem; color: #8b949e; }
|
||||
.label {
|
||||
display: inline-block; font-size: 0.7rem; padding: 2px 6px;
|
||||
border-radius: 10px; font-weight: 500; margin-right: 4px;
|
||||
}
|
||||
.type-badge {
|
||||
font-size: 0.65rem; text-transform: uppercase; font-weight: 700;
|
||||
padding: 1px 5px; border-radius: 4px; margin-right: 4px;
|
||||
}
|
||||
.type-issue { background: #1f6feb22; color: #58a6ff; border: 1px solid #1f6feb44; }
|
||||
.type-pull { background: #23863622; color: #3fb950; border: 1px solid #23863644; }
|
||||
.empty { text-align: center; color: #8b949e; padding: 2rem 1rem; }
|
||||
.bottom-nav {
|
||||
position: fixed; bottom: 0; left: 0; right: 0;
|
||||
background: #161b22; border-top: 1px solid #30363d;
|
||||
display: flex; justify-content: space-around; align-items: center;
|
||||
height: 56px;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.bottom-nav a {
|
||||
color: #8b949e; text-decoration: none; font-size: 0.7rem;
|
||||
display: flex; flex-direction: column; align-items: center; padding: 4px 0;
|
||||
}
|
||||
.bottom-nav a.active { color: #58a6ff; }
|
||||
.bottom-nav svg { width: 22px; height: 22px; margin-bottom: 2px; }
|
||||
</style>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
{{define "content"}}
|
||||
<h1>Create Issue</h1>
|
||||
|
||||
<form hx-post="/issues" hx-swap="innerHTML" hx-target="#main-content">
|
||||
<div class="form-group">
|
||||
<label for="repo-select">Repository</label>
|
||||
<select id="repo-select" name="owner_repo" required>
|
||||
<option value="">Select a repository...</option>
|
||||
{{range $org, $repos := .Repos}}
|
||||
<optgroup label="{{$org}}">
|
||||
{{range $repos}}
|
||||
<option value="{{.Owner.Login}}/{{.Name}}">{{.FullName}}</option>
|
||||
{{end}}
|
||||
</optgroup>
|
||||
{{end}}
|
||||
</select>
|
||||
<input type="hidden" name="owner" id="owner-input">
|
||||
<input type="hidden" name="repo" id="repo-input">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="title">Title</label>
|
||||
<input type="text" id="title" name="title" placeholder="Issue title" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="body">Description</label>
|
||||
<textarea id="body" name="body" placeholder="Describe the issue..."></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Create Issue</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
// Split owner/repo from select into hidden fields.
|
||||
document.getElementById('repo-select').addEventListener('change', function() {
|
||||
var parts = this.value.split('/');
|
||||
document.getElementById('owner-input').value = parts[0] || '';
|
||||
document.getElementById('repo-input').value = parts[1] || '';
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
@@ -0,0 +1,26 @@
|
||||
{{define "content"}}
|
||||
<h1>Dashboard</h1>
|
||||
|
||||
{{if .Error}}
|
||||
<p class="empty">{{.Error}}</p>
|
||||
{{else if not .Items}}
|
||||
<p class="empty">No items need attention. Nice work!</p>
|
||||
{{else}}
|
||||
<div class="card-grid">
|
||||
{{range .Items}}
|
||||
<div class="card" hx-get="/{{if eq .Type "pull"}}pulls{{else}}issues{{end}}/{{.RepoOwner}}/{{.RepoName}}/{{.Number}}" hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true">
|
||||
<div class="card-title">
|
||||
{{if eq .Type "pull"}}<span class="type-badge type-pull">PR</span>{{else}}<span class="type-badge type-issue">issue</span>{{end}}
|
||||
{{.Title}}
|
||||
</div>
|
||||
<div class="card-meta">
|
||||
<span>{{.RepoOwner}}/{{.RepoName}} #{{.Number}}</span>
|
||||
{{range .Labels}}
|
||||
<span class="label">{{.}}</span>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
@@ -0,0 +1,43 @@
|
||||
{{define "content"}}
|
||||
<h1>{{.Issue.Title}}</h1>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-meta">
|
||||
<span class="state-open">{{.Issue.State}}</span>
|
||||
<span>{{.Issue.RepoOwner}}/{{.Issue.RepoName}} #{{.Issue.Number}}</span>
|
||||
{{range .Issue.Labels}}
|
||||
<span class="label" style="color:#{{.Color}};border:1px solid #{{.Color}}">{{.Name}}</span>
|
||||
{{end}}
|
||||
</div>
|
||||
{{if .Issue.Body}}
|
||||
<div class="card-body">{{.Issue.Body}}</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
{{if .Comments}}
|
||||
<h2>Comments</h2>
|
||||
{{range .Comments}}
|
||||
<div class="comment">
|
||||
<div class="comment-header">
|
||||
<strong>{{.User}}</strong>
|
||||
<span>{{.CreatedAt}}</span>
|
||||
</div>
|
||||
<div class="comment-body">{{.Body}}</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
<div class="card" style="margin-top:1rem;">
|
||||
<h2>Actions</h2>
|
||||
<form hx-post="/issues/{{.Issue.RepoOwner}}/{{.Issue.RepoName}}/{{.Issue.Number}}/labels" hx-swap="outerHTML" style="margin-bottom:0.5rem;">
|
||||
<div class="filter-bar" style="margin-bottom:0.5rem;">
|
||||
<select name="label_id">
|
||||
{{range .AvailableLabels}}
|
||||
<option value="{{.ID}}">{{.Name}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
<button type="submit" class="btn btn-secondary" style="width:auto;padding:0.5rem 1rem;">Apply Label</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -0,0 +1,44 @@
|
||||
{{define "content"}}
|
||||
<h1>Issues</h1>
|
||||
|
||||
<div class="filter-bar">
|
||||
<select name="org" hx-get="/issues" hx-trigger="change" hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true" hx-include="[name='state']">
|
||||
<option value="">All orgs</option>
|
||||
{{range .Orgs}}
|
||||
<option value="{{.}}" {{if eq . $.SelectedOrg}}selected{{end}}>{{.}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
<select name="state" hx-get="/issues" hx-trigger="change" hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true" hx-include="[name='org']">
|
||||
<option value="open" {{if eq .SelectedState "open"}}selected{{end}}>Open</option>
|
||||
<option value="closed" {{if eq .SelectedState "closed"}}selected{{end}}>Closed</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{if .Error}}
|
||||
<p class="empty">{{.Error}}</p>
|
||||
{{else if not .Issues}}
|
||||
<p class="empty">No issues found.</p>
|
||||
{{else}}
|
||||
<div id="issue-list">
|
||||
{{range .Issues}}
|
||||
<div class="card" hx-get="/issues/{{.RepoOwner}}/{{.RepoName}}/{{.Number}}" hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true">
|
||||
<div class="card-title">{{.Title}}</div>
|
||||
<div class="card-meta">
|
||||
<span>{{.RepoOwner}}/{{.RepoName}} #{{.Number}}</span>
|
||||
{{range .Labels}}
|
||||
<span class="label" style="color:#{{.Color}};border:1px solid #{{.Color}}">{{.Name}}</span>
|
||||
{{end}}
|
||||
{{if .Assignee}}
|
||||
<span>{{.Assignee.Login}}</span>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .HasMore}}
|
||||
<div class="scroll-sentinel" hx-get="/issues?page={{.NextPage}}&org={{.SelectedOrg}}&state={{.SelectedState}}" hx-trigger="revealed" hx-swap="outerHTML" hx-target="this">
|
||||
<div class="spinner htmx-indicator"></div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
@@ -0,0 +1,45 @@
|
||||
{{define "layout"}}<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="theme-color" content="#161b22">
|
||||
<link rel="manifest" href="/static/manifest.json">
|
||||
<link rel="apple-touch-icon" href="/static/icon-192.png">
|
||||
<title>{{.Title}} — Gitea Mobile</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content" id="main-content">
|
||||
{{template "content" .}}
|
||||
</div>
|
||||
<nav class="bottom-nav">
|
||||
<a href="/" {{if eq .ActiveTab "dashboard"}}class="active"{{end}}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
<a href="/issues" {{if eq .ActiveTab "issues"}}class="active"{{end}}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||
Issues
|
||||
</a>
|
||||
<a href="/pulls" {{if eq .ActiveTab "pulls"}}class="active"{{end}}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M6 21V9a9 9 0 009 9"/></svg>
|
||||
PRs
|
||||
</a>
|
||||
<a href="/settings" {{if eq .ActiveTab "settings"}}class="active"{{end}}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
|
||||
Settings
|
||||
</a>
|
||||
</nav>
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('/static/sw.js').catch(function(err) {
|
||||
console.log('SW registration failed:', err);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>{{end}}
|
||||
@@ -0,0 +1,47 @@
|
||||
{{define "content"}}
|
||||
<h1>{{.Pull.Title}}</h1>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-meta">
|
||||
<span class="type-badge type-pull">PR</span>
|
||||
<span class="state-open">{{.Pull.State}}</span>
|
||||
<span>{{.Pull.RepoOwner}}/{{.Pull.RepoName}} #{{.Pull.Number}}</span>
|
||||
{{range .Pull.Labels}}
|
||||
<span class="label" style="color:#{{.Color}};border:1px solid #{{.Color}}">{{.Name}}</span>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="card-meta" style="margin-top:0.5rem;">
|
||||
<span class="diff-add">+{{.Pull.Additions}}</span>
|
||||
<span class="diff-del">-{{.Pull.Deletions}}</span>
|
||||
{{if .Pull.Mergeable}}<span style="color:var(--accent-green);">Mergeable</span>{{end}}
|
||||
</div>
|
||||
{{if .Pull.Body}}
|
||||
<div class="card-body">{{.Pull.Body}}</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-top:1rem;">
|
||||
<h2>Submit Review</h2>
|
||||
<form hx-post="/pulls/{{.Pull.RepoOwner}}/{{.Pull.RepoName}}/{{.Pull.Number}}/review" hx-swap="outerHTML">
|
||||
<div class="form-group">
|
||||
<label for="review-body">Comment</label>
|
||||
<textarea id="review-body" name="body" placeholder="Leave a review comment..."></textarea>
|
||||
</div>
|
||||
<div class="review-options">
|
||||
<label class="review-option">
|
||||
<input type="radio" name="event" value="COMMENT" checked>
|
||||
<span>Comment</span>
|
||||
</label>
|
||||
<label class="review-option">
|
||||
<input type="radio" name="event" value="APPROVED">
|
||||
<span>Approve</span>
|
||||
</label>
|
||||
<label class="review-option">
|
||||
<input type="radio" name="event" value="REQUEST_CHANGES">
|
||||
<span>Request Changes</span>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit Review</button>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -0,0 +1,38 @@
|
||||
{{define "content"}}
|
||||
<h1>Pull Requests</h1>
|
||||
|
||||
<div class="filter-bar">
|
||||
<select name="org" hx-get="/pulls" hx-trigger="change" hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true">
|
||||
<option value="">All orgs</option>
|
||||
{{range .Orgs}}
|
||||
<option value="{{.}}" {{if eq . $.SelectedOrg}}selected{{end}}>{{.}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{if .Error}}
|
||||
<p class="empty">{{.Error}}</p>
|
||||
{{else if not .Pulls}}
|
||||
<p class="empty">No open pull requests found.</p>
|
||||
{{else}}
|
||||
<div id="pull-list">
|
||||
{{range .Pulls}}
|
||||
<div class="card" hx-get="/pulls/{{.RepoOwner}}/{{.RepoName}}/{{.Number}}" hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true">
|
||||
<div class="card-title">
|
||||
<span class="type-badge type-pull">PR</span>
|
||||
{{.Title}}
|
||||
</div>
|
||||
<div class="card-meta">
|
||||
<span>{{.RepoOwner}}/{{.RepoName}} #{{.Number}}</span>
|
||||
{{range .Labels}}
|
||||
<span class="label" style="color:#{{.Color}};border:1px solid #{{.Color}}">{{.Name}}</span>
|
||||
{{end}}
|
||||
<span class="diff-add">+{{.Additions}}</span>
|
||||
<span class="diff-del">-{{.Deletions}}</span>
|
||||
{{if .Mergeable}}<span style="color:var(--accent-green);font-size:0.7rem;">mergeable</span>{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user