mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Explore: collapsible result panels
- replace the Graph/Table buttons with toggle control in a wrapper panel - moved toggle control to left to be close to the label - removed panel styles from Logs and Graph viewer - moved loader animation to panel
This commit is contained in:
@@ -18,10 +18,39 @@
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
// Graph panel needs a bit extra padding at top
|
||||
.panel-container {
|
||||
.explore-panel {
|
||||
margin-top: $panel-margin;
|
||||
}
|
||||
|
||||
.explore-panel__body {
|
||||
padding: $panel-padding;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.explore-panel__header {
|
||||
padding: $panel-padding;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
margin-bottom: 5px;
|
||||
transition: all 0.1s linear;
|
||||
}
|
||||
|
||||
.explore-panel__header:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.explore-panel__header-label {
|
||||
font-weight: 500;
|
||||
margin-right: $panel-margin;
|
||||
font-size: $font-size-h6;
|
||||
box-shadow: $text-shadow-faint;
|
||||
}
|
||||
|
||||
.explore-panel__header-buttons {
|
||||
margin-right: $panel-margin;
|
||||
font-size: $font-size-lg;
|
||||
line-height: $font-size-h6;
|
||||
}
|
||||
|
||||
// Make sure wrap buttons around on small screens
|
||||
@@ -91,11 +120,16 @@
|
||||
height: 2px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: $text-color-faint;
|
||||
background: none;
|
||||
margin: $panel-margin / 2;
|
||||
transition: background-color 1s ease;
|
||||
}
|
||||
|
||||
.explore-panel__loader:after {
|
||||
.explore-panel__loader--active {
|
||||
background: $text-color-faint;
|
||||
}
|
||||
|
||||
.explore-panel__loader--active:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 25%;
|
||||
@@ -221,17 +255,18 @@
|
||||
|
||||
.logs-controls {
|
||||
display: flex;
|
||||
background-color: $page-bg;
|
||||
padding: $panel-padding;
|
||||
padding-top: 10px;
|
||||
border-radius: $border-radius;
|
||||
margin: 2*$panel-margin 0;
|
||||
border: $panel-border;
|
||||
|
||||
> * {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.logs-options,
|
||||
.logs-graph {
|
||||
margin-bottom: $panel-margin;
|
||||
}
|
||||
|
||||
.logs-meta {
|
||||
flex: 1;
|
||||
color: $text-color-weak;
|
||||
|
||||
Reference in New Issue
Block a user