Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix display settings persistence and add responsive layout for plot buttons

Browse Source 
- Fixed updateSectionVisibility() to use explicit .show()/.hide() instead of .toggle() to ensure proper element visibility on page reload
- Added responsive CSS for plot buttons to adjust to small screens and mobile devices
- Wrapped button text in spans to enable icon-only mode on very small screens (≤400px)
- Reduced button margins and added flexbox layout with wrapping for better mobile UX
This commit is contained in:
Spicy_Marinara
2025-12-29 13:32:30 +01:00
parent 39f4fed40d
commit 0b5bca56eb
3 changed files with 161 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/systems/features/plotProgression.js
+6 -9
View File
@@ -33,10 +33,9 @@ export function setupPlotButtons(handlePlotClick, handleEncounterClick) {
border-radius: 4px;
font-size: 13px;
cursor: pointer;
margin: 0 4px;
display: inline-block;
margin: 0 2px;
" tabindex="0" role="button">
<i class="fa-solid fa-dice"></i> Randomized Plot
<i class="fa-solid fa-dice"></i> <span class="rpg-btn-text">Randomized Plot</span>
</button>
<button id="rpg-plot-natural" class="menu_button interactable" style="
background-color: #4a90e2;
@@ -46,10 +45,9 @@ export function setupPlotButtons(handlePlotClick, handleEncounterClick) {
border-radius: 4px;
font-size: 13px;
cursor: pointer;
margin: 0 4px;
display: inline-block;
margin: 0 2px;
" tabindex="0" role="button">
<i class="fa-solid fa-forward"></i> Natural Plot
<i class="fa-solid fa-forward"></i> <span class="rpg-btn-text">Natural Plot</span>
</button>
<button id="rpg-encounter-button" class="menu_button interactable" style="
background-color: #cc3333;
@@ -59,10 +57,9 @@ export function setupPlotButtons(handlePlotClick, handleEncounterClick) {
border-radius: 4px;
font-size: 13px;
cursor: pointer;
margin: 0 4px;
display: inline-block;
margin: 0 2px;
" tabindex="0" role="button" title="Enter combat encounter">
<i class="fa-solid fa-fire"></i> Enter Encounter
<i class="fa-solid fa-fire"></i> <span class="rpg-btn-text">Enter Encounter</span>
</button>
</span>
`;