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

packages/grafana-ui/src/components/RefreshPicker/_RefreshPicker.scss

@@ -30,7 +30,7 @@
     }
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(sm) {
     display: block;
   }
 }

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",

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',
   },

public/app/features/explore/ExploreToolbar.tsx

@@ -38,9 +38,9 @@ const createResponsiveButton = (options: {
 
   return (
     <button className={`btn navbar-button ${buttonClassName ? buttonClassName : ''}`} onClick={onClick}>
-      {iconClassName && iconSide === IconSide.left ? <i className={`${iconClassName} icon-margin-right`} /> : null}
+      {iconClassName && iconSide === IconSide.left ? <i className={`${iconClassName}`} /> : null}
       <span className="btn-title">{!splitted ? title : ''}</span>
-      {iconClassName && iconSide === IconSide.right ? <i className={`${iconClassName} icon-margin-left`} /> : null}
+      {iconClassName && iconSide === IconSide.right ? <i className={`${iconClassName}`} /> : null}
     </button>
   );
 };
@@ -172,7 +172,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
             </div>
 
             <div className="explore-toolbar-content-item">
-              <button className="btn navbar-button navbar-button--no-icon" onClick={this.onClearAll}>
+              <button className="btn navbar-button" onClick={this.onClearAll}>
                 Clear All
               </button>
             </div>

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;

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) {
+    @include media-breakpoint-up(lg) {
-      display: none;
+      display: inline-block;
     }
   }
 }
@@ -170,17 +180,11 @@
   &--secondary {
     @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
   }
-}
 
-@include media-breakpoint-up(sm) {
+  @include media-breakpoint-down(lg) {
-  .navbar {
+    .btn-title {
-    padding-left: 20px;
+      margin-left: $space-xs;
-    margin-left: 0;
+      display: none;
-  }
-
-  .navbar-page-btn {
-    .gicon {
-      display: inline-block;
     }
   }
 }

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;
   }

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 {

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;
 }