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

Adjust queries page table columns based on screen size (#2695)

Browse Source
This commit is contained in:
Luke Heath 2021-10-27 16:19:23 -05:00 committed by GitHub
parent 21153e9400
commit 5566fdf532
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changes/fix-2653 Normal file
View File

@ -0,0 +1 @@
* Hide columns in query table at smaller page sizes

10
frontend/components/TableContainer/DataTable/_styles.scss
View File

@ -60,10 +60,11 @@
&:first-child {
border-top-left-radius: 6px;
padding: $pad-medium 17px;
}
&.selection__header {
width: 20px;
width: 1px;
}
&:last-child {
@ -142,10 +143,15 @@
tbody {
td {
padding: 0px 27px;
padding: 0 27px;
white-space: nowrap;
height: 40px;
&:first-child {
padding: 0 17px;
width: 1px;
}
// form-field wraps the dropdown menu
.form-field {
margin: 0;

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

@ -116,22 +116,61 @@
.data-table__table {
table-layout: fixed;
// thead {
// // Width for all columns except checkbox and "Name" columns
// // For observers all columns except "Name" and "Author" columns
// // Width calculation adjusts for each row's horizontal padding
// th:not(:nth-child(1)):not(:nth-child(2)) {
// width: calc(180px - (27px * 2));
// }
// }
.selection__header {
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;
}
}
@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;
}
}
td {
overflow: hidden;
text-overflow: ellipsis;
}
// Width and overflow behavior for the link in the "Name" column
td {
.button {
display: block;
text-align: start;