cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(layout): add a sticky page header

Browse Source 
- keep action bar, breadcrumb, dropzone visible even during scroll down
This commit is contained in:
Edouard Vanbelle
2026-04-08 10:38:36 +02:00
parent 2e8e0ef6c5
commit 669623adbe
2 changed files with 59 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/layout/content.css
+9
View File
@@ -13,6 +13,15 @@
color: #2d3748;
}
.page-sticky-header {
position: sticky;
margin: 0px;
padding: 10px 0px;
top: -20px; /* due to padding top of content-area */
background-color: var(--color-bg-page);
z-index: 100; /* ensure header is above image preview */
}
.actions-bar {
display: flex;
justify-content: space-between;
static/index.html
+49 -46
View File
@@ -204,57 +204,60 @@
<div class="content-area">
<h1 class="page-title" data-i18n="nav.files">Files</h1>
<div class="actions-bar" id="actions-bar">
<div class="action-buttons">
<div class="upload-dropdown" id="upload-dropdown">
<button class="btn btn-primary" id="upload-btn">
<i class="fas fa-cloud-upload-alt"></i>
<span data-i18n="actions.upload">Upload</span>
<i class="fas fa-caret-down upload-caret"></i>
<div class="page-sticky-header">
<div class="actions-bar" id="actions-bar">
<div class="action-buttons" id="action-buttons">
<div class="upload-dropdown" id="upload-dropdown">
<button class="btn btn-primary" id="upload-btn">
<i class="fas fa-cloud-upload-alt"></i>
<span data-i18n="actions.upload">Upload</span>
<i class="fas fa-caret-down upload-caret"></i>
</button>
<div class="upload-dropdown-menu" id="upload-dropdown-menu">
<button class="upload-dropdown-item" id="upload-files-btn">
<i class="fas fa-file"></i>
<span data-i18n="actions.upload_files">Upload files</span>
</button>
<button class="upload-dropdown-item" id="upload-folder-btn">
<i class="fas fa-folder-open"></i>
<span data-i18n="actions.upload_folder">Upload folder</span>
</button>
</div>
</div>
<button class="btn btn-secondary" id="new-folder-btn">
<i class="fas fa-folder-plus"></i>
<span data-i18n="actions.new_folder">New folder</span>
</button>
<div class="upload-dropdown-menu" id="upload-dropdown-menu">
<button class="upload-dropdown-item" id="upload-files-btn">
<i class="fas fa-file"></i>
<span data-i18n="actions.upload_files">Upload files</span>
</button>
<button class="upload-dropdown-item" id="upload-folder-btn">
<i class="fas fa-folder-open"></i>
<span data-i18n="actions.upload_folder">Upload folder</span>
</button>
</div>
<div class="view-toggle">
<button class="toggle-btn active" id="grid-view-btn" title="Grid view">
<i class="fas fa-th"></i>
</button>
<button class="toggle-btn" id="list-view-btn" title="List view">
<i class="fas fa-list"></i>
</button>
</div>
</div>
<div id="batch-selection-bar" class="batch-selection-bar hidden"></div>
<div class="breadcrumb">
<span class="breadcrumb-item" data-i18n="breadcrumb.home">Home</span>
</div>
<div class="dropzone" id="dropzone">
<i class="fas fa-cloud-upload-alt dropzone-icon"></i>
<p data-i18n="dropzone.drag_files">Drag files here or click to select</p>
<input type="file" id="file-input" class="hidden" multiple>
<input type="file" id="folder-input" class="hidden" webkitdirectory directory multiple>
<div class="upload-progress">
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
</div>
<button class="btn btn-secondary" id="new-folder-btn">
<i class="fas fa-folder-plus"></i>
<span data-i18n="actions.new_folder">New folder</span>
</button>
</div>
<div class="view-toggle">
<button class="toggle-btn active" id="grid-view-btn" title="Grid view">
<i class="fas fa-th"></i>
</button>
<button class="toggle-btn" id="list-view-btn" title="List view">
<i class="fas fa-list"></i>
</button>
</div>
</div>
<div id="batch-selection-bar" class="batch-selection-bar hidden"></div>
<div class="dropzone" id="dropzone">
<i class="fas fa-cloud-upload-alt dropzone-icon"></i>
<p data-i18n="dropzone.drag_files">Drag files here or click to select</p>
<input type="file" id="file-input" class="hidden" multiple>
<input type="file" id="folder-input" class="hidden" webkitdirectory directory multiple>
<div class="upload-progress">
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
</div>
</div>
<div class="breadcrumb">
<span class="breadcrumb-item" data-i18n="breadcrumb.home">Home</span>
</div>
<!-- Files Container -->