diff --git a/src/qqq/components/horseshoe/NavBar.tsx b/src/qqq/components/horseshoe/NavBar.tsx index bcd1e07..24e3f94 100644 --- a/src/qqq/components/horseshoe/NavBar.tsx +++ b/src/qqq/components/horseshoe/NavBar.tsx @@ -25,6 +25,7 @@ import Autocomplete from "@mui/material/Autocomplete"; import Icon from "@mui/material/Icon"; import IconButton from "@mui/material/IconButton"; import ListItemIcon from "@mui/material/ListItemIcon"; +import {Theme} from "@mui/material/styles"; import TextField from "@mui/material/TextField"; import Toolbar from "@mui/material/Toolbar"; import React, {useContext, useEffect, useRef, useState} from "react"; @@ -225,6 +226,19 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element const breadcrumbTitle = fullPathToLabel(fullPath, route[route.length - 1]); + /////////////////////////////////////////////////////////////////////////////////////////////// + // set the right-half of the navbar up so that below the 'md' breakpoint, it just disappears // + /////////////////////////////////////////////////////////////////////////////////////////////// + const navbarRowRight = (theme: Theme, {isMini}: any) => + { + return { + [theme.breakpoints.down("md")]: { + display: "none", + }, + ...navbarRow(theme, isMini) + } + }; + return ( {isMini ? null : ( - navbarRow(theme, {isMini})}> + navbarRowRight(theme, {isMini})}> {renderHistory()} diff --git a/src/qqq/components/widgets/tables/DataTable.tsx b/src/qqq/components/widgets/tables/DataTable.tsx index d039c2a..1cb35c9 100644 --- a/src/qqq/components/widgets/tables/DataTable.tsx +++ b/src/qqq/components/widgets/tables/DataTable.tsx @@ -321,137 +321,133 @@ function DataTable({ innerBoxStyle = {overflowY: "auto", scrollbarGutter: "stable"}; } + /////////////////////////////////////////////////////////////////////////////////// + // note - at one point, we had the table's sx including: whiteSpace: "nowrap"... // + /////////////////////////////////////////////////////////////////////////////////// return - +
{ includeHead && ( - - {headerGroups.map((headerGroup: any, i: number) => ( - - {headerGroup.headers.map((column: any) => ( - column.type !== "hidden" && ( - - {column.render("header")} - - ) - ))} - - ))} - + headerGroups.map((headerGroup: any, i: number) => ( + headerGroup.headers.map((column: any) => ( + column.type !== "hidden" && ( + + {column.render("header")} + + ) + )) + )) ) } - - {rows.map((row: any, key: any) => + {rows.map((row: any, key: any) => + { + prepareRow(row); + + let overrideNoEndBorder = false; + + ////////////////////////////////////////////////////////////////////////////////// + // don't do an end-border on nested rows - unless they're the last one in a set // + ////////////////////////////////////////////////////////////////////////////////// + if (row.depth > 0) { - prepareRow(row); - - let overrideNoEndBorder = false; - - ////////////////////////////////////////////////////////////////////////////////// - // don't do an end-border on nested rows - unless they're the last one in a set // - ////////////////////////////////////////////////////////////////////////////////// - if (row.depth > 0) + overrideNoEndBorder = true; + if (key + 1 < rows.length && rows[key + 1].depth == 0) { - overrideNoEndBorder = true; - if (key + 1 < rows.length && rows[key + 1].depth == 0) - { - overrideNoEndBorder = false; - } + overrideNoEndBorder = false; } + } - /////////////////////////////////////// - // don't do end-border on the footer // - /////////////////////////////////////// - if (isFooter) - { - overrideNoEndBorder = true; - } + /////////////////////////////////////// + // don't do end-border on the footer // + /////////////////////////////////////// + if (isFooter) + { + overrideNoEndBorder = true; + } - let background = "initial"; - if (isFooter) - { - background = "#EEEEEE"; - } - else if (row.depth > 0 || row.isExpanded) - { - background = "#FAFAFA"; - } + let background = "initial"; + if (isFooter) + { + background = "#EEEEEE"; + } + else if (row.depth > 0 || row.isExpanded) + { + background = "#FAFAFA"; + } - return ( - - {row.cells.map((cell: any) => ( - cell.column.type !== "hidden" && ( - - { - cell.column.type === "default" && ( - cell.value && "number" === typeof cell.value ? ( - {cell.value.toLocaleString()} - ) : ({cell.render("Cell")}) - ) - } - { - cell.column.type === "htmlAndTooltip" && ( - - - - {parse(cell.value)} - - - - ) - } - { - cell.column.type === "html" && ( - {parse(cell.value ?? "")} - ) - } - { - cell.column.type === "composite" && ( - - - - ) - } - { - cell.column.type === "block" && ( - - - - ) - } - { - cell.column.type === "image" && row.values["imageTotal"] && ( - - ) - } - { - cell.column.type === "image" && !row.values["imageTotal"] && ( - - ) - } - { - (cell.column.id === "__expander") && cell.render("cell") - } - - ) - ))} - - ); - })} - - + return ( + row.cells.map((cell: any) => ( + cell.column.type !== "hidden" && ( + + { + cell.column.type === "default" && ( + cell.value && "number" === typeof cell.value ? ( + {cell.value.toLocaleString()} + ) : ({cell.render("Cell")}) + ) + } + { + cell.column.type === "htmlAndTooltip" && ( + + + + {parse(cell.value)} + + + + ) + } + { + cell.column.type === "html" && ( + {parse(cell.value ?? "")} + ) + } + { + cell.column.type === "composite" && ( + + + + ) + } + { + cell.column.type === "block" && ( + + + + ) + } + { + cell.column.type === "image" && row.values["imageTotal"] && ( + + ) + } + { + cell.column.type === "image" && !row.values["imageTotal"] && ( + + ) + } + { + (cell.column.id === "__expander") && cell.render("cell") + } + + ) + )) + ); + })}
; } diff --git a/src/qqq/components/widgets/tables/TableCard.tsx b/src/qqq/components/widgets/tables/TableCard.tsx index cdfcaba..2240fb2 100644 --- a/src/qqq/components/widgets/tables/TableCard.tsx +++ b/src/qqq/components/widgets/tables/TableCard.tsx @@ -93,41 +93,25 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, /> : noRowsFoundHTML ? - - { - noRowsFoundHTML ? ( - parse(noRowsFoundHTML) - ) : "No rows found" - } + + {noRowsFoundHTML ? (parse(noRowsFoundHTML)) : "No rows found"} : - - - - {Array(8).fill(0).map((_, i) => - - - - )} - - - - {Array(5).fill(0).map((_, i) => - - {Array(8).fill(0).map((_, j) => - - - - )} - - )} - +
+ {Array(8).fill(0).map((_, i) => + + + + )} + {Array(5).fill(0).map((_, i) => + Array(8).fill(0).map((_, j) => + + + + ) + )}
} diff --git a/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx b/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx index 5f22d53..7623de3 100644 --- a/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx +++ b/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx @@ -19,7 +19,7 @@ * along with this program. If not, see . */ -import Box from "@mui/material/Box"; +import {Box} from "@mui/material"; import {Theme} from "@mui/material/styles"; import colors from "qqq/assets/theme/base/colors"; import {ReactNode} from "react"; @@ -30,13 +30,14 @@ interface Props children: ReactNode; noBorder?: boolean; align?: "left" | "right" | "center"; + sx?: any; } -function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element +function DataTableBodyCell({noBorder, align, sx, children}: Props): JSX.Element { return ( ({ borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`, - "&:nth-of-type(1)": { - paddingLeft: "1rem" - }, - "&:last-child": { - paddingRight: "1rem" - }, + position: "sticky", top: 0, background: "white", + zIndex: 1 // so if body rows scroll behind it, they don't show through })} >