Rodrigo Rodriguez (Pragmatismo)
69654f37d6
Phase 2 of CSS/JS extraction - replace inline styles and scripts with external file references for better maintainability and caching. Files updated: - home.html -> css/home.css, js/home.js - tasks/tasks.html -> tasks/tasks.css, tasks/tasks.js - admin/index.html -> admin/admin.css, admin/admin.js - analytics/analytics.html -> analytics/analytics.css, analytics/analytics.js - mail/mail.html -> mail/mail.css, mail/mail.js - monitoring/monitoring.html -> monitoring/monitoring.css, monitoring/monitoring.js - attendant/index.html -> attendant/attendant.css, attendant/attendant.js All JS wrapped in IIFE pattern to prevent global namespace pollution. Functions called from HTML onclick handlers exposed via window object. HTMX reload handlers included for proper reinitialization. Per PROMPT.md: no CDN links, HTMX-first approach, local assets only.
123 lines
No EOL
3.9 KiB
Markdown
123 lines
No EOL
3.9 KiB
Markdown
# BotUI CSS/JS Extraction Tasks
|
|
|
|
## Overview
|
|
This document lists ALL HTML files in `botui/ui/suite` that contain inline `<style>` and/or `<script>` tags that need to be extracted to separate CSS/JS files.
|
|
|
|
---
|
|
|
|
## Phase 1: Create CSS/JS Files ✅ COMPLETE
|
|
|
|
All external CSS/JS files have been created.
|
|
|
|
---
|
|
|
|
## Phase 2: Modify HTML Files ✅ IN PROGRESS
|
|
|
|
### Completed Extractions
|
|
|
|
| File | CSS | JS | Status |
|
|
|------|-----|----|----|
|
|
| `suite/home.html` | ✅ | ✅ | Done - uses `css/home.css`, `js/home.js` |
|
|
| `suite/tasks/tasks.html` | ✅ | ✅ | Done - uses `tasks/tasks.css`, `tasks/tasks.js` |
|
|
| `suite/admin/index.html` | ✅ | ✅ | Done - uses `admin/admin.css`, `admin/admin.js` |
|
|
| `suite/analytics/analytics.html` | ✅ | ✅ | Done - uses `analytics/analytics.css`, `analytics/analytics.js` |
|
|
| `suite/mail/mail.html` | ✅ | ✅ | Done - uses `mail/mail.css`, `mail/mail.js` |
|
|
| `suite/monitoring/monitoring.html` | ✅ | ✅ | Done - uses `monitoring/monitoring.css`, `monitoring/monitoring.js` |
|
|
| `suite/attendant/index.html` | ✅ | ✅ | Done - uses `attendant/attendant.css`, `attendant/attendant.js` |
|
|
|
|
### Remaining Files
|
|
|
|
| File | CSS | JS | Priority |
|
|
|------|-----|----|----|
|
|
| `suite/admin/users.html` | ❌ | ❌ | Medium |
|
|
| `suite/admin/groups.html` | ❌ | ❌ | Medium |
|
|
| `suite/admin/dns.html` | N/A | ❌ | Medium |
|
|
| `suite/admin/billing.html` | ❌ | N/A | Low |
|
|
| `suite/admin/roles.html` | ❌ | N/A | Low |
|
|
| `suite/admin/contacts.html` | ❌ | N/A | Low |
|
|
| `suite/admin/organization-settings.html` | ❌ | N/A | Low |
|
|
| `suite/admin/organization-switcher.html` | ❌ | ❌ | Low |
|
|
| `suite/admin/search-settings.html` | ❌ | ❌ | Low |
|
|
| `suite/auth/login.html` | ❌ | ❌ | High |
|
|
| `suite/auth/register.html` | ❌ | ❌ | High |
|
|
| `suite/auth/forgot-password.html` | ❌ | ❌ | High |
|
|
| `suite/auth/reset-password.html` | ❌ | ❌ | High |
|
|
| `suite/auth/bootstrap.html` | ❌ | ❌ | Medium |
|
|
| `suite/analytics/partials/business-reports.html` | ❌ | ❌ | Low |
|
|
| `suite/monitoring/alerts.html` | ❌ | ❌ | Medium |
|
|
| `suite/monitoring/health.html` | ❌ | ❌ | Medium |
|
|
| `suite/monitoring/logs.html` | ❌ | ❌ | Medium |
|
|
| `suite/monitoring/metrics.html` | ❌ | ❌ | Medium |
|
|
| `suite/monitoring/resources.html` | ❌ | ❌ | Medium |
|
|
|
|
---
|
|
|
|
## Phase 3: Verification
|
|
|
|
- [ ] All HTML files have no inline `<style>` tags
|
|
- [ ] All HTML files have no inline `<script>` tags (except external src references)
|
|
- [ ] All pages render correctly
|
|
- [ ] All JavaScript functionality works
|
|
- [ ] No console errors
|
|
|
|
---
|
|
|
|
## External Files Reference
|
|
|
|
### CSS Files
|
|
```
|
|
suite/css/home.css
|
|
suite/css/partials.css
|
|
suite/admin/admin.css
|
|
suite/analytics/analytics.css
|
|
suite/attendant/attendant.css
|
|
suite/auth/auth.css
|
|
suite/calendar/calendar.css
|
|
suite/chat/chat.css
|
|
suite/designer.css
|
|
suite/drive/drive.css
|
|
suite/editor.css
|
|
suite/mail/mail.css
|
|
suite/meet/meet.css
|
|
suite/monitoring/monitoring.css
|
|
suite/paper/paper.css
|
|
suite/research/research.css (needs creation)
|
|
suite/settings/settings.css
|
|
suite/sources/sources.css
|
|
suite/tasks/tasks.css
|
|
suite/tools/tools.css
|
|
```
|
|
|
|
### JS Files
|
|
```
|
|
suite/js/home.js
|
|
suite/js/base.js
|
|
suite/admin/admin.js
|
|
suite/analytics/analytics.js
|
|
suite/attendant/attendant.js
|
|
suite/auth/auth.js
|
|
suite/calendar/calendar.js
|
|
suite/chat/chat.js
|
|
suite/designer.js
|
|
suite/drive/drive.js
|
|
suite/editor.js
|
|
suite/mail/mail.js
|
|
suite/meet/meet.js
|
|
suite/monitoring/monitoring.js
|
|
suite/paper/paper.js
|
|
suite/research/research.js
|
|
suite/settings/settings.js
|
|
suite/sources/sources.js
|
|
suite/tasks/tasks.js
|
|
suite/tools/tools.js
|
|
```
|
|
|
|
---
|
|
|
|
## Notes
|
|
|
|
1. All extracted JS uses IIFE pattern to prevent global namespace pollution
|
|
2. Functions that need to be called from HTML onclick handlers are exposed via `window.functionName`
|
|
3. HTMX reload handlers are included to reinitialize when content is swapped
|
|
4. CSS files contain all styles including responsive breakpoints
|
|
5. No CDN links - all assets are local per PROMPT.md requirements |