1
0
Fork 0

Phi: responsive Mass&Balance widget layout

This commit is contained in:
Torsten Dreyer 2015-02-26 16:21:21 +01:00
parent 12eb1c1e5f
commit 205211a9a5
3 changed files with 14 additions and 6 deletions

View file

@ -9,12 +9,13 @@ require.config({
leaflet : '3rdparty/leaflet-0.7.3/leaflet', leaflet : '3rdparty/leaflet-0.7.3/leaflet',
text : '3rdparty/require/text', text : '3rdparty/require/text',
flot : '3rdparty/flot/jquery.flot', flot : '3rdparty/flot/jquery.flot',
flotresize : '3rdparty/flot/jquery.flot.resize',
fgcommand : 'lib/fgcommand', fgcommand : 'lib/fgcommand',
} }
}); });
require([ require([
'knockout', 'jquery', 'themeswitch', 'kojqui/button' 'knockout', 'jquery', 'themeswitch', 'kojqui/button', 'flot'
], function(ko, jquery) { ], function(ko, jquery) {
function KnockProps(aliases) { function KnockProps(aliases) {

View file

@ -24,13 +24,20 @@
} }
#phi-mb-tablecolumn { #phi-mb-tablecolumn {
width: 66%; min-width: 20em;
max-width: 30em;
width: 100%;
display: inline;
float: left; float: left;
padding-right: 1em;
} }
#phi-mb-graphcolumn { #phi-mb-graphcolumn {
width: 33%; min-width: 300px;
float: right; max-width: 30em;
width: 100%;
float: left;
display: inline;
} }
</style> </style>
<div id="phi-mb-tablecolumn"> <div id="phi-mb-tablecolumn">
@ -82,7 +89,7 @@
<div class="ui-widget"> <div class="ui-widget">
<div class="ui-widget-header ui-corner-all">Envelope</div> <div class="ui-widget-header ui-corner-all">Envelope</div>
<div class="ui-widget-content ui-corner-all"> <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 data-bind="visible: hoverLabel">
<div> <div>
<span data-bind="text: hoverLabel"></span> <span data-bind="text: hoverMass().toFixed(0)"></span><span>lbs</span> <span data-bind="text: hoverLabel"></span> <span data-bind="text: hoverMass().toFixed(0)"></span><span>lbs</span>

View file

@ -1,5 +1,5 @@
define([ define([
'jquery', 'knockout', 'text!./MassBalance.html', 'flot', 'kojqui/slider', 'jquery', 'knockout', 'text!./MassBalance.html', 'flot', 'kojqui/slider', 'flotresize'
], function(jquery, ko, htmlString) { ], function(jquery, ko, htmlString) {
ko.bindingHandlers.flotchart = { ko.bindingHandlers.flotchart = {