29 lines
1012 B
Markdown
29 lines
1012 B
Markdown
|
# Implementation: Centered Modal for Task Detail
|
||
|
|
|
||
|
|
## Summary
|
||
|
|
|
||
|
|
Replaced the narrow sliding side panel with a centered modal overlay for viewing task details.
|
||
|
|
|
||
|
|
## Changes Made
|
||
|
|
|
||
|
|
### `index.html`
|
||
|
|
- Replaced `.detail-panel` fixed sidebar with `.modal-overlay` + `.modal-panel` container
|
||
|
|
- Added `#btn-close-detail` button and backdrop click handler
|
||
|
|
|
||
|
|
### `dashboard.js`
|
||
|
|
- Updated all JS references from `detail-panel` to `detail-overlay`
|
||
|
|
- `closeDetail()` hides overlay instead of sliding panel
|
||
|
|
- Escape key handler added for modal close
|
||
|
|
- Backdrop click closes modal
|
||
|
|
|
||
|
|
### `styles.css`
|
||
|
|
- `.modal-overlay` — fixed fullscreen backdrop with blur
|
||
|
|
- `.modal-panel` — centered container, 720px max-width, 85vh max-height
|
||
|
|
- Removed `.detail-panel` fixed positioning styles
|
||
|
|
- Scrollable content within modal
|
||
|
|
|
||
|
|
## Files Modified
|
||
|
|
- `automaton/dashboard/html/index.html` — modal overlay structure
|
||
|
|
- `automaton/dashboard/html/dashboard.js` — modal open/close logic
|
||
|
|
- `automaton/dashboard/html/styles.css` — modal styling
|