Commit 83021709 by Rashid Khan

More efficient loading of setting panels and improved layuout

parent 072eda28
...@@ -8,5 +8,6 @@ define([ ...@@ -8,5 +8,6 @@ define([
'./ngModelOnBlur', './ngModelOnBlur',
'./tip', './tip',
'./confirmClick', './confirmClick',
'./esVersion' './esVersion',
'./configModal'
], function () {}); ], function () {});
\ No newline at end of file
define([
'angular',
'app',
],
function (angular) {
'use strict';
angular
.module('kibana.directives')
.directive('configModal', function($modal,$q) {
return {
restrict: 'A',
link: function(scope, elem) {
// create a new modal. Can't reuse one modal unforunately as the directive will not
// re-render on show.
elem.bind('click',function(){
var panelModal = $modal({
template: './app/partials/paneleditor.html',
persist: true,
show: false,
scope: scope,
keyboard: false
});
// and show it
$q.when(panelModal).then(function(modalEl) {
modalEl.modal('show');
});
scope.$apply();
});
}
};
});
});
\ No newline at end of file
...@@ -36,7 +36,7 @@ function (angular) { ...@@ -36,7 +36,7 @@ function (angular) {
'</span>' + '</span>' +
'<span class="row-button extra" ng-show="panel.editable != false">' + '<span class="row-button extra" ng-show="panel.editable != false">' +
'<span bs-modal="\'app/partials/paneleditor.html\'" class="pointer">'+ '<span config-modal class="pointer">'+
'<i class="icon-cog pointer" bs-tooltip="\'Configure\'"></i></span>'+ '<i class="icon-cog pointer" bs-tooltip="\'Configure\'"></i></span>'+
'</span>' + '</span>' +
......
<div class="row-fluid"> <div class="editor-row">
<div class="span4"> <div class="editor-option">
<form> <form>
<h6>Coordinate Field <tip>geoJSON array! Long,Lat NOT Lat,Long</tip></h6> <h6>Coordinate Field <tip>geoJSON array! Long,Lat NOT Lat,Long</tip></h6>
<input bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.field"> <input bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.field">
</form> </form>
</div> </div>
<div class="span4"> <div class="editor-option">
<form> <form>
<h6>Tooltip Field</h6> <h6>Tooltip Field</h6>
<input bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.tooltip"> <input bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.tooltip">
</form> </form>
</div> </div>
<div class="span2"><h6>Max Points</h6> <div class="editor-option"><h6>Max Points</h6>
<input type="number" class="input-small" ng-model="panel.size"> <input type="number" class="input-small" ng-model="panel.size">
</div> </div>
</div> </div>
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
</div> </div>
<div class="editor-option" ng-show="panel.mode != 'count'"> <div class="editor-option" ng-show="panel.mode != 'count'">
<label class="small">Value Field <tip>This field must contain a numeric value</tip></label> <label class="small">Value Field <tip>This field must contain a numeric value</tip></label>
<input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-large" ng-model="panel.value_field"> <input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-medium" ng-model="panel.value_field">
</div> </div>
</div> </div>
<div class="section"> <div class="section">
...@@ -23,26 +23,26 @@ ...@@ -23,26 +23,26 @@
<label class="small">Derivative <tip>Plot the change per interval in the series</tip></label><input type="checkbox" ng-model="panel.derivative" ng-checked="panel.derivative" ng-change="set_refresh(true)"> <label class="small">Derivative <tip>Plot the change per interval in the series</tip></label><input type="checkbox" ng-model="panel.derivative" ng-checked="panel.derivative" ng-change="set_refresh(true)">
</div> </div>
</div> </div>
</div> <div class="section">
<h5>Time Options</h5> <h5>Time Options</h5>
<div class="editor-row"> <div class="editor-option">
<div class="editor-option"> <label class="small">Time Field</label>
<label class="small">Time Field</label> <input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.time_field">
<input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.time_field"> </div>
</div> <div class="editor-option">
<div class="editor-option"> <label class="small">Time correction</label>
<label class="small">Time correction</label> <select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
<select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select> </div>
</div> <div class="editor-option">
<div class="editor-option"> <label class="small">Auto-interval</label><input type="checkbox" ng-model="panel.auto_int" ng-checked="panel.auto_int" />
<label class="small">Auto-interval</label><input type="checkbox" ng-model="panel.auto_int" ng-checked="panel.auto_int" /> </div>
</div> <div class="editor-option" ng-show='panel.auto_int'>
<div class="editor-option" ng-show='panel.auto_int'> <label class="small">Resolution <tip>Shoot for this many data points, rounding to sane intervals</tip></label>
<label class="small">Resolution <tip>Shoot for this many data points, rounding to sane intervals</tip></label> <input type="number" class='input-mini' ng-model="panel.resolution" ng-change='set_refresh(true)'/>
<input type="number" class='input-mini' ng-model="panel.resolution" ng-change='set_refresh(true)'/> </div>
</div> <div class="editor-option" ng-hide='panel.auto_int'>
<div class="editor-option" ng-hide='panel.auto_int'> <label class="small">Interval <tip>Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</tip></label>
<label class="small">Interval <tip>Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</tip></label> <input type="text" class='input-mini' ng-model="panel.interval" ng-change='set_refresh(true)'/>
<input type="text" class='input-mini' ng-model="panel.interval" ng-change='set_refresh(true)'/> </div>
</div> </div>
</div> </div>
\ No newline at end of file
<div> <div class="editor-row">
<div class="row-fluid"> <div class="section">
<div class="span3"> <div class="editor-option">
<label class="small">Style</label> <label class="small">Style</label>
<select class="input-small" ng-model="panel.chart" ng-options="f for f in ['bar','pie','list','total']"></select></span> <select class="input-small" ng-model="panel.chart" ng-options="f for f in ['bar','pie','list','total']"></select></span>
</div> </div>
<div class="span2" ng-show="panel.chart == 'total' || panel.chart == 'list'"> <div class="editor-option" ng-show="panel.chart == 'total' || panel.chart == 'list'">
<label class="small">Font Size</label> <label class="small">Font Size</label>
<select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span> <select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
</div> </div>
<div class="span3" ng-show="panel.chart == 'bar' || panel.chart == 'pie'"> <div class="editor-option" ng-show="panel.chart == 'bar' || panel.chart == 'pie'">
<label class="small">Legend</label> <label class="small">Legend</label>
<select class="input-small" ng-model="panel.counter_pos" ng-options="f for f in ['above','below','none']"></select></span> <select class="input-small" ng-model="panel.counter_pos" ng-options="f for f in ['above','below','none']"></select></span>
</div> </div>
<div class="span3" ng-show="panel.chart != 'total' && panel.counter_pos != 'none'"> <div class="editor-option" ng-show="panel.chart != 'total' && panel.counter_pos != 'none'">
<label class="small" >List Format</label> <label class="small" >List Format</label>
<select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span> <select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
</div> </div>
<div class="span1" ng-show="panel.chart == 'pie'"> <div class="editor-option" ng-show="panel.chart == 'pie'">
<label class="small">Donut</label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut"> <label class="small">Donut</label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut">
</div> </div>
<div class="span1" ng-show="panel.chart == 'pie'"> <div class="editor-option" ng-show="panel.chart == 'pie'">
<label class="small">Tilt</label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt"> <label class="small">Tilt</label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
</div> </div>
<div class="span1" ng-show="panel.chart == 'pie'"> <div class="editor-option" ng-show="panel.chart == 'pie'">
<label class="small">Labels</label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels"> <label class="small">Labels</label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
</div> </div>
</div> </div>
......
<div class="row-fluid"> <div class="editor-row">
<div class="span3"> <div class="editor-option">
<form> <form>
<h6>Field <tip>2 letter country or state code</tip></h6> <h6>Field <tip>2 letter country or state code</tip></h6>
<input bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.field" ng-change="set_refresh(true)"> <input bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.field" ng-change="set_refresh(true)">
</form> </form>
</div> </div>
<div class="span2"> <div class="editor-option">
<h6>Max <tip>Maximum countries to plot</tip></h6> <h6>Max <tip>Maximum countries to plot</tip></h6>
<input class="input-mini" type="number" ng-model="panel.size" ng-change="set_refresh(true)"> <input class="input-mini" type="number" ng-model="panel.size" ng-change="set_refresh(true)">
</div> </div>
<div class="span1"><h6>Map</h6> <div class="editor-option"><h6>Map</h6>
<select ng-change="$emit('render')" class="input-small" ng-model="panel.map" ng-options="f for f in ['world','europe','usa']"></select> <select ng-change="$emit('render')" class="input-small" ng-model="panel.map" ng-options="f for f in ['world','europe','usa']"></select>
</div> </div>
</div> </div>
<div class="row-fluid" ng-switch="panel.mode"> <div class="editor-row" ng-switch="panel.mode">
<div class="row-fluid">
<div class="span2"> <div class="section">
<label class="small">Mode</label> <h5>Mode</h5>
<div class="editor-option">
<label class="small">Mode</label>
<select class="input-small" ng-change="set_mode(panel.mode);set_refresh(true)" ng-model="panel.mode" ng-options="f for f in ['terms','goal']"></select> <select class="input-small" ng-change="set_mode(panel.mode);set_refresh(true)" ng-model="panel.mode" ng-options="f for f in ['terms','goal']"></select>
</div>
</div>
<div ng-switch-when="terms">
<div class="row-fluid">
<div class="span2">
<label class="small">Field</label>
<input type="text" class="input-small" bs-typeahead="fields.list" ng-model="panel.query.field" ng-change="set_refresh(true)">
</div>
<div class="span2">
<label class="small">Length</label>
<input class="input-small" type="number" ng-model="panel.size" ng-change="set_refresh(true)">
</div>
<div class="span6">
<label class="small">Exclude Terms(s) (comma seperated)</label>
<input array-join type="text" ng-model='panel.exclude'></input>
</div>
</div>
</div>
<div ng-switch-when="goal">
<div class="row-fluid">
<div class="span2">
<form style="margin-bottom: 0px">
<label class="small">Goal</label>
<input type="number" style="width:90%" ng-model="panel.query.goal" ng-change="set_refresh(true)">
</form>
</div>
</div> </div>
</div> </div>
</div>
<div class="row-fluid"> <div class="section" ng-switch-when="terms">
<div class="span1"> <h5>Parameters</h5>
<label class="small"> Donut </label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut"> <div class="editor-option">
</div> <label class="small">Field</label>
<div class="span1"> <input type="text" class="input-small" bs-typeahead="fields.list" ng-model="panel.query.field" ng-change="set_refresh(true)">
<label class="small"> Tilt </label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt"> </div>
<div class="editor-option">
<label class="small">Length</label>
<input class="input-mini" type="number" ng-model="panel.size" ng-change="set_refresh(true)">
</div>
<div class="editor-option">
<label class="small">Exclude Terms(s) (comma seperated)</label>
<input array-join type="text" ng-model='panel.exclude'></input>
</div>
</div> </div>
<div class="span1">
<label class="small"> Labels </label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels"> <div class="section" ng-switch-when="goal">
<h5>Parameters</h5>
<div class="editor-option">
<form style="margin-bottom: 0px">
<label class="small">Goal</label>
<input type="number" style="width:90%" ng-model="panel.query.goal" ng-change="set_refresh(true)">
</form>
</div>
</div> </div>
<div class="span3">
<label class="small">Legend</label> <div class="section">
<select class="input-small" ng-model="panel.legend" ng-options="f for f in ['above','below','none']"></select></span> <h5>View Options</h5>
<div class="editor-option">
<label class="small"> Donut </label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut">
</div>
<div class="editor-option">
<label class="small"> Tilt </label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
</div>
<div class="editor-option">
<label class="small"> Labels </label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
</div>
<div class="editor-option">
<label class="small">Legend</label>
<select class="input-small" ng-model="panel.legend" ng-options="f for f in ['above','below','none']"></select></span>
</div>
</div> </div>
</div> </div>
\ No newline at end of file
<div class="row-fluid"> <div class="editor-row">
<div class="span3"> <div class="section">
<h6>Show Controls</h6><input type="checkbox" ng-model="panel.paging" ng-checked="panel.paging"> <div class="editor-option">
<h6>Show Controls</h6><input type="checkbox" ng-model="panel.paging" ng-checked="panel.paging">
</div>
<div class="editor-option">
<h6>Overflow</h6>
<select class="input-small" ng-model="panel.overflow" ng-options="f.value as f.key for f in [{key:'scroll',value:'height'},{key:'expand',value:'min-height'}]"></select>
</div>
</div> </div>
<div class="span2">
<h6>Overflow</h6> <div class="section">
<select class="input-small" ng-model="panel.overflow" ng-options="f.value as f.key for f in [{key:'scroll',value:'height'},{key:'expand',value:'min-height'}]"></select> <div class="editor-option">
</div> <h6>Per Page</h6>
</div> <input type="number" class="input-mini" ng-model="panel.size" ng-change="get_data()">
<div class="row-fluid"> </div>
<div class="span2"> <div class="editor-option">
<h6>Per Page</h6> <h6>&nbsp;</h6>
<input type="number" class="input-mini" ng-model="panel.size" ng-change="get_data()"> <center><i class='icon-remove'></i><center>
</div> </div>
<div class="span1"> <div class="editor-option">
<h6>&nbsp;</h6> <h6>Page limit</h6>
<center><i class='icon-remove'></i><center> <input type="number" class="input-mini" ng-model="panel.pages" ng-change="get_data()">
</div> </div>
<div class="span2"> <div class="editor-option large">
<h6>Page limit</h6> <h6>Pageable</h6>
<input type="number" class="input-mini" ng-model="panel.pages" ng-change="get_data()"> <strong class="large">= {{panel.size * panel.pages}}</strong>
</div> </div>
<div class="span2 large">
<h6>Pageable</h6>
<strong class="large">= {{panel.size * panel.pages}}</strong>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="editor-row">
<div class="span2"> <div class="section">
<label class="small">Field</label> <h5>Parameters</h5>
<input type="text" class="input-small" bs-typeahead="fields.list" ng-model="panel.field" ng-change="set_refresh(true)"> <div class="editor-option">
</div> <label class="small">Field</label>
<div class="span2"> <input type="text" class="input-small" bs-typeahead="fields.list" ng-model="panel.field" ng-change="set_refresh(true)">
<label class="small">Length</label> </div>
<input class="input-small" type="number" ng-model="panel.size" ng-change="set_refresh(true)"> <div class="editor-option">
</div> <label class="small">Length</label>
<div class="span3"> <input class="input-small" type="number" ng-model="panel.size" ng-change="set_refresh(true)">
<label class="small">Order</label> </div>
<select class="input-medium" ng-model="panel.order" ng-options="f for f in ['count','term','reverse_count','reverse_term']" ng-change="set_refresh(true)"></select></span> <div class="editor-option">
</div> <label class="small">Order</label>
<div class="span4"> <select class="input-medium" ng-model="panel.order" ng-options="f for f in ['count','term','reverse_count','reverse_term']" ng-change="set_refresh(true)"></select></span>
<label class="small">Exclude Terms(s) (comma seperated)</label> </div>
<input array-join type="text" ng-model='panel.exclude'></input> <div class="editor-option">
<label class="small">Exclude Terms(s) (comma seperated)</label>
<input array-join type="text" ng-model='panel.exclude'></input>
</div>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="editor-row">
<div class="span2"> <div class="section">
<label class="small">Style</label> <h5>View Options</h5>
<select class="input-small" ng-model="panel.chart" ng-options="f for f in ['bar','pie','table']"></select></span> <div class="editor-option">
</div> <label class="small">Style</label>
<div class="span2" ng-show="panel.chart == 'table'"> <select class="input-small" ng-model="panel.chart" ng-options="f for f in ['bar','pie','table']"></select></span>
<label class="small">Font Size</label> </div>
<select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span> <div class="editor-option" ng-show="panel.chart == 'table'">
</div> <label class="small">Font Size</label>
<div class="span2" ng-show="panel.chart == 'bar' || panel.chart == 'pie'"> <select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
<label class="small">Legend</label> </div>
<select class="input-small" ng-model="panel.counter_pos" ng-options="f for f in ['above','below','none']"></select></span> <div class="editor-option" ng-show="panel.chart == 'bar' || panel.chart == 'pie'">
</div> <label class="small">Legend</label>
<div class="span3" ng-show="panel.chart != 'table' && panel.counter_pos != 'none'"> <select class="input-small" ng-model="panel.counter_pos" ng-options="f for f in ['above','below','none']"></select></span>
<label class="small" >Legend Format</label> </div>
<select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span> <div class="editor-option" ng-show="panel.chart != 'table' && panel.counter_pos != 'none'">
</div> <label class="small" >Legend Format</label>
<div class="span1"> <select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
<label class="small">Missing</label><input type="checkbox" ng-model="panel.missing" ng-checked="panel.missing"> </div>
</div> <div class="editor-option">
<div class="span1"> <label class="small">Missing</label><input type="checkbox" ng-model="panel.missing" ng-checked="panel.missing">
<label class="small">Other</label><input type="checkbox" ng-model="panel.other" ng-checked="panel.other"> </div>
</div> <div class="editor-option">
<div class="span1" ng-show="panel.chart == 'pie'"> <label class="small">Other</label><input type="checkbox" ng-model="panel.other" ng-checked="panel.other">
<label class="small">Donut</label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut"> </div>
</div> <div class="editor-option" ng-show="panel.chart == 'pie'">
<div class="span1" ng-show="panel.chart == 'pie'"> <label class="small">Donut</label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut">
<label class="small">Tilt</label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt"> </div>
</div> <div class="editor-option" ng-show="panel.chart == 'pie'">
<div class="span1" ng-show="panel.chart == 'pie'"> <label class="small">Tilt</label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
<label class="small">Labels</label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels"> </div>
<div class="editor-option" ng-show="panel.chart == 'pie'">
<label class="small">Labels</label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
</div>
</div> </div>
</div> </div>
<div ng-include="'app/partials/panelgeneral.html'"></div> <div ng-include="'app/partials/panelgeneral.html'"></div>
<div ng-include="edit_path(panel.type)"></div> <div ng-include="edit_path(panel.type)"></div>
<div ng-repeat="tab in panelMeta.editorTabs"> <div ng-repeat="tab in panelMeta.editorTabs">
<h4>{{tab.title}}</h4> <h5>{{tab.title}}</h5>
<div ng-include="tab.src"></div> <div ng-include="tab.src"></div>
</div> </div>
\ No newline at end of file
<div class="row-fluid"> <div class="editor-row">
<div class="span12"> <div class="section">
<strong>{{panelMeta.status}}</strong> // <span ng-bind-html="panelMeta.description"></span> <strong>{{panelMeta.status}}</strong> // <span ng-bind-html="panelMeta.description"></span>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="editor-row">
<div class="span4"> <div class="section">
<label class="small">Title</label><input type="text" class="input-medium" ng-model='panel.title'></input> <div class="editor-option">
</div> <label class="small">Title</label><input type="text" class="input-medium" ng-model='panel.title'></input>
<div class="span2" ng-hide="panel.sizeable == false"> </div>
<label class="small">Span</label> <select class="input-mini" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select> <div class="editor-option" ng-hide="panel.sizeable == false">
</div> <label class="small">Span</label> <select class="input-mini" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
<div class="span2"> </div>
<label class="small">Editable</label><input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable"> <div class="editor-option">
</div> <label class="small">Editable</label><input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable">
<div class="span2" ng-show="!_.isUndefined(panel.spyable)"> </div>
<label class="small"> <div class="editor-option" ng-show="!_.isUndefined(panel.spyable)">
Inspect <i class="icon-question-sign" bs-tooltip="'Allow query reveal via <i class=icon-eye-open></i>'"></i> <label class="small">
</label> Inspect <i class="icon-question-sign" bs-tooltip="'Allow query reveal via <i class=icon-eye-open></i>'"></i>
<input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable"> </label>
<input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
</div>
</div> </div>
</div> </div>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -22,17 +22,10 @@ ...@@ -22,17 +22,10 @@
// Base modal // Base modal
.modal { .modal {
position: fixed; position: absolute;
top: 10%;
left: 50%;
z-index: @zindexModal; z-index: @zindexModal;
width: 560px; width: 100%;
margin-left: -280px;
background-color: @white; background-color: @white;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
*border: 1px solid #999; /* IE6-7 */
.border-radius(6px);
.box-shadow(0 3px 7px rgba(0,0,0,0.3)); .box-shadow(0 3px 7px rgba(0,0,0,0.3));
.background-clip(padding-box); .background-clip(padding-box);
// Remove focus outline from opened modal // Remove focus outline from opened modal
...@@ -60,7 +53,7 @@ ...@@ -60,7 +53,7 @@
.modal-body { .modal-body {
position: relative; position: relative;
overflow-y: auto; overflow-y: auto;
max-height: 400px; max-height: 700px;
padding: 15px; padding: 15px;
} }
// Remove bottom margin if need be // Remove bottom margin if need be
...@@ -75,7 +68,6 @@ ...@@ -75,7 +68,6 @@
text-align: right; // right align buttons text-align: right; // right align buttons
background-color: #f5f5f5; background-color: #f5f5f5;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
.border-radius(0 0 6px 6px);
.box-shadow(inset 0 1px 0 @white); .box-shadow(inset 0 1px 0 @white);
.clearfix(); // clear it in case folks use .pull-* classes on buttons .clearfix(); // clear it in case folks use .pull-* classes on buttons
......
...@@ -210,9 +210,8 @@ form input.ng-invalid { ...@@ -210,9 +210,8 @@ form input.ng-invalid {
} }
.modal { .modal {
width: 770px; width: 100%;
margin-left: -385px; top: 0px !important;
top: 10px !important;
} }
.tiny { .tiny {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment