35 lines
1.6 KiB
Markdown
35 lines
1.6 KiB
Markdown
# Checklist: Responsive UI Transition (800px constraint removal)
|
|
|
|
## 📋 Pre-Implementation
|
|
- [x] Identify hardcoded 800px constraints in JS/Vue files.
|
|
- [x] Verify baseline stability (`composer test`).
|
|
|
|
## 🛠️ Implementation
|
|
|
|
### 1. **Global Configuration in `resources/js/app.js`**
|
|
- [x] Locate the inline `<style>` template (Lines 251-260).
|
|
- [x] Modify `body` `max-width` from `800px` to `var(--layout-max-width, 100%)`.
|
|
- [x] Add `:root` variable `--layout-max-width: 1440px;` (or preferred max desktop width).
|
|
- [x] Standardize centering: `margin: 0 auto; width: 100%;`.
|
|
|
|
### 2. **Header Layout Adjustment (`TopHeader.vue`)**
|
|
- [x] Update `.header` `max-width: 800px` to `var(--layout-max-width, 100%)`.
|
|
- [x] Ensure `.tf-container` inside the header provides reasonable content padding/centering.
|
|
|
|
### 3. **Bottom Navigation Adjustment (`BottomNav.vue`)**
|
|
- [x] Update `.bottom-navigation-bar` `max-width: 800px` to `var(--layout-max-width, 100%)`.
|
|
- [x] Ensure the navigation bar stays centered at the bottom of the visible area.
|
|
|
|
### 4. **UI Store / Settings Sync**
|
|
- [x] Check if `uiStore.isFullWidth` correctly overrides these new variables (likely handled by the existing classes).
|
|
|
|
### 5. **Documentation**
|
|
- [x] Update `ai-docs/dictionary.md` with the new Layout Architecture details.
|
|
|
|
## ✅ Verification
|
|
- [ ] Build assets: `npm run build`.
|
|
- [ ] Restart container: `docker restart bukidbountyapp`.
|
|
- [ ] Verify landscape display on simulated devices (e.g., tablet landscape).
|
|
- [ ] Verify portrait display remains centered and mobile-friendly.
|
|
- [ ] Verify POS page still works in "Full Width" mode.
|