Files in the web explorer's shape: crumbs, folder tree, list in columns, details and preview
Both tabs use the window's width now, as the web's explorer does: where you are (crumbs), the folder tree (a chevron opens, a name lists), the list on one grid with every row a subgrid -- name with an icon by kind, type, size, changed, a menu -- and on a wide window the chosen file's details, the start of it and Open in the viewer (a double click opens it). The panes give way by the room the page has (container queries, so the sidebar's share counts): the details at 60rem, the tree at 40rem, the type and date columns when the list is under 28rem; a file then opens in the viewer on a click. The tree and the list share one request per folder; every reading keeps the never-empty states of the previous commit. Tests (tests/ui FX): the administrator's / wide (tree, columns on one track, details, preview, viewer), navigating by list, tree and crumbs with a long name, this computer's folder, and every width 1920/1280/1024/800/390 with nothing sideways, every control inside the window and the name's track never closed. H8/N8 follow the new list. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
9 files changed
+987
-227
No files matched your search
+27
-13
@@ -100,22 +100,36 @@
|
||||
<div class="head__tools"><div class="tabs" role="tablist" id="files-tabs"></div></div>
|
||||
</header>
|
||||
<div class="page__body files">
|
||||
<section class="files__pane" id="pane-local" aria-label="This computer" data-i18n-aria-label>
|
||||
<div class="files__head">
|
||||
<div class="files__where" id="local-where"></div>
|
||||
<button type="button" class="tool" id="local-refresh" aria-label="Read again" title="Read again" data-i18n-aria-label data-i18n-title></button>
|
||||
<section class="fx" id="pane-local" aria-label="This computer" data-i18n-aria-label>
|
||||
<div class="fx__bar">
|
||||
<div class="fx__where" id="local-where"></div>
|
||||
<nav class="crumbs" id="local-crumbs" aria-label="Where you are" data-i18n-aria-label></nav>
|
||||
<div class="fx__tools">
|
||||
<button type="button" class="tool" id="local-refresh" aria-label="Read again" title="Read again" data-i18n-aria-label data-i18n-title></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fx__panes">
|
||||
<aside class="fx__tree" id="local-tree" aria-label="Folders" data-i18n-aria-label></aside>
|
||||
<div class="fx__list" id="local-list"></div>
|
||||
<aside class="fx__details" id="local-details" aria-label="Details" data-i18n-aria-label></aside>
|
||||
</div>
|
||||
<div class="files__tree" id="local-tree"></div>
|
||||
</section>
|
||||
<section class="files__pane" id="pane-server" hidden aria-label="Server" data-i18n-aria-label>
|
||||
<div class="files__head">
|
||||
<div class="files__where muted" id="server-where"></div>
|
||||
<button type="button" class="tool" id="server-upload" aria-label="Upload" title="Upload" data-i18n-aria-label data-i18n-title></button>
|
||||
<button type="button" class="tool" id="server-mkdir" aria-label="New folder" title="New folder" data-i18n-aria-label data-i18n-title></button>
|
||||
<button type="button" class="tool" id="server-refresh" aria-label="Read again" title="Read again" data-i18n-aria-label data-i18n-title></button>
|
||||
<section class="fx" id="pane-server" hidden aria-label="Server" data-i18n-aria-label>
|
||||
<div class="fx__bar">
|
||||
<div class="fx__where"></div>
|
||||
<nav class="crumbs" id="server-crumbs" aria-label="Where you are" data-i18n-aria-label></nav>
|
||||
<div class="fx__tools">
|
||||
<button type="button" class="tool" id="server-upload" aria-label="Upload" title="Upload" data-i18n-aria-label data-i18n-title></button>
|
||||
<button type="button" class="tool" id="server-mkdir" aria-label="New folder" title="New folder" data-i18n-aria-label data-i18n-title></button>
|
||||
<button type="button" class="tool" id="server-refresh" aria-label="Read again" title="Read again" data-i18n-aria-label data-i18n-title></button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="status fx__status" id="server-status" hidden></p>
|
||||
<div class="fx__panes">
|
||||
<aside class="fx__tree" id="server-tree" aria-label="Folders" data-i18n-aria-label></aside>
|
||||
<div class="fx__list" id="server-list"></div>
|
||||
<aside class="fx__details" id="server-details" aria-label="Details" data-i18n-aria-label></aside>
|
||||
</div>
|
||||
<p class="status" id="server-status" hidden></p>
|
||||
<div class="files__tree" id="server-tree"></div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in new issue
Block a user