/* * ═══════════════════════════════════════════════════════════════════════════ * LỚP ĐIỆN THOẠI CHO CÁC TRANG CON CỦA POS * * Các trang tiện ích (Tổng quan, Đơn hàng, Sổ CSKH, Báo cáo…) mở trong iframe * và dùng chung templates/front/partials/pos-layout-common.php. Layout đó tự * phát , KHÔNG đi qua hệ thống chủ đề của màn bán hàng * — nên class pos-theme-mobile không với tới đây được. Phải bắt bằng media * query, và phải đặt ở một file dùng chung như file này, đừng rải CSS vào từng * trang. * * ── BẢNG BẢY CỘT TRÊN MÀN 390px ───────────────────────────────────────────── * * Shop cầm điện thoại đi giữa kệ để đối chiếu tồn. Bảng nhiều cột thì mã hàng * và tồn nằm khuất bên phải, phải vuốt ngang mới thấy — một tay cầm hàng, một * tay vuốt, vừa chậm vừa dễ đọc nhầm dòng. * * File này biến bảng thành DANH SÁCH THẺ: mỗi dòng một khối, mỗi ô một hàng * kèm nhãn của nó. Không còn thanh cuộn ngang nào. * * ── BẬT CHO BẢNG NÀO ──────────────────────────────────────────────────────── * * Không bật đại trà: mỗi bảng có số cột và mức quan trọng khác nhau. Khai ở * chỗ gọi tgs_pos_render_filter_table_card(): * * 'mobile_cards' => true, * * Nó gắn class .pos-mobile-cards vào và .pos-mobile-cards-wrap vào * khung bọc. Nhãn từng ô lấy từ thuộc tính data-col trên

— phần dựng *

nằm ở JS của từng trang nên phải tự gắn vào đó. * * Muốn xếp các ô theo kiểu riêng (ví dụ màn kiểm hàng cho tồn cuối ra một ô to * bên phải) thì đè thêm ở CSS của chính trang đó. File này chỉ lo phần cơ chế. * ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { /* * KHUNG BỌC. * * pos-smart-grid.js gắn class .pos-smart-grid-wrap vào khung bọc, và CSS * hệ thống cho nó `max-height: calc(100vh - 190px)` cùng `overflow: auto * !important` — tức là một ô cuộn riêng cao cố định nằm giữa trang. Trên * điện thoại thứ đó thành cái hộp rỗng cao ngoẵng, cuộn trong cuộn ngoài * đá nhau. Trả lại cho trang tự cuộn dọc. * * Phải có !important vì bên kia cũng !important. */ /* * ── Ô TÌM NHANH ─────────────────────────────────────────────────────── * * Bày thành thẻ thì hàng lọc theo cột bị giấu (bảy ô lọc trên 390px thì mỗi * ô rộng chừng 40px). Nhưng mấy trang này chính là chỗ đi TRA CỨU, nên phải * có đường tìm thay thế: một ô, lọc theo toàn bộ chữ của dòng. * * Ô do JS chèn vào ngay trên bảng — xem attachSearch() trong * assets/js/pos-mobile-subpage.js. */ body.pos-ui-v2 .pos-mobile-search { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; } body.pos-ui-v2 .pos-mobile-search__input { flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid var(--pos-ui-border, #e2e8f0); border-radius: 10px; background: #fff; /* 16px để iOS không tự phóng to trang khi chạm vào ô */ font-size: 16px; } body.pos-ui-v2 .pos-mobile-search__note { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--pos-ui-text-muted, #94a3b8); } body.pos-ui-v2 .pos-mobile-cards-wrap { max-height: none !important; overflow: visible !important; border: 0; background: transparent; } body.pos-ui-v2 table.pos-mobile-cards { display: block; /* * pos-smart-grid.js ghi THẲNG width bằng px vào thẻ và vào * (inline style) — đó chính là thứ sinh ra thanh cuộn * ngang. Không ép lại thì mọi thứ khác vô nghĩa. */ width: 100% !important; min-width: 0 !important; table-layout: auto; border-collapse: collapse; } body.pos-ui-v2 table.pos-mobile-cards colgroup, body.pos-ui-v2 table.pos-mobile-cards thead { /* * Giấu luôn cả hàng lọc theo cột: bảy ô lọc nhét vừa màn 390px thì mỗi * ô rộng chừng 40px, gõ không nổi. Trang nào cần lọc trên điện thoại * thì cho một ô tìm nhanh riêng ở trên bảng. */ display: none; } body.pos-ui-v2 table.pos-mobile-cards tbody { display: block; } body.pos-ui-v2 table.pos-mobile-cards tbody tr { display: block; padding: 9px 10px; border-bottom: 1px solid var(--pos-ui-border); background: var(--pos-ui-surface); } /* * GỠ KIỂU CỦA BẢNG RA KHỎI Ô — ĐOẠN QUAN TRỌNG NHẤT FILE NÀY. * * CSS hệ thống đặt cho mọi ô của .pos-smart-grid: * height: 30px; max-width: 0; overflow: hidden; * white-space: nowrap; text-overflow: ellipsis; * * `max-width: 0` là mẹo cắt chữ bằng dấu ba chấm, chỉ đúng khi bảng còn là * bảng (table-layout: fixed tự chia lại bề rộng). Vừa đổi ô sang display * block/grid là nó co về đúng 0 — màn hình thành cái hộp rỗng với vài chữ * dựng đứng bên mép. Đây chính là lỗi của bản trước, quên reset bốn dòng * dưới đây. */ body.pos-ui-v2 table.pos-mobile-cards tbody td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; height: auto; max-width: none; overflow: visible; white-space: normal; text-overflow: clip; padding: 1px 0 !important; border: 0; } /* Bỏ hàng tiêu đề rồi thì mỗi ô phải tự mang nhãn của nó */ body.pos-ui-v2 table.pos-mobile-cards tbody td[data-col]::before { content: attr(data-col); flex: 0 0 auto; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pos-ui-text-muted, #94a3b8); } /* Ô không khai nhãn thì cho chiếm trọn hàng, khỏi lệch */ body.pos-ui-v2 table.pos-mobile-cards tbody td:not([data-col]) { display: block; } /* * Hàng tiêu đề nhóm và dòng "chưa có dữ liệu" dùng colspan. Chúng phải * trải hết bề ngang, và không được dính mấy nhánh ẩn ô mà từng trang khai * thêm — nên để !important ngay ở đây. */ body.pos-ui-v2 table.pos-mobile-cards tbody td[colspan] { display: block !important; grid-column: 1 / -1; text-align: left; } body.pos-ui-v2 table.pos-mobile-cards tbody td[colspan]::before { content: none; } /* * HÀNG TỔNG Ở CUỐI BẢNG. * * pos-smart-grid.js tự sinh một cộng tổng từng cột (ensureFooter). * Để nguyên dạng bảng thì bảy ô tổng bị bóp vào 390px, nhìn ra một dãy số * cụt lủn không hiểu gì. Nó lại đúng là thứ có ích lúc kiểm hàng — đang * xem bao nhiêu mặt hàng, tổng tồn là bao nhiêu — nên cho thành một dải * tóm tắt chứ đừng giấu đi. */ body.pos-ui-v2 table.pos-mobile-cards tfoot { display: block; } body.pos-ui-v2 table.pos-mobile-cards tfoot tr { display: block; padding: 9px 10px; border-top: 2px solid var(--pos-ui-border); background: #f8fafc; } body.pos-ui-v2 table.pos-mobile-cards tfoot td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; height: auto; max-width: none; overflow: visible; white-space: normal; text-overflow: clip; padding: 1px 0 !important; border: 0; font-weight: 700; } body.pos-ui-v2 table.pos-mobile-cards tfoot td[data-col]::before { content: attr(data-col); flex: 0 0 auto; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pos-ui-text-muted, #94a3b8); } /* * Cột chữ (tên, mã…) không cộng tổng được nên ô để rỗng. Vẫn in nhãn thì * thành mấy dòng "MÃ HÀNG" trơ trọi chẳng có số nào — bỏ hẳn ô đó đi. */ body.pos-ui-v2 table.pos-mobile-cards tfoot td:empty { display: none; } /* Nút xuất Excel trên điện thoại chiếm chỗ mà gần như không ai bấm */ body.pos-ui-v2 .pos-mobile-cards-wrap ~ .pos-table-tools, body.pos-ui-v2 .pos-table-tools:has(+ .pos-mobile-cards-wrap) { display: none; } /* * ── CỘT "BÁN TIẾP" — BỎ HẲN TRÊN ĐIỆN THOẠI ──────────────────────────── * * Nó mở lại màn bán hàng với khách của đơn cũ. Ở máy quầy thì tiện; trên * điện thoại, các trang này mở trong một lớp phủ CHỒNG LÊN màn bán hàng — * bấm "Bán tiếp" là vừa đóng lớp phủ vừa đổi giỏ, hai việc cùng lúc mà * người bấm không thấy trước được cái nào. * * Ai cần bán tiếp cho khách đó thì đóng lớp phủ rồi chọn khách như thường: * chậm hơn một nhịp, nhưng nhìn thấy mình đang làm gì. */ body.pos-ui-v2 .js-sell-next-col { display: none !important; } /* * ── ĐẦU TRANG CON ────────────────────────────────────────────────────── * * Dải đầu xếp ngang: nhãn "Tiện ích", tên trang, nhắc phím Esc, nút quay * lại. Trên 390px bốn thứ đó chen nhau, tên trang bị bẻ làm ba dòng còn nút * quay lại thì trôi xuống. Cho xuống dòng và bỏ nhắc phím Esc — điện thoại * không có phím Esc. */ body.pos-ui-v2 .pos-page-head, body.pos-ui-v2 .pos-page-header { flex-wrap: wrap; gap: 8px; } body.pos-ui-v2 kbd, body.pos-ui-v2 .pos-esc-hint { display: none; } /* * ── DẢI BỘ LỌC ───────────────────────────────────────────────────────── * * Ô ngày, ô chọn, nút lọc vốn xếp ngang thành một hàng dài. Cho mỗi thứ một * hàng: ngón tay chạm trúng, và ô ngày đủ rộng để đọc. */ body.pos-ui-v2 .pos-filter-row, body.pos-ui-v2 .pos-filter-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } body.pos-ui-v2 .pos-filter-row > *, body.pos-ui-v2 .pos-filter-grid > * { width: 100%; min-width: 0; } /* * Ô nhập và nút chính đủ cao để chạm. 30–34px vẽ cho chuột thì ngón tay bấm * trượt liên tục, mà mấy trang này toàn thao tác thật (lọc ngày, gửi lại * thuế, xem bill). */ body.pos-ui-v2 .pos-btn, body.pos-ui-v2 input[type="date"], body.pos-ui-v2 input[type="text"], body.pos-ui-v2 select { min-height: 42px; } /* * ── NÚT BÊN TRONG THẺ: NỚI CẢ HAI CHIỀU, KHÔNG CHỈ CHIỀU CAO ─────────── * * Bản trước kéo `min-height: 42px` cho mọi nút trong bảng. Nút chữ thì * không sao, nhưng nút icon tròn 24×24 (sửa ghi chú) chỉ cao lên mà không * rộng ra — thành một hình bầu dục dựng đứng, nhìn như vỡ giao diện. * * Nới cả hai chiều thì nút tròn vẫn tròn, nút chữ vẫn dài theo nhãn của nó. * 34px là mức vừa: đủ cho ngón tay mà không phình ra trong một hàng thẻ. */ body.pos-ui-v2 table.pos-mobile-cards tbody td button, body.pos-ui-v2 table.pos-mobile-cards tbody td a[role="button"] { min-height: 34px; min-width: 34px; } /* * Cụm nút trong một ô của thẻ (Xem bill / Gửi lại / Kiểm) — cho xuống dòng * thay vì tràn ra khỏi mép. */ body.pos-ui-v2 table.pos-mobile-cards tbody td > .flex, body.pos-ui-v2 table.pos-mobile-cards tbody td > div { flex-wrap: wrap; justify-content: flex-end; } } /* Compact iframe already has its own title in the outer mobile/compact header. Hide the duplicated inner page title at every iframe width, not only below 700px. Keep business actions such as export and refresh. */ body.pos-ui-v2.pos-compact-embed .pos-page-topbar .pos-page-title, body.pos-ui-v2.pos-compact-embed .pos-page-topbar .pos-page-title-wrap { display: none; } body.pos-ui-v2.pos-compact-embed .pos-page-topbar:not(:has(.pos-page-topbar-actions > *)) { display: none; } body.pos-ui-v2.pos-compact-embed .pos-page-topbar-actions { width: 100%; justify-content: flex-end; } /* * Bộ lọc của trang tiện ích mở từ mobile. * * Bản desktop để nhãn nằm trên ô nhập nên mỗi điều kiện chiếm hai dòng. Trong * iframe điện thoại, đặt nhãn và điều khiển cùng một hàng để nhìn được toàn bộ * điều kiện mà không phải cuộn qua một màn chỉ có bộ lọc. */ @media (max-width: 700px) { body.pos-ui-v2.pos-compact-embed .pos-page-topbar { min-height: 0; margin: -8px -10px 8px; padding: 8px 10px; background: #fff; } body.pos-ui-v2.pos-compact-embed .pos-page-topbar .pos-page-title, body.pos-ui-v2.pos-compact-embed .pos-page-topbar .pos-page-title-wrap { display: none; } body.pos-ui-v2.pos-compact-embed .pos-page-topbar:not(:has(.pos-page-topbar-actions > *)) { display: none; } body.pos-ui-v2.pos-compact-embed .pos-page-topbar-actions { width: 100%; justify-content: flex-end; } body.pos-ui-v2.pos-compact-embed [id$="-modal"], body.pos-ui-v2.pos-compact-embed [id$="Modal"] { align-items: flex-end !important; padding: 0 !important; } body.pos-ui-v2.pos-compact-embed [id$="-modal"] > .relative.bg-white, body.pos-ui-v2.pos-compact-embed [id$="Modal"] > .relative.bg-white { width: 100% !important; max-width: none !important; max-height: min(88dvh, 760px) !important; margin: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 18px 18px 0 0 !important; } body.pos-ui-v2.pos-compact-embed :is( .tgs-detail-modal-card, .lookup-detail-modal__panel, .quy-modal > .bg-white, .shop-theme-confirm__box ) { position: absolute; right: 0; bottom: 0; left: 0; width: 100% !important; max-width: none !important; max-height: min(88dvh, 760px) !important; margin: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 18px 18px 0 0 !important; } body.pos-ui-v2.pos-compact-embed .pos-standard-topbar { min-height: 48px; margin: -8px -10px 8px; padding: 8px 10px; background: #fff; } body.pos-ui-v2.pos-compact-embed .pos-standard-topbar h1, body.pos-ui-v2.pos-compact-embed .pos-standard-topbar .pos-page-title { font-size: 17px; line-height: 1.25; } body.pos-ui-v2.pos-compact-embed .pos-standard-topbar .pos-standard-title { display: none; } /* Giữ công cụ xuất Excel: đây là thao tác nghiệp vụ, không phải chữ trang trí. */ body.pos-ui-v2.pos-compact-embed .pos-table-tools, body.pos-ui-v2.pos-compact-embed .pos-mobile-cards-wrap ~ .pos-table-tools, body.pos-ui-v2.pos-compact-embed .pos-table-tools:has(+ .pos-mobile-cards-wrap) { display: flex !important; gap: 5px; } body.pos-ui-v2.pos-compact-embed .pos-filter-panel { padding: 10px !important; border: 1px solid #dce5f0 !important; border-radius: 12px !important; box-shadow: none; } body.pos-ui-v2.pos-compact-embed .pos-filter-panel .pos-filter-grid, body.pos-ui-v2.pos-compact-embed .pos-filter-panel .pos-filter-row, body.pos-ui-v2.pos-compact-embed .pos-filter-panel.pos-filter-grid, body.pos-ui-v2.pos-compact-embed .pos-filter-panel.pos-filter-row { grid-template-columns: 1fr; gap: 8px; } body.pos-ui-v2.pos-compact-embed .pos-filter-panel .pos-filter-label, body.pos-ui-v2.pos-compact-embed .pos-filter-panel label:has(.pos-filter-input), body.pos-ui-v2.pos-compact-embed .pos-filter-panel label:has(input), body.pos-ui-v2.pos-compact-embed .pos-filter-panel label:has(select) { display: block; margin: 0; } body.pos-ui-v2.pos-compact-embed .pos-filter-panel .pos-filter-label-text { display: block; margin: 0 0 4px; color: #64748b; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } body.pos-ui-v2.pos-compact-embed .pos-filter-panel input, body.pos-ui-v2.pos-compact-embed .pos-filter-panel select { min-width: 0; min-height: 40px; padding: 0 10px; border-radius: 9px; font-size: 15px; } body.pos-ui-v2.pos-compact-embed .pos-filter-panel .pos-btn, body.pos-ui-v2.pos-compact-embed .pos-filter-panel button:not(.flatpickr-day) { min-height: 40px; padding: 7px 12px; font-size: 14px; } body.pos-ui-v2.pos-compact-embed .pos-filter-panel [class*="filter-actions"], body.pos-ui-v2.pos-compact-embed .pos-filter-panel [class*="filter-buttons"] { display: flex; flex-wrap: nowrap; gap: 8px; } } @media (min-width: 360px) and (max-width: 700px) { body.pos-ui-v2.pos-compact-embed .pos-filter-panel .pos-filter-grid, body.pos-ui-v2.pos-compact-embed .pos-filter-panel .pos-filter-row, body.pos-ui-v2.pos-compact-embed .pos-filter-panel.pos-filter-grid, body.pos-ui-v2.pos-compact-embed .pos-filter-panel.pos-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } body.pos-ui-v2.pos-compact-embed .pos-filter-panel .pos-filter-grid > button, body.pos-ui-v2.pos-compact-embed .pos-filter-panel .pos-filter-row > button, body.pos-ui-v2.pos-compact-embed .pos-filter-panel.pos-filter-grid > button, body.pos-ui-v2.pos-compact-embed .pos-filter-panel.pos-filter-row > button, body.pos-ui-v2.pos-compact-embed .pos-filter-panel [class*="filter-actions"], body.pos-ui-v2.pos-compact-embed .pos-filter-panel [class*="filter-buttons"] { grid-column: 1 / -1; } }