/* ========================================================================== CARD LAYOUT FOR KENDO GRIDS (narrow screens) Turns a grid row into a stacked card instead of a wide table row, so the horizontal scrolling goes away on phones. Driven by data-grid-layout on the element (see Services/GridLayoutPreferences.cs); js/grid-cards.js adds the .brb-grid-cards class and labels the cells with data-brb-title. Where one card ends and the next begins is carried by three cues that only ever occur at a boundary: the gap between cards, a tinted band on the first field, and a second band under the command buttons. Everything inside a card is deliberately quieter than its outline - the dividers between fields are a hairline at 8% - so no line within a card can be read as the card's edge. ========================================================================== */ /* The sort control stands in for the hidden column headers. */ .brb-grid-sortbar { display: none; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .brb-grid-cards .brb-grid-sortbar { display: flex; } .brb-grid-sortbar-label { color: var(--bs-secondary-color); font-size: 0.8125rem; white-space: nowrap; } .brb-grid-sortbar-field { flex: 1 1 auto; min-width: 0; } /* --- the grid shell ------------------------------------------------------ */ .brb-grid-cards .k-grid.brb-cards-ready { border: 0; background: transparent; } .brb-grid-cards .brb-cards-ready .k-grid-header, .brb-grid-cards .brb-cards-ready .k-grid-footer { display: none; } .brb-grid-cards .brb-cards-ready .k-grid-content, .brb-grid-cards .brb-cards-ready .k-grid-container { height: auto !important; max-height: none !important; overflow: visible !important; } /* Scoped to the table js/grid-cards.js tagged as the grid's own, and stepping down it with child combinators: a client template may contain a table of its own, and that one is content that has to keep its columns, not a grid to be folded into cards. */ .brb-grid-cards .brb-cards-table { display: block; width: 100% !important; min-width: 0 !important; table-layout: auto; border-collapse: separate; } .brb-grid-cards .brb-cards-table > colgroup, .brb-grid-cards .brb-cards-table > thead { display: none; } .brb-grid-cards .brb-cards-table > tbody { display: block; } /* --- one row becomes one card -------------------------------------------- The custom properties are declared on the card and read by the bands, which cancel its padding with negative margins to bleed out to its edges. The gap below a card is wider than any spacing inside one, so the rhythm on its own already groups the fields that belong together. */ .brb-grid-cards .brb-cards-table > tbody > tr { --brb-card-pad-x: 1rem; --brb-card-pad-y: 0.75rem; --brb-card-radius: 0.5rem; --brb-card-rule: rgba(var(--bs-emphasis-color-rgb), 0.08); display: block; width: 100%; margin: 0 0 1.25rem; padding: var(--brb-card-pad-y) var(--brb-card-pad-x); border: 1px solid var(--bs-border-color); border-radius: var(--brb-card-radius); background: var(--bs-body-bg) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 16px -10px rgba(0, 0, 0, 0.25); } /* A drop shadow carries almost no contrast on a dark background, so there the outline and the bands do the lifting on their own. */ [data-bs-theme="dark"] .brb-grid-cards .brb-cards-table > tbody > tr { box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.7); } .brb-grid-cards .brb-cards-table > tbody > tr.k-selected, .brb-grid-cards .brb-cards-table > tbody > tr.k-state-selected { border-color: var(--bs-primary); box-shadow: 0 0 0 1px var(--bs-primary); } .brb-grid-cards .brb-cards-table > tbody > tr > td { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; width: auto !important; max-width: none; padding: 0.4rem 0; border: 0; border-bottom: 1px solid var(--brb-card-rule); white-space: normal; overflow: visible; text-overflow: clip; } .brb-grid-cards .brb-cards-ready td[data-brb-title]::before { content: attr(data-brb-title); flex: 0 0 auto; max-width: 45%; color: var(--bs-secondary-color); font-size: 0.8125rem; font-weight: 400; line-height: 1.3; text-align: left; } .brb-grid-cards .brb-cards-ready td[data-brb-cell="value"] { text-align: right; word-break: break-word; } /* --- fields whose value is a client template ----------------------------- A field is laid out as a flex row, which is right for a label and one value but wrong the moment a column renders markup: a flex container makes a flex item out of every child, so each text run and each
of the parsed event log JSON lines up beside the others in a column one character wide. js/grid-cards.js marks those cells and they are stacked instead - label on its own line, content below it over the full width of the card, reading left to right like the text it is. */ .brb-grid-cards .brb-cards-ready td[data-brb-block] { display: block; text-align: left; } .brb-grid-cards .brb-cards-ready td[data-brb-block]::before { display: block; max-width: none; margin-bottom: 0.125rem; } /* Nothing a template brings along may push the card wider than the screen. */ .brb-grid-cards .brb-cards-ready td[data-brb-block] img, .brb-grid-cards .brb-cards-ready td[data-brb-block] table, .brb-grid-cards .brb-cards-ready td[data-brb-block] pre { max-width: 100%; } .brb-grid-cards .brb-cards-ready td[data-brb-block] pre { overflow-x: auto; white-space: pre-wrap; word-break: break-word; } /* Empty values would only produce cards full of dangling labels. */ .brb-grid-cards .brb-cards-ready td[data-brb-empty] { display: none; } /* --- the bands that open and close a card -------------------------------- The first field of every card is set in a tinted band, so the start of a card is stated rather than inferred from the outline. Commands close the card with the same band, which brackets the fields between them. */ .brb-grid-cards .brb-cards-ready td[data-brb-head] { margin: 0 calc(-1 * var(--brb-card-pad-x)) 0.5rem; padding: 0.5rem var(--brb-card-pad-x); border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); background: var(--bs-secondary-bg); font-weight: 600; } /* Usually nothing precedes the band and it sits in the top corners of the card; a grouping or hierarchy cell pushes it down, and then it keeps its own edge. */ .brb-grid-cards .brb-cards-ready td[data-brb-head="top"] { margin-top: calc(-1 * var(--brb-card-pad-y)); border-top: 0; border-radius: calc(var(--brb-card-radius) - 1px) calc(var(--brb-card-radius) - 1px) 0 0; } .brb-grid-cards .brb-cards-ready td[data-brb-cell="command"] { flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; margin: 0.25rem calc(-1 * var(--brb-card-pad-x)) 0; padding: 0.5rem var(--brb-card-pad-x); border-top: 1px solid var(--bs-border-color); border-bottom: 0; background: var(--bs-secondary-bg); } .brb-grid-cards .brb-cards-ready td[data-brb-cell="command"]:last-child { margin-bottom: calc(-1 * var(--brb-card-pad-y)); border-radius: 0 0 calc(var(--brb-card-radius) - 1px) calc(var(--brb-card-radius) - 1px); } .brb-grid-cards .brb-cards-ready td[data-brb-cell="command"] .k-button { margin: 0; } /* Must stay below the band rules: on a card with a single field the same cell is both, and then the card ends on its own outline rather than on a stray line. */ .brb-grid-cards .brb-cards-ready td[data-brb-last] { border-bottom: 0; } /* --- hierarchy and empty state ------------------------------------------- */ .brb-grid-cards .brb-cards-ready td[data-brb-cell="spacer"] { justify-content: flex-start; padding: 0.25rem 0; border-bottom: 0; } .brb-grid-cards .brb-cards-ready td[data-brb-cell="full"] { display: block; text-align: center; border-bottom: 0; } /* --- expanded detail rows ------------------------------------------------ Kendo inserts the detail row as a sibling of its master row, so left alone it reads as the next card rather than as part of the one that opened it. While a row is expanded, js/grid-cards.js flags it and the two are welded into a single card: the master gives up its bottom corners and the gap below it, the detail row gives up its top corners and carries the rounding for both. The detail area is recessed on top of that, so what belongs to a row sits visibly inside it. */ .brb-grid-cards .brb-cards-table > tbody > tr[data-brb-expanded] { margin-bottom: 0; border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .brb-grid-cards .brb-cards-table > tbody > tr.k-detail-row { margin-top: 0; padding: 0; border-top: 1px solid var(--bs-border-color); border-top-right-radius: 0; border-top-left-radius: 0; background: var(--bs-tertiary-bg) !important; } .brb-grid-cards .brb-cards-ready tr.k-detail-row > td.k-detail-cell { display: block; padding: 0.75rem var(--brb-card-pad-x) 1rem; border: 0; } /* Only there to keep the table columns lined up, which card mode does not use. */ .brb-grid-cards .brb-cards-ready tr.k-detail-row > td.k-hierarchy-cell { display: none; } /* A grid inside a detail area is already contained by the card around it, so its own cards only have to be told apart from each other - lifting them off the page a second time would compete with the card they sit in. */ .brb-grid-cards .brb-cards-ready tr.k-detail-row .brb-cards-table > tbody > tr { margin-bottom: 0.625rem; box-shadow: none; } /* --- inline editing ------------------------------------------------------ */ .brb-grid-cards .brb-cards-ready tr.k-grid-edit-row > td { flex-direction: column; align-items: stretch; gap: 0.25rem; text-align: left; } /* An editor is not a heading, and a band across the first input only gets in the way of the fields below it. */ .brb-grid-cards .brb-cards-ready tr.k-grid-edit-row > td[data-brb-head] { margin: 0; padding: 0.4rem 0; border-top: 0; border-bottom: 1px solid var(--brb-card-rule); border-radius: 0; background: none; font-weight: 400; } .brb-grid-cards .brb-cards-ready tr.k-grid-edit-row > td[data-brb-empty] { display: flex; } .brb-grid-cards .brb-cards-ready tr.k-grid-edit-row > td::before { max-width: none; } .brb-grid-cards .brb-cards-ready tr.k-grid-edit-row .k-input, .brb-grid-cards .brb-cards-ready tr.k-grid-edit-row .k-picker, .brb-grid-cards .brb-cards-ready tr.k-grid-edit-row .k-textbox, .brb-grid-cards .brb-cards-ready tr.k-grid-edit-row input.form-control, .brb-grid-cards .brb-cards-ready tr.k-grid-edit-row select { width: 100%; } .brb-grid-cards .brb-cards-ready tr.k-grid-edit-row .k-invalid-msg { text-align: left; } /* --- toolbar and pager --------------------------------------------------- */ /* The toolbar carries the filter tool that stands in for the hidden column headers (see js/grid-cards.js). It no longer caps a table, it sits above a stack of cards, so it is rounded on all four corners and keeps its distance from the first one. */ .brb-grid-cards .brb-cards-ready .k-grid-toolbar { flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.75rem; border-radius: 0.5rem; } /* The filter tool belongs to card mode alone: above the breakpoint the column headers are back and carry their own filter menus. A tool can only be added while the grid is being built, so in "auto" it is added on every screen and taken back off here - the same arrangement the sort bar uses at the top of this file. Only hiding, never showing: left alone in card mode the tool and the bar keep whatever Kendo lays them out as. Scoped to what js/grid-cards.js marked as its own, so a filter tool that a view asks for itself is none of this file's business. */ html:not(.brb-grid-cards) .brb-cards-filter .k-grid-filter-tool { display: none; } /* A grid that had no toolbar of its own was given one for nothing but that tool, so above the breakpoint the whole bar goes and not just the button in it. */ html:not(.brb-grid-cards) .brb-cards-toolbar .k-grid-toolbar { display: none; } .brb-grid-cards .brb-cards-ready .k-pager { flex-wrap: wrap; gap: 0.25rem; padding: 0.375rem; border-radius: 0.5rem; } .brb-grid-cards .brb-cards-ready .k-pager .k-pager-info, .brb-grid-cards .brb-cards-ready .k-pager .k-pager-sizes { display: none; }