kato/warpbox-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): remaster settings and navigation layout
All checks were successful
Build and Publish Docker Image / deploy (push) Successful in 1m8s
Details

Browse Source 
- Update navigation labels from "My Account" to "Dashboard" and "Login" to "Sign in", updating tests accordingly.
- Redesign settings forms into structured sections with improved spacing and layout.
- Add CSS styles for tabs, small buttons, and responsive settings sections to enhance the user experience.
This commit is contained in:
Daniel Legt
2026-05-30 18:17:13 +03:00
parent d77f164900
commit 830d2a885c
11 changed files with 606 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
backend/templates/pages/dashboard.html
View File

@@ -3,18 +3,14 @@
{{define "content"}}
<section class="app-shell" aria-labelledby="dashboard-title">
<aside class="app-sidebar">
<a class="sidebar-link is-active" href="/app">Dashboard</a>
<a class="sidebar-link" href="/account/settings">Settings</a>
{{if eq .Data.User.Role "admin"}}<a class="sidebar-link" href="/admin">Admin</a>{{end}}
<nav class="sidebar-nav">
<a class="sidebar-link is-active" href="/app">My Files</a>
<a class="sidebar-link" href="/account/settings">Account</a>
{{if eq .Data.User.Role "admin"}}<a class="sidebar-link" href="/admin">Admin panel</a>{{end}}
</nav>
<hr class="sidebar-sep">
<form class="sidebar-logout" action="/logout" method="post">
<button class="button button-outline" type="submit">Logout</button>
</form>
<form class="collection-create" action="/app/collections" method="post">
<label>
<span>New collection</span>
<input name="name" placeholder="Projects">
</label>
<button class="button button-outline" type="submit">Create</button>
<button class="button button-outline" type="submit">Sign out</button>
</form>
</aside>
@@ -22,46 +18,91 @@
<div class="admin-header">
<div>
<p class="kicker">Personal space</p>
<h1 id="dashboard-title">My files</h1>
<h1 id="dashboard-title">My Files</h1>
<p class="muted-copy">{{.Data.StorageUsed}} used · max file size {{.Data.MaxUploadSize}}</p>
</div>
<a class="button button-primary" href="/">Upload files</a>
</div>
<div class="collection-tabs">
<a class="button {{if not .Data.Selected}}button-primary{{else}}button-outline{{end}}" href="/app">All</a>
{{range .Data.Collections}}
<a class="button {{if eq $.Data.Selected .ID}}button-primary{{else}}button-outline{{end}}" href="/app?collection={{.ID}}">{{.Name}}</a>
{{end}}
<div class="tabs-bar">
<div class="tab-list" role="tablist">
<a class="tab {{if not .Data.Selected}}is-active{{end}}" href="/app">All</a>
{{range .Data.Collections}}
<a class="tab {{if eq $.Data.Selected .ID}}is-active{{end}}" href="/app?collection={{.ID}}">{{.Name}}</a>
{{end}}
</div>
<details class="new-collection-drop">
<summary class="button button-outline button-sm">+ Collection</summary>
<div class="new-collection-body">
<form action="/app/collections" method="post">
<label>
<span>Name</span>
<input name="name" placeholder="e.g. Projects" required>
</label>
<button class="button button-primary button-sm" type="submit">Create</button>
</form>
</div>
</details>
</div>
<div class="card admin-table-card">
<div class="card-content">
<div class="table-header"><h2>Owned boxes</h2><p>Collections organize boxes. Shared links remain unlisted.</p></div>
<div class="table-header">
<div>
<h2>Boxes</h2>
<p>Collections organise boxes. Shared links remain unlisted.</p>
</div>
</div>
<div class="admin-table-wrap">
<table class="admin-table">
<thead><tr><th>Title</th><th>Collection</th><th>Files</th><th>Size</th><th>Created</th><th>Expires</th><th>Actions</th></tr></thead>
<thead>
<tr>
<th>Title</th>
<th>Collection</th>
<th>Files</th>
<th>Size</th>
<th>Expires</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{{range .Data.Boxes}}
<tr>
<td class="file-name">{{.Title}}</td>
<td>{{if .CollectionName}}{{.CollectionName}}{{else}}Unsorted{{end}}</td>
<td>
<div class="file-name">{{.Title}}</div>
<details class="row-edit">
<summary>Rename</summary>
<form action="/app/boxes/{{.ID}}/rename" method="post" class="row-edit-form">
<input name="title" placeholder="New title">
<button class="button button-outline button-sm" type="submit">Save</button>
</form>
</details>
</td>
<td>
<div>{{if .CollectionName}}{{.CollectionName}}{{else}}<span class="muted-copy">—</span>{{end}}</div>
<details class="row-edit">
<summary>Move</summary>
<form action="/app/boxes/{{.ID}}/move" method="post" class="row-edit-form">
<select name="collection_id">
<option value="">Unsorted</option>
{{range $.Data.Collections}}<option value="{{.ID}}">{{.Name}}</option>{{end}}
</select>
<button class="button button-outline button-sm" type="submit">Move</button>
</form>
</details>
</td>
<td>{{.FileCount}}</td>
<td>{{.Size}}</td>
<td>{{.CreatedAt}}</td>
<td>{{.ExpiresAt}}</td>
<td class="table-actions">
<a class="button button-outline" href="{{.URL}}" target="_blank" rel="noopener noreferrer">Open</a>
<form action="/app/boxes/{{.ID}}/rename" method="post"><input class="compact-input" name="title" placeholder="Rename"><button class="button button-outline" type="submit">Save</button></form>
<form action="/app/boxes/{{.ID}}/move" method="post">
<select name="collection_id"><option value="">Unsorted</option>{{range $.Data.Collections}}<option value="{{.ID}}">{{.Name}}</option>{{end}}</select>
<button class="button button-outline" type="submit">Move</button>
<a class="button button-outline button-sm" href="{{.URL}}" target="_blank" rel="noopener noreferrer">Open</a>
<form action="/app/boxes/{{.ID}}/delete" method="post">
<button class="button button-danger button-sm" type="submit">Delete</button>
</form>
<form action="/app/boxes/{{.ID}}/delete" method="post"><button class="button button-danger" type="submit">Delete</button></form>
</td>
</tr>
{{else}}
<tr><td colspan="7">You have no boxes yet.</td></tr>
<tr><td colspan="6" class="muted-copy">No boxes yet. Upload some files to get started.</td></tr>
{{end}}
</tbody>
</table>