/* ========================================================================== iBit mobile layer Revolution Drill Bits, built by WebKing. EVERY rule in this file lives inside a max-width media query. Above 992px nothing here applies, so the desktop shop-floor screens render byte for byte the way they always have. This file can only ever change what a phone or a tablet sees. ========================================================================== */ /* -------------------------------------------------------------------------- PHONES AND TABLETS (up to 991.98px, the Bootstrap lg breakpoint the existing navbar already collapses at, so the nav and the layout now change over at the same width instead of fighting each other) -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { /* 1. RELEASE VIEWPORT-LOCKED HEIGHTS. Panels pinned to 88vh trapped their own content behind an inner scrollbar no thumb can find. Let them grow and let the page scroll. */ .row[style*="88vh"], [style*="height:88vh"], [style*="height: 88vh"], [style*="height:85vh"], [style*="height: 85vh"] { height: auto !important; min-height: 0 !important; } /* 3. TAP TARGETS. 44px is the Apple Human Interface Guidelines minimum, which is the smallest thing an adult thumb hits reliably. Shop-floor hands wearing gloves need at least that. */ Targeted by ELEMENT, not by Bootstrap class. These screens were written by hand in 2021 and most of their inputs carry no class at all, so a rule that only knew about .form-control would have missed 177 fields on the parts screen alone. Measured, not assumed. */ .btn, .form-control, .form-select, .input-group > *, .nav-link, .dropdown-item, .navbar-toggler, button, select, textarea, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]) { min-height: 44px; } .btn, button { padding-top: .55rem; padding-bottom: .55rem; } .dropdown-item { padding-top: .7rem; padding-bottom: .7rem; } /* Checkboxes and radios cannot be stretched without looking broken, so they get bigger instead, which is what a thumb actually needs. */ input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; min-height: 22px; } /* The one place a 44px row would do harm: jsGrid's inline filter row sits inside the header, and 44px there pushes the first data row off the screen. 38px still clears the practical touch floor for a field the user has deliberately aimed at. */ .jsgrid-filter-row input, .jsgrid-filter-row select, .jsgrid-insert-row input, .jsgrid-insert-row select { min-height: 38px; } /* 4. STOP iOS ZOOMING ON EVERY TAP. Safari force-zooms into any input whose font-size is under 16px, then leaves the page zoomed. That single rule was most of the "it jumps around when I touch it" feeling. */ input, select, textarea, .form-control, .form-select { font-size: 16px !important; } /* 5. DATA GRIDS SCROLL SIDEWAYS INSTEAD OF CRUSHING THEMSELVES. THE FIRST VERSION OF THIS RULE WAS WRONG AND SHIPPED. Constraining .jsgrid to 100% made the TABLE shrink to fit 390px, so eleven or more columns compressed into each other: the Job Management headings overlapped and every cell read as one smeared string. A table with more columns than the screen can hold must be WIDER than its container and scroll, never squeezed into it. Both the header table and the body table get the SAME min-width so their columns stay aligned, and jsGrid already syncs the header's scrollLeft to the body's, so one finger swipe moves both together. */ .jsgrid { width: 100% !important; max-width: 100% !important; } .jsgrid-grid-body, .jsgrid-grid-header { overflow-x: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .jsgrid-grid-header { overflow-y: hidden !important; } .jsgrid-grid-body { max-height: 62vh !important; } .jsgrid-grid-header > table.jsgrid-table, .jsgrid-grid-body > table.jsgrid-table { min-width: 940px !important; width: 940px !important; table-layout: fixed; } .jsgrid-header-cell, .jsgrid-cell { font-size: 13px !important; padding: 10px 8px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The pager must stay reachable and tappable under the scrolling grid. */ .jsgrid-pager { max-height: none !important; padding: 10px 0 !important; font-size: 14px; } .jsgrid-pager-page, .jsgrid-pager-nav-button { display: inline-block; min-width: 34px; padding: 8px 10px !important; text-align: center; } /* 5b. CARD GRIDS. bit_analytics uses row-cols-1 row-cols-md-4, which is already responsive, so one card per row IS its mobile design. That only became visible when the viewport tag started being honoured: 184 bit cards at full width made a 58,000 pixel page. Two across with a capped image quarters it. */ .row[class*="row-cols-1"] > .col { flex: 0 0 50% !important; max-width: 50% !important; } .card img, #imgBitProfilePicture { width: 100% !important; max-width: 100% !important; max-height: 120px !important; object-fit: contain; } .card-body { padding: 10px !important; } .card-title { font-size: 15px !important; } .card-text { font-size: 12.5px !important; } /* A soft shadow on the right edge is the only honest way to tell a touch user there is more table out past the screen. */ .ibit-scroll-hint { position: relative; } .ibit-scroll-hint::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; pointer-events: none; background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.14)); } .ibit-scroll-hint.ibit-scrolled-end::after { opacity: 0; } /* Plain HTML tables get the same treatment. */ .table-responsive-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 6. SPLIT PANES COLLAPSE. Split.js writes inline widths and inserts drag gutters. Both are meaningless on a touch screen, and mobile.js stubs Split out before it runs. These rules clean up anything that slipped through. */ .gutter { display: none !important; } .split, .split-horizontal { width: 100% !important; height: auto !important; } /* 7. MAPS GET A REAL HEIGHT. #map was height:100% inside a parent that is now auto, which computes to zero and renders a blank grey box. */ #map, .map-container { height: 320px !important; min-height: 320px !important; width: 100% !important; } /* 8. NAVBAR. The user block and Sign Out sat outside the collapsible region, so on a phone they crowded the logo. Move them inside the flow, full width, under the menu. */ .navbar > .container-fluid { flex-wrap: wrap; row-gap: .5rem; } .navbar .logo { max-width: 44px; } .navbar-collapse { width: 100%; } .navbar .dropdown-menu { width: 100%; border: 0; box-shadow: none; background-color: rgba(255,255,255,.07); } .navbar .dropdown-item { color: #fff; } .navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background-color: rgba(255,255,255,.15); color: #fff; } #btnSignOut { width: auto; } /* 9. FOOTER. Fixed at 2.5rem, so its own text wrapped straight out the bottom. */ footer { height: auto !important; padding: .75rem 0; } footer label { font-size: 12px; } /* 10. NOTHING SCROLLS THE PAGE SIDEWAYS. A horizontal body scroll is the single most obvious "this was not made for my phone" signal there is. */ html, body { max-width: 100%; overflow-x: hidden; } /* 11. iPHONE NOTCH AND HOME INDICATOR. */ body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } footer { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); } /* 12. PANELS BREATHE. Everything was tuned for a 1920px monitor and read as a wall of grey when it was 390px wide. */ .panel { margin-left: 8px !important; margin-right: 8px !important; } .colBackground { padding-left: 8px !important; padding-right: 8px !important; } .smallFont { font-size: 14px; } /* 13. MODALS AND DIALOGS STAY INSIDE THE SCREEN. jQuery UI dialogs are absolutely positioned from desktop pixel maths and routinely landed half off a phone. */ .ui-dialog { max-width: calc(100vw - 16px) !important; left: 8px !important; right: 8px !important; } .modal-dialog { margin: .5rem; } /* 14. DATE PICKERS. jQuery UI's calendar renders at a desktop size and its day cells are far under a thumb's width. */ .ui-datepicker { width: min(92vw, 340px) !important; font-size: 16px; } .ui-datepicker td a, .ui-datepicker td span { padding: .6em !important; text-align: center; } } /* -------------------------------------------------------------------------- PHONES ONLY (up to 767.98px) STACKING LIVES HERE, NOT IN THE 992px BLOCK. The app uses bare col-1 / col-2 / col-4 / col-6, which Bootstrap applies at ALL widths, so a col-2 sidebar was 65px on a 390px phone. But an 810px iPad has room for two real columns, and forcing everything full width there just creates the dead space the build standard bans. Phones stack. Tablets keep the layout and only take the touch, font and grid fixes above. Anything that must stay side by side on a phone opts out with .ibit-keep-inline. -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { /* EXCLUDE THE CONTAINER, NOT THE CHILD. A first attempt used :not(.col) to keep Bootstrap row-cols card grids out of this rule, but the app's layout columns are class="col col-5", carrying BOTH classes, so :not(.col) silently switched stacking off on every page. Excluding the row-cols PARENT hits the card grids and nothing else. */ .row:not([class*="row-cols"]) > [class*="col-"]:not(.ibit-keep-inline) { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } /* TOOLBARS READ AS A RAGGED PILE OTHERWISE. The page toolbars are a bare run of