FailedProxy/Varaverk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Scroll the tab bar instead of the whole page

Browse Source 
Reaching the last tab on a phone meant dragging the entire layout sideways,
every card with it.
This commit is contained in:
Gmer4Lfe
2026-08-12 20:11:42 -04:00
parent 44275a8a04
commit d1deac1bbb
3 changed files with 34 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Plugin/unraid/Varaverk.page
+1 -1
View File
@@ -254,7 +254,7 @@ foreach (['css/varaverk.css', 'js/varaverk.js'] as $_vv_a) {
<?= $tabLabels[$t] ?? ucfirst($t) ?>
</a>
<?php endforeach; ?>
<div style="margin-left:auto;display:flex;align-items:center;gap:2px;">
<div style="margin-left:auto;display:flex;align-items:center;gap:2px;flex-shrink:0;">
<a href="https://github.com/FailedProxy/Varaverk" target="_blank"
style="padding:0 10px;font-size:10px;color:#333;text-decoration:none;
display:flex;align-items:center;letter-spacing:.03em;"
Plugin/unraid/css/varaverk.css
+15 -3
View File
@@ -2,9 +2,21 @@
#varaverk-wrap { padding: 10px; font-family: inherit; }
/* Tab bar */
#vv-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid #444; align-items: flex-end; }
.vv-tab { padding: 6px 16px; text-decoration: none; color: #aaa; border-radius: 4px 4px 0 0; }
/* Tab bar
Scrolls itself once the tabs stop fitting. Without this the row simply overflowed and the whole
page went with it, so reaching the last tab on a phone meant dragging the entire layout
sideways — every card, not just the bar.
The scrollbar is hidden the way the log panes hide theirs: a visible one costs a row of height
on a bar that is 30px tall, and the content is obviously draggable. overscroll-behavior stops a
flick at either end of the bar from chaining out and scrolling the page instead. */
#vv-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid #444;
align-items: flex-end; overflow-x: auto; overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch; scrollbar-width: none; }
#vv-tabs::-webkit-scrollbar { display: none; }
/* Neither squashed nor broken across lines — a flex item's default is to shrink, which turned
"Partnership" into three characters and an ellipsis before the bar ever decided to scroll. */
.vv-tab { padding: 6px 16px; text-decoration: none; color: #aaa; border-radius: 4px 4px 0 0;
flex-shrink: 0; white-space: nowrap; }
.vv-tab:hover { color: #fff; background: #333; }
.vv-tab.active { color: #fff; background: #555; border-bottom: 2px solid #fff; }
Plugin/unraid/js/varaverk.js
+18
View File
@@ -69,3 +69,21 @@ function vvToggleExpand() {
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', apply);
else apply();
})();
// Bring the current tab into view when the bar is too narrow to show them all. The bar scrolls
// itself now rather than dragging the page sideways, which means the active tab can start off
// screen — and a tab bar whose selected tab is invisible reads as no tab being selected.
//
// inline:'nearest' so a tab already visible is left exactly where it is; only an off-screen one
// moves, and only far enough. Guarded because Unraid swaps tab content by AJAX and this file is
// shared by every page.
(function () {
const show = () => {
const bar = document.getElementById('vv-tabs');
const cur = bar && bar.querySelector('.vv-tab.active');
if (!cur || bar.scrollWidth <= bar.clientWidth) return;
if (cur.scrollIntoView) cur.scrollIntoView({ block: 'nearest', inline: 'nearest' });
};
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', show);
else show();
})();