Mirrors/filebrowser
1
0
Fork 0
mirror of https://github.com/filebrowser/filebrowser.git synced 2026-07-17 16:36:49 +00:00
Code Issues Projects Releases Wiki Activity

fix: keep mobile file sort controls visible (#5977)

Browse source
This commit is contained in:
Puneet Dixit 2026-06-04 16:19:30 +05:30 • committed by GitHub
parent 7b7ff8ae8f
commit 0bb2768754
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 53 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/src/css/__tests__/mobile.test.ts Normal file
View file

@ -0,0 +1,22 @@
import { describe, expect, it } from "vitest";
import { readFileSync } from "node:fs";
import { resolve } from "node:path";
const mobileCss = readFileSync(resolve(__dirname, "../mobile.css"), "utf8");
const normalizedCss = mobileCss.replace(/\s+/g, " ");
describe("mobile file listing styles", () => {
it("hides file row metadata without hiding list header sort controls", () => {
expect(normalizedCss).toContain(
"#listing.list .item:not(.header) .size { display: none;"
);
expect(normalizedCss).toContain(
"#listing.list .item:not(.header) .modified { display: none;"
);
expect(normalizedCss).not.toMatch(
/#listing\.list \.item \.(size|modified) \{ display: none;/
);
});
});

35
frontend/src/css/mobile.css
View file

@ -14,12 +14,27 @@
body {
padding-bottom: 5em;
}
#listing.list .item .size {
#listing.list .item:not(.header) .size {
display: none;
}
#listing.list .item .name {
#listing.list .item:not(.header) .name {
width: 60%;
}
#listing.list .item.header .name {
margin-right: 0;
width: 45%;
}
#listing.list .item.header .size {
width: 25%;
}
#listing.list .item.header .modified {
width: 30%;
}
#listing.list .item.header p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#more {
display: inherit;
}
@ -162,10 +177,22 @@
}
@media (max-width: 450px) {
#listing.list .item .modified {
#listing.list .item:not(.header) .modified {
display: none;
}
#listing.list .item .name {
#listing.list .item:not(.header) .name {
width: 100%;
}
#listing.list .item.header {
padding: 0.75em 0.5em;
}
#listing.list .item.header .name {
width: 34%;
}
#listing.list .item.header .size {
width: 24%;
}
#listing.list .item.header .modified {
width: 42%;
}
}