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

fix: redesign attributes as ultra-compact 2x3 grid for mobile

Browse Source 
Completely redesigned the classic stats (STR, DEX, CON, INT, WIS, CHA)
section for mobile with 1/3 size reduction and vertical stack layout.

**CSS Changes (style.css:3510-3587):**
- Changed from vertical flex list to 2x3 CSS grid layout
- Reduced all dimensions by ~66% for ultra-compact mobile view:
  * Labels: 9px (was 12px)
  * Values: 14px (was 20px)
  * Buttons: 24x24px (was 36x36px)
  * Padding: 4px 6px (was 8px 10px)
  * Gaps: 2-4px (was 6-8px)
- Vertical stack layout within each stat box:
  * Row 1: Label (left) | Value (right)
  * Row 2: Minus button (left) | Plus button (right)
- Fixed button visibility:
  * Added explicit background, border, and color styles
  * Added display: flex !important to ensure rendering
  * Added hover and active states
- Fixed right-side cutoff:
  * Added 5px padding-right to stats grid
  * Adjusted margins for proper spacing
- Centered all elements using justify-self: center
- Removed conflicting @media (max-width: 768px) rule that enlarged buttons

**JavaScript Changes (index.js:518, 985-1011):**
- Created setupClassicStatsButtons() function with delegated event listeners
- Moved event handlers from renderUserStats() to setup function
- Used jQuery .on() delegation to persist across re-renders
- Prevents duplicate handlers and ensures buttons always work
- Called in initUI() during extension initialization

**Benefits:**
- Attributes take up 1/3 the vertical space on mobile
- No vertical overflow in mobile Stats tab
- All 6 attributes fit comfortably in 2x3 grid
- +/- buttons visible and properly aligned
- Buttons fully functional with delegation pattern
- Desktop layout completely unaffected (>1000px)

**Layout:**
```
┌────────────┐ ┌────────────┐
│ STR    13  │ │ DEX    16  │
│  -      +  │ │  -      +  │
└────────────┘ └────────────┘
┌────────────┐ ┌────────────┐
│ CON    14  │ │ INT    18  │
│  -      +  │ │  -      +  │
└────────────┘ └────────────┘
┌────────────┐ ┌────────────┐
│ WIS    13  │ │ CHA    15  │
│  -      +  │ │  -      +  │
└────────────┘ └────────────┘
```
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-16 14:15:44 +11:00
parent f70ac827aa
commit 644e893a3d
2 changed files with 99 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.js
+33 -23
View File
@@ -515,6 +515,7 @@ async function initUI() {
renderThoughts();
updateDiceDisplay();
setupDiceRoller();
setupClassicStatsButtons();
setupSettingsPopup();
addDiceQuickReply();
setupPlotButtons();
@@ -978,6 +979,38 @@ function addDiceQuickReply() {
}
}
/**
* Sets up event listeners for classic stat +/- buttons using delegation.
* Uses delegated events to persist across re-renders of the stats section.
*/
function setupClassicStatsButtons() {
if (!$userStatsContainer) return;
// Delegated event listener for increase buttons
$userStatsContainer.on('click', '.rpg-stat-increase', function() {
const stat = $(this).data('stat');
if (extensionSettings.classicStats[stat] < 20) {
extensionSettings.classicStats[stat]++;
saveSettings();
saveChatData();
// Update only the specific stat value, not the entire stats panel
$(this).closest('.rpg-classic-stat').find('.rpg-classic-stat-value').text(extensionSettings.classicStats[stat]);
}
});
// Delegated event listener for decrease buttons
$userStatsContainer.on('click', '.rpg-stat-decrease', function() {
const stat = $(this).data('stat');
if (extensionSettings.classicStats[stat] > 1) {
extensionSettings.classicStats[stat]--;
saveSettings();
saveChatData();
// Update only the specific stat value, not the entire stats panel
$(this).closest('.rpg-classic-stat').find('.rpg-classic-stat-value').text(extensionSettings.classicStats[stat]);
}
});
}
/**
* SettingsModal - Manages the settings popup modal
* Handles opening, closing, theming, and animations
@@ -2767,29 +2800,6 @@ function renderUserStats() {
$userStatsContainer.html(html);
// Add event listeners for classic stat buttons
$('.rpg-stat-increase').on('click', function() {
const stat = $(this).data('stat');
if (extensionSettings.classicStats[stat] < 20) {
extensionSettings.classicStats[stat]++;
saveSettings();
saveChatData();
// Update only the specific stat value, not the entire stats panel
$(this).closest('.rpg-classic-stat').find('.rpg-classic-stat-value').text(extensionSettings.classicStats[stat]);
}
});
$('.rpg-stat-decrease').on('click', function() {
const stat = $(this).data('stat');
if (extensionSettings.classicStats[stat] > 1) {
extensionSettings.classicStats[stat]--;
saveSettings();
saveChatData();
// Update only the specific stat value, not the entire stats panel
$(this).closest('.rpg-classic-stat').find('.rpg-classic-stat-value').text(extensionSettings.classicStats[stat]);
}
});
// Add event listeners for editable stat values
$('.rpg-editable-stat').on('blur', function() {
const field = $(this).data('field');
style.css
+66 -42
View File
@@ -3507,69 +3507,100 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
grid-row: 3 / 5;
}
/* Attributes as vertical list instead of grid */
/* Attributes as ultra-compact 2x3 grid for mobile */
.rpg-classic-stats-grid {
display: flex !important;
flex-direction: column !important;
gap: 10px;
margin: 12px 0;
grid-template-columns: none !important;
grid-template-rows: none !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
grid-template-rows: repeat(3, 1fr) !important;
gap: 3px;
margin: 4px 5px 4px 0;
padding-right: 5px;
}
/* Each attribute as horizontal row */
/* Each attribute - ULTRA COMPACT with vertical stack layout */
.rpg-classic-stat {
display: flex !important;
flex-direction: row !important;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
gap: 12px;
display: grid !important;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 2px 4px;
padding: 4px 6px;
min-height: auto;
height: auto;
background: var(--SmartThemeBlurTintColor);
border: 1px solid var(--SmartThemeBorderColor);
border-radius: 10px;
border-radius: 4px;
}
/* Label on left */
/* Make buttons container children participate in parent grid */
.rpg-classic-stat-buttons {
display: contents;
}
/* Label - top left */
.rpg-classic-stat-label {
font-size: 14px;
grid-column: 1;
grid-row: 1;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
min-width: 50px;
flex-shrink: 0;
letter-spacing: 0.3px;
align-self: center;
justify-self: center;
}
/* Value in middle */
/* Value - top right */
.rpg-classic-stat-value {
font-size: 24px;
grid-column: 2;
grid-row: 1;
font-size: 14px;
font-weight: 700;
color: var(--SmartThemeQuoteColor);
flex: 1;
text-align: center;
align-self: center;
justify-self: center;
}
/* Buttons on right */
.rpg-classic-stat-controls {
display: flex;
gap: 8px;
flex-shrink: 0;
/* Minus button - bottom left */
.rpg-stat-decrease {
grid-column: 1;
grid-row: 2;
justify-self: center;
}
/* Plus button - bottom right */
.rpg-stat-increase {
grid-column: 2;
grid-row: 2;
justify-self: center;
}
.rpg-classic-stat-btn {
min-width: 40px !important;
min-height: 40px !important;
width: 40px;
height: 40px;
font-size: 16px;
min-width: 24px !important;
min-height: 24px !important;
width: 24px;
height: 24px;
font-size: 14px;
font-weight: 700;
border-radius: 8px;
display: flex;
border-radius: 4px;
display: flex !important;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
user-select: none;
background: var(--rpg-accent);
border: 1px solid var(--rpg-border);
color: var(--rpg-text);
}
.rpg-classic-stat-btn:hover {
background: var(--rpg-highlight);
border-color: var(--rpg-highlight);
transform: scale(1.05);
}
.rpg-classic-stat-btn:active {
transform: scale(0.95);
}
/* ========================================
@@ -3614,13 +3645,6 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Touch-friendly improvements for mobile */
@media (max-width: 768px) {
/* Larger touch targets for buttons */
.rpg-classic-stat-btn {
min-width: 2.75rem;
min-height: 2.75rem;
font-size: 1.125rem;
}
/* More padding for editable fields */
.rpg-editable {
padding: 0.5em;