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

feat(ui): redesign upload page into a two-column layout

Browse Source 
Redesigns the upload interface to use a two-column grid layout on larger screens, separating the file drop-zone (left) from the upload options (right). This improves usability and visual hierarchy.

Changes include:
- Increasing the upload view max-width to 64rem.
- Creating a responsive `.upload-grid` that collapses to a single column on narrow viewports.
- Stacking option fields vertically in the narrower options panel.
- Adding retro theme support for the new options title.
This commit is contained in:
Daniel Legt
2026-05-31 16:41:04 +03:00
parent 48d3c0475f
commit 704efb019c
4 changed files with 85 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
backend/templates/pages/home.html
View File

@@ -10,33 +10,44 @@
{{end}}
</div>
<form class="upload-panel card" id="upload-form" action="/api/v1/upload" method="post" enctype="multipart/form-data">
<div class="card-content">
{{if .CurrentUser}}
<h1 id="upload-title">Drop it. Share it.</h1>
<p class="upload-subtitle">{{.Data.LimitSummary}}</p>
{{else}}
<h1 id="upload-title">Send a file. Get a link.</h1>
<p class="upload-subtitle">Fast, private transfers that expire on your terms.</p>
{{end}}
<label class="drop-zone" for="file-input">
<span class="drop-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 16V4m0 0 4 4m-4-4-4 4M5 20h14" /></svg>
</span>
<span class="drop-title">Drop files to upload</span>
<span class="drop-copy">or click to browse</span>
<span class="drop-meta">Max file size: {{.Data.MaxUploadSize}} · {{.Data.LimitSummary}}</span>
<input id="file-input" name="file" type="file" multiple>
</label>
<form class="upload-grid" id="upload-form" action="/api/v1/upload" method="post" enctype="multipart/form-data">
<div class="card upload-main">
<div class="card-content">
{{if .CurrentUser}}
<h1 id="upload-title">Drop it. Share it.</h1>
<p class="upload-subtitle">{{.Data.LimitSummary}}</p>
{{else}}
<h1 id="upload-title">Send a file. Get a link.</h1>
<p class="upload-subtitle">Fast, private transfers that expire on your terms.</p>
{{end}}
<label class="drop-zone" for="file-input">
<span class="drop-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 16V4m0 0 4 4m-4-4-4 4M5 20h14" /></svg>
</span>
<span class="drop-title">Drop files to upload</span>
<span class="drop-copy">or click to browse</span>
<span class="drop-meta">Max file size: {{.Data.MaxUploadSize}} · {{.Data.LimitSummary}}</span>
<input id="file-input" name="file" type="file" multiple>
</label>
<details class="advanced-options">
<summary>
<svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
Advanced options
</summary>
<div class="upload-progress" id="upload-progress" hidden>
<div class="progress-row">
<span>Uploading</span>
<span id="upload-status">Preparing...</span>
</div>
<div class="progress"><span id="total-progress-bar"></span></div>
</div>
<div class="result-list upload-queue" id="upload-queue" hidden></div>
</div>
</div>
<div class="card upload-options">
<div class="card-content">
<h2 class="options-title">Upload options</h2>
<div class="option-grid">
{{if .CurrentUser}}
<label>
<span>Collection</span>
<select name="collection_id">
<option value="">Unsorted</option>
{{range .Data.Collections}}<option value="{{.ID}}">{{.Name}}</option>{{end}}
@@ -62,20 +73,11 @@
<span>Hide file names/count until unlocked</span>
</label>
</div>
</details>
<div class="upload-progress" id="upload-progress" hidden>
<div class="progress-row">
<span>Uploading</span>
<span id="upload-status">Preparing...</span>
<div class="form-footer">
<p id="file-summary">Choose one or more files to begin.</p>
<button class="button button-primary" type="submit">Upload files</button>
</div>
<div class="progress"><span id="total-progress-bar"></span></div>
</div>
<div class="result-list upload-queue" id="upload-queue" hidden></div>
<div class="form-footer">
<p id="file-summary">Choose one or more files to begin.</p>
<button class="button button-primary" type="submit">Upload files</button>
</div>
</div>
</form>