diff --git a/vipra-ui/app/html/explorer.html b/vipra-ui/app/html/explorer.html index 6e5dd6286effe22d866d7bba9351e0a98ad2c7e6..e9c7bbf523d3d99fd9bdf1fca90fe1e955796a32 100644 --- a/vipra-ui/app/html/explorer.html +++ b/vipra-ui/app/html/explorer.html @@ -1,6 +1,6 @@ <div class="fullsize navpadding container-fluid explorer" ng-cloak ng-hide="!rootModels.topicModel || state.name !== 'explorer'"> <div class="row row-50"> - <div class="col-xs-3 col-md-2 sidebar"> + <div class="sidebar"> <div class="btn-group btn-group-justified" role="group" aria-label="..."> <a tabindex="0" class="btn btn-sm btn-default" ng-click="checkTopics(true)" title="Select all topics">All</a> <a tabindex="0" class="btn btn-sm btn-default" ng-click="checkTopics(false)" title="Deselect all topics">None</a> @@ -40,7 +40,7 @@ </li> </ul> </div> - <div class="col-xs-9 col-md-10 center"> + <div class="center"> <div class="wrapper"> <div class="topbar"> <small>Values:</small> @@ -70,7 +70,7 @@ </div> </div> <div class="row row-50"> - <div class="col-xs-3 col-md-2 sidebar"> + <div class="sidebar"> <ul class="list-unstyled topic-choice no-offset"> <li ng-repeat="topic in selectedTopics = (topics | filter: {selected: true} | orderBy:explorerModels.sorttopics:explorerModels.sortdir)" ng-mouseenter="highlightSeries(topic.id, true)" ng-mouseleave="highlightSeries(topic.id, false)" ng-class="{active:explorerModels.activeTopic.id===topic.id}" class="pointer text-muted"> <div class="radio radio-condensed"> @@ -90,7 +90,7 @@ </li> </ul> </div> - <div class="col-xs-9 col-md-10 center"> + <div class="center"> <div class="wrapper"> <div class="topbar"> <small>Sequence:</small> diff --git a/vipra-ui/app/less/app.less b/vipra-ui/app/less/app.less index e3d94c6826c5c14406b545fa022a1bd438b55c57..bb1ff9da9152ce106d2fc8cde789aa1260b7b801 100644 --- a/vipra-ui/app/less/app.less +++ b/vipra-ui/app/less/app.less @@ -250,17 +250,22 @@ a:hover { .explorer { @sidebar-padding: 5px; + @sidebar-width: 250px; .sidebar { background: #f9f9f9; padding: @sidebar-padding; height: 100%; + position: absolute; + width: @sidebar-width; + z-index: 1; > * + * { margin-top: 5px; } } .center { - padding: 0; + padding: 0 0 0 @sidebar-width; height: 100%; + width: 100%; } .chart { padding: 15px; @@ -282,14 +287,14 @@ a:hover { right: @sidebar-padding; overflow-y: auto; margin-bottom: 0; - .ellipsis { - padding-right: 15px; - } - li { + > li { position: relative; height: 21px; margin-top: 1px; } + .ellipsis { + padding-right: 15px; + } label { margin: 0; font-weight: normal; @@ -547,6 +552,7 @@ entity-menu { .row-50 { height: 50%; + position: relative; & + & { border-top: 1px solid #ddd;