joachim/FileRise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

release(v1.9.11): fix(media): HTTP Range streaming; feat(ui): paged folder strip (closes #68)

Browse Source
This commit is contained in:
Ryan
2025-11-18 15:07:27 -05:00
committed by GitHub
parent 3b1ebdd77f
commit 0ec8103fbf
6 changed files with 551 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
public/css/styles.css
View File

@@ -1887,4 +1887,94 @@ body.dark-mode #folderTreeContainer .folder-icon .lock-keyhole{fill: rgba(255,25
color: #111;}
.dark-mode .upload-resume-banner-inner .material-icons,
.dark-mode .folder-badge .material-icons{background-color: transparent;
color: #f5f5f5;}
color: #f5f5f5;}
/* Base strip container */
.folder-strip-container {
margin-bottom: 6px;
}
/* Base item layout */
.folder-strip-container .folder-item {
display: flex;
min-width: 0;
}
.folder-strip-container .folder-svg {
flex: 0 0 auto;
line-height: 0;
}
.folder-strip-container .folder-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- Desktop: chips, icon above name --- */
.folder-strip-container.folder-strip-desktop {
display: flex;
align-items: center;
overflow-x: auto;
padding: 4px 8px;
}
.folder-strip-container.folder-strip-desktop .folder-item {
flex-direction: column; /* icon on top, name under */
align-items: center;
gap: 4px;
}
.folder-strip-container.folder-strip-desktop .folder-name {
text-align: center;
max-width: 120px;
}
/* --- Mobile: stacked rows, icon left of name --- */
.folder-strip-container.folder-strip-mobile {
display: block;
max-height: 220px;
overflow-y: auto;
padding: 6px 8px;
border-radius: 8px;
border: 1px solid rgba(0,0,0,.08);
background: rgba(0,0,0,.02);
}
.folder-strip-container.folder-strip-mobile .folder-item {
width: 100%;
flex-direction: row; /* icon left, name right */
align-items: center;
gap: 6px;
padding: 8px 8px;
border-radius: 6px;
margin-bottom: 4px;
}
.folder-strip-container.folder-strip-mobile .folder-name {
flex: 1 1 auto;
text-align: left;
transform: translate(8px, 4px);
}
.folder-strip-container.folder-strip-mobile .folder-item:hover {
background: rgba(0,0,0,.04);
}
.folder-strip-container.folder-strip-mobile .folder-item.selected {
background: rgba(59,130,246,.12);
}
/* Load-more button */
.folder-strip-load-more {
display: block;
width: 100%;
margin: 4px 0 0;
padding: 6px 10px;
border-radius: 6px;
border: 1px solid rgba(0,0,0,.15);
background: rgba(0,0,0,.02);
font-size: 0.85rem;
text-align: center;
cursor: pointer;
}