feat: add print checker button to POS portrait screen and update responsive styling
This commit is contained in:
parent
0c6410a221
commit
ecb1a242f3
26
README.md
26
README.md
@ -29,18 +29,18 @@ A dedicated compact layout for portrait-orientation small screens. Designed for
|
|||||||
#### Layout
|
#### Layout
|
||||||
|
|
||||||
```
|
```
|
||||||
┌──────────────────────────────┐
|
┌──────────────────────────────────────┐
|
||||||
│ Navbar (compact) │
|
│ Navbar (compact) │
|
||||||
├──────────────────────────────┤
|
├──────────────────────────────────────┤
|
||||||
│ │
|
│ │
|
||||||
│ Active tab pane: │
|
│ Active tab pane: │
|
||||||
│ Products / Cart / Numpad │
|
│ Products / Cart / Numpad │
|
||||||
│ │
|
│ │
|
||||||
├──────────────────────────────┤
|
├──────────────────────────────────────┤
|
||||||
│ TOTAL: Rp X,XXX [Send][Pay]│ ← always visible
|
│ TOTAL: Rp X,XX [Checker] [Send] [Pay]│ ← always visible
|
||||||
├──────────────────────────────┤
|
├──────────────────────────────────────┤
|
||||||
│ [Products] [Cart] [Numpad]│ ← bottom tab bar
|
│ [Products] [Cart] [Numpad] │ ← bottom tab bar
|
||||||
└──────────────────────────────┘
|
└──────────────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Key Differences from Standard Mode
|
#### 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 grid | `auto-fill minmax(115px)` | Fixed 2 columns |
|
||||||
| Product images | Full aspect ratio | Capped at 90px height |
|
| Product images | Full aspect ratio | Capped at 90px height |
|
||||||
| Numpad | Shown inline in left pane | Dedicated "Numpad" tab |
|
| 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 |
|
| 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
|
#### 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`.
|
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`.
|
||||||
|
|||||||
@ -31,6 +31,20 @@
|
|||||||
<strong class="portrait-total-amount text-truncate lh-1 mt-1" t-esc="currentOrder.isEmpty() ? '—' : total"/>
|
<strong class="portrait-total-amount text-truncate lh-1 mt-1" t-esc="currentOrder.isEmpty() ? '—' : total"/>
|
||||||
</div>
|
</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:
|
Send button logic mirrors pos_restaurant's swapButton:
|
||||||
swapButton = module_pos_restaurant AND preparationCategories.size > 0
|
swapButton = module_pos_restaurant AND preparationCategories.size > 0
|
||||||
|
|||||||
@ -187,7 +187,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.portrait-pay-btn,
|
.portrait-pay-btn,
|
||||||
.portrait-send-btn {
|
.portrait-send-btn,
|
||||||
|
.portrait-print-btn {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
@ -201,6 +202,10 @@
|
|||||||
.portrait-send-btn {
|
.portrait-send-btn {
|
||||||
min-width: 80px;
|
min-width: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.portrait-print-btn {
|
||||||
|
min-width: 80px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- BOTTOM TAB BAR ---- */
|
/* ---- BOTTOM TAB BAR ---- */
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user