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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user