/* Warehouse order-processing mobile responsive tweaks (SRL-441, extended SRL-443). Scoped to pages that opt in with so nothing here can regress the rest of the site. Targets the phone/tablet scan-to-ship flow: ScanOrderToShip, ToShip, ShipScreen and ShipScreenAssetOrder, plus (SRL-443) the Inventory/Assets create-and-audit flow: CreateProductAsset, ExpressAudit, AssetProductDetail, ProductDetail, SearchProduct, SearchAsset, Receiving, QC, AuditAsset, MoveBin, MoveBinLocation, MoveBinToOther and MoveAsset. Concerns kept strictly to responsive layout / touch ergonomics (tap targets, input sizing, scroll, sticky actions). No server behaviour or control set is changed here. */ /* Smooth momentum scroll for the wide bootstrap-table grids on touch devices. */ .wh-mobile .fixed-table-body, .wh-mobile .table-responsive { -webkit-overflow-scrolling: touch; } @media (max-width: 767px) { /* Give the whole flow more breathing room and bigger hit areas. */ .wh-mobile .body-content { padding-left: 6px; padding-right: 6px; } /* Larger, thumb-friendly scan fields. Mobile only, so desktop is unchanged. The scan-to-ship inputs are the .toship-barcode lines (SRL-440 multi-line form), the asset scan is #assetBarCode. */ .wh-mobile .toship-barcode, .wh-mobile #assetBarCode { font-size: 18px; height: 52px; padding: 10px 14px; } .wh-mobile #assetBarCode:focus, .wh-mobile .toship-barcode:focus { border-color: #23b7ef; box-shadow: 0 0 0 3px rgba(35, 183, 239, 0.25); } /* Every actionable button becomes a proper 46px+ tap target. */ .wh-mobile .btn { min-height: 46px; padding: 11px 16px; font-size: 16px; white-space: normal; } /* Standard inputs match the scan fields so the form reads as one control set. SRL-443: also cap width/max-width here (beats any inline style without !important, class-based so it can't be defeated by JS rewriting an element's inline style attribute the way an attribute-value selector could be - see the AssetProductDetail comment below for why that matters). */ .wh-mobile .form-control { min-height: 46px; font-size: 16px; max-width: 100% !important; width: 100% !important; box-sizing: border-box; } /* ScanOrderToShip: the Search / Reset pair was two small inline buttons. Stack them full width so each is an easy thumb target. The info icon floated onto its own orphan line - pull it up next to the label area. */ .wh-mobile #MOOrderForm #searchButton, .wh-mobile #MOOrderForm #resetButton { display: block; width: 100%; margin: 0 0 10px 0; } .wh-mobile #MOOrderForm .fa-info-circle { display: inline-block; margin: 12px 0 0 4px !important; } /* ShipScreen / ShipScreenAssetOrder: the footer action row (Go Back, View Order, Documents, Mark Shipped) was cramped and wrapped mid-word. Stack every action full width with clear spacing so none is missed. */ .wh-mobile .alignRight { text-align: center; } .wh-mobile .alignRight .btn { display: block; width: 100%; margin: 0 0 10px 0; } /* Mark Shipped is the terminal action - keep it visible even when hidden toggles in, and let it sit at full width once shown. */ .wh-mobile .alignRight #btnMarkShipped { margin-top: 4px; } /* Wide read-only grids (ToShip is 16 columns) cannot fit a phone. Make the horizontal scroll obvious and comfortable rather than clipping silently, and enlarge the in-cell ship / files links into real tap targets. */ .wh-mobile .fixed-table-container { border: none; } .wh-mobile .fixed-table-body { overflow-x: auto; } /* SRL-443: several Inventory search-result partials render a plain with no bootstrap-table/table-responsive wrapper, so they just overflow the viewport on a phone. Let the table itself scroll horizontally instead of clipping or forcing a page-wide scroll. Bootstrap-table grids (data-toggle="table") already get their own scroll wrapper from .fixed-table-body above, so they're excluded here to avoid double-handling the same table. */ .wh-mobile table.table:not([data-toggle="table"]) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .wh-mobile table td a { display: inline-block; padding: 6px 2px; min-height: 34px; } /* bootstrap-table search box is a primary control on ToShip - size it up. */ .wh-mobile .fixed-table-toolbar .search input, .wh-mobile .fixed-table-toolbar .search .form-control { min-height: 46px; font-size: 16px; } /* Status pills inside the scan grids read better with a touch more size. */ .wh-mobile #contentList .alert { font-size: 14px; } /* AssetProductDetail / AuditAsset / MoveBinLocation / SearchAsset (SRL-443). Several fields are given both a fixed pixel width (e.g. "width: 685px") and an inline "max-width:none". The fieldset around them refuses to shrink below its widest child, so even one of these left unfixed drags the whole form (and the page) out to ~718px on a phone. Almost all of them already carry class="form-control" and are covered by the rule above. #BoxWidth, #BoxHeight and #BoxLength (AssetProductDetail's box dimension fields) do not have that class, so they get the same cap here by id instead. This used to target every offending field at once via an input[style*="max-width:none"] attribute selector, which is more DRY, but that turned out not to be robust. Something on this page rewrites an element's whole inline style attribute after the fields are first painted, observed switching a field's style from "max-width:none" to "max-width: none" (with a space) once its section is scrolled into view, which silently stops an attribute-value selector from matching. Plain id/class selectors above and below do not depend on parsing that attribute's string at all, so they keep applying regardless. */ .wh-mobile #BoxWidth, .wh-mobile #BoxHeight, .wh-mobile #BoxLength { max-width: 100% !important; width: 100% !important; box-sizing: border-box; } /* #fileupload (AssetProductDetail): the invisible, oversized (font-size:100px) overlay input behind the "choose file" button. The huge font-size gives it a native "no file chosen" content width wide enough to drag the page out on its own even after the width cap above, once the browser fully paints/composites it (confirmed on device: scrolling this element into view re-widens the page even with only a width cap in place). Shrinking the font removes that oversized intrinsic content. Width/height:100% below keeps the tappable area matched to the visible button underneath it. */ .wh-mobile #fileupload { max-width: 100% !important; width: 100% !important; font-size: 16px !important; box-sizing: border-box; } /* Numeric entry fields (weight, quantity, box dimensions) get the phone's numeric keypad instead of the full keyboard. Mobile only - desktop is unaffected since inputmode has no visual effect there. */ .wh-mobile input[inputmode="decimal"], .wh-mobile input[inputmode="numeric"] { font-size: 16px; } } /* SRL-444: Orders / Truckloads / Pallets mobile UX. Same wh-mobile opt-in, now also applied to the Search/List and Create/Read screens for ManualOrder, TruckLoadIB, TruckLoadOB and Pallet: 1) pin the record-open (barcode) link column in the wide SearchResult grids so it stays reachable while the grid scrolls horizontally. The column is marked with data-class="mobile-pin-col" on its

- bootstrap-table's own `class` column option already carries that class onto every	in the column, so this needs no new JS, 2) the Create/Search forms reuse the .btn / .form-control rules above for >=44px tap targets, plus a little breathing room once Bootstrap collapses their col-sm-4/col-sm-8 label+input pairs to full width below 768px, 3) let the TruckLoadIB "Schedule Delivery" calendar scroll horizontally inside its own page/modal instead of overflowing the viewport (see the