fix: panel view now wraps, no scrolling required, fixes #9746

This commit is contained in:
Torkel Ödegaard 2017-11-01 11:10:43 +01:00
parent 575f746baa
commit 894951c7d4
2 changed files with 17 additions and 29 deletions

View File

@ -3,25 +3,21 @@
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
</a> </a>
<div class="gf-form-inline dash-row-add-panel-form"> <div class="gf-form width-10">
<div class="gf-form"> <input type="text" class="gf-form-input width-10" ng-model='ctrl.panelSearch' give-focus='true' ng-keydown="ctrl.keyDown($event)" ng-change="ctrl.panelSearchChanged()" placeholder="panel search filter"></input>
<input type="text" class="gf-form-input max-width-14" ng-model='ctrl.panelSearch' give-focus='true' ng-keydown="ctrl.keyDown($event)" ng-change="ctrl.panelSearchChanged()" placeholder="panel search filter"></input> </div>
</div>
</div>
<div class="add-panel-panels-scroll"> <div class="add-panel-panels">
<div class="add-panel-panels"> <div class="add-panel-item"
<div class="add-panel-item" ng-repeat="panel in ctrl.panelHits"
ng-repeat="panel in ctrl.panelHits" ng-class="{active: $index === ctrl.activeIndex}"
ng-class="{active: $index === ctrl.activeIndex}" ng-click="ctrl.addPanel(panel)"
ng-click="ctrl.addPanel(panel)" ui-draggable="true"
ui-draggable="true" drag="panel.id"
drag="panel.id" title="{{panel.name}}">
title="{{panel.name}}"> <img class="add-panel-item-img" ng-src="{{panel.info.logos.small}}"></img>
<img class="add-panel-item-img" ng-src="{{panel.info.logos.small}}"></img> <div class="add-panel-item-name">{{panel.name}}</div>
<div class="add-panel-item-name">{{panel.name}}</div> </div>
</div> </div>
</div>
</div>
</div> </div>

View File

@ -61,6 +61,7 @@
margin: 0 $panel-margin $panel-margin*2 $panel-margin; margin: 0 $panel-margin $panel-margin*2 $panel-margin;
padding: $panel-margin*2; padding: $panel-margin*2;
display: flex; display: flex;
flex-direction: row;
} }
.dash-row-dropview-close { .dash-row-dropview-close {
@ -71,19 +72,10 @@
height: 20px; height: 20px;
} }
.add-panel-panels-scroll {
width: 100%;
overflow: auto;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none
}
}
.add-panel-panels { .add-panel-panels {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap;
} }
.add-panel-item { .add-panel-item {