Phi: responsive Mass&Balance widget layout
This commit is contained in:
parent
12eb1c1e5f
commit
205211a9a5
3 changed files with 14 additions and 6 deletions
|
@ -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) {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 = {
|
||||||
|
|
Loading…
Add table
Reference in a new issue