Discharge7443/fleet
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

Frontend – clean up breakpoints (#12711)

Browse Source 
## Improve breakpoint variables to be useful "sm", "md", etc. instead of
the pixel widths they are set to

Also made sure all media queries are using these variables instead of
hard-coded values.

See @lukeheath's previous to-do in `frontend > styles > var >
breakpoints.scss`

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
This commit is contained in:
Jacob Shandling
2023-07-12 15:45:49 -07:00
committed by GitHub
co-authored by Jacob Shandling
parent 8cc08528ef
commit 48156009fa
27 changed files with 79 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/TableContainer/DataTable/TruncatedTextCell/_styles.scss
+3 -3
View File
@@ -26,7 +26,7 @@
// allows for the tooltip text to break on a word instead of a character
&.tooltip-break-on-word {
.truncated-tooltip {
word-break: normal
word-break: normal;
}
}
@@ -43,13 +43,13 @@
}
}
@media (min-width: $break-990) {
@media (min-width: $break-md) {
.truncated-tooltip {
max-width: 400px;
}
}
@media (min-width: $break-1400) {
@media (min-width: $break-lg) {
.truncated-tooltip {
max-width: 800px;
}
frontend/components/TableContainer/_styles.scss
+7 -7
View File
@@ -15,12 +15,12 @@
flex-direction: column-reverse;
align-items: start;
@media (min-width: $break-768) {
@media (min-width: $break-xs) {
flex-direction: row;
align-items: end;
justify-content: space-between;
}
@media (min-width: $break-990) {
@media (min-width: $break-md) {
align-items: center;
}
}
@@ -36,7 +36,7 @@
flex-direction: column-reverse;
align-items: start;
@media (min-width: $break-990) {
@media (min-width: $break-md) {
flex-direction: row;
justify-content: space-between;
align-items: center;
@@ -66,7 +66,7 @@
&.stack-table-controls {
padding-top: $pad-large;
@media (min-width: $break-990) {
@media (min-width: $break-md) {
padding-top: 0;
}
}
@@ -87,10 +87,10 @@
.search-field__input-wrapper {
width: 250px;
margin-bottom: 0;
@media (min-width: $break-768) {
@media (min-width: $break-xs) {
width: 300px;
}
@media (min-width: $break-990) {
@media (min-width: $break-md) {
width: 344px;
}
}
@@ -99,7 +99,7 @@
padding-bottom: $pad-large;
margin-left: 0;
@media (min-width: $break-768) {
@media (min-width: $break-xs) {
margin-left: $pad-medium;
padding-bottom: 0;
}
frontend/components/buttons/ActionButtons/_styles.scss
+2 -2
View File
@@ -7,7 +7,7 @@
&__secondary-buttons {
display: none;
@media (min-width: 990px) {
@media (min-width: $break-md) {
display: flex;
}
}
@@ -35,7 +35,7 @@
}
}
}
@media (min-width: 990px) {
@media (min-width: $break-md) {
display: none;
}
}
frontend/components/queries/PackQueriesTable/_styles.scss
+4 -4
View File
@@ -32,7 +32,7 @@
.actions__header {
width: auto;
}
@media (min-width: $break-990) {
@media (min-width: $break-md) {
.interval__header {
border-right: 1px solid $ui-fleet-black-10;
}
@@ -42,7 +42,7 @@
border-right: none;
}
}
@media (min-width: $break-1400) {
@media (min-width: $break-lg) {
.platform_string__header,
.logging_string__header {
display: table-cell;
@@ -71,13 +71,13 @@
.actions__cell {
width: auto;
}
@media (min-width: $break-990) {
@media (min-width: $break-md) {
.performance__cell {
display: table-cell;
width: $col-md;
}
}
@media (min-width: $break-1400) {
@media (min-width: $break-lg) {
.platform_string__cell,
.logging_string__cell {
display: table-cell;
frontend/layouts/CoreLayout/_styles.scss
+3 -3
View File
@@ -14,7 +14,7 @@
display: flex;
// App hidden below 768px
@media (max-width: $break-768 - 1px) {
@media (max-width: $break-xs - 1px) {
display: none;
}
@@ -40,7 +40,7 @@
z-index: 100;
// Nav hidden below 768px;
@media (max-width: $break-768 - 1px) {
@media (max-width: $break-xs - 1px) {
display: none;
}
@@ -63,7 +63,7 @@
gap: $pad-medium;
// Overlay below 768px
@media (min-width: 768px) {
@media (min-width: $break-xs) {
display: none;
}
frontend/pages/DashboardPage/_styles.scss
+1 -1
View File
@@ -79,7 +79,7 @@
display: grid;
row-gap: $pad-medium;
@media screen and (min-width: 990px) {
@media screen and (min-width: $break-md) {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: $pad-medium;
frontend/pages/ManageControlsPage/MacOSScripts/components/ScriptListHeading/_styles.scss
+1 -2
View File
@@ -34,12 +34,11 @@
font-weight: normal;
}
@media (max-width: $break-990) {
@media (max-width: $break-md) {
&__script-statuses {
justify-content: flex-end;
}
&__actions-heading {
display: none;
}
frontend/pages/ManageControlsPage/MacOSScripts/components/ScriptListItem/_styles.scss
+2 -3
View File
@@ -35,9 +35,8 @@
}
}
&__has-value {
color: $core-vibrant-blue
color: $core-vibrant-blue;
}
&__script-actions {
@@ -57,7 +56,7 @@
margin-right: $pad-medium;
}
@media (max-width: $break-990) {
@media (max-width: $break-md) {
&__script-statuses {
justify-content: flex-end;
}
frontend/pages/ManageControlsPage/MacOSSettings/cards/DiskEncryption/components/DiskEncryptionTable/_styles.scss
+1 -1
View File
@@ -27,7 +27,7 @@
}
}
@media (max-width: $break-990) {
@media (max-width: $break-md) {
.view-hosts-link {
span {
display: none;
frontend/pages/ManageControlsPage/MacOSSetup/cards/BootstrapPackage/_styles.scss
+2 -2
View File
@@ -9,14 +9,14 @@
}
&__content {
max-width: $break-1600;
max-width: $break-xxl;
margin: 0 auto;
display: flex;
justify-content: space-between;
gap: $pad-xxlarge;
}
@media (max-width: $break-990) {
@media (max-width: $break-md) {
&__content {
flex-direction: column;
}
frontend/pages/ManageControlsPage/MacOSSetup/cards/BootstrapPackage/components/BootstrapPackageTable/_styles.scss
+1 -1
View File
@@ -29,7 +29,7 @@
}
}
@media (max-width: $break-1400) {
@media (max-width: $break-lg) {
.view-hosts-link {
span {
display: none;
frontend/pages/ManageControlsPage/MacOSSetup/cards/EndUserAuthentication/_styles.scss
+5 -6
View File
@@ -1,16 +1,15 @@
.end-user-authentication {
&__content {
max-width: $break-1600;
max-width: $break-xxl;
margin: 0 auto;
display: flex;
justify-content: space-between;
gap: $pad-xxlarge;
}
@media (max-width: $break-990) {
&__content {
flex-direction: column;
}
@media (max-width: $break-md) {
&__content {
flex-direction: column;
}
}
}
frontend/pages/ManageControlsPage/MacOSUpdates/_styles.scss
+2 -2
View File
@@ -6,7 +6,7 @@
}
&__content {
max-width: $break-1600;
max-width: $break-xxl;
margin: 0 auto;
display: flex;
justify-content: space-between;
@@ -26,7 +26,7 @@
margin-top: 80px;
}
@media (max-width: $break-990) {
@media (max-width: $break-md) {
&__content {
flex-direction: column;
}
frontend/pages/ManageControlsPage/_styles.scss
+1 -1
View File
@@ -33,7 +33,7 @@
margin: 0;
margin-bottom: $pad-large;
max-width: 75%;
@media (min-width: $break-990) {
@media (min-width: $break-md) {
max-width: none;
}
frontend/pages/admin/IntegrationsPage/cards/Integrations/_styles.scss
+3 -5
View File
@@ -1,5 +1,4 @@
.integrations-management {
&__title {
padding-bottom: $pad-small;
max-width: 100%;
@@ -9,7 +8,7 @@
border-bottom: solid 1px $ui-fleet-black-10;
margin: 0 0 $pad-xxlarge;
@media (min-width: $break-990) {
@media (min-width: $break-md) {
max-width: 65%;
}
}
@@ -19,13 +18,13 @@
color: $core-fleet-black;
width: 100%;
@media (min-width: $break-990) {
@media (min-width: $break-md) {
width: 60%;
}
}
.table-container {
@media (min-width: $break-990) {
@media (min-width: $break-md) {
max-width: 65%;
}
}
@@ -118,5 +117,4 @@
width: 24px;
}
}
}
frontend/pages/admin/OrgSettingsPage/_styles.scss
+4 -4
View File
@@ -72,7 +72,7 @@
border-bottom: solid 1px $ui-fleet-black-10;
margin: 0 0 $pad-xxlarge;
@media (min-width: $break-990) {
@media (min-width: $break-md) {
max-width: 65%;
}
}
@@ -85,7 +85,7 @@
.empty-table__container {
margin: 96px 0 1.5rem;
@media (min-width: $break-990) {
@media (min-width: $break-md) {
max-width: 65%;
}
}
@@ -119,7 +119,7 @@
color: $core-fleet-black;
width: 100%;
@media (min-width: $break-990) {
@media (min-width: $break-md) {
width: 60%;
}
}
@@ -130,7 +130,7 @@
padding-right: $pad-small;
box-sizing: border-box;
@media (min-width: $break-990) {
@media (min-width: $break-md) {
width: 60%;
}
frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/_styles.scss
+1 -1
View File
@@ -26,7 +26,7 @@
width: auto;
}
@media (min-width: $break-1400) {
@media (min-width: $break-lg) {
.role__header {
border-right: 1px solid $ui-fleet-black-10;
}
frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
+1 -1
View File
@@ -49,7 +49,7 @@
text-overflow: ellipsis;
white-space: nowrap;
@media (max-width: $break-990) {
@media (max-width: $break-md) {
width: auto;
}
}
frontend/pages/hosts/details/_styles.scss
+1 -1
View File
@@ -85,7 +85,7 @@
column-gap: $pad-xxlarge;
row-gap: $pad-medium;
@media (min-width: $break-990) {
@media (min-width: $break-md) {
grid-template-columns: repeat(4, max-content);
grid-template-rows: repeat(3, 1fr);
}
frontend/pages/hosts/details/cards/Packs/_styles.scss
+2 -2
View File
@@ -16,7 +16,7 @@
display: none;
width: 0;
}
@media (min-width: $break-990) {
@media (min-width: $break-md) {
.last_run__header {
display: table-cell;
}
@@ -33,7 +33,7 @@
display: none;
width: 0;
}
@media (min-width: $break-990) {
@media (min-width: $break-md) {
.last_run__cell {
display: table-cell;
}
frontend/pages/hosts/details/cards/Software/_styles.scss
+8 -8
View File
@@ -57,7 +57,7 @@
.version__header {
width: $col-xs;
display: none;
@media (min-width: $break-880) {
@media (min-width: $break-sm) {
display: table-cell;
}
}
@@ -77,7 +77,7 @@
.linkToFilteredHosts__header {
width: 115px;
}
@media (min-width: $break-1400) {
@media (min-width: $break-lg) {
.version__header {
width: $col-md;
}
@@ -112,7 +112,7 @@
white-space: nowrap;
text-overflow: ellipsis;
display: none;
@media (min-width: $break-880) {
@media (min-width: $break-sm) {
display: table-cell;
}
}
@@ -158,7 +158,7 @@
.last_opened_at__cell {
display: none;
}
@media (min-width: $break-1400) {
@media (min-width: $break-lg) {
.source__cell {
display: table-cell;
width: $col-sm;
@@ -195,7 +195,7 @@
// table header content responsive styles
// NOTE: 990px is a custom breakpoint to deal with responsiveness of the
// table controls.
@media (max-width: 990px) {
@media (max-width: $break-md) {
thead .name__header {
width: $col-md;
min-width: 252px;
@@ -239,12 +239,12 @@
}
.data-table-block .data-table__table {
@media (min-width: $break-990) {
@media (min-width: $break-md) {
thead .version__header {
width: $col-sm;
}
}
@media (min-width: $break-1400) {
@media (min-width: $break-lg) {
thead {
.last_opened_at__header {
display: table-cell;
@@ -259,7 +259,7 @@
}
}
@media (min-width: $break-1500) {
@media (min-width: $break-xl) {
thead {
.installed_paths__header {
display: table-cell;
frontend/pages/queries/ManageQueriesPage/_styles.scss
+5 -5
View File
@@ -111,13 +111,13 @@
display: none;
width: 0;
}
@media (min-width: $break-990) {
@media (min-width: $break-md) {
.author_name__header {
display: table-cell;
width: auto;
}
}
@media (min-width: $break-1400) {
@media (min-width: $break-lg) {
.author_name__header {
width: $col-md;
}
@@ -141,7 +141,7 @@
}
}
@media (max-width: $break-990) {
@media (max-width: $break-md) {
.name__cell {
.w400 {
max-width: calc(400px - 81px);
@@ -171,12 +171,12 @@
display: none;
max-width: $col-md;
}
@media (min-width: $break-990) {
@media (min-width: $break-md) {
.author_name__cell {
display: table-cell;
}
}
@media (min-width: $break-1400) {
@media (min-width: $break-lg) {
.updated_at__cell {
display: table-cell;
}
frontend/pages/schedule/ManageSchedulePage/_styles.scss
+2 -2
View File
@@ -83,7 +83,7 @@
.actions__header {
width: auto;
}
@media (min-width: $break-1400) {
@media (min-width: $break-lg) {
.interval__header {
width: 0;
}
@@ -100,7 +100,7 @@
.actions__cell {
width: auto;
}
@media (min-width: $break-1400) {
@media (min-width: $break-lg) {
.interval_cell {
width: 0;
}
frontend/pages/software/ManageSoftwarePage/_styles.scss
+8 -8
View File
@@ -37,7 +37,7 @@
margin: 0;
margin-bottom: $pad-large;
max-width: 75%;
@media (min-width: $break-990) {
@media (min-width: $break-md) {
max-width: none;
}
@@ -97,7 +97,7 @@
.search-field__input-wrapper {
width: 100%;
}
@media (min-width: $break-768) {
@media (min-width: $break-xs) {
width: auto;
.search-field__input-wrapper {
width: 411px;
@@ -139,17 +139,17 @@
width: auto;
border-right: 0;
}
@media (min-width: $break-990) {
@media (min-width: $break-md) {
.vulnerabilities__header {
display: table-cell;
}
}
@media (min-width: $break-990) {
@media (min-width: $break-md) {
.version__header {
width: $col-md;
}
}
@media (min-width: $break-1400) {
@media (min-width: $break-lg) {
.source__header {
display: table-cell;
}
@@ -194,17 +194,17 @@
}
}
}
@media (min-width: $break-990) {
@media (min-width: $break-md) {
.version_cell {
width: $col-md;
}
}
@media (min-width: $break-990) {
@media (min-width: $break-md) {
.vulnerabilities__cell {
display: table-cell;
}
}
@media (min-width: $break-1400) {
@media (min-width: $break-lg) {
.source__cell {
display: table-cell;
}
frontend/pages/software/SoftwareDetailsPage/components/Vulnerabilities/_styles.scss
+1 -1
View File
@@ -35,7 +35,7 @@
width: $col-sm;
}
@media (max-width: $tooltip-break-1000) {
@media (max-width: $tooltip-break-md) {
.cisa_known_exploit__header {
.component__tooltip-wrapper__tip-text {
max-width: 200px; // Prevents horizontal scrolling off viewport
frontend/styles/var/breakpoints.scss
+7 -8
View File
@@ -1,8 +1,7 @@
// TODO: Rename these to xs, sm, md, lg, xl, xxl, etc.
$break-1600: 1600px;
$break-1500: 1500px;
$break-1400: 1400px;
$break-990: 990px;
$break-880: 880px;
$break-768: 768px;
$tooltip-break-1000: 1000px; // Prevents horizontal scrolling off viewport
$break-xxl: 1600px;
$break-xl: 1500px;
$break-lg: 1400px;
$break-md: 990px;
$break-sm: 880px;
$break-xs: 768px;
$tooltip-break-md: 1000px; // Prevents horizontal scrolling off viewport
frontend/styles/var/mixins.scss
+1 -1
View File
@@ -1,4 +1,4 @@
$min-width: 768px;
$min-width: $break-xs;
$medium-width: 1024px;
$desktop-width: 1200px;
$max-width: 2560px;