diff --git a/admin/layout/style-css/order-details-mobile.css b/admin/layout/style-css/order-details-mobile.css new file mode 100644 index 0000000..2ac7914 --- /dev/null +++ b/admin/layout/style-css/order-details-mobile.css @@ -0,0 +1,229 @@ +/* ========================================================================== + Order Details — Mobile Responsive + Scoped to .od-actions and .order-details + All rules inside @media (max-width: 767px) — desktop layout untouched + ========================================================================== */ + +@media (max-width: 767px) { + + /* --- 1. Action buttons bar --- */ + + .od-actions { + display: flex; + flex-wrap: nowrap; + align-items: center; + gap: 6px; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding-bottom: 8px; + } + + .od-actions .btn { + flex-shrink: 0; + font-size: 12px; + padding: 6px 10px; + margin-right: 0 !important; + margin-left: 0 !important; + } + + /* Hide button labels on small screens — show only icons */ + .od-actions .od-actions-label { + display: none; + } + + /* Integrations dropdown — push to end, cancel float */ + .od-actions .pull-right, + .od-actions .dropdown.pull-right { + float: none !important; + margin-left: auto; + } + + /* Dropdown menu must not clip inside scroll container */ + .od-actions .dropdown { + position: static; + } + + .od-actions + .order-details .dropdown-menu, + #integrationsDropdownMenu.show { + position: fixed; + top: auto; + bottom: 0; + left: 0; + right: 0; + width: 100%; + max-width: 100%; + border-radius: 12px 12px 0 0; + box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); + z-index: 1060; + padding: 10px 0; + } + + #integrationsDropdownMenu.show .dropdown-item { + padding: 12px 20px; + font-size: 14px; + } + + /* --- 2. Full-width columns stacking --- */ + + .order-details .col-sm-6, + .order-details .col-lg-8, + .order-details .col-lg-4, + .order-details .col-xl-5, + .order-details .col-xl-7 { + width: 100%; + flex: 0 0 100%; + max-width: 100%; + } + + /* Spacing between stacked sections */ + .order-details .col-sm-6 { + margin-bottom: 15px; + } + + /* "Resend confirmation" button — allow text to wrap */ + .order-details .resend_order_confirmation_email .btn { + font-size: 12px; + white-space: normal; + text-align: left; + } + + /* --- 3. Status section --- */ + + .order-details .status_select #order-status { + max-width: 100%; + width: 100%; + } + + .order-details .buttons { + display: flex; + flex-direction: column; + gap: 8px; + } + + .order-details .buttons .btn { + width: 100%; + white-space: normal; + font-size: 13px; + } + + .order-details .order-status { + font-size: 16px; + } + + .order-details .order-history { + margin-top: 10px; + } + + /* --- 4. Products table — compact list --- */ + + .order-details table thead { + display: none; + } + + .order-details table { + border: none; + } + + .order-details table tbody { + display: block; + } + + .order-details table tr.order-product-details { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + padding: 12px 0; + border-bottom: 1px solid #eee; + gap: 0; + } + + .order-details table tr.order-product-details:last-child { + border-bottom: none; + } + + /* Image cell */ + .order-details table td.product-image { + width: 60px; + height: 60px; + flex-shrink: 0; + border: none; + padding: 0; + margin-right: 10px; + float: none; + } + + .order-details table td.product-image img { + width: 60px; + height: 60px; + object-fit: contain; + } + + /* Name cell — takes remaining space next to image */ + .order-details table tr.order-product-details td:nth-child(2) { + flex: 1 1 0; + min-width: 0; + border: none; + padding: 0; + white-space: normal; + } + + .order-details table tr.order-product-details td:nth-child(2) a { + font-weight: 600; + font-size: 13px; + display: block; + word-break: break-word; + } + + /* Hide quantity, price, discounted-price, total columns on mobile */ + .order-details table tr.order-product-details td.tab-center, + .order-details table tr.order-product-details td.tab-right { + display: none; + } + + /* Show mobile price summary line */ + .od-mobile-price-line { + display: block !important; + margin-top: 4px; + font-size: 13px; + font-weight: 600; + color: #2a3042; + } + + /* --- 5. Notes --- */ + + .order-details #notes { + font-size: 14px; + min-height: 120px; + } + + /* --- 6. Order summary panel --- */ + + .order-details .panel .panel-body { + font-size: 13px; + } + + /* --- 7. Paid status --- */ + + .order-details .paid-status .panel-body a { + display: flex; + align-items: center; + gap: 10px; + } + + /* --- 8. Message section — hide empty spacer columns --- */ + + .order-details .d-none.d-lg-block { + display: none !important; + } +} + +/* --- Desktop: action bar spacing (replaces mr5 class) --- */ +.od-actions .btn + .btn, +.od-actions .btn + .dropdown { + margin-left: 5px; +} + +/* Mobile price line — hidden on desktop */ +.od-mobile-price-line { + display: none; +} diff --git a/admin/layout/style-css/table-list.css b/admin/layout/style-css/table-list.css index 58b84ef..bd07723 100644 --- a/admin/layout/style-css/table-list.css +++ b/admin/layout/style-css/table-list.css @@ -57,6 +57,36 @@ width: 100% !important; } +/* --- Filter toggle --- */ + +.table-filters-wrapper { + display: none; + overflow: hidden; +} + +.table-filters-wrapper.open { + display: block; +} + +.js-filter-toggle-btn.active { + background-color: #e8e8e8; + border-color: #adadad; + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +} + +.table-filter-badge { + display: inline-block; + min-width: 16px; + padding: 2px 5px; + font-size: 10px; + font-weight: 700; + line-height: 1; + color: #fff; + background-color: #337ab7; + border-radius: 10px; + margin-left: 3px; +} + /* --- Column visibility toggle --- */ .table-list-header-actions { diff --git a/admin/templates/components/table-list.php b/admin/templates/components/table-list.php index a97747e..31c49ae 100644 --- a/admin/templates/components/table-list.php +++ b/admin/templates/components/table-list.php @@ -19,6 +19,14 @@ $totalPages = max(1, (int)($list->pagination['total_pages'] ?? 1)); $total = (int)($list->pagination['total'] ?? 0); $perPage = (int)($list->pagination['per_page'] ?? 15); +$hasActiveFilters = false; +foreach ($list->filters as $filter) { + if (isset($filter['value']) && (string)$filter['value'] !== '') { + $hasActiveFilters = true; + break; + } +} + $isCompactColumn = function(array $column): bool { $key = strtolower(trim((string)($column['key'] ?? ''))); $label = strtolower(trim((string)($column['label'] ?? ''))); @@ -48,6 +56,14 @@ $isCompactColumn = function(array $column): bool {