332 lines
10 KiB
SCSS
332 lines
10 KiB
SCSS
/**
|
|
* 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;
|
|
}
|
|
}
|
|
}
|