Skip to content

N
nexpie-grafana-theme
Commit e3876266 by Torkel Ödegaard Committed by GitHub
Options

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
parent e694fd8f
Showing with 37 additions and 47 deletions
packages/grafana-ui/src/components/RefreshPicker/_RefreshPicker.scss
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
} }
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(sm) {
display: block; 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`] = ` ...@@ -109,7 +109,7 @@ exports[`Render should render with base threshold 1`] = `
}, },
"breakpoints": Object { "breakpoints": Object {
"lg": "992px", "lg": "992px",
"md": "768px", "md": "769px",
"sm": "544px", "sm": "544px",
"xl": "1200px", "xl": "1200px",
"xs": "0", "xs": "0",
...@@ -272,7 +272,7 @@ exports[`Render should render with base threshold 1`] = ` ...@@ -272,7 +272,7 @@ exports[`Render should render with base threshold 1`] = `
}, },
"breakpoints": Object { "breakpoints": Object {
"lg": "992px", "lg": "992px",
"md": "768px", "md": "769px",
"sm": "544px", "sm": "544px",
"xl": "1200px", "xl": "1200px",
"xs": "0", "xs": "0",
......
packages/grafana-ui/src/themes/default.ts
...@@ -42,7 +42,7 @@ const theme: GrafanaThemeCommons = { ...@@ -42,7 +42,7 @@ const theme: GrafanaThemeCommons = {
breakpoints: { breakpoints: {
xs: '0', xs: '0',
sm: '544px', sm: '544px',
md: '768px', md: '769px', // 1 more than regular ipad in portrait
lg: '992px', lg: '992px',
xl: '1200px', xl: '1200px',
}, },
......
public/app/features/explore/ExploreToolbar.tsx
...@@ -38,9 +38,9 @@ const createResponsiveButton = (options: { ...@@ -38,9 +38,9 @@ const createResponsiveButton = (options: {
return ( return (
<button className={`btn navbar-button ${buttonClassName ? buttonClassName : ''}`} onClick={onClick}> <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> <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> </button>
); );
}; };
...@@ -172,7 +172,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> { ...@@ -172,7 +172,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
</div> </div>
<div className="explore-toolbar-content-item"> <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 Clear All
</button> </button>
</div> </div>
......
public/sass/_variables.generated.scss
...@@ -67,7 +67,7 @@ $spacers: ( ...@@ -67,7 +67,7 @@ $spacers: (
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
sm: 544px, sm: 544px,
md: 768px, md: 769px,
lg: 992px, lg: 992px,
xl: 1200px, xl: 1200px,
) !default; ) !default;
......
public/sass/components/_navbar.scss
...@@ -9,6 +9,11 @@ ...@@ -9,6 +9,11 @@
transition-duration: 350ms; transition-duration: 350ms;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
transition-property: box-shadow, border-bottom; transition-property: box-shadow, border-bottom;
@include media-breakpoint-up(md) {
padding-left: $dashboard-padding;
margin-left: 0;
}
} }
@mixin navbar-alt-look() { @mixin navbar-alt-look() {
...@@ -75,13 +80,18 @@ ...@@ -75,13 +80,18 @@
opacity: 0.75; opacity: 0.75;
margin-right: 10px; margin-right: 10px;
display: none; display: none;
@include media-breakpoint-up(md) {
display: inline-block;
}
} }
&--folder { &--folder {
color: $text-color-weak; 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 @@ ...@@ -170,17 +180,11 @@
&--secondary { &--secondary {
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl); @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 @@ ...@@ -262,7 +262,7 @@
background: $panel-bg; background: $panel-bg;
} }
@include media-breakpoint-up(sm) { @include media-breakpoint-up(md) {
.search-container { .search-container {
left: $side-menu-width; left: $side-menu-width;
} }
......
public/sass/components/_sidemenu.scss
$mobile-menu-breakpoint: md;
.sidemenu { .sidemenu {
position: fixed; position: fixed;
display: flex; display: flex;
...@@ -17,7 +19,7 @@ ...@@ -17,7 +19,7 @@
display: none; display: none;
} }
@include media-breakpoint-up(sm) { @include media-breakpoint-up($mobile-menu-breakpoint) {
background: $side-menu-bg; background: $side-menu-bg;
height: auto; height: auto;
box-shadow: $side-menu-shadow; box-shadow: $side-menu-shadow;
...@@ -46,7 +48,7 @@ ...@@ -46,7 +48,7 @@
.sidemenu__bottom { .sidemenu__bottom {
display: none; display: none;
@include media-breakpoint-up(sm) { @include media-breakpoint-up($mobile-menu-breakpoint) {
display: block; display: block;
} }
} }
...@@ -55,7 +57,7 @@ ...@@ -55,7 +57,7 @@
position: relative; position: relative;
@include left-brand-border(); @include left-brand-border();
@include media-breakpoint-up(sm) { @include media-breakpoint-up($mobile-menu-breakpoint) {
&.active, &.active,
&:hover { &:hover {
background-color: $side-menu-item-hover-bg; background-color: $side-menu-item-hover-bg;
...@@ -214,10 +216,10 @@ li.sidemenu-org-switcher { ...@@ -214,10 +216,10 @@ li.sidemenu-org-switcher {
} }
} }
@include media-breakpoint-down(xs) { @include media-breakpoint-down(sm) {
.sidemenu-open--xs { .sidemenu-open--xs {
li { li {
font-size: $font-size-lg; font-size: $font-size-md;
} }
.sidemenu { .sidemenu {
...@@ -283,7 +285,6 @@ li.sidemenu-org-switcher { ...@@ -283,7 +285,6 @@ li.sidemenu-org-switcher {
position: unset; position: unset;
width: 100%; width: 100%;
float: none; float: none;
margin-top: $space-sm;
margin-bottom: $space-sm; margin-bottom: $space-sm;
> li > a { > li > a {
......
public/sass/pages/_explore.scss
...@@ -31,11 +31,15 @@ ...@@ -31,11 +31,15 @@
flex-flow: row wrap; flex-flow: row wrap;
justify-content: flex-start; justify-content: flex-start;
height: auto; height: auto;
padding: 0 $dashboard-padding; padding: 0 $dashboard-padding 0 50px;
border-bottom: 1px solid #0000; border-bottom: 1px solid #0000;
transition-duration: 0.35s; transition-duration: 0.35s;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
transition-property: box-shadow, border-bottom; transition-property: box-shadow, border-bottom;
@include media-breakpoint-up(md) {
padding-left: $dashboard-padding;
}
} }
.explore-toolbar-item { .explore-toolbar-item {
...@@ -66,11 +70,6 @@ ...@@ -66,11 +70,6 @@
min-height: 55px; min-height: 55px;
line-height: 55px; line-height: 55px;
justify-content: space-between; justify-content: space-between;
margin-left: $space-xl;
}
.explore-toolbar-header {
justify-content: space-between;
align-items: center; align-items: center;
} }
...@@ -126,12 +125,6 @@ ...@@ -126,12 +125,6 @@
} }
} }
@media only screen and (max-width: 803px) {
.btn-title {
display: none;
}
}
@media only screen and (max-width: 702px) { @media only screen and (max-width: 702px) {
.explore-toolbar-content-item:first-child { .explore-toolbar-content-item:first-child {
padding-left: 2px; padding-left: 2px;
...@@ -139,14 +132,6 @@ ...@@ -139,14 +132,6 @@
} }
} }
@media only screen and (max-width: 544px) {
.explore-toolbar-header-title {
.navbar-page-btn {
margin-left: $dashboard-padding;
}
}
}
.explore { .explore {
flex: 1 1 auto; flex: 1 1 auto;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment