38 lines
2.0 KiB
Markdown
38 lines
2.0 KiB
Markdown
# High-Level Plan: Responsive UI Transition
|
|
|
|
## Objective
|
|
Analyze and resolve the "portrait-only" feel of the UI by removing hardcoded maximum width constraints (800px) and implementing a responsive, centered layout that supports landscape and ultra-wide displays.
|
|
|
|
## Background
|
|
The application currently injects a global style into the `<head>` via `resources/js/app.js` that limits the `body` to `max-width: 800px`. This design choice, while good for mobile-first "superapps", prevents the UI from utilizing desktop or landscape screen real estate, causing it to appear as a narrow column.
|
|
|
|
## Technical Approach
|
|
|
|
### 1. Centralized Layout Configuration
|
|
- Introduce CSS variables in `:root` or `body` to define `---layout-max-width`.
|
|
- Default the max-width to a more modern value (e.g., `1440px`) or set it to `none` for full responsiveness with internal containers.
|
|
|
|
### 2. Update Global Styles (app.js)
|
|
- Modify the `body` style injection in `resources/js/app.js`.
|
|
- Change `max-width: 800px` to a responsive variable or remove it.
|
|
- Ensure `margin: 0 auto` is maintained to keep the content centered on large screens.
|
|
|
|
### 3. Component Updates
|
|
- **TopHeader.vue**: Update `.header` to use the new layout width.
|
|
- **BottomNav.vue**: Update `.bottom-navigation-bar` to use the new layout width.
|
|
- **Containers**: Ensure `.tf-container` classes throughout the app are configured to limit content width to a readable measure (e.g., 1200px) while allowing the background/header to span wider.
|
|
|
|
### 4. Responsiveness
|
|
- Ensure that on mobile, the UI still behaves as expected (100% width).
|
|
- On landscape/desktop, the UI should expand or stay centered without being artificially "pinched" to 800px.
|
|
|
|
## Affected Files
|
|
- `resources/js/app.js`
|
|
- `resources/js/Pages/Core/Fragments/TopHeader.vue`
|
|
- `resources/js/Pages/Core/Fragments/BottomNav.vue`
|
|
- `ai-docs/dictionary.md` (Update layout definitions)
|
|
|
|
## Verification
|
|
- Visual inspection on different screen sizes (Mobile, Tablet, Desktop, Landscape).
|
|
- Verify `is-full-width` mode (used for POS) still works correctly.
|