Fix display settings persistence and add responsive layout for plot buttons
- 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
@@ -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>
|
||||
`;
|
||||
|
||||
+51
-10
@@ -232,35 +232,76 @@ export function updatePanelVisibility() {
|
||||
*/
|
||||
export function updateSectionVisibility() {
|
||||
// Show/hide sections based on settings
|
||||
$userStatsContainer.toggle(extensionSettings.showUserStats);
|
||||
$infoBoxContainer.toggle(extensionSettings.showInfoBox);
|
||||
$thoughtsContainer.toggle(extensionSettings.showCharacterThoughts);
|
||||
if ($inventoryContainer) {
|
||||
$inventoryContainer.toggle(extensionSettings.showInventory);
|
||||
// Use explicit .show()/.hide() instead of .toggle() to ensure proper state on reload
|
||||
if (extensionSettings.showUserStats) {
|
||||
$userStatsContainer.show();
|
||||
} else {
|
||||
$userStatsContainer.hide();
|
||||
}
|
||||
|
||||
if (extensionSettings.showInfoBox) {
|
||||
$infoBoxContainer.show();
|
||||
} else {
|
||||
$infoBoxContainer.hide();
|
||||
}
|
||||
|
||||
if (extensionSettings.showCharacterThoughts) {
|
||||
$thoughtsContainer.show();
|
||||
} else {
|
||||
$thoughtsContainer.hide();
|
||||
}
|
||||
|
||||
if ($inventoryContainer) {
|
||||
if (extensionSettings.showInventory) {
|
||||
$inventoryContainer.show();
|
||||
} else {
|
||||
$inventoryContainer.hide();
|
||||
}
|
||||
}
|
||||
|
||||
if ($questsContainer) {
|
||||
$questsContainer.toggle(extensionSettings.showQuests);
|
||||
if (extensionSettings.showQuests) {
|
||||
$questsContainer.show();
|
||||
} else {
|
||||
$questsContainer.hide();
|
||||
}
|
||||
}
|
||||
|
||||
// Show/hide dividers intelligently
|
||||
// Divider after User Stats: shown if User Stats is visible AND at least one section after it is visible
|
||||
const showDividerAfterStats = extensionSettings.showUserStats &&
|
||||
(extensionSettings.showInfoBox || extensionSettings.showCharacterThoughts || extensionSettings.showInventory || extensionSettings.showQuests);
|
||||
$('#rpg-divider-stats').toggle(showDividerAfterStats);
|
||||
if (showDividerAfterStats) {
|
||||
$('#rpg-divider-stats').show();
|
||||
} else {
|
||||
$('#rpg-divider-stats').hide();
|
||||
}
|
||||
|
||||
// Divider after Info Box: shown if Info Box is visible AND at least one section after it is visible
|
||||
const showDividerAfterInfo = extensionSettings.showInfoBox &&
|
||||
(extensionSettings.showCharacterThoughts || extensionSettings.showInventory || extensionSettings.showQuests);
|
||||
$('#rpg-divider-info').toggle(showDividerAfterInfo);
|
||||
if (showDividerAfterInfo) {
|
||||
$('#rpg-divider-info').show();
|
||||
} else {
|
||||
$('#rpg-divider-info').hide();
|
||||
}
|
||||
|
||||
// Divider after Thoughts: shown if Thoughts is visible AND at least one section after it is visible
|
||||
const showDividerAfterThoughts = extensionSettings.showCharacterThoughts &&
|
||||
(extensionSettings.showInventory || extensionSettings.showQuests);
|
||||
$('#rpg-divider-thoughts').toggle(showDividerAfterThoughts);
|
||||
if (showDividerAfterThoughts) {
|
||||
$('#rpg-divider-thoughts').show();
|
||||
} else {
|
||||
$('#rpg-divider-thoughts').hide();
|
||||
}
|
||||
|
||||
// Divider after Inventory: shown if Inventory is visible AND Quests is visible
|
||||
const showDividerAfterInventory = extensionSettings.showInventory && extensionSettings.showQuests;
|
||||
$('#rpg-divider-inventory').toggle(showDividerAfterInventory);
|
||||
if (showDividerAfterInventory) {
|
||||
$('#rpg-divider-inventory').show();
|
||||
} else {
|
||||
$('#rpg-divider-inventory').hide();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -8164,3 +8164,107 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
.rpg-encounter-status:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PLOT BUTTONS - RESPONSIVE LAYOUT
|
||||
============================================ */
|
||||
|
||||
/* Base styles for plot buttons container */
|
||||
#rpg-plot-buttons {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Base button styles - ensure consistent sizing */
|
||||
#rpg-plot-random,
|
||||
#rpg-plot-natural,
|
||||
#rpg-encounter-button {
|
||||
flex: 0 1 auto;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Tablet and smaller screens - adjust button sizing */
|
||||
@media (max-width: 768px) {
|
||||
#rpg-plot-buttons {
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
#rpg-plot-random,
|
||||
#rpg-plot-natural,
|
||||
#rpg-encounter-button {
|
||||
padding: 6px 10px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small mobile screens - more compact buttons */
|
||||
@media (max-width: 600px) {
|
||||
#rpg-plot-buttons {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
#rpg-plot-random,
|
||||
#rpg-plot-natural,
|
||||
#rpg-encounter-button {
|
||||
padding: 5px 8px !important;
|
||||
font-size: 11px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Very small screens - stack buttons vertically or use icons only */
|
||||
@media (max-width: 480px) {
|
||||
#rpg-plot-buttons {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Option 1: Stack vertically (uncomment if preferred)
|
||||
#rpg-plot-buttons {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#rpg-plot-random,
|
||||
#rpg-plot-natural,
|
||||
#rpg-encounter-button {
|
||||
width: 100%;
|
||||
padding: 8px !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Option 2: Keep horizontal but more compact (default) */
|
||||
#rpg-plot-random,
|
||||
#rpg-plot-natural,
|
||||
#rpg-encounter-button {
|
||||
padding: 6px 8px !important;
|
||||
font-size: 11px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra small screens - icon-only mode */
|
||||
@media (max-width: 400px) {
|
||||
#rpg-plot-random,
|
||||
#rpg-plot-natural,
|
||||
#rpg-encounter-button {
|
||||
padding: 6px !important;
|
||||
}
|
||||
|
||||
/* Hide button text, keep icons */
|
||||
#rpg-plot-random .rpg-btn-text,
|
||||
#rpg-plot-natural .rpg-btn-text,
|
||||
#rpg-encounter-button .rpg-btn-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Ensure icons are visible */
|
||||
#rpg-plot-random i,
|
||||
#rpg-plot-natural i,
|
||||
#rpg-encounter-button i {
|
||||
margin: 0 !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user