vrr/SillyTavern-Pathweaver
2
0
Fork 0
mirror of https://github.com/mattjaybe/SillyTavern-Pathweaver.git synced 2026-04-26 10:30:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

v1.4.5 - Mobile fixes, settings now saved

Browse source 
- (Mobile) Fixes button menus not working
- (Mobile) Shifted buttons to the right to fix issues of them disappearing, removed 'Pathweaver' title
- Fixed issue where settings weren't being saved
This commit is contained in:
mattjaybe 2026-03-02 09:58:38 -05:00 • committed by GitHub
parent fc6811ddaf
commit 71727c79d8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 111 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

4
index.js
View file

@ -1744,7 +1744,9 @@ GUIDELINES:
// 6. Settings & Minimize
jQuery(document).on(`click${eventNs}`, '#pw_bar_settings', openSettingsModal);
jQuery(document).on(`click${eventNs}`, '#pw_minimize_bar', function () {
jQuery(document).on(`click${eventNs} touchend${eventNs}`, '#pw_minimize_bar', function (e) {
// touchend: prevent the double-fire from the subsequent synthetic click
if (e.type === 'touchend') e.preventDefault();
settings.bar_minimized = !settings.bar_minimized;
saveSettings();
createActionBar();

6
manifest.json
View file

@ -3,10 +3,10 @@
"loading_order": 100,
"requires": [],
"optional": [],
"js": "index.js?test5",
"css": "style.css?test5",
"js": "index.js",
"css": "style.css",
"author": "mattjaybe",
"version": "1.4.3",
"version": "1.4.5",
"homePage": "https://github.com/mattjaybe/SillyTavern-Pathweaver",
"auto_update": true
}

179
style.css
View file

@ -1464,85 +1464,85 @@
@media (max-width: 768px) {
/* ── Action Bar: single row, scrollable buttons, nothing clipped ── */
/* ── Action Bar ─────────────────────────────────────────────────────────
Wrapping layout so dropdown menus are never clipped.
overflow-x: auto on any ancestor creates an overflow context that
silently clips position:absolute children — exactly what every
upward-opening dropdown menu is. flex-wrap: wrap + overflow: visible
is the only layout that avoids this without JS hacks.
Buttons are compact (32 px) so all 8 fit on one row on a ~390 px
screen: 8×32 + 7×4 gap = 284 px + gear 32 px + auto margin ≈ 324 px,
well inside the ~374 px usable width. */
.pw_action_bar {
padding: 6px 8px;
min-height: 48px;
min-height: 44px;
gap: 4px;
/* Single row — no wrapping so title + buttons + right stay on one line */
flex-wrap: nowrap;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
overflow: hidden; /* clip vertically but buttons scroll horizontally */
overflow: visible;
}
/* Show title as compact abbreviation so it stays visible without eating space */
/* Hide title — saves horizontal space for buttons */
.pw_bar_title {
font-size: 0.72rem !important;
letter-spacing: 0 !important;
margin-right: 4px;
flex-shrink: 0;
max-width: 30px;
overflow: hidden;
/* Clip "athweaver" — shows just "P" on very narrow, full word on wider */
white-space: nowrap;
display: block !important; /* visible but tiny */
}
/* Buttons container: horizontally scrollable, never wraps */
.pw_category_buttons {
flex: 1;
min-width: 0; /* allow shrinking below content size */
overflow-x: auto !important;
overflow-y: visible !important;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 2px 0;
margin: 0;
gap: 4px !important;
}
.pw_category_buttons::-webkit-scrollbar {
display: none;
}
/* Slightly smaller buttons on mobile for more to fit without scrolling */
.pw_cat_btn {
width: 40px !important;
height: 40px !important;
font-size: 1.05rem !important;
flex-shrink: 0; /* buttons never shrink — they scroll instead */
}
.pw_icon_btn {
width: 40px !important;
height: 40px !important;
flex-shrink: 0;
}
/* Dropdown buttons in bar */
.pw_dropdown_btn {
width: 40px !important;
height: 40px !important;
flex-shrink: 0;
}
/* Hide Hover Labels on Mobile (No hover state) */
.pw_hover_label {
display: none !important;
}
/* Scroll-hint fade on right edge of buttons so user knows it scrolls */
.pw_category_buttons::after {
content: '';
position: sticky;
right: 0;
top: 0;
bottom: 0;
width: 20px;
/* Buttons container: wraps freely, never clips menus */
.pw_category_buttons {
display: flex;
flex-wrap: wrap !important;
overflow: visible !important;
gap: 4px !important;
padding: 0;
margin: 0;
align-items: center;
}
/* Compact buttons — 32 px fits all 8 on one row */
.pw_cat_btn {
width: 32px !important;
height: 32px !important;
font-size: 0.9rem !important;
border-radius: 6px !important;
}
/* Settings / icon buttons match */
.pw_icon_btn {
width: 32px !important;
height: 32px !important;
font-size: 0.85rem !important;
flex-shrink: 0;
background: linear-gradient(to right, transparent, var(--pw-glass-bg, rgba(20,20,30,0.95)));
pointer-events: none;
}
/* Dropdown trigger buttons match */
.pw_dropdown_btn {
width: 32px !important;
height: 32px !important;
font-size: 0.85rem !important;
flex-shrink: 0;
border-radius: 6px !important;
}
/* Settings button: swap gear → vertical ellipsis (⋮) on mobile.
Font Awesome stores glyphs in ::before content. Overriding content
while the font-family stays FA gives us a different icon with no
JS or HTML changes. \f142 = fa-ellipsis-vertical */
#pw_bar_settings i::before {
content: "\f142";
}
/* Minimize button: tall enough to tap comfortably */
.pw_minimize_btn {
width: 60px;
height: 28px;
top: -28px;
font-size: 0.9rem;
}
/* No hover labels on touch screens */
.pw_hover_label {
display: none !important;
}
/* Modal Mobile Styles */
@ -1923,16 +1923,21 @@
pointer-events: none;
}
/* Mobile Tweak: Ensure menu isn't cut off */
/* Mobile: Dropdown menu — keep centered and fully visible above bar */
@media (max-width: 768px) {
.pw_dropdown_menu {
width: 180px;
left: 0;
transform: translateY(10px);
/* Widen slightly on mobile for easier tapping */
min-width: 200px;
/* left:50% + translateX(-50%) centering is inherited from the base rule;
do NOT override transform here or horizontal centering breaks. */
max-height: 60vh; /* cap height so menu doesn't fill the whole screen */
/* Higher z-index so menu floats above any ST overlay layers */
z-index: 210000;
}
.pw_dropdown_wrapper.active .pw_dropdown_menu {
transform: translateY(0);
.pw_dropdown_menu.show {
/* Ensure the open state is clearly above everything on mobile */
z-index: 210000;
}
}
@ -3887,3 +3892,29 @@ details[open] .pw_surprise_queue_chevron {
padding: 10px 14px;
}
}
/* ============================================================
MOBILE FIX — float buttons right, hide title (≤768px only)
============================================================ */
@media (max-width: 768px) {
/* Hide "Pathweaver" title to free up space */
.pw_bar_title {
display: none !important;
}
/* Push buttons to the right by absorbing all free space on the left,
adjacent to the three-dot settings button. */
.pw_category_buttons {
margin-left: auto !important;
flex-shrink: 0 !important;
overflow: visible !important;
}
/* Remove the auto left-margin from bar_right since
pw_category_buttons now owns that space */
.pw_bar_right {
margin-left: 6px !important;
flex-shrink: 0 !important;
}
}