feat: implement mobile-responsive portrait mode layout for PoS screens with tab-based navigation
This commit is contained in:
parent
43e908ce7d
commit
945db1d0c2
42
.gitignore
vendored
42
.gitignore
vendored
@ -1,6 +1,42 @@
|
|||||||
*.pyc
|
# Python
|
||||||
*~
|
|
||||||
__pycache__/
|
__pycache__/
|
||||||
.DS_Store
|
*.py[cod]
|
||||||
|
*.pyo
|
||||||
|
*.pyd
|
||||||
|
*.egg-info/
|
||||||
|
*.egg
|
||||||
|
*.pyc
|
||||||
|
|
||||||
|
# Odoo
|
||||||
|
.odoo_module_info
|
||||||
|
|
||||||
|
# Editor / IDE
|
||||||
.vscode/
|
.vscode/
|
||||||
.idea/
|
.idea/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
*~
|
||||||
|
|
||||||
|
# OS
|
||||||
|
.DS_Store
|
||||||
|
.DS_Store?
|
||||||
|
._*
|
||||||
|
.Spotlight-V500
|
||||||
|
.Trashes
|
||||||
|
ehthumbs.db
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Node / npm (if any frontend tooling)
|
||||||
|
node_modules/
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-error.log
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# Git merge artifacts
|
||||||
|
*.orig
|
||||||
|
*.rej
|
||||||
|
|
||||||
|
# Compiled / generated assets (Odoo builds these at runtime)
|
||||||
|
/static/description/index.html
|
||||||
|
|||||||
136
README.md
136
README.md
@ -1,27 +1,131 @@
|
|||||||
# POS UI Optimization
|
# POS UI Optimization
|
||||||
|
|
||||||
This Odoo 19 module optimizes the Point of Sale (POS) user interface for low-RAM devices (e.g., Android tablets with 2GB RAM).
|
**Odoo 19 | Custom Addon**
|
||||||
|
|
||||||
|
Optimizes the Point of Sale UI for resource-constrained devices and adds a **switchable portrait display mode** designed for 6-inch touchscreen terminals.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- **Product List Incremental Loading**: Renders products in batches of 40 as you scroll, significantly reducing memory usage in categories with many products.
|
### 1. Incremental Product Rendering
|
||||||
- **Order Cart Incremental Loading**: Efficiently handles large orders by rendering order lines incrementally as you scroll through the cart.
|
Prevents low-RAM devices from freezing when the product catalogue is large.
|
||||||
- **Improved Responsiveness**: Keeps the browser DOM light and prevents "white blank" screens caused by memory exhaustion.
|
|
||||||
- **Legacy Browser Support**: Designed without modern ES2020 JavaScript syntax (like optional chaining `?.`) to ensure compatibility with older Android browser engines found on specific legacy POS hardware.
|
- Only **40 products** are rendered on initial load
|
||||||
|
- More products load automatically as the user scrolls down
|
||||||
|
- Resets the counter when the search word or category changes
|
||||||
|
|
||||||
|
### 2. Incremental Order Line Rendering
|
||||||
|
Same approach for the order/cart display.
|
||||||
|
|
||||||
|
- Only **20 order lines** rendered initially
|
||||||
|
- Scrolling loads more lines progressively
|
||||||
|
- Ensures the selected line is always visible (expands count if needed)
|
||||||
|
|
||||||
|
### 3. Portrait Mode (6-inch Display)
|
||||||
|
|
||||||
|
A dedicated compact layout for portrait-orientation small screens. Designed for devices like 6-inch Android POS terminals where the standard Odoo two-column layout clutters the screen.
|
||||||
|
|
||||||
|
#### Layout
|
||||||
|
|
||||||
|
```
|
||||||
|
┌──────────────────────────────┐
|
||||||
|
│ Navbar (compact) │
|
||||||
|
├──────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ Active tab pane: │
|
||||||
|
│ Products / Cart / Numpad │
|
||||||
|
│ │
|
||||||
|
├──────────────────────────────┤
|
||||||
|
│ TOTAL: Rp X,XXX [Send][Pay]│ ← always visible
|
||||||
|
├──────────────────────────────┤
|
||||||
|
│ [Products] [Cart] [Numpad]│ ← bottom tab bar
|
||||||
|
└──────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Key Differences from Standard Mode
|
||||||
|
|
||||||
|
| Feature | Standard | Portrait |
|
||||||
|
|---|---|---|
|
||||||
|
| Layout | Two-column (order left, products right) | Single pane with bottom tabs |
|
||||||
|
| Product grid | `auto-fill minmax(115px)` | Fixed 2 columns |
|
||||||
|
| Product images | Full aspect ratio | Capped at 90px height |
|
||||||
|
| Numpad | Shown inline in left pane | Dedicated "Numpad" tab |
|
||||||
|
| Pay/Send | Inside left pane action pad | Always-visible bottom strip |
|
||||||
|
| Navbar | Full labels | Compact with smaller padding |
|
||||||
|
|
||||||
|
#### Auto-Activation
|
||||||
|
|
||||||
|
Portrait mode **auto-activates** when the browser viewport width is **< 400 px** on first load. A manual override is always available via the burger menu (☰ → Switch to Portrait/Standard Mode). The choice is saved to `localStorage`.
|
||||||
|
|
||||||
|
#### Send Button Behavior
|
||||||
|
|
||||||
|
The **Send** button appears only when:
|
||||||
|
1. The POS is in restaurant mode (`module_pos_restaurant = True`)
|
||||||
|
2. At least one **Preparation Category** is configured in POS → Kitchen Printers settings
|
||||||
|
3. The current order has unsent changes (`nbrOfChanges > 0`)
|
||||||
|
4. The order is not a direct sale / refund
|
||||||
|
|
||||||
|
This mirrors Odoo's standard restaurant `swapButton` logic exactly.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
1. Place the `pos_ui_optimization` folder in your Odoo custom addons directory.
|
1. Copy the `pos_ui_optimization` folder into your `customaddons` directory
|
||||||
2. Restart your Odoo server.
|
2. Restart the Odoo server
|
||||||
3. In Odoo, activate **Developer Mode**.
|
3. Go to **Apps** → search for **POS UI Optimization** → Install
|
||||||
4. Go to **Apps** -> **Update Apps List**.
|
4. Reload your POS session
|
||||||
5. Search for `POS UI Optimization`.
|
|
||||||
6. Click **Install**.
|
|
||||||
|
|
||||||
## Technical Details
|
## Upgrade
|
||||||
|
|
||||||
This module uses Odoo's JavaScript patching mechanism (`patch` from `@web/core/utils/patch`) to extend the core POS components:
|
```bash
|
||||||
- `ProductScreen`: Adds `displayedProductsCount` state via `owl`'s `useEffect` and an overridden `onScroll` hook to the product container.
|
./odoo-bin -u pos_ui_optimization -d <your_database>
|
||||||
- `OrderDisplay`: Adds `displayedCount` state and a scroll listener to the combo sorted order lines container.
|
```
|
||||||
|
|
||||||
No core Odoo files are modified.
|
---
|
||||||
|
|
||||||
|
## Compatibility
|
||||||
|
|
||||||
|
| Item | Value |
|
||||||
|
|---|---|
|
||||||
|
| Odoo version | 19.0 |
|
||||||
|
| Depends on | `point_of_sale` |
|
||||||
|
| Compatible with | `pos_restaurant`, `pos_custom_access`, `pos_kitchen_printer` |
|
||||||
|
| License | LGPL-3 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## File Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
pos_ui_optimization/
|
||||||
|
├── __manifest__.py
|
||||||
|
├── README.md
|
||||||
|
├── static/
|
||||||
|
│ └── src/
|
||||||
|
│ ├── app/
|
||||||
|
│ │ ├── components/
|
||||||
|
│ │ │ ├── navbar/
|
||||||
|
│ │ │ │ ├── navbar_patch.js # Display Mode toggle in burger menu
|
||||||
|
│ │ │ │ └── navbar_patch.xml
|
||||||
|
│ │ │ └── order_display/
|
||||||
|
│ │ │ ├── order_display_patch.js # Incremental order line rendering
|
||||||
|
│ │ │ └── order_display_patch.xml
|
||||||
|
│ │ ├── screens/
|
||||||
|
│ │ │ └── product_screen/
|
||||||
|
│ │ │ ├── portrait_mode_patch.js # Tab state (products/cart/numpad)
|
||||||
|
│ │ │ ├── portrait_screen.xml # Portrait layout XML patch
|
||||||
|
│ │ │ ├── product_screen_patch.js # Incremental product rendering
|
||||||
|
│ │ │ └── product_screen_patch.xml
|
||||||
|
│ │ └── services/
|
||||||
|
│ │ └── portrait_mode.js # Auto-detect + localStorage service
|
||||||
|
│ └── scss/
|
||||||
|
│ └── portrait.scss # All portrait CSS (scoped to .pos-portrait)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Author
|
||||||
|
|
||||||
|
**Suherdy Yacob**
|
||||||
|
|||||||
@ -8,10 +8,21 @@
|
|||||||
'data': [],
|
'data': [],
|
||||||
'assets': {
|
'assets': {
|
||||||
'point_of_sale._assets_pos': [
|
'point_of_sale._assets_pos': [
|
||||||
|
# Incremental rendering patches (existing)
|
||||||
'pos_ui_optimization/static/src/app/components/order_display/order_display_patch.js',
|
'pos_ui_optimization/static/src/app/components/order_display/order_display_patch.js',
|
||||||
'pos_ui_optimization/static/src/app/components/order_display/order_display_patch.xml',
|
'pos_ui_optimization/static/src/app/components/order_display/order_display_patch.xml',
|
||||||
'pos_ui_optimization/static/src/app/screens/product_screen/product_screen_patch.js',
|
'pos_ui_optimization/static/src/app/screens/product_screen/product_screen_patch.js',
|
||||||
'pos_ui_optimization/static/src/app/screens/product_screen/product_screen_patch.xml',
|
'pos_ui_optimization/static/src/app/screens/product_screen/product_screen_patch.xml',
|
||||||
|
# Portrait mode — service must load first
|
||||||
|
'pos_ui_optimization/static/src/app/services/portrait_mode.js',
|
||||||
|
# Navbar display-mode toggle
|
||||||
|
'pos_ui_optimization/static/src/app/components/navbar/navbar_patch.js',
|
||||||
|
'pos_ui_optimization/static/src/app/components/navbar/navbar_patch.xml',
|
||||||
|
# ProductScreen portrait tab state + layout
|
||||||
|
'pos_ui_optimization/static/src/app/screens/product_screen/portrait_mode_patch.js',
|
||||||
|
'pos_ui_optimization/static/src/app/screens/product_screen/portrait_screen.xml',
|
||||||
|
# Portrait CSS (must load after all XML patches)
|
||||||
|
'pos_ui_optimization/static/src/scss/portrait.scss',
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
'installable': True,
|
'installable': True,
|
||||||
|
|||||||
15
static/src/app/components/navbar/navbar_patch.js
Normal file
15
static/src/app/components/navbar/navbar_patch.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
/** @odoo-module **/
|
||||||
|
|
||||||
|
import { Navbar } from "@point_of_sale/app/components/navbar/navbar";
|
||||||
|
import { patch } from "@web/core/utils/patch";
|
||||||
|
import { useService } from "@web/core/utils/hooks";
|
||||||
|
|
||||||
|
patch(Navbar.prototype, {
|
||||||
|
setup() {
|
||||||
|
super.setup();
|
||||||
|
this.portraitMode = useService("portrait_mode");
|
||||||
|
},
|
||||||
|
toggleDisplayMode() {
|
||||||
|
this.portraitMode.toggle();
|
||||||
|
},
|
||||||
|
});
|
||||||
18
static/src/app/components/navbar/navbar_patch.xml
Normal file
18
static/src/app/components/navbar/navbar_patch.xml
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<templates id="template" xml:space="preserve">
|
||||||
|
<t t-inherit="point_of_sale.Navbar" t-inherit-mode="extension" owl="1">
|
||||||
|
<!-- Insert "Display Mode" toggle before the last DropdownItem (Close Register) -->
|
||||||
|
<xpath expr="//DropdownItem[last()]" position="before">
|
||||||
|
<DropdownItem onSelected="() => this.toggleDisplayMode()">
|
||||||
|
<t t-if="portraitMode.isPortrait">
|
||||||
|
<i class="fa fa-fw fa-desktop me-1 text-primary"/>
|
||||||
|
<span>Switch to Standard Mode</span>
|
||||||
|
</t>
|
||||||
|
<t t-else="">
|
||||||
|
<i class="fa fa-fw fa-mobile me-1 text-success"/>
|
||||||
|
<span>Switch to Portrait Mode</span>
|
||||||
|
</t>
|
||||||
|
</DropdownItem>
|
||||||
|
</xpath>
|
||||||
|
</t>
|
||||||
|
</templates>
|
||||||
22
static/src/app/screens/product_screen/portrait_mode_patch.js
Normal file
22
static/src/app/screens/product_screen/portrait_mode_patch.js
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
/** @odoo-module **/
|
||||||
|
|
||||||
|
import { ProductScreen } from "@point_of_sale/app/screens/product_screen/product_screen";
|
||||||
|
import { patch } from "@web/core/utils/patch";
|
||||||
|
import { useState } from "@odoo/owl";
|
||||||
|
import { useService } from "@web/core/utils/hooks";
|
||||||
|
|
||||||
|
patch(ProductScreen.prototype, {
|
||||||
|
setup() {
|
||||||
|
super.setup();
|
||||||
|
this.portraitMode = useService("portrait_mode");
|
||||||
|
this.portraitState = useState({ tab: "products" });
|
||||||
|
},
|
||||||
|
|
||||||
|
get portraitTab() {
|
||||||
|
return this.portraitState.tab;
|
||||||
|
},
|
||||||
|
|
||||||
|
switchPortraitTab(tab) {
|
||||||
|
this.portraitState.tab = tab;
|
||||||
|
},
|
||||||
|
});
|
||||||
107
static/src/app/screens/product_screen/portrait_screen.xml
Normal file
107
static/src/app/screens/product_screen/portrait_screen.xml
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<templates id="template" xml:space="preserve">
|
||||||
|
<t t-inherit="point_of_sale.ProductScreen" t-inherit-mode="extension" owl="1">
|
||||||
|
|
||||||
|
<!--
|
||||||
|
1. Stamp portrait tab classes onto the root product-screen div.
|
||||||
|
CSS uses these classes to show/hide left vs right pane.
|
||||||
|
-->
|
||||||
|
<xpath expr="//div[hasclass('product-screen')]" position="attributes">
|
||||||
|
<attribute name="t-att-class">{
|
||||||
|
'is-portrait': portraitMode.isPortrait,
|
||||||
|
'portrait-tab-products': portraitMode.isPortrait and portraitTab === 'products',
|
||||||
|
'portrait-tab-cart': portraitMode.isPortrait and portraitTab === 'cart',
|
||||||
|
'portrait-tab-numpad': portraitMode.isPortrait and portraitTab === 'numpad',
|
||||||
|
}</attribute>
|
||||||
|
</xpath>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
2. Inject the portrait footer (pay strip + tab bar) at the bottom
|
||||||
|
of the product-screen div. Only rendered in portrait mode.
|
||||||
|
ActionpadWidget from pos_custom_access is NOT duplicated here —
|
||||||
|
we reuse the existing one inside .leftpane (already patched).
|
||||||
|
-->
|
||||||
|
<xpath expr="//div[hasclass('product-screen')]" position="inside">
|
||||||
|
<div t-if="portraitMode.isPortrait" class="portrait-footer">
|
||||||
|
|
||||||
|
<!-- Pay strip: always visible, shows order total + action buttons -->
|
||||||
|
<div class="portrait-pay-strip d-flex align-items-center gap-2 px-3 py-2">
|
||||||
|
<div class="d-flex flex-column flex-grow-1 min-w-0">
|
||||||
|
<small class="text-muted lh-1" style="font-size:0.68rem;letter-spacing:.03em;">TOTAL</small>
|
||||||
|
<strong class="portrait-total-amount text-truncate lh-1 mt-1" t-esc="currentOrder.isEmpty() ? '—' : total"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Send button logic mirrors pos_restaurant's swapButton:
|
||||||
|
swapButton = module_pos_restaurant AND preparationCategories.size > 0
|
||||||
|
Send shows = swapButton AND !isDirectSale AND nbrOfChanges > 0
|
||||||
|
-->
|
||||||
|
<button
|
||||||
|
t-if="swapButton and !currentOrder.isEmpty() and !currentOrder.isDirectSale and nbrOfChanges"
|
||||||
|
class="btn btn-primary portrait-send-btn"
|
||||||
|
t-on-click="() => doSubmitOrder.call()"
|
||||||
|
t-att-disabled="doSubmitOrder.status === 'loading'">
|
||||||
|
<i class="fa fa-paper-plane me-1"/>Send
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Pay button:
|
||||||
|
- In restaurant+swapButton mode: secondary when there are changes to send, primary when all sent
|
||||||
|
- In non-restaurant mode: always primary (gated by pos.canPay)
|
||||||
|
-->
|
||||||
|
<button
|
||||||
|
t-if="!currentOrder.isEmpty() and pos.canPay and !pos.scanning"
|
||||||
|
class="btn portrait-pay-btn"
|
||||||
|
t-att-class="{
|
||||||
|
'btn-primary': !swapButton or !nbrOfChanges,
|
||||||
|
'btn-secondary': swapButton and nbrOfChanges,
|
||||||
|
}"
|
||||||
|
t-on-click="() => pos.pay()">
|
||||||
|
<i class="fa fa-credit-card me-1"/>Pay
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
t-elif="!currentOrder.isEmpty()"
|
||||||
|
class="btn btn-secondary portrait-pay-btn"
|
||||||
|
disabled="disabled">
|
||||||
|
<i class="fa fa-credit-card me-1"/>Pay
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
t-else=""
|
||||||
|
class="btn btn-outline-secondary portrait-pay-btn"
|
||||||
|
disabled="disabled">
|
||||||
|
<i class="fa fa-credit-card me-1"/>Pay
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bottom tab bar -->
|
||||||
|
<div class="portrait-tab-bar d-flex">
|
||||||
|
<button
|
||||||
|
class="portrait-tab-btn flex-fill"
|
||||||
|
t-att-class="{'active': portraitTab === 'products'}"
|
||||||
|
t-on-click="() => this.switchPortraitTab('products')">
|
||||||
|
<i class="fa fa-th fa-lg"/>
|
||||||
|
<span>Products</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="portrait-tab-btn flex-fill position-relative"
|
||||||
|
t-att-class="{'active': portraitTab === 'cart'}"
|
||||||
|
t-on-click="() => this.switchPortraitTab('cart')">
|
||||||
|
<i class="fa fa-shopping-cart fa-lg"/>
|
||||||
|
<span>Cart</span>
|
||||||
|
<span t-if="!currentOrder.isEmpty()" class="portrait-badge" t-esc="items"/>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="portrait-tab-btn flex-fill"
|
||||||
|
t-att-class="{'active': portraitTab === 'numpad'}"
|
||||||
|
t-on-click="() => this.switchPortraitTab('numpad')">
|
||||||
|
<i class="fa fa-keyboard-o fa-lg"/>
|
||||||
|
<span>Numpad</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</xpath>
|
||||||
|
|
||||||
|
</t>
|
||||||
|
</templates>
|
||||||
63
static/src/app/services/portrait_mode.js
Normal file
63
static/src/app/services/portrait_mode.js
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
/** @odoo-module **/
|
||||||
|
|
||||||
|
import { reactive } from "@odoo/owl";
|
||||||
|
import { registry } from "@web/core/registry";
|
||||||
|
|
||||||
|
const AUTO_BREAKPOINT = 400;
|
||||||
|
const STORAGE_KEY = "posDisplayMode";
|
||||||
|
|
||||||
|
const portraitModeService = {
|
||||||
|
dependencies: [],
|
||||||
|
start() {
|
||||||
|
// Determine initial mode: manual preference takes priority, then auto-detect
|
||||||
|
const stored = localStorage.getItem(STORAGE_KEY);
|
||||||
|
let isPortrait;
|
||||||
|
if (stored === "portrait") {
|
||||||
|
isPortrait = true;
|
||||||
|
} else if (stored === "standard") {
|
||||||
|
isPortrait = false;
|
||||||
|
} else {
|
||||||
|
// No manual preference — auto-detect from screen width
|
||||||
|
isPortrait = window.innerWidth < AUTO_BREAKPOINT;
|
||||||
|
}
|
||||||
|
|
||||||
|
const state = reactive({ isPortrait });
|
||||||
|
|
||||||
|
const applyClass = () => {
|
||||||
|
document.body.classList.toggle("pos-portrait", state.isPortrait);
|
||||||
|
};
|
||||||
|
|
||||||
|
applyClass();
|
||||||
|
|
||||||
|
// Auto-switch on resize (only when no manual preference is stored)
|
||||||
|
let resizeTimer;
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
clearTimeout(resizeTimer);
|
||||||
|
resizeTimer = setTimeout(() => {
|
||||||
|
if (!localStorage.getItem(STORAGE_KEY)) {
|
||||||
|
const autoPortrait = window.innerWidth < AUTO_BREAKPOINT;
|
||||||
|
if (state.isPortrait !== autoPortrait) {
|
||||||
|
state.isPortrait = autoPortrait;
|
||||||
|
applyClass();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
get isPortrait() {
|
||||||
|
return state.isPortrait;
|
||||||
|
},
|
||||||
|
toggle() {
|
||||||
|
state.isPortrait = !state.isPortrait;
|
||||||
|
localStorage.setItem(
|
||||||
|
STORAGE_KEY,
|
||||||
|
state.isPortrait ? "portrait" : "standard"
|
||||||
|
);
|
||||||
|
applyClass();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
registry.category("services").add("portrait_mode", portraitModeService);
|
||||||
331
static/src/scss/portrait.scss
Normal file
331
static/src/scss/portrait.scss
Normal file
@ -0,0 +1,331 @@
|
|||||||
|
/**
|
||||||
|
* Portrait Mode — POS UI for 6-inch portrait devices
|
||||||
|
* All rules scoped under .pos-portrait to avoid affecting standard mode.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
NAVBAR — compact, icon-friendly
|
||||||
|
============================================================ */
|
||||||
|
.pos-portrait {
|
||||||
|
.pos-topheader {
|
||||||
|
min-height: 44px !important;
|
||||||
|
padding: 4px 6px !important;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 5px 10px !important;
|
||||||
|
font-size: 0.82rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shrink search input width
|
||||||
|
.o_searchview {
|
||||||
|
max-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Order tabs: shorten
|
||||||
|
.order-tabs {
|
||||||
|
max-width: 120px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
PRODUCT SCREEN ROOT — vertical single-pane
|
||||||
|
============================================================ */
|
||||||
|
.product-screen {
|
||||||
|
flex-direction: column !important;
|
||||||
|
position: relative !important; // anchor for absolute footer
|
||||||
|
|
||||||
|
/* ---- LEFT PANE (Cart / Numpad) ---- */
|
||||||
|
.leftpane {
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
flex: 1 1 auto !important;
|
||||||
|
flex-shrink: 1 !important;
|
||||||
|
border-right: none !important;
|
||||||
|
border-bottom: 1px solid #dee2e6;
|
||||||
|
// Must match portrait-footer height so content is not covered
|
||||||
|
padding-bottom: 122px !important;
|
||||||
|
// Hidden by default; tab-switching reveals it
|
||||||
|
display: none !important;
|
||||||
|
|
||||||
|
// In portrait mode the desktop ControlButtons row is hidden
|
||||||
|
.control-buttons {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Compact numpad for fat fingers
|
||||||
|
.numpad {
|
||||||
|
.numpad-button {
|
||||||
|
min-height: 54px !important;
|
||||||
|
font-size: 1.15rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Give OrderSummary room to scroll
|
||||||
|
.order-container {
|
||||||
|
// Enough room: screen height minus navbar(44) minus pay-strip(52) minus tab-bar(60) minus numpad+actionpad
|
||||||
|
max-height: calc(100dvh - 44px - 122px - 220px);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Keep subpads tight
|
||||||
|
.subpads {
|
||||||
|
padding-top: 6px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide the ActionpadWidget in leftpane — pay strip handles Pay/Send
|
||||||
|
// (keeps the restaurant patches active for nbrOfChanges tracking,
|
||||||
|
// but we show our own buttons in the pay strip)
|
||||||
|
.actionpad {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- RIGHT PANE (Products) ---- */
|
||||||
|
.rightpane {
|
||||||
|
flex: 1 1 auto !important;
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
// Push content above the fixed footer (pay strip ~52px + tab bar ~60px + gap)
|
||||||
|
padding-bottom: 122px !important;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 2-COLUMN PRODUCT GRID ---- */
|
||||||
|
.product-list {
|
||||||
|
grid-template-columns: repeat(2, 1fr) !important;
|
||||||
|
gap: 6px !important;
|
||||||
|
padding: 6px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- COMPACT PRODUCT CARDS ---- */
|
||||||
|
// Cap the image so cards don't dominate the screen
|
||||||
|
.product-img {
|
||||||
|
max-height: 90px !important;
|
||||||
|
// ratio-4x3 makes it ~75% of width — on 2-col that's ~135px.
|
||||||
|
// Override the ratio so the image stays <= 90px tall.
|
||||||
|
--bs-aspect-ratio: 60% !important;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-height: 90px !important;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Minimum card height for no-image products
|
||||||
|
.rightpane .product:where(.product:not(:has(.product-img))) {
|
||||||
|
min-height: 4.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Product name: 2 lines max, smaller font
|
||||||
|
.product-name {
|
||||||
|
font-size: 0.78rem !important;
|
||||||
|
-webkit-line-clamp: 2 !important;
|
||||||
|
|
||||||
|
&.no-image {
|
||||||
|
aspect-ratio: 3 / 2 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- HIDE ORIGINAL MOBILE SWITCHPANE ---- */
|
||||||
|
// The standard "Pay | Cart" bottom bar must not show in portrait mode
|
||||||
|
.switchpane {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
TAB VISIBILITY — driven by class on .product-screen
|
||||||
|
============================================================ */
|
||||||
|
&.portrait-tab-products {
|
||||||
|
.leftpane { display: none !important; }
|
||||||
|
.rightpane { display: flex !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.portrait-tab-cart {
|
||||||
|
.leftpane {
|
||||||
|
display: flex !important;
|
||||||
|
// Show full left pane including numpad
|
||||||
|
.subpads { display: flex; }
|
||||||
|
}
|
||||||
|
.rightpane { display: none !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.portrait-tab-numpad {
|
||||||
|
.leftpane {
|
||||||
|
display: flex !important;
|
||||||
|
// Compact order list, expand numpad area
|
||||||
|
.order-container { max-height: 35vh !important; }
|
||||||
|
}
|
||||||
|
.rightpane { display: none !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
PORTRAIT FOOTER — fixed at the bottom of .product-screen
|
||||||
|
============================================================ */
|
||||||
|
.portrait-footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 100;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- PAY STRIP ---- */
|
||||||
|
.portrait-pay-strip {
|
||||||
|
background: #fff;
|
||||||
|
border-top: 1px solid #dee2e6;
|
||||||
|
min-height: 52px;
|
||||||
|
|
||||||
|
.portrait-total-amount {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portrait-pay-btn,
|
||||||
|
.portrait-send-btn {
|
||||||
|
border-radius: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding: 8px 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portrait-pay-btn {
|
||||||
|
min-width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portrait-send-btn {
|
||||||
|
min-width: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- BOTTOM TAB BAR ---- */
|
||||||
|
.portrait-tab-bar {
|
||||||
|
background: #fff;
|
||||||
|
border-top: 2px solid #e9ecef;
|
||||||
|
height: 60px;
|
||||||
|
|
||||||
|
.portrait-tab-btn {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
font-size: 0.68rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #6c757d;
|
||||||
|
gap: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s, color 0.15s;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #6610f2;
|
||||||
|
background: rgba(102, 16, 242, 0.06);
|
||||||
|
|
||||||
|
i { color: #6610f2; }
|
||||||
|
|
||||||
|
// Active indicator line at top
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 20%;
|
||||||
|
right: 20%;
|
||||||
|
height: 3px;
|
||||||
|
background: #6610f2;
|
||||||
|
border-radius: 0 0 3px 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover:not(.active) {
|
||||||
|
background: rgba(0, 0, 0, 0.04);
|
||||||
|
color: #495057;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- CART BADGE (item count on Cart tab) ---- */
|
||||||
|
.portrait-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
right: calc(50% - 16px);
|
||||||
|
background: #6610f2;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
font-weight: 700;
|
||||||
|
min-width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 4px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
CATEGORY SELECTOR — compact chips on portrait
|
||||||
|
============================================================ */
|
||||||
|
.category-selector {
|
||||||
|
.category-list {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
overflow-x: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
gap: 4px !important;
|
||||||
|
padding: 4px 6px !important;
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-size: 0.75rem !important;
|
||||||
|
padding: 4px 10px !important;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
ORDER LINES — compact for small screen
|
||||||
|
============================================================ */
|
||||||
|
.orderline {
|
||||||
|
padding: 6px 8px !important;
|
||||||
|
|
||||||
|
.product-name {
|
||||||
|
font-size: 0.82rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-price {
|
||||||
|
font-size: 0.82rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qty {
|
||||||
|
font-size: 0.85rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
ORDER SUMMARY TOTAL ROW
|
||||||
|
============================================================ */
|
||||||
|
.order-summary {
|
||||||
|
font-size: 0.85rem !important;
|
||||||
|
|
||||||
|
.fs-3 {
|
||||||
|
font-size: 1.1rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user