empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 08:55:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix table layout styling on host details and query page (#2925)

Browse Source
This commit is contained in:
Luke Heath 2021-11-15 14:11:22 -06:00 committed by GitHub
parent 4c0a985a31
commit 4619696036
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 105 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changes/fix-2909-2910-table-layout Normal file
View File

@ -0,0 +1 @@
* Fix table layout syles on host details and query page

9
frontend/components/TableContainer/DataTable/DataTable.tsx
View File

@ -15,6 +15,7 @@ import { useDebouncedCallback } from "use-debounce/lib";
import { useDeepEffect } from "utilities/hooks";
import sort from "utilities/sort";
import { AppContext } from "context/app";
import Button from "components/buttons/Button";
// @ts-ignore
@ -88,6 +89,7 @@ const DataTable = ({
onResultsCountChange,
}: IDataTableProps): JSX.Element => {
const { resetSelectedRows } = useContext(TableContext);
const { isOnlyObserver } = useContext(AppContext);
const columns = useMemo(() => {
return tableColumns;
@ -351,6 +353,11 @@ const DataTable = ({
</>
);
const tableStyles = classnames({
"data-table__table": true,
"is-observer": isOnlyObserver,
});
return (
<div className={baseClass}>
{isLoading && (
@ -359,7 +366,7 @@ const DataTable = ({
</div>
)}
<div className={"data-table data-table__wrapper"}>
<table className={"data-table__table"}>
<table className={tableStyles}>
{Object.keys(selectedRowIds).length !== 0 && (
<thead className={"active-selection"}>
<tr {...headerGroups[0].getHeaderGroupProps()}>

6
frontend/pages/hosts/HostDetailsPage/_styles.scss
View File

@ -32,6 +32,11 @@
.info-flex {
display: flex;
flex-wrap: wrap;
.info-flex__item--title {
margin-bottom: 2.5rem;
}
&__item {
font-size: $x-small;
@ -157,6 +162,7 @@
flex-direction: row;
justify-content: space-between;
margin: 0;
padding-bottom: 0;
.hostname-container {
display: flex;

134
frontend/pages/queries/ManageQueriesPage/_styles.scss
View File

@ -120,64 +120,110 @@
text-align: center;
}
thead {
th:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(4)) {
width: 100px;
}
th:nth-child(1) {
width: 8px;
}
th:nth-child(2) {
width: 200px;
}
th:nth-child(4) {
width: 40px;
}
@include breakpoint(tablet) {
th:nth-child(3),
th:nth-child(5),
th:nth-child(7) {
display: none;
&:not(.is-observer) {
thead {
th:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(4)) {
width: 100px;
}
}
@include breakpoint(ltdesktop) {
th:nth-child(1) {
width: 8px;
}
th:nth-child(3),
th:nth-child(5) {
display: none;
th:nth-child(2) {
width: 200px;
}
th:nth-child(4) {
width: 40px;
}
@include breakpoint(tablet) {
th:nth-child(3),
th:nth-child(5),
th:nth-child(7) {
display: none;
}
}
@include breakpoint(ltdesktop) {
th:nth-child(1) {
width: 8px;
}
th:nth-child(3),
th:nth-child(5) {
display: none;
}
}
}
tbody {
td:nth-child(1) {
text-align: center;
}
@include breakpoint(tablet) {
td:nth-child(3),
td:nth-child(5),
td:nth-child(7) {
display: none;
}
}
@include breakpoint(ltdesktop) {
td:nth-child(3),
td:nth-child(5) {
display: none;
}
}
}
}
tbody {
td:nth-child(1) {
text-align: center;
}
@include breakpoint(tablet) {
td:nth-child(3),
td:nth-child(5),
td:nth-child(7) {
display: none;
&.is-observer {
thead {
th:not(:nth-child(1)):not(:nth-child(2)) {
width: 100px;
}
th:nth-child(1) {
width: 200px;
}
th:nth-child(2) {
width: 40px;
}
@include breakpoint(tablet) {
th:nth-child(3),
th:nth-child(5) {
display: none;
}
}
@include breakpoint(ltdesktop) {
th:nth-child(3) {
display: none;
}
}
}
@include breakpoint(ltdesktop) {
td:nth-child(3),
td:nth-child(5) {
display: none;
tbody {
@include breakpoint(tablet) {
td:nth-child(3),
td:nth-child(5),
td:nth-child(6) {
display: none;
}
}
@include breakpoint(ltdesktop) {
td:nth-child(3),
td:nth-child(5) {
display: none;
}
}
}
td {
}
}
tbody {
td {
overflow: hidden;
text-overflow: ellipsis;
.button {
display: block;
text-align: start;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
.button {
display: block;
text-align: start;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}