Spacing adjustments and indentation fixes for main view
Project: http://git-wip-us.apache.org/repos/asf/climate/repo Commit: http://git-wip-us.apache.org/repos/asf/climate/commit/dd3d262d Tree: http://git-wip-us.apache.org/repos/asf/climate/tree/dd3d262d Diff: http://git-wip-us.apache.org/repos/asf/climate/diff/dd3d262d Branch: refs/heads/master Commit: dd3d262de5a48496ba12e1db3a161abe10d06d6e Parents: 80490e1 Author: Michael Joyce <[email protected]> Authored: Fri Jul 18 15:22:11 2014 -0700 Committer: Michael Joyce <[email protected]> Committed: Fri Jul 18 15:22:11 2014 -0700 ---------------------------------------------------------------------- ocw-ui/frontend-new/app/views/main.html | 373 ++++++++++++++------------- 1 file changed, 188 insertions(+), 185 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/climate/blob/dd3d262d/ocw-ui/frontend-new/app/views/main.html ---------------------------------------------------------------------- diff --git a/ocw-ui/frontend-new/app/views/main.html b/ocw-ui/frontend-new/app/views/main.html index 9ed6dd7..cc07a3b 100644 --- a/ocw-ui/frontend-new/app/views/main.html +++ b/ocw-ui/frontend-new/app/views/main.html @@ -35,218 +35,221 @@ </div> <!-- END - Modal for evaluation settings --> - <div class="row"> - <div class="col-md-12"> - <div class="row"> - <div class="col-md-6"> - <!--Dataset Select Controls--> - <div ng-controller="DatasetSelectCtrl"> - <div class="row"> - <div class="col-md-1 col-md-offset-10"> - <button class="btn btn-link no-color-link" ng-click="clearDatasets()" ng-disabled="shouldDisableClearButton()"> - <span tooltip-placement="left" tooltip-popup-delay="700" tooltip="Clear Datasets"> - <i class="fa fa-trash-o fa-2x"></i> - </span> - </button> - </div> - <div class="col-md-1"> - <button class="btn btn-link no-color-link" data-toggle="modal" data-target="#datasetSelect"> - <span tooltip-placement="left" tooltip-popup-delay="700" tooltip="Add Dataset"> - <i class="fa fa-plus fa-2x"></i> - </span> - </button> - </div> +<div class="row"> + <div class="col-md-12"> + <div class="row"> + <!-- Dataset Select and Display Column --> + <div class="col-md-6"> + <!--Dataset Select Controls--> + <div ng-controller="DatasetSelectCtrl"> + <div class="row"> + <div class="col-md-1 col-md-offset-10"> + <button class="btn btn-link no-color-link" ng-click="clearDatasets()" ng-disabled="shouldDisableClearButton()"> + <span tooltip-placement="left" tooltip-popup-delay="700" tooltip="Clear Datasets"> + <i class="fa fa-trash-o fa-2x"></i> + </span> + </button> </div> - <!-- Modal for dataset selection --> - <div class="modal fade" id="datasetSelect" role="dialog" aria-labelledby="datasetSelectModalLabel" aria-hidden="true"> - <div class="modal-dialog"> - <div class="modal-content"> - <div class="modal-header"> - <h3>Dataset Select</h3> - </div> - <div class="modal-body"> - <tabset> - <tab ng-repeat="tab in templates" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled"> - <div ng-include src="tab.url"></div> - </tab> - <li class="pull-right">Queued Datasets: {{datasetCount.length}}</li> - </tabset> - </div> - <div class="modal-footer"> - <button class="btn btn-warning cancel" data-dismiss="modal">Close</button> - </div> + <div class="col-md-1"> + <button class="btn btn-link no-color-link" data-toggle="modal" data-target="#datasetSelect"> + <span tooltip-placement="left" tooltip-popup-delay="700" tooltip="Add Dataset"> + <i class="fa fa-plus fa-2x"></i> + </span> + </button> + </div> + </div> + <!-- Modal for dataset selection --> + <div class="modal fade" id="datasetSelect" role="dialog" aria-labelledby="datasetSelectModalLabel" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <h3>Dataset Select</h3> + </div> + <div class="modal-body"> + <tabset> + <tab ng-repeat="tab in templates" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled"> + <div ng-include src="tab.url"></div> + </tab> + <li class="pull-right">Queued Datasets: {{datasetCount.length}}</li> + </tabset> + </div> + <div class="modal-footer"> + <button class="btn btn-warning cancel" data-dismiss="modal">Close</button> </div> </div> </div> - <!-- END - Modal for dataset selection --> - <div class="row"> - <div class="col-md-12"> - <hr /> - </div> + </div> + <!-- END - Modal for dataset selection --> + <div class="row"> + <div class="col-md-12"> + <hr /> </div> </div> - <!--Dataset display--> - <div ng-controller="DatasetDisplayCtrl" id="datasetDiv"> - <div ng-repeat="dataset in datasets"> - <div class="row"> - <!--Data section--> - <div class="col-md-8 col-md-offset-1 muted"> - {{dataset.name}} - </div> - <div class="col-md-1 col-md-offset-2"> - <span tooltip-placement="left" tooltip-popup-delay="700" tooltip="Remove Dataset"> - <a class="no-color-link" href="#" ng-click="removeDataset($index)"> - <i class="fa fa-remove"></i> - </a> - </span> - </div> + </div> + <!--Dataset display--> + <div ng-controller="DatasetDisplayCtrl" id="datasetDiv"> + <div ng-repeat="dataset in datasets"> + <div class="row"> + <!--Data section--> + <div class="col-md-8 col-md-offset-1 muted"> + {{dataset.name}} </div> - <!--Time Values!--> - <div class="row"> - <!--Dataset Info Section--> - <div class="col-md-9"> - <div class="row"> - <div class="col-md-2 col-md-offset-1 text-center">Start:</div> - <div class="col-md-2"> - <div class="col-md-2 text-center">{{dataset.timeVals.start | ISODateToMiddleEndian}}</div> - </div> - <div class="col-md-2 text-center">End:</div> - <div class="col-md-2"> - <div class="col-md-2 text-center">{{dataset.timeVals.end | ISODateToMiddleEndian}}</div> - </div> + <div class="col-md-1 col-md-offset-2"> + <span tooltip-placement="left" tooltip-popup-delay="700" tooltip="Remove Dataset"> + <a class="no-color-link" href="#" ng-click="removeDataset($index)"> + <i class="fa fa-remove"></i> + </a> + </span> + </div> + </div> + <!--Time Values!--> + <div class="row"> + <!--Dataset Info Section--> + <div class="col-md-9"> + <div class="row"> + <div class="col-md-2 col-md-offset-1 text-center">Start:</div> + <div class="col-md-2"> + <div class="col-md-2 text-center">{{dataset.timeVals.start | ISODateToMiddleEndian}}</div> + </div> + <div class="col-md-2 text-center">End:</div> + <div class="col-md-2"> + <div class="col-md-2 text-center">{{dataset.timeVals.end | ISODateToMiddleEndian}}</div> </div> - <!--Lat/Long Values!--> - <div class="row"> - <div class="col-md-2 col-md-offset-1 text-center">North:</div> - <div class="col-md-2 text-center"> - {{dataset.latlonVals.latMax | number:2}} - </div> - <div class="col-md-2 text-center">West:</div> - <div class="col-md-2 text-center"> - {{dataset.latlonVals.lonMin | number:2}} - </div> + </div> + <!--Lat/Long Values!--> + <div class="row"> + <div class="col-md-2 col-md-offset-1 text-center">North:</div> + <div class="col-md-2 text-center"> + {{dataset.latlonVals.latMax | number:2}} </div> - <div class="row"> - <div class="col-md-2 col-md-offset-1 text-center">South:</div> - <div class="col-md-2 text-center"> - {{dataset.latlonVals.latMin | number:2}} - </div> - <div class="col-md-2 text-center">East:</div> - <div class="col-md-2 text-center"> - {{dataset.latlonVals.lonMax | number:2}} - </div> + <div class="col-md-2 text-center">West:</div> + <div class="col-md-2 text-center"> + {{dataset.latlonVals.lonMin | number:2}} </div> </div> - <!--Preview Map Section--> - <div class="col-md-3"> - <!--If the dataset is global we show a picture of a globe instead of the actual map--> - <div ng-hide="dataset.latlonVals.lonMin == -180 && dataset.latlonVals.lonMax == 180 && - dataset.latlonVals.latMin == -90 && dataset.latlonVals.latMax == 90" - preview-map="dataset" index="$index"></div> - <div ng-show="dataset.latlonVals.lonMin == -180 && dataset.latlonVals.lonMax == 180 && - dataset.latlonVals.latMin == -90 && dataset.latlonVals.latMax == 90"> - <img src="img/globe.png" class="preview-map"> + <div class="row"> + <div class="col-md-2 col-md-offset-1 text-center">South:</div> + <div class="col-md-2 text-center"> + {{dataset.latlonVals.latMin | number:2}} + </div> + <div class="col-md-2 text-center">East:</div> + <div class="col-md-2 text-center"> + {{dataset.latlonVals.lonMax | number:2}} </div> </div> </div> - <div class="row"> - <div class="col-md-6 col-md-offset-3"><hr /></div> + <!--Preview Map Section--> + <div class="col-md-3"> + <!--If the dataset is global we show a picture of a globe instead of the actual map--> + <div ng-hide="dataset.latlonVals.lonMin == -180 && dataset.latlonVals.lonMax == 180 && + dataset.latlonVals.latMin == -90 && dataset.latlonVals.latMax == 90" + preview-map="dataset" index="$index"></div> + <div ng-show="dataset.latlonVals.lonMin == -180 && dataset.latlonVals.lonMax == 180 && + dataset.latlonVals.latMin == -90 && dataset.latlonVals.latMax == 90"> + <img src="img/globe.png" class="preview-map"> + </div> </div> </div> + <div class="row"> + <div class="col-md-6 col-md-offset-3"><hr /></div> + </div> </div> + </div> + </div> + + <!-- Map, Timeline, and Parameter Control Column --> + <div class="col-md-6"> + <!--Map--> + <div class="row" ng-controller="WorldMapCtrl"> + <div class="col-md-12"> + <leaflet-map id="map"></leaflet-map> + </div> </div> - <div class="col-md-6"> - <!--Map--> - <div class="row" ng-controller="WorldMapCtrl"> - <div class="col-md-12"> - <leaflet-map id="map"></leaflet-map> - </div> + + <!--Timeline--> + <div class="row"> + <div class="col-md-12" ng-controller="TimelineCtrl"> + <div class="timeline"></div> </div> - - <!--Timeline--> - <div class="row"> - <div class="col-md-12" ng-controller="TimelineCtrl"> - <div class="timeline"></div> + </div> + + <div class="row"> + <div class="col-md-12" ng-controller="ParameterSelectCtrl"> + <div class="row top3"> + <div class="col-md-2 text-center">Start Date:</div> + <div class="col-md-4"> + <form> + <!--This styling HAD to be done inline. Using a class wouldn't work and for some --> + <!--reason the input boxes refused to be 100% wide when their span size was set.--> + <input ng-disabled="shouldDisableControls()" on-blur="checkParameters();" ng-model="displayParams.start" ui-date="datepickerSettings" ui-date-format="yy-mm-dd" type="text" class="col-md-4 text-center" style="width:100%" /> + </form> + </div> + <div class="col-md-2 text-center">End Date:</div> + <div class="col-md-4"> + <form> + <!--This styling HAD to be done inline. Using a class wouldn't work and for some --> + <!--reason the input boxes refused to be 100% wide when their span size was set.--> + <input ng-disabled="shouldDisableControls()" on-blur="checkParameters();" ng-model="displayParams.end" ui-date="datepickerSettings" ui-date-format="yy-mm-dd" type="text" class="col-md-4 text-center" style="width:100%"/> + </form> + </div> </div> - </div> - - <div class="row"> - <div class="col-md-12" ng-controller="ParameterSelectCtrl"> - <div class="row"> - <div class="col-md-2 text-center">Start Date:</div> - <div class="col-md-4"> - <form> - <!--This styling HAD to be done inline. Using a class wouldn't work and for some --> - <!--reason the input boxes refused to be 100% wide when their span size was set.--> - <input ng-disabled="shouldDisableControls()" on-blur="checkParameters();" ng-model="displayParams.start" ui-date="datepickerSettings" ui-date-format="yy-mm-dd" type="text" class="col-md-4 text-center" style="width:100%" /> - </form> - </div> - <div class="col-md-2 text-center">End Date:</div> - <div class="col-md-4"> - <form> - <!--This styling HAD to be done inline. Using a class wouldn't work and for some --> - <!--reason the input boxes refused to be 100% wide when their span size was set.--> - <input ng-disabled="shouldDisableControls()" on-blur="checkParameters();" ng-model="displayParams.end" ui-date="datepickerSettings" ui-date-format="yy-mm-dd" type="text" class="col-md-4 text-center" style="width:100%"/> - </form> - </div> + <div class="row top3"> + <div class="col-md-2 text-center">North:</div> + <div class="col-md-4"> + <form action=""> + <input ng-disabled="shouldDisableControls()" ng-model="displayParams.latMax" on-blur="checkParameters();" type="text" class="col-md-4 text-center" style="width:100%"/> + </form> </div> - <div class="row"> - <div class="col-md-2 text-center">North:</div> - <div class="col-md-4"> - <form action=""> - <input ng-disabled="shouldDisableControls()" ng-model="displayParams.latMax" on-blur="checkParameters();" type="text" class="col-md-4 text-center" style="width:100%"/> - </form> - </div> - <div class="col-md-2 text-center">South:</div> - <div class="col-md-4"> - <form action=""> - <!--This styling HAD to be done inline. Using a class wouldn't work and for some --> - <!--reason the input boxes refused to be 100% wide when their span size was set.--> - <input ng-disabled="shouldDisableControls()" ng-model="displayParams.latMin" on-blur="checkParameters();" type="text" class="col-md-4 text-center" style="width:100%"/> - </form> - </div> + <div class="col-md-2 text-center">South:</div> + <div class="col-md-4"> + <form action=""> + <!--This styling HAD to be done inline. Using a class wouldn't work and for some --> + <!--reason the input boxes refused to be 100% wide when their span size was set.--> + <input ng-disabled="shouldDisableControls()" ng-model="displayParams.latMin" on-blur="checkParameters();" type="text" class="col-md-4 text-center" style="width:100%"/> + </form> </div> - <div class="row"> - <div class="col-md-2 text-center">East:</div> - <div class="col-md-4"> - <form> - <!--This styling HAD to be done inline. Using a class wouldn't work and for some --> - <!--reason the input boxes refused to be 100% wide when their span size was set.--> - <input ng-disabled="shouldDisableControls()" ng-model="displayParams.lonMax" on-blur="checkParameters();" type="text" class="col-md-4 text-center" style="width:100%"/> - </form> - </div> - <div class="col-md-2 text-center">West:</div> - <div class="col-md-4"> - <form> - <!--This styling HAD to be done inline. Using a class wouldn't work and for some --> - <!--reason the input boxes refused to be 100% wide when their span size was set.--> - <input ng-disabled="shouldDisableControls()" ng-model="displayParams.lonMin" on-blur="checkParameters();"; type="text" class="col-md-4 text-center" style="width:100%"/> - </form> - </div> + </div> + <div class="row top3"> + <div class="col-md-2 text-center">East:</div> + <div class="col-md-4"> + <form> + <!--This styling HAD to be done inline. Using a class wouldn't work and for some --> + <!--reason the input boxes refused to be 100% wide when their span size was set.--> + <input ng-disabled="shouldDisableControls()" ng-model="displayParams.lonMax" on-blur="checkParameters();" type="text" class="col-md-4 text-center" style="width:100%"/> + </form> </div> - <div class="row"> - <div class="col-md-2 col-md-offset-6"> - <!--<button class="btn btn-link no-color-link pull-right" bootstrap-modal-open="evaluationSettings">--> - <button class="btn btn-link no-color-link pull-right" data-toggle="modal" data-target="#evaluationSettingsModal"> - <span tooltip-placement="left" tooltip-popup-delay="700" tooltip="Settings"> - <span class="fa-stack fa-lg"> - <i class="fa fa-square-o fa-stack-2x"></i> - <i class="fa fa-cogs fa-stack-1x"></i> - </span> + <div class="col-md-2 text-center">West:</div> + <div class="col-md-4"> + <form> + <!--This styling HAD to be done inline. Using a class wouldn't work and for some --> + <!--reason the input boxes refused to be 100% wide when their span size was set.--> + <input ng-disabled="shouldDisableControls()" ng-model="displayParams.lonMin" on-blur="checkParameters();"; type="text" class="col-md-4 text-center" style="width:100%"/> + </form> + </div> + </div> + <div class="row top3"> + <div class="col-md-2 col-md-offset-6"> + <!--<button class="btn btn-link no-color-link pull-right" bootstrap-modal-open="evaluationSettings">--> + <button class="btn btn-link no-color-link pull-right" data-toggle="modal" data-target="#evaluationSettingsModal"> + <span tooltip-placement="left" tooltip-popup-delay="700" tooltip="Settings"> + <span class="fa-stack fa-lg"> + <i class="fa fa-square-o fa-stack-2x"></i> + <i class="fa fa-cogs fa-stack-1x"></i> </span> - </button> - </div> - <div class="col-md-4"> - <button ng-click="runEvaluation()" ng-disabled="shouldDisableEvaluateButton()" class="btn btn-block btn-primary"> - <div ng-hide="runningEval">Evaluate</div> - <div ng-show="runningEval"><i class="fa fa-spinner fa-spin"></i></div> - </button> - </div> + </span> + </button> + </div> + <div class="col-md-4"> + <button ng-click="runEvaluation()" ng-disabled="shouldDisableEvaluateButton()" class="btn btn-block btn-primary"> + <div ng-hide="runningEval">Evaluate</div> + <div ng-show="runningEval"><i class="fa fa-spinner fa-spin"></i></div> + </button> </div> </div> </div> </div> - </div> - </div> + </div> + </div> </div> +</div>
