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

feat(dashboard): optimize Recent Events widget for mobile

Browse Source 
Mobile optimizations to match app structure:
- Add .rpg-dashboard-widget wrapper for consistent layout
- Change .rpg-editable-event → .rpg-editable for mobile touch support
- Add mobile CSS block with scaled padding, gaps, and font sizes
- Fix base font sizes with px fallbacks for proper grid rendering

Fixes:
- Notebook title: 12px fallback (was pure vw)
- Bullet: 12px fallback (was pure vw)
- Event text: 11px fallback (was pure vw)

Mobile rules (max-width 1000px):
- Compact padding (0.2rem widget, 0.4rem lines)
- Scaled rings (0.15rem × 0.35rem)
- Readable fonts (0.6rem title, 0.55rem events)
- Proper touch targets with .rpg-editable class

Recent Events now matches mobile optimization patterns of all other
infoBox widgets (calendar, weather, temp, clock, location).
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-11-02 19:00:48 +11:00
parent 15ead7c21b
commit 2cdad81cb8
2 changed files with 61 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/systems/dashboard/widgets/infoBoxWidgets.js
+14 -12
View File
@@ -538,7 +538,7 @@ export function registerRecentEventsWidget(registry, dependencies) {
eventsHtml += `
<div class="rpg-notebook-line">
<span class="rpg-bullet">•</span>
<span class="rpg-event-text rpg-editable-event" contenteditable="true" data-event-index="${i}" title="Click to edit">${validEvents[i]}</span>
<span class="rpg-event-text rpg-editable" contenteditable="true" data-event-index="${i}" title="Click to edit">${validEvents[i]}</span>
</div>
`;
}
@@ -548,22 +548,24 @@ export function registerRecentEventsWidget(registry, dependencies) {
eventsHtml += `
<div class="rpg-notebook-line rpg-event-add">
<span class="rpg-bullet">+</span>
<span class="rpg-event-text rpg-editable-event rpg-event-placeholder" contenteditable="true" data-event-index="${i}" title="Click to add event">Add event...</span>
<span class="rpg-event-text rpg-editable rpg-event-placeholder" contenteditable="true" data-event-index="${i}" title="Click to add event">Add event...</span>
</div>
`;
}
// Render HTML
const html = `
<div class="rpg-events-widget">
<div class="rpg-notebook-header">
<div class="rpg-notebook-ring"></div>
<div class="rpg-notebook-ring"></div>
<div class="rpg-notebook-ring"></div>
</div>
<div class="rpg-notebook-title">Recent Events</div>
<div class="rpg-notebook-lines">
${eventsHtml}
<div class="rpg-dashboard-widget">
<div class="rpg-events-widget">
<div class="rpg-notebook-header">
<div class="rpg-notebook-ring"></div>
<div class="rpg-notebook-ring"></div>
<div class="rpg-notebook-ring"></div>
</div>
<div class="rpg-notebook-title">Recent Events</div>
<div class="rpg-notebook-lines">
${eventsHtml}
</div>
</div>
</div>
`;
@@ -607,7 +609,7 @@ export function registerRecentEventsWidget(registry, dependencies) {
* @private
*/
function attachRecentEventsHandlers(container, dependencies) {
const eventFields = container.querySelectorAll('.rpg-editable-event');
const eventFields = container.querySelectorAll('.rpg-editable');
eventFields.forEach(field => {
const eventIndex = parseInt(field.dataset.eventIndex);