Update the columns and elements the Fleet UI shows/hides at breakpoints (#5186)

* Revisions to the specification in the "Make table behavior in the Fleet UI consistent down to 768px" issue: #3052
This commit is contained in:
Noah Talerman
2022-04-18 13:36:25 -04:00
committed by GitHub
parent da171d3b8d
commit 124d272b38
10 changed files with 0 additions and 182 deletions
@@ -25,11 +25,6 @@
border-right: none;
}
.email__header {
display: none;
width: 0;
}
.actions__header {
width: auto;
}
@@ -38,12 +33,6 @@
.role__header {
border-right: 1px solid $ui-fleet-blue-15;
}
.email__header {
display: table-cell;
width: $col-lg;
border-right: none;
}
}
}
@@ -56,20 +45,9 @@
max-width: $col-md;
}
.email__cell {
display: none;
}
.actions__cell {
width: auto;
}
@media (min-width: $break-1400) {
.email__cell {
display: table-cell;
max-width: $col-lg;
}
}
}
}
}
@@ -18,11 +18,6 @@
border-right: none;
}
.user_count__header {
display: none;
width: 0;
}
.actions__header {
width: auto;
}
@@ -31,12 +26,6 @@
.host_count__header {
border-right: 1px solid $ui-fleet-blue-15;
}
.user_count__header {
display: table-cell;
width: $col-md;
border-right: none;
}
}
}
@@ -49,20 +38,9 @@
max-width: $col-md;
}
.user_count__cell {
display: none;
}
.actions__cell {
width: auto;
}
@media (min-width: $break-990) {
.user_count__cell {
display: table-cell;
max-width: $col-md;
}
}
}
}
}
@@ -74,10 +74,6 @@
display: none;
width: 0;
}
.email__header {
display: none;
width: 0;
}
.actions__header {
width: auto;
}
@@ -105,11 +101,6 @@
.teams__header {
border-right: 1px solid $ui-fleet-blue-15;
}
.email__header {
display: table-cell;
width: $col-lg;
border-right: none;
}
}
}
tbody {
@@ -131,10 +122,6 @@
display: none;
max-width: $col-md;
}
.email__cell {
display: none;
max-width: $col-md;
}
.actions__cell {
width: auto;
}
@@ -148,11 +135,6 @@
display: table-cell;
}
}
@media (min-width: $break-1600) {
.email__cell {
display: table-cell;
}
}
}
}
}
@@ -41,12 +41,6 @@
display: flex;
flex-wrap: wrap;
@media screen and (max-width: 960px) {
div:nth-child(n + 5) {
display: none;
}
}
.info-flex__item--title {
margin-bottom: 2.5rem;
}
@@ -16,18 +16,10 @@
display: none;
width: 0;
}
.performance__header {
display: none;
width: 0;
}
@media (min-width: $break-990) {
.last_run__header {
display: table-cell;
}
.performance__header {
display: table-cell;
width: $col-md;
}
}
}
tbody {
@@ -41,18 +33,10 @@
display: none;
width: 0;
}
.performance__cell {
display: none;
width: 0;
}
@media (min-width: $break-990) {
.last_run__cell {
display: table-cell;
}
.performance__cell {
display: table-cell;
width: $col-md;
}
}
}
}
@@ -15,16 +15,6 @@
.frequency__header {
width: $col-md;
}
.performance__header {
display: none;
width: 0;
}
@media (min-width: $break-990) {
.performance__header {
display: table-cell;
width: $col-md;
}
}
}
tbody {
.query_name__cell {
@@ -33,16 +23,6 @@
.frequency__cell {
width: $col-md;
}
.performance__cell {
display: none;
width: 0;
}
@media (min-width: $break-990) {
.performance__cell {
display: table-cell;
width: $col-md;
}
}
}
}
}
@@ -48,10 +48,6 @@
display: none;
width: 0px;
}
.vulnerabilities__header {
display: none;
width: 0px;
}
.hosts_count__header {
border-right: 0;
}
@@ -59,9 +55,6 @@
.version__header {
width: $col-md;
}
.vulnerabilities__header {
display: table-cell;
}
}
@media (min-width: $break-1400) {
.source__header {
@@ -82,10 +75,6 @@
display: none;
width: 0px;
}
.vulnerabilities__cell {
width: 0px;
display: none;
}
.hosts_count__cell {
.hosts-cell__wrapper {
display: flex;
@@ -98,11 +87,6 @@
}
}
}
@media (min-width: $break-990) {
.vulnerabilities__cell {
display: table-cell;
}
}
@media (min-width: $break-1400) {
.source__cell {
display: table-cell;
@@ -129,10 +129,6 @@
display: none;
width: 0;
}
.performance__header {
display: none;
width: 0;
}
.updated_at__header {
display: none;
width: 0;
@@ -150,15 +146,6 @@
.author_name__header {
width: $col-md;
}
.performance__header {
display: table-cell;
width: auto;
}
}
@media (min-width: $break-1600) {
.performance__header {
width: $col-md;
}
.updated_at__header {
display: table-cell;
width: auto;
@@ -188,10 +175,6 @@
display: block;
}
}
.performance__cell {
display: none;
max-width: $col-md;
}
.updated_at__cell {
display: none;
max-width: $col-md;
@@ -202,11 +185,6 @@
}
}
@media (min-width: $break-1400) {
.performance__cell {
display: table-cell;
}
}
@media (min-width: $break-1600) {
.updated_at__cell {
display: table-cell;
}
@@ -102,10 +102,6 @@
.interval__header {
width: auto;
}
.performance__header {
display: none;
width: 0;
}
.actions__header {
width: auto;
}
@@ -113,11 +109,6 @@
.interval__header {
width: 0;
}
.performance__header {
display: table-cell;
width: $col-lg;
border-left: 1px solid $ui-fleet-blue-15;
}
}
}
tbody {
@@ -127,10 +118,6 @@
.interval__cell {
width: auto;
}
.performance__cell {
display: none;
width: 0;
}
.actions__cell {
width: auto;
}
@@ -138,10 +125,6 @@
.interval_cell {
width: 0;
}
.performance__cell {
display: table-cell;
width: $col-lg;
}
}
}
}
@@ -204,10 +204,6 @@
display: none;
width: 0;
}
.vulnerabilities__header {
display: none;
width: 0;
}
.hosts_count__header {
width: auto;
border-right: 0;
@@ -216,9 +212,6 @@
.version__header {
width: $col-md;
}
.vulnerabilities__header {
display: table-cell;
}
}
@media (min-width: $break-1400) {
.source__header {
@@ -239,9 +232,6 @@
width: 0;
}
.vulnerabilities__cell {
width: 0;
display: none;
.text-muted {
color: $ui-fleet-black-50;
}
@@ -251,9 +241,6 @@
.hosts-cell__wrapper {
display: flex;
justify-content: space-between;
.hosts-cell__count {
display: none;
}
.hosts-cell__link {
display: flex;
}
@@ -263,16 +250,6 @@
.version_cell {
width: $col-md;
}
.vulnerabilities__cell {
display: table-cell;
}
.hosts_count__cell {
.hosts-cell__wrapper {
.hosts-cell__count {
display: flex;
}
}
}
}
@media (min-width: $break-1400) {
.source__cell {