- Create individual CSS files: monitoring.css, alerts.css, health.css, logs.css, metrics.css, resources.css - Create individual JS files: monitoring.js, alerts.js, health.js, logs.js, metrics.js, resources.js - Update HTML files to reference external CSS/JS files - Add CSS/JS files for other modules (analytics, chat, mail, meet, tasks, etc.) - Remove obsolete implementation plan files
7.5 KiB
7.5 KiB
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.
Files Requiring CSS Extraction (34 files)
| File | Module | Priority |
|---|---|---|
suite/home.html |
Home | High |
suite/partials/contexts.html |
Partials | Medium |
suite/partials/apps_menu.html |
Partials | Medium |
suite/partials/user_menu.html |
Partials | Medium |
suite/settings/index.html |
Settings | High |
suite/tasks/tasks.html |
Tasks | High |
suite/meet/meet.html |
Meet | High |
suite/attendant/index.html |
Attendant | High |
suite/monitoring/alerts.html |
Monitoring | Medium |
suite/monitoring/health.html |
Monitoring | Medium |
suite/monitoring/logs.html |
Monitoring | Medium |
suite/monitoring/home-dashboard.html |
Monitoring | Medium |
suite/monitoring/resources.html |
Monitoring | Medium |
suite/monitoring/metrics.html |
Monitoring | Medium |
suite/monitoring/index.html |
Monitoring | High |
suite/monitoring/monitoring.html |
Monitoring | Medium |
suite/admin/groups.html |
Admin | Medium |
suite/admin/users.html |
Admin | Medium |
suite/admin/index.html |
Admin | High |
suite/admin/dns.html |
Admin | Medium |
suite/tools/compliance.html |
Tools | High |
suite/research/research.html |
Research | High |
suite/chat/projector.html |
Chat | Medium |
suite/editor.html |
Editor | High |
suite/sources/index.html |
Sources | High |
suite/calendar/calendar.html |
Calendar | High |
suite/mail/mail.html |
High | |
suite/auth/reset-password.html |
Auth | High |
suite/auth/login.html |
Auth | High |
suite/auth/register.html |
Auth | High |
suite/auth/forgot-password.html |
Auth | High |
suite/drive/index.html |
Drive | High |
suite/designer.html |
Designer | High |
suite/paper/paper.html |
Paper | High |
Files Requiring JS Extraction (35 files)
| File | Module | Priority |
|---|---|---|
suite/index.html |
Index | High |
suite/settings/index.html |
Settings | High |
suite/tasks/tasks.html |
Tasks | High |
suite/meet/meet.html |
Meet | High |
suite/monitoring/services.html |
Monitoring | Medium |
suite/monitoring/health.html |
Monitoring | Medium |
suite/monitoring/alerts.html |
Monitoring | Medium |
suite/monitoring/logs.html |
Monitoring | Medium |
suite/monitoring/resources.html |
Monitoring | Medium |
suite/monitoring/home-dashboard.html |
Monitoring | Medium |
suite/monitoring/metrics.html |
Monitoring | Medium |
suite/monitoring/index.html |
Monitoring | High |
suite/monitoring/monitoring.html |
Monitoring | Medium |
suite/attendant/index.html |
Attendant | High |
suite/sources/index.html |
Sources | High |
suite/admin/users.html |
Admin | Medium |
suite/admin/groups.html |
Admin | Medium |
suite/admin/dns.html |
Admin | Medium |
suite/admin/index.html |
Admin | High |
suite/chat/projector.html |
Chat | Medium |
suite/research/research.html |
Research | High |
suite/tools/compliance.html |
Tools | High |
suite/mail/mail.html |
High | |
suite/calendar/calendar.html |
Calendar | High |
suite/editor.html |
Editor | High |
suite/auth/reset-password.html |
Auth | High |
suite/auth/login.html |
Auth | High |
suite/auth/register.html |
Auth | High |
suite/auth/forgot-password.html |
Auth | High |
suite/base.html |
Base | Critical |
suite/home.html |
Home | High |
suite/analytics/analytics.html |
Analytics | High |
suite/designer.html |
Designer | High |
suite/paper/paper.html |
Paper | High |
suite/drive/index.html |
Drive | High |
Extraction Strategy
CSS Files to Create
suite/css/home.css
suite/css/partials.css (combined contexts, apps_menu, user_menu)
suite/settings/settings.css ✓ (already created)
suite/tasks/tasks.css
suite/meet/meet.css
suite/attendant/attendant.css ✓ (already created)
suite/monitoring/monitoring.css (combined all monitoring views)
suite/admin/admin.css ✓ (already created)
suite/tools/tools.css ✓ (already created)
suite/research/research.css ✓ (already created)
suite/chat/chat.css
suite/editor.css
suite/sources/sources.css ✓ (already created)
suite/calendar/calendar.css ✓ (already created)
suite/mail/mail.css
suite/auth/auth.css ✓ (already created)
suite/drive/drive.css ✓ (already created)
suite/designer.css
suite/paper/paper.css ✓ (already created)
suite/analytics/analytics.css
JS Files to Create
suite/js/home.js
suite/settings/settings.js ✓ (already created)
suite/tasks/tasks.js
suite/meet/meet.js
suite/monitoring/monitoring.js (combined all monitoring scripts)
suite/attendant/attendant.js ✓ (already created)
suite/sources/sources.js ✓ (already created)
suite/admin/admin.js ✓ (already created)
suite/chat/chat.js
suite/research/research.js ✓ (already created)
suite/tools/tools.js ✓ (already created)
suite/mail/mail.js
suite/calendar/calendar.js ✓ (already created)
suite/editor.js
suite/auth/auth.js ✓ (already created)
suite/css/base.js
suite/analytics/analytics.js
suite/designer.js
suite/paper/paper.js ✓ (already created)
suite/drive/drive.js ✓ (already created)
Completed Extractions (CSS/JS files created, HTML not yet modified)
suite/admin/admin.css,admin.jssuite/auth/auth.css,auth.jssuite/calendar/calendar.css,calendar.jssuite/settings/settings.css,settings.jssuite/drive/drive.css,drive.jssuite/attendant/attendant.css,attendant.jssuite/paper/paper.css,paper.jssuite/research/research.css,research.jssuite/sources/sources.css,sources.jssuite/tools/tools.css,tools.js
Remaining Tasks
Phase 1: Create Missing CSS/JS Files ✅ COMPLETE
suite/css/home.css,js/home.jssuite/css/partials.css(contexts, apps_menu, user_menu)suite/tasks/tasks.css,tasks.jssuite/meet/meet.css,meet.jssuite/monitoring/monitoring.css,monitoring.jssuite/chat/chat.css,chat.jssuite/editor.css,editor.jssuite/mail/mail.css,mail.jssuite/js/base.jssuite/analytics/analytics.css,analytics.jssuite/designer.css,designer.js
Phase 2: Modify HTML Files
Replace inline <style> and <script> blocks with external file references:
<!-- Replace inline styles with: -->
<link rel="stylesheet" href="module.css">
<!-- Replace inline scripts with: -->
<script src="module.js"></script>
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
Statistics
| Category | Count |
|---|---|
| Files with inline CSS | 34 |
| Files with inline JS | 35 |
| Unique files total | ~38 |
| CSS/JS already created | 21 modules |
| CSS/JS remaining | 0 modules |
Notes
- Some files have both inline CSS and JS (e.g.,
paper.html,research.html) - Monitoring module has 9 HTML files - consider consolidating CSS/JS
- Admin module has 4 HTML files - CSS/JS can be consolidated
- Auth module has 4 HTML files - CSS/JS already extracted
- Partials should share a single CSS file
base.htmlcontains critical JS for app menus - extract tobase.js