IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: fixes toolbars datasource selector and date picker responsiveness (#19718)

Browse Source 
* Explore: fixes toolbars datasource selector and date picker responsiveness

* Explore: updates grafana UI time picker component - adds a class on long date

* Explore: updates styles for responsive long date without split

* Explore: adds styles for responsive time picker with long date during split

* Explore: updates long datetime detector to isDateTime, renames isAbsolute to hasAbsolute

* Explore: updates datasource responsiveness

* Explore: moves time picker styles

* Explore: updates datasource picker and select component responsiveness

* Explore: updates data source picker

* Explore: updates explore toolbar to use container width

* Explore: updates styles for datasource picker

* Explore: updates Grafana UI elements - select and single value with an ability to hide text

* Explore: updates time picker styles

* Explore: updates datasource select and date picker

* Explore: updates toolbar elements margin

* Explore: updates toolbar elements split breakpoints

* Explore: updates datasource picker label length with substrings

* Explore: updates the datasource picker label length

* Explore: removes refresh picker hide media query

* Explore: updates refresh picker style query to use xs breakpoint
This commit is contained in:
Lukas Siatka
2019-11-06 20:19:50 +01:00
committed by David
parent 08f7edbf5a
commit a79f5980d3
10 changed files with 59 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
public/sass/pages/_explore.scss
View File

@@ -14,15 +14,18 @@
}
}
.datasource-picker {
.ds-picker {
min-width: 200px;
max-width: 200px;
.explore-ds-picker {
min-width: 200px;
max-width: 300px;
}
.gf-form-select-box__img-value {
max-width: 150px;
overflow: hidden;
}
.explore-ds-picker--small {
min-width: 60px;
max-width: 60px;
.ds-picker {
min-width: 60px;
max-width: 60px;
}
}
@@ -138,7 +141,7 @@
}
}
@media only screen and (max-width: 788px) {
@media only screen and (max-width: 897px) {
.explore-toolbar {
.explore-toolbar-content-item {
.navbar-button span {
@@ -148,10 +151,14 @@
}
}
@media only screen and (max-width: 702px) {
.explore-toolbar-content-item:first-child {
padding-left: 2px;
margin-right: 0;
@media only screen and (max-width: 810px) {
.explore-toolbar {
.explore-toolbar-content-item {
&:first-child {
padding-left: 2px;
margin: 0 12px 0 16px;
}
}
}
}