From 205211a9a5e7dbf3211e441351f2809ef70fa76d Mon Sep 17 00:00:00 2001
From: Torsten Dreyer <torsten@ŧ3r.de>
Date: Thu, 26 Feb 2015 16:21:21 +0100
Subject: [PATCH] Phi: responsive Mass&Balance widget layout

---
 webgui/main.js                          |  3 ++-
 webgui/topics/Aircraft/MassBalance.html | 15 +++++++++++----
 webgui/topics/Aircraft/MassBalance.js   |  2 +-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/webgui/main.js b/webgui/main.js
index c03986069..f5af4de75 100644
--- a/webgui/main.js
+++ b/webgui/main.js
@@ -9,12 +9,13 @@ require.config({
         leaflet : '3rdparty/leaflet-0.7.3/leaflet',
         text : '3rdparty/require/text',
         flot : '3rdparty/flot/jquery.flot',
+        flotresize : '3rdparty/flot/jquery.flot.resize',
         fgcommand : 'lib/fgcommand',
     }
 });
 
 require([
-        'knockout', 'jquery', 'themeswitch', 'kojqui/button'
+        'knockout', 'jquery', 'themeswitch', 'kojqui/button', 'flot'
 ], function(ko, jquery) {
 
     function KnockProps(aliases) {
diff --git a/webgui/topics/Aircraft/MassBalance.html b/webgui/topics/Aircraft/MassBalance.html
index 9dd753fe3..48bb189e5 100644
--- a/webgui/topics/Aircraft/MassBalance.html
+++ b/webgui/topics/Aircraft/MassBalance.html
@@ -24,13 +24,20 @@
 }
 
 #phi-mb-tablecolumn {
-	width: 66%;
+	min-width: 20em;
+    max-width: 30em;
+    width: 100%;
+    display: inline;
 	float: left;
+    padding-right: 1em;
 }
 
 #phi-mb-graphcolumn {
-	width: 33%;
-	float: right;
+	min-width: 300px;
+    max-width: 30em;
+    width: 100%;
+	float: left;
+    display: inline;
 }
 </style>
 <div id="phi-mb-tablecolumn">
@@ -82,7 +89,7 @@
     <div class="ui-widget">
         <div class="ui-widget-header ui-corner-all">Envelope</div>
         <div class="ui-widget-content ui-corner-all">
-            <div style="height: 200px" data-bind="flotchart: { data: envelopeData, options: envelopeOptions, hover: hover }"></div>
+            <div style="height: 300px" data-bind="flotchart: { data: envelopeData, options: envelopeOptions, hover: hover }"></div>
             <div data-bind="visible: hoverLabel">
                 <div>
                     <span data-bind="text: hoverLabel"></span> <span data-bind="text: hoverMass().toFixed(0)"></span><span>lbs</span>
diff --git a/webgui/topics/Aircraft/MassBalance.js b/webgui/topics/Aircraft/MassBalance.js
index 41041f339..a1f318e8a 100644
--- a/webgui/topics/Aircraft/MassBalance.js
+++ b/webgui/topics/Aircraft/MassBalance.js
@@ -1,5 +1,5 @@
 define([
-        'jquery', 'knockout', 'text!./MassBalance.html', 'flot', 'kojqui/slider',
+        'jquery', 'knockout', 'text!./MassBalance.html', 'flot', 'kojqui/slider', 'flotresize'
 ], function(jquery, ko, htmlString) {
 
     ko.bindingHandlers.flotchart = {