feature/bootstrap-refactor #1
No reviewers
Labels
No labels
audit-2025-12-03
component/api
component/commands
component/llm
component/memory
component/tick-loop
component/tools
priority
high
priority
low
status
in-progress
status
needs-info
status
needs-triage
status
on-hold
type
bug
type
documentation
type
enhancement
type
feature
type
refactor
type
test
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
blightbow/evennia_ai!1
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "feature/bootstrap-refactor"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Web UI refactor is ready.
Phase 1, Step 1 of Bootstrap refactoring: migrate from custom modal implementation to Bootstrap's native modal component. Changes: - Replace custom modal HTML with Bootstrap 4 modal markup - Add proper ARIA attributes (role, aria-labelledby, aria-hidden) - Use Bootstrap modal API ($().modal('show/hide')) - Remove 122 lines of custom modal CSS - Remove 9 lines of inline style manipulation from JavaScript - Remove manual event listeners (Bootstrap handles via data-dismiss) Benefits: - Better accessibility with built-in ARIA support - Keyboard navigation (Escape key) out of the box - Mobile responsive behavior - Consistent with Evennia's design system - Simpler code maintenance CSS reduction: 122 lines removed JS simplification: All inline styles removed from modal functions 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>Root cause: All AI templates used {% block header_insert %} but the base template (evennia/web/templates/website/base.html) defines {% block header_ext %}. This meant CSS files were NEVER loaded, explaining why none of the text wrapping fixes worked - Bootstrap's defaults were never overridden. Changed all 6 AI templates: - dashboard.html - goals.html - journal.html - projects.html - prompt_preview.html - session_memory.html From: {% block header_insert %} To: {% block header_ext %} This should now properly load: - ai/dashboard.css (all pages) - ai/prompt_preview.css (prompt preview page) - Inline <style> blocks (goals, journal, projects, session_memory) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>All AI templates were using {% block title %} but the base template defines {% block titleblock %}. This caused page titles to fall back to the default instead of using the AI template-specific titles. Changed in all 6 templates: - dashboard.html - goals.html - journal.html - projects.html - prompt_preview.html - session_memory.html From: {% block title %} To: {% block titleblock %} 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>Previous implementation used custom CSS and inline backgroundColor manipulation. This is exactly what Bootstrap's progress component is designed for. Changes: - prompt_preview.html: Replace custom .token-bar-container and .token-bar divs with Bootstrap .progress and .progress-bar - Added proper ARIA attributes (role, aria-valuenow, etc.) - Used inline height style (30px) for custom sizing - Replaced .token-label with Bootstrap utility classes - prompt_preview.css: Removed 21 lines of custom CSS: - Deleted .token-bar-container, .token-bar, .token-label styles - Bootstrap handles all styling via .progress component - prompt_preview.js: Updated updateTokenOverview() to use Bootstrap contextual classes instead of inline styles: - Remove: bar.style.backgroundColor = '#...' - Add: bar.classList.add('bg-success'|'bg-warning'|'bg-danger') - Added: bar.setAttribute('aria-valuenow', utilization) for a11y Benefits: - 21 fewer lines of custom CSS - Semantic HTML with proper ARIA roles - Leverages Bootstrap's battle-tested component - Follows "don't fight the system" principle 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>Eliminated 38 lines of custom code by leveraging Bootstrap's built-in tab component and removing unused spinner CSS. Changes: 1. Custom Tab Switching → Bootstrap Tabs - prompt_preview.html: Replace <button> with <a data-toggle="tab"> - Changed from custom data-tab="standard" to href="#standard" - Added role="tablist" and role="tab" for accessibility - Converted .tab-content divs to .tab-pane with .fade transition - Wrapped panes in .tab-content container (Bootstrap requirement) - prompt_preview.js: Deleted 24 lines of custom tab code - Removed: Custom click handlers and switchTab() function - Added: Bootstrap 'shown.bs.tab' event listener - Bootstrap now handles .active class management automatically Benefits: Tab switching managed by Bootstrap's battle-tested code, proper ARIA attributes, smooth fade transitions 2. Custom Tab Visibility CSS → Bootstrap .tab-pane - prompt_preview.css: Deleted 7 lines - Removed: .tab-content { display: none } / .active { display: block } - Bootstrap's .tab-pane/.fade classes handle visibility Benefits: Eliminates duplicate CSS for tab visibility 3. Unused Loading Spinner CSS - dashboard.css: Deleted 14 lines of dead code - Removed: @keyframes spin and .loading-spinner CSS - Never used in templates or JavaScript (uses .loading class instead) Benefits: Removes unused code Net Result: -38 lines of custom code, fully leveraging Bootstrap 4. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>Replaced .ai-dashboard-container with Bootstrap's .container-xl, reducing custom CSS from 6 lines to 1 line (max-width override). Changes: 1. All 6 Templates: .ai-dashboard-container → .container-xl py-4 - dashboard.html, goals.html, journal.html, projects.html, prompt_preview.html, session_memory.html - Bootstrap .container-xl provides: responsive width, margin: 0 auto, horizontal padding (15px) - Bootstrap .py-4 utility provides: vertical padding (1.5rem ≈ 24px) 2. dashboard.css: Minimal override - Removed: margin: 0 auto (Bootstrap provides) - Removed: padding: 20px (replaced with .py-4 utility) - Removed: font-family (Bootstrap's default system stack is equivalent) - Kept: max-width: 1400px override (Bootstrap default is 1140px) 3. dashboard.js: Update selector - Changed querySelector('.ai-dashboard-container') to querySelector('.container-xl') in showError() function Benefits: - Leverages Bootstrap's responsive container behavior - Eliminates 5 lines of redundant CSS - Uses Bootstrap utility classes (.py-4) instead of custom padding - Maintains 1400px max-width for dashboard pages Note: This overrides .container-xl globally. If other parts of the site need different max-width, this can be scoped to a wrapper class. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>