From e38762665b7647297e80692ac185871db378dfb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 26 Apr 2019 19:16:03 +0200 Subject: [PATCH] UX: Improve Grafana usage for smaller screens (#16783) * Mobile: Switch to mobile view already at md or lower breakpoint * UX: Tweaked breakpoint so that media-breakpoint-up(md) will only apply to screens larger than normal ipad * Updated snapshots --- .../RefreshPicker/_RefreshPicker.scss | 2 +- .../ThresholdsEditor.test.tsx.snap | 4 +-- packages/grafana-ui/src/themes/default.ts | 2 +- .../app/features/explore/ExploreToolbar.tsx | 6 ++-- public/sass/_variables.generated.scss | 2 +- public/sass/components/_navbar.scss | 28 +++++++++++-------- public/sass/components/_search.scss | 2 +- public/sass/components/_sidemenu.scss | 13 +++++---- public/sass/pages/_explore.scss | 25 ++++------------- 9 files changed, 37 insertions(+), 47 deletions(-) diff --git a/packages/grafana-ui/src/components/RefreshPicker/_RefreshPicker.scss b/packages/grafana-ui/src/components/RefreshPicker/_RefreshPicker.scss index 7d922324dc5..bfa67d87582 100644 --- a/packages/grafana-ui/src/components/RefreshPicker/_RefreshPicker.scss +++ b/packages/grafana-ui/src/components/RefreshPicker/_RefreshPicker.scss @@ -30,7 +30,7 @@ } } - @include media-breakpoint-up(md) { + @include media-breakpoint-up(sm) { display: block; } } diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap index 09596e066dd..faa59ddb046 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap +++ b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap @@ -109,7 +109,7 @@ exports[`Render should render with base threshold 1`] = ` }, "breakpoints": Object { "lg": "992px", - "md": "768px", + "md": "769px", "sm": "544px", "xl": "1200px", "xs": "0", @@ -272,7 +272,7 @@ exports[`Render should render with base threshold 1`] = ` }, "breakpoints": Object { "lg": "992px", - "md": "768px", + "md": "769px", "sm": "544px", "xl": "1200px", "xs": "0", diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index dadaa2769ef..4a0e42312b7 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -42,7 +42,7 @@ const theme: GrafanaThemeCommons = { breakpoints: { xs: '0', sm: '544px', - md: '768px', + md: '769px', // 1 more than regular ipad in portrait lg: '992px', xl: '1200px', }, diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx index 4222b000eb9..0ee34958f4f 100644 --- a/public/app/features/explore/ExploreToolbar.tsx +++ b/public/app/features/explore/ExploreToolbar.tsx @@ -38,9 +38,9 @@ const createResponsiveButton = (options: { return ( ); }; @@ -172,7 +172,7 @@ export class UnConnectedExploreToolbar extends PureComponent {
-
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss index 16277534f2b..510e5649974 100644 --- a/public/sass/_variables.generated.scss +++ b/public/sass/_variables.generated.scss @@ -67,7 +67,7 @@ $spacers: ( $grid-breakpoints: ( xs: 0, sm: 544px, - md: 768px, + md: 769px, lg: 992px, xl: 1200px, ) !default; diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 0128defe161..8c950f72859 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -9,6 +9,11 @@ transition-duration: 350ms; transition-timing-function: ease-in-out; transition-property: box-shadow, border-bottom; + + @include media-breakpoint-up(md) { + padding-left: $dashboard-padding; + margin-left: 0; + } } @mixin navbar-alt-look() { @@ -75,13 +80,18 @@ opacity: 0.75; margin-right: 10px; display: none; + + @include media-breakpoint-up(md) { + display: inline-block; + } } &--folder { color: $text-color-weak; + display: none; - @include media-breakpoint-down(md) { - display: none; + @include media-breakpoint-up(lg) { + display: inline-block; } } } @@ -170,17 +180,11 @@ &--secondary { @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl); } -} -@include media-breakpoint-up(sm) { - .navbar { - padding-left: 20px; - margin-left: 0; - } - - .navbar-page-btn { - .gicon { - display: inline-block; + @include media-breakpoint-down(lg) { + .btn-title { + margin-left: $space-xs; + display: none; } } } diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 0e800892619..196075d20b5 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -262,7 +262,7 @@ background: $panel-bg; } -@include media-breakpoint-up(sm) { +@include media-breakpoint-up(md) { .search-container { left: $side-menu-width; } diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 7e68ed8d341..334378036c3 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -1,3 +1,5 @@ +$mobile-menu-breakpoint: md; + .sidemenu { position: fixed; display: flex; @@ -17,7 +19,7 @@ display: none; } - @include media-breakpoint-up(sm) { + @include media-breakpoint-up($mobile-menu-breakpoint) { background: $side-menu-bg; height: auto; box-shadow: $side-menu-shadow; @@ -46,7 +48,7 @@ .sidemenu__bottom { display: none; - @include media-breakpoint-up(sm) { + @include media-breakpoint-up($mobile-menu-breakpoint) { display: block; } } @@ -55,7 +57,7 @@ position: relative; @include left-brand-border(); - @include media-breakpoint-up(sm) { + @include media-breakpoint-up($mobile-menu-breakpoint) { &.active, &:hover { background-color: $side-menu-item-hover-bg; @@ -214,10 +216,10 @@ li.sidemenu-org-switcher { } } -@include media-breakpoint-down(xs) { +@include media-breakpoint-down(sm) { .sidemenu-open--xs { li { - font-size: $font-size-lg; + font-size: $font-size-md; } .sidemenu { @@ -283,7 +285,6 @@ li.sidemenu-org-switcher { position: unset; width: 100%; float: none; - margin-top: $space-sm; margin-bottom: $space-sm; > li > a { diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index c7bea01df4c..fd0a14193ab 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -31,11 +31,15 @@ flex-flow: row wrap; justify-content: flex-start; height: auto; - padding: 0 $dashboard-padding; + padding: 0 $dashboard-padding 0 50px; border-bottom: 1px solid #0000; transition-duration: 0.35s; transition-timing-function: ease-in-out; transition-property: box-shadow, border-bottom; + + @include media-breakpoint-up(md) { + padding-left: $dashboard-padding; + } } .explore-toolbar-item { @@ -65,11 +69,6 @@ font-size: 18px; min-height: 55px; line-height: 55px; - justify-content: space-between; - margin-left: $space-xl; -} - -.explore-toolbar-header { justify-content: space-between; align-items: center; } @@ -126,12 +125,6 @@ } } -@media only screen and (max-width: 803px) { - .btn-title { - display: none; - } -} - @media only screen and (max-width: 702px) { .explore-toolbar-content-item:first-child { padding-left: 2px; @@ -139,14 +132,6 @@ } } -@media only screen and (max-width: 544px) { - .explore-toolbar-header-title { - .navbar-page-btn { - margin-left: $dashboard-padding; - } - } -} - .explore { flex: 1 1 auto; }