diff --git a/internal/server/web/static/app.css b/internal/server/web/static/app.css index 149ffa0..d6017fb 100644 --- a/internal/server/web/static/app.css +++ b/internal/server/web/static/app.css @@ -420,6 +420,7 @@ body.touch.multi .tabs { padding-top:6px; max-height:38px; } body.touch .tab { height:28px; font-size:12px; padding:0 2px 0 8px; gap:6px; } body.touch .tab-add { width:30px; height:28px; } body.touch .tabview { inset:4px; } +body.touch .tabview:not(.split) .fpane-body { padding-left:10px; padding-right:10px; } body.touch:not(.term-active) .keys { display:none; } body.touch.term-active .keys { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; flex:none; @@ -509,6 +510,7 @@ table.fm .c-act { width:1%; } table.fm td.sz { white-space:nowrap; } table.fm .act { flex-wrap:nowrap; } .fp-sel { display:inline-flex; align-items:center; gap:6px; flex:none; margin-left:auto; } +.fp-sel.wrapped { margin-left:0; } .fp-selinfo { font-size:13px; margin-right:2px; } .fp-sel .btn.sq { width:34px; } .fp-selinfo:empty { display:none; } @@ -521,8 +523,9 @@ table.fm .act { flex-wrap:nowrap; } table.fm td, table.fm th { padding:7px 4px; } .ic { margin-right:4px; } .fm-bar .fm-pathbox { flex:1 1 100%; order:-1; } - /* The selection's buttons go together on a line of their own. */ - .fm-bar .spacer { flex:1 1 100%; height:0; } + /* The selection's buttons on the line of the blue ones: those a little + narrower, the count by the buttons only as a number. */ + .fp-sel .fp-selinfo { font-size:12px; } } #save { display:inline-flex; align-items:center; gap:8px; } #save.saving { opacity:.85; cursor:progress; } @@ -772,7 +775,12 @@ p.mv-a { margin:0; font-size:13px; } .fpane.narrow table.fm .c-act { width:1%; } .fpane.narrow table.fm td, .fpane.narrow table.fm th { padding:7px 4px; } .fpane.narrow .fm-bar .fm-pathbox { flex:1 1 100%; order:-1; } -.fpane.narrow .fm-bar .spacer { flex:1 1 100%; height:0; } +/* The selection's buttons stay on the line of the blue ones while they fit: + those a little more compact; the line breaks only when there is no room. */ +.fpane.narrow .fm-bar { gap:5px; } +.fpane.narrow .fm-bar .btn.ico { padding-left:8px; padding-right:8px; gap:4px; font-size:12.5px; } +.fpane.narrow .fp-sel { gap:4px; } +.fpane.narrow .fp-sel .btn.sq { width:32px; height:32px; } /* The pane: its bar and list scroll inside it. */ .fpane-body { flex:1; min-height:0; overflow:auto; padding:10px 12px 12px; } .tabview:not(.split) .fpane-body { padding:12px 16px 16px; } diff --git a/internal/server/web/static/filepane.js b/internal/server/web/static/filepane.js index 271897b..6ad3337 100644 --- a/internal/server/web/static/filepane.js +++ b/internal/server/web/static/filepane.js @@ -132,6 +132,7 @@ const w = this.el.clientWidth; this.el.classList.toggle('narrow', w < 520); this.el.classList.toggle('mid', w < 760); + this.fitSel(); }).observe(this.el); this.start(); } @@ -278,9 +279,19 @@ tb.appendChild(tr); } } + // fitSel: the selection's buttons on the right of the blue ones; moved to + // a line of their own, they start on the left. + fitSel() { + const sel = this.q('.fp-sel'); + sel.classList.remove('wrapped'); + sel.classList.toggle('wrapped', sel.offsetTop > this.q('.fp-mkdir').offsetTop + 4); + } updateSel() { const n = this.selected.size; - this.q('.fp-selinfo').textContent = n ? 'Выбрано: ' + n : ''; + // A narrow pane (a phone) has room for the number alone. + this.q('.fp-selinfo').textContent = n ? (this.el.classList.contains('narrow') ? n : 'Выбрано: ' + n) : ''; + this.q('.fp-selinfo').title = n ? 'Выбрано: ' + n : ''; + this.fitSel(); this.q('.fp-zip').disabled = !n; this.q('.fp-delsel').disabled = !n; }