/*
SRL-948. The card layout for bootstrap-table grids too narrow to show a table.
991px is the top of Bootstrap 3's sm range, so xs and sm - phones and tablets in
portrait - get cards and only md upwards gets the table. It is
GridPhoneView.PhoneMaxWidth; a media query cannot read a value from the server, so the
literal is duplicated here on purpose and ResponsiveGridLayoutTests pins the two
together.
IT WAS 767, AND IT DELIBERATELY NO LONGER MATCHES warehouse-mobile.css, which still
uses 767. An earlier version of this comment cited that agreement as the reason for the
number; the two treatments answer different questions. warehouse-mobile.css asks "is
this a one-handed scan screen", which a tablet in portrait is not. This asks "is this
too narrow to read a 20-to-56-column table", which a tablet in portrait is: at 768px the
Asset grid measured 7350px wide, which is the defect, not an edge case.
SCOPES. Every rule below is inside the one media query, and every selector is scoped to
.rg-grid (the table), .rg-card-header (the card's action bar) or .rg-container (the
.bootstrap-table wrapper, which responsive-grid.js marks in decorate() because the
toolbar and the pager are siblings of the table, not descendants of it). Two
consequences worth stating rather than leaving to be inferred:
- no desktop render changes, at any width above the breakpoint, on any page;
- no grid that has not adopted the treatment changes, at any width.
Keep it that way. This file is loaded by _Layout.cshtml on every page of the site.
ORDER IS LOAD-BEARING IN THE .rg-card-header BLOCK. The header rules and the card-body
rules are both two classes deep, so they have EQUAL specificity and the later one wins.
The first version put the body rules last, which silently killed the header's padding:0
and border:0 and handed its label the body's `flex: 0 0 42%` - a flex-basis, which in
the header's column container is a HEIGHT. Nothing in the stylesheet text showed it; the
browser proof reads getComputedStyle now. The header rules below are therefore written
one class deeper (.rg-grid .rg-card-header ...) so they win on specificity rather than
on position.
NOTE FOR A PAGE THAT ADOPTS BOTH THIS AND body.wh-mobile: warehouse-mobile.css pins the
first column of #resultTable with `position: sticky; left: 0` (its SRL-444 block). That
is a horizontal-scroll affordance for a table, and a card has no horizontal scroll, so
on a card-view grid it is inert at best. Asset Search deliberately does not set
wh-mobile, so the two do not meet today.
*/
@media (max-width: 991px) {
/* One card per row. The row's single colspan cell becomes the card body. */
.rg-grid > tbody > tr {
display: block;
margin: 0 0 12px;
border: 1px solid #d5d8dc;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.rg-grid > tbody > tr > td {
display: block;
width: auto;
padding: 0;
border-top: 0;
}
/* Striping reads as noise once the rows are separate cards. */
.rg-grid.table-striped > tbody > tr:nth-of-type(odd) {
background-color: #fff;
}
/* The row actions: the record-open link, and any selection checkbox. Pinned to the
top of the card so the thing a thumb reaches for is in one predictable place
whatever the grid is. */
.rg-grid .rg-card-header {
display: flex;
align-items: center;
flex-wrap: wrap;
min-height: 46px;
padding: 4px 12px;
background-color: #eef2f7;
border-bottom: 1px solid #d5d8dc;
}
/* A column stack per action: its heading over its control. Beside each other is what
the desktop card-view CSS does, and at 360px it pushed the barcode link onto two
lines - "SRL-" over "0009001" - and doubled the row's height.
THREE CLASSES DEEP ON PURPOSE. `.rg-card-header .card-view` is two, exactly like
`.rg-grid .card-view` further down, and equal specificity means the later rule wins
- which is how padding:0 and border:0 came to be dead in the first shipped version.
The extra .rg-grid makes it win on specificity instead of on line number. */
.rg-grid .rg-card-header .card-view {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0;
border: 0;
margin-right: 14px;
}
/* Overrides bootstrap-table.css's inline-block/min-width:30% title. A header can hold
more than one action - a selection checkbox alongside the record-open link - so the
heading stays rather than being assumed redundant.
flex-basis: auto is not decoration. The body rule below sets `flex: 0 0 42%` on its
labels; in the header's COLUMN flex container that percentage is a height, so the
shipped version gave every action label a fixed 42%-of-card height. It made every
card header equally tall, which is why the "same height" assertion could not see it.
Named here so it is not "tidied" away. */
.rg-grid .rg-card-header .card-view .title {
display: block;
flex: 0 1 auto;
min-width: 0;
padding-right: 0;
font-size: 11px;
font-weight: 600;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #6b7280;
}
/* Nothing to head. bootstrap-table renders the selection checkbox's .card-view with
no .title at all, and an empty one would still take its line. */
.rg-grid .rg-card-header .card-view .title:empty {
display: none;
}
.rg-grid .rg-card-header .card-view .value {
display: block;
flex: 0 1 auto;
font-size: 16px;
font-weight: 600;
/* A barcode broken across two lines is unreadable and unhittable. It is short
enough that this cannot push the header past the viewport. */
white-space: nowrap;
}
/* >=44px of tappable height, which is the floor warehouse-mobile.css already applies
to buttons on the scan flows. A bare inline in a table cell is about 19px. */
.rg-grid .rg-card-header a {
display: inline-block;
min-height: 44px;
line-height: 44px;
padding: 0 4px;
margin-left: -4px;
white-space: nowrap;
}
.rg-grid .rg-card-header input[type="checkbox"],
.rg-grid .rg-card-header input[type="radio"] {
width: 22px;
height: 22px;
margin: 0 4px 0 0;
}
/* One label/value pair per line in the card body. */
.rg-grid .card-view {
display: flex;
align-items: baseline;
padding: 7px 12px;
border-bottom: 1px solid #f0f1f3;
}
.rg-grid > tbody > tr > td > .card-view:last-child {
border-bottom: 0;
}
/* bootstrap-table's smartDisplay renders an EMPTY .card-view for a null value rather
than dropping it, so without this a card with three empty fields carries three
blank striped rows. */
.rg-grid .card-view:empty {
display: none;
}
/* The columns the page did NOT declare for phones. bootstrap-table 1.9.1 honours
cardVisible in its header and footer only - initBody emits a .card-view for every
column regardless - so responsive-grid.js marks them here instead. Without this the
card is all 56 columns tall, which is worse than the table it replaced. */
.rg-grid .card-view.rg-off {
display: none;
}
/* Overrides bootstrap-table.css's `.fixed-table-body .card-view .title`, which is
inline-block with min-width 30% - the two-column alignment wants a real column. */
.rg-grid .card-view .title {
display: block;
flex: 0 0 42%;
min-width: 0;
padding-right: 8px;
color: #6b7280;
font-weight: 600;
word-break: break-word;
}
.rg-grid .card-view .value {
flex: 1 1 auto;
min-width: 0;
word-break: break-word;
}
/* ------------------------------------------------------------------ the chrome
SRL-948 AC: "Filters/search box full-width on phones; pagination controls
tappable." Both live OUTSIDE the table - bootstrap-table's initContainer puts
.fixed-table-toolbar and .fixed-table-pagination in a .bootstrap-table wrapper as
siblings of the - so .rg-grid cannot reach them. responsive-grid.js marks
that wrapper .rg-container from decorate(), which is the earliest point at which it
exists. Everything below is scoped to it, so an unadopted grid's toolbar is
untouched. */
/* bootstrap-table floats the search box (pull-right) at a browser-default input
width - 196px, whatever the viewport, which is what it measured at on a 390px
phone. Un-float it and let it fill the row. */
.rg-container .fixed-table-toolbar > .search {
float: none !important;
display: block;
width: 100%;
margin-top: 6px;
}
.rg-container .fixed-table-toolbar > .search input {
width: 100%;
height: 44px;
}
/* The page's own filter block, which Asset Search hands over via data-toolbar. Same
treatment: it is the other half of "filters full-width". */
.rg-container .fixed-table-toolbar > .columns,
.rg-container .fixed-table-toolbar > .bs-bars {
float: none !important;
display: block;
width: 100%;
}
.rg-container .fixed-table-toolbar .form-control,
.rg-container .fixed-table-toolbar .btn {
min-height: 44px;
}
/* The pager. Its links measured 34x34 and 31x34 - under the 44px floor
warehouse-mobile.css already applies to the scan flows, and the reason a thumb
misses "next" and lands on "3". */
.rg-container .fixed-table-pagination > .pagination-detail,
.rg-container .fixed-table-pagination > .pagination {
float: none !important;
display: block;
width: 100%;
text-align: center;
margin: 6px 0;
}
.rg-container .fixed-table-pagination .pagination > li {
display: inline-block;
float: none;
}
.rg-container .fixed-table-pagination .pagination > li > a,
.rg-container .fixed-table-pagination .pagination > li > span {
min-width: 44px;
min-height: 44px;
line-height: 30px;
padding: 7px 6px;
text-align: center;
}
/* A 25-page grid would otherwise push the pager off the side of the phone. Wrapping
beats a horizontal scroll nobody discovers. */
.rg-container .fixed-table-pagination .pagination {
display: block;
white-space: normal;
}
.rg-container .fixed-table-pagination .page-list .btn {
min-height: 44px;
}
}