Improve general page layout so the side-panel isn't so horrifically w…

…ide when the window is wide :-)
hawtio · Dec 9, 2013 · 39a0420 · 39a0420
1 parent 2620260
commit 39a0420
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 36 deletions.
diff --git a/hawtio-web/src/main/webapp/app/wiki/html/camelCanvas.html b/hawtio-web/src/main/webapp/app/wiki/html/camelCanvas.html
@@ -178,50 +178,54 @@
       </form>
     </div>
 
-    <div class="panes">
-      <div class="left-pane pull-left">
-        <div class="camel-viewport camel-canvas gridStyle">
+    <div class="panes gridStyle">
+      <div class="left-pane">
+        <div class="camel-viewport camel-canvas">
           <div style="position: relative;" class="canvas"></div>
         </div>
       </div>
-      <div class="right-pane pull-right">
+      <div class="right-pane">
         <div class="camel-props">
           <div class="button-bar">
             <button class="btn pull-right" ng-click="updatePropertiesAndCloseDialog()">Apply</button>
           </div>
+          <div class="prop-viewport">
+
+            <div>
+              <!-- pattern form -->
+              <div ng-show="!selectedEndpoint">
+                <div simple-form
+                     name="formEditor"
+                     entity='nodeData'
+                     data='nodeModel'
+                     schema="schema"
+                     onsubmit="updatePropertiesAndCloseDialog"></div>
+              </div>
 
-          <div ng-show="!selectedEndpoint">
-            <!-- pattern form -->
-            <div simple-form
-                 name="formEditor"
-                 entity='nodeData'
-                 data='nodeModel'
-                 schema="schema"
-                 onsubmit="updatePropertiesAndCloseDialog"></div>
-          </div>
-          <div class="endpoint-props" ng-show="selectedEndpoint">
-            <p>Endpoint</p>
-            <!-- endpoint form -->
-            <div class="control-group">
-              <label class="control-label" for="endpointPath">URI:</label>
-
-              <div class="controls">
-                <input id="endpointPath" class="span10" type="text" ng-model="endpointPath" placeholder="name"
-                       typeahead="title for title in endpointCompletions($viewValue) | filter:$viewValue"
-                       typeahead-editable='true'
-                       min-length="1">
+              <!-- endpoint form -->
+              <div class="endpoint-props" ng-show="selectedEndpoint">
+                <p>Endpoint</p>
+                <div class="control-group">
+                  <label class="control-label" for="endpointPath">URI:</label>
+
+                  <div class="controls">
+                    <input id="endpointPath" class="span10" type="text" ng-model="endpointPath" placeholder="name"
+                           typeahead="title for title in endpointCompletions($viewValue) | filter:$viewValue"
+                           typeahead-editable='true'
+                           min-length="1">
+                  </div>
+                </div>
+                <div simple-form
+                     name="formEditor"
+                     entity='endpointParameters'
+                     data='endpointSchema'
+                     schema="schema"
+                     onsubmit="updatePropertiesAndCloseDialog"></div>
               </div>
+
             </div>
-            <div simple-form
-                 name="formEditor"
-                 entity='endpointParameters'
-                 data='endpointSchema'
-                 schema="schema"
-                 onsubmit="updatePropertiesAndCloseDialog"></div>
           </div>
-
         </div>
-
       </div>
     </div>
   </div>

diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -3130,26 +3130,39 @@ tabset > .tabbable > .tab-content > .nav.nav-tabs > li.disabled {
   z-index: 25;
 }
 
+.panes {
+  position: relative;
+  display: block;
+  min-height: 100%;
+}
+
 .panes > .left-pane {
-  display: inline-block;
-  width: 70%;
+  position: absolute;
+  left: 0;
+  right: 285px;
+  height: 100%;
 }
 
 .panes > .right-pane {
-  display: inline-block;
-  width: 29%;
+  position: absolute;
+  right: 0;
+  width: 275px;
+  height: 100%;
 }
 
 .camel-viewport {
   overflow: auto;
+  height: 100%;
 }
 
+
 .camel-canvas-endpoint svg circle {
   fill: #346789;
 }
 
 .camel-props {
   position: relative;
+  height: 100%;
 }
 
 .camel-props > .button-bar {
@@ -3159,6 +3172,15 @@ tabset > .tabbable > .tab-content > .nav.nav-tabs > li.disabled {
   position: absolute;
 }
 
+.camel-props > .prop-viewport {
+  overflow-y: auto;
+  overflow-x: visible;
+  position: absolute;
+  bottom: 0;
+  top: 40px;
+  width: 100%;
+}
+
 .camel-props form > fieldset > legend {
   font-size: medium;
   font-weight: bold;