Merge New repo / Import into one tabbed panel (option A of the mockup)
Replaces the two side-by-side <details> cards (different heights, visually unbalanced) with a single "+ Add a repo" button opening one panel with two tabs — reuses the existing .gf-tabs/data-tab mechanism (same one driving the repo page's HTTPS/SSH toggle), so no new JS. Also fixes a layout bug this surfaced: .gf-page-head used align-items:center, so its h1 got vertically centered against whatever tall content sat next to it once the panel was open — visible even in the old two-card layout, worse with one open panel. Now align-items:flex-start, so the title always stays pinned to the top regardless of what's beside it.
4 files changed
+37 −28
M
cmd/gitfed-web/handlers_dashboard.go
+31 −26
M
cmd/gitfed-web/render.go
+4 −2
M
internal/i18n/strings_en.go
+1 −0
M
internal/i18n/strings_fr.go
+1 −0
cmd/gitfed-web/handlers_dashboard.go
@@ -21,32 +21,37 @@ var dashboardTpl = newTpl("dashboard", `
<div class="gf-page-head">
<h1>{{t .Lang "dashboard.title"}}</h1>
- <div class="gf-page-head-actions">
- <details class="gf-new-repo">
- <summary class="gf-btn" style="margin:0;">+ {{t .Lang "dashboard.import_repo"}}</summary>
- <form class="card gf-import-form" method="post" action="/repos/import" style="margin-top:0.75rem;">
- <label>{{t .Lang "dashboard.import_url_label"}}</label>
- <input name="source_url" type="url" required placeholder="https://github.com/owner/repo.git" id="importUrl" autocomplete="off">
- <label>{{t .Lang "dashboard.repo_name"}}</label>
- <div class="gf-input-group">
- <span class="prefix">{{.Username}}/</span>
- <input name="name" required placeholder="my-project" id="importName" autocomplete="off">
- </div>
- <button type="submit">{{t .Lang "dashboard.import"}}</button>
- </form>
- </details>
- <details class="gf-new-repo">
- <summary class="gf-btn primary" style="margin:0;">+ {{t .Lang "dashboard.new_repo"}}</summary>
- <form class="card" method="post" action="/repos" style="margin-top:0.75rem;">
- <label>{{t .Lang "dashboard.repo_name"}}</label>
- <div class="gf-input-group">
- <span class="prefix">{{.Username}}/</span>
- <input name="name" required placeholder="my-project" autocomplete="off">
- </div>
- <button type="submit">{{t .Lang "dashboard.create"}}</button>
- </form>
- </details>
- </div>
+ <details class="gf-new-repo">
+ <summary class="gf-btn primary" style="margin:0;">+ {{t .Lang "dashboard.add_repo"}}</summary>
+ <div class="gf-card gf-add-repo-panel" style="margin-top:0.75rem;">
+ <div class="gf-tabs">
+ <button type="button" data-tab="tab-new-repo" class="active">{{t .Lang "dashboard.new_repo"}}</button>
+ <button type="button" data-tab="tab-import-repo">{{t .Lang "dashboard.import_repo"}}</button>
+ </div>
+ <div id="tab-new-repo" class="gf-tabpane active">
+ <form method="post" action="/repos">
+ <label>{{t .Lang "dashboard.repo_name"}}</label>
+ <div class="gf-input-group">
+ <span class="prefix">{{.Username}}/</span>
+ <input name="name" required placeholder="my-project" autocomplete="off">
+ </div>
+ <button type="submit">{{t .Lang "dashboard.create"}}</button>
+ </form>
+ </div>
+ <div id="tab-import-repo" class="gf-tabpane gf-import-form">
+ <form method="post" action="/repos/import">
+ <label>{{t .Lang "dashboard.import_url_label"}}</label>
+ <input name="source_url" type="url" required placeholder="https://github.com/owner/repo.git" id="importUrl" autocomplete="off">
+ <label>{{t .Lang "dashboard.repo_name"}}</label>
+ <div class="gf-input-group">
+ <span class="prefix">{{.Username}}/</span>
+ <input name="name" required placeholder="repo" id="importName" autocomplete="off">
+ </div>
+ <button type="submit">{{t .Lang "dashboard.import"}}</button>
+ </form>
+ </div>
+ </div>
+ </details>
</div>
<div class="gf-card gf-repo-list">
cmd/gitfed-web/render.go
@@ -372,10 +372,9 @@ const shellHeadSrc = `<!doctype html>
}
/* ---------- dashboard / settings / admin ---------- */
- .gf-page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
+ .gf-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.gf-page-head h1, .gf-page-head h2 { font-size: 1.35rem; margin: 0; }
.gf-page-head .count { font-family: var(--mono); font-size: 0.82rem; color: var(--text-faint); }
- .gf-page-head-actions { display: flex; align-items: flex-start; gap: 0.5rem; }
.gf-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 1.25rem; }
.gf-stat { background: var(--surface); padding: 1rem 1.1rem; }
@@ -489,6 +488,9 @@ const shellHeadSrc = `<!doctype html>
.gf-new-repo summary::-webkit-details-marker { display: none; }
.gf-new-repo[open] summary { margin-bottom: 0.5rem; }
.gf-new-repo form.card { min-width: 320px; }
+ .gf-add-repo-panel { min-width: 360px; max-width: 480px; }
+ .gf-add-repo-panel .gf-tabs { margin: 0; padding: 0.3rem 1.1rem 0; }
+ .gf-add-repo-panel .gf-tabpane { padding: 1.1rem; }
.gf-input-group { display: flex; align-items: stretch; margin-top: 0.25rem; }
.gf-input-group input { margin-top: 0; border-radius: 0 6px 6px 0; }
internal/i18n/strings_en.go
@@ -133,6 +133,7 @@ var en = map[string]string{
"dashboard.stat_repos": "Repos",
"dashboard.stat_public": "Public",
"dashboard.stat_shared": "Shared with you",
+ "dashboard.add_repo": "Add a repo",
"dashboard.new_repo": "New repo",
"dashboard.repo_name": "Name",
"dashboard.create": "Create",
internal/i18n/strings_fr.go
@@ -133,6 +133,7 @@ var fr = map[string]string{
"dashboard.stat_repos": "Dépôts",
"dashboard.stat_public": "Publics",
"dashboard.stat_shared": "Partagés avec vous",
+ "dashboard.add_repo": "Ajouter un dépôt",
"dashboard.new_repo": "Nouveau dépôt",
"dashboard.repo_name": "Nom",
"dashboard.create": "Créer",