leeworks-agents/gitea-mobile
5
0
Fork 0
Code Issues 42 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

feat: implement mobile-first HTMX templates and CSS

Browse Source 
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
2026-03-26 04:15:06 +00:00
parent 712dc5632c
commit 81496c775e
10 changed files with 763 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/handlers/handlers.go
+1 -40
View File
@@ -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>