Revize db86add3

Rework on sidebar - now scrollable with minimap on top not moving (refs #7602)

sources/imiger-core/src/main/webapp/css/customStyles.css

@@ -67 +67 @@
 
 .sidebar {
     width: 100%;
-    overflow: auto;
+    display:block;
+    height:100%;
+    background-color: #e8f4ff !important;
 }
 
 .viewport, .graph-content {
@@ -80 +82 @@
 }
 
 .timeline-container {
-    height: 300px;
+    height: 30%;
+}
+
+#app {
+    height: 70%;
 }
 
 .full-width {
@@ -132 +138 @@
 }
 
 .sidebar-bottom {
-    bottom: 115px;
-    width: 100%;
-    position: absolute;
     background-color: #f5f5f5;
+}
+
+.unconnected-nodes {
+    height: auto;
+    max-height: 40%;
+    overflow-y: auto;
+}
+
+.excluded-nodes {
+    height: auto;
+    max-height: 40%;
+    overflow-y: auto;
+}
+
+div.content {
+    height: calc(100vh - 104px);
 }

sources/imiger-core/src/main/webapp/js/components/sidebar.js

@@ -18 +18 @@
 			class: 'sidebar',
 			id: 'sidebar',
 		}, [
-			this.unconnectedNodeListComponent.render(),
-			this.excludedNodeListComponent.render(),
+
 			DOM.h('div', {
-				class: 'sidebar-bottom affix-bottom',
+				class: 'sidebar-bottom',
 			}, [
 				this.minimapComponent.render(),
 				this.statusBarComponent.render(),
 			]),
+			this.unconnectedNodeListComponent.render(),
+			this.excludedNodeListComponent.render(),
 		]);
 
 		return this._rootElement;

sources/imiger-core/src/main/webapp/showGraph.jsp

@@ -122 +122 @@
 		<div class="container-fluid full-width no-margin full-height">
 			<div id="header" class="header"></div>
 			<div id="navbar" class="navbar p-0"></div>
-            <div class="container-fluid full-width no-margin full-height">
+            <div class="container-fluid full-width no-margin content">
                 <div class="row full-height">
-                    <div class="col-xs-10 p-0 no-margin" style="margin-righ:30px">
+                    <div class="col-xs-10 p-0 no-margin full-height" style="margin-righ:30px">
                         <c:if test = "${sessionScope.showTimeline eq true}">
                             <div class="row container-fluid timeline-container" style="">
                                 <div class="timeline-pane">
@@ -132 +132 @@
                                 </div>
                             </div>
                         </c:if>
-                        <div id="app" class="row full-height no-margin"></div>
+                        <div id="app" class="row no-margin"></div>
                     </div>
 
                     <div class="col-xs-2 p-0 no-margin d-flex" id="sidebar-container">