admin.suherdy/pos_ui_optimization
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add print checker button to POS portrait screen and update responsive styling

Browse Source
This commit is contained in:
Suherdy Yacob 2026-06-01 10:12:12 +07:00
parent 0c6410a221
commit ecb1a242f3
3 changed files with 43 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
README.md
View File

@ -29,18 +29,18 @@ A dedicated compact layout for portrait-orientation small screens. Designed for
#### Layout
```
┌──────────────────────────────┐
│ Navbar (compact) │
├──────────────────────────────┤
│ │
│ Active tab pane: │
│ Products / Cart / Numpad │
│ │
├──────────────────────────────┤
│ TOTAL: Rp X,XXX [Send][Pay]│ ← always visible
├──────────────────────────────┤
│ [Products] [Cart] [Numpad]│ ← bottom tab bar
└──────────────────────────────┘
┌──────────────────────────────────────┐
│ Navbar (compact) │
├──────────────────────────────────────┤
│ │
│ Active tab pane: │
│ Products / Cart / Numpad │
│ │
├──────────────────────────────────────┤
│ TOTAL: Rp X,XX [Checker] [Send] [Pay]│ ← always visible
├──────────────────────────────────────┤
│ [Products] [Cart] [Numpad] │ ← bottom tab bar
└──────────────────────────────────────┘
```
#### Key Differences from Standard Mode
@ -51,9 +51,19 @@ A dedicated compact layout for portrait-orientation small screens. Designed for
| 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 |
| Actions (Pay/Send/Checker) | Inside left pane action pad | Always-visible bottom strip |
| Navbar | Full labels | Compact with smaller padding |
#### Table Checker Button
The **Checker** button is available in the bottom pay strip in portrait mode. It allows waiters or cashiers to quickly print a basic table checker receipt.
The button is visible only when:
1. The `basic_receipt` option is enabled in POS settings.
2. The current cashier's role is either `waiter` or `cashier`.
The button is disabled when the current order is empty.
#### 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`.

14
static/src/app/screens/product_screen/portrait_screen.xml
View File

@ -31,6 +31,20 @@
<strong class="portrait-total-amount text-truncate lh-1 mt-1" t-esc="currentOrder.isEmpty() ? '—' : total"/>
</div>
<!--
Table Checker button:
- Only displayed if basic_receipt is enabled.
- Cashier role must be 'waiter' or 'cashier'.
- Disabled when order is empty.
-->
<button
t-if="pos.config.basic_receipt and pos.cashier and (pos.cashier.pos_role == 'waiter' or pos.cashier.pos_role == 'cashier')"
class="btn btn-secondary portrait-print-btn"
t-att-disabled="currentOrder.isEmpty()"
t-on-click="() => this.pos.printReceipt({ order: this.currentOrder, basic: true, printBillActionTriggered: true })">
<i class="fa fa-print me-1"/>Checker
</button>
<!--
Send button logic mirrors pos_restaurant's swapButton:
swapButton = module_pos_restaurant AND preparationCategories.size > 0

7
static/src/scss/portrait.scss
View File

@ -187,7 +187,8 @@
}
.portrait-pay-btn,
.portrait-send-btn {
.portrait-send-btn,
.portrait-print-btn {
border-radius: 10px;
font-weight: 600;
font-size: 0.9rem;
@ -201,6 +202,10 @@
.portrait-send-btn {
min-width: 80px;
}
.portrait-print-btn {
min-width: 80px;
}
}
/* ---- BOTTOM TAB BAR ---- */