Fixed alignment of bounds fields. closes #85

QutEcoacoustics · Feb 5, 2014 · 8087ddf · 8087ddf
1 parent a21fcb1
commit 8087ddf
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 30 deletions.
diff --git a/src/app/listen/_listen.scss b/src/app/listen/_listen.scss
@@ -75,13 +75,14 @@
   }
 
   & .bounds-fs {
-    width: 40%;
+    width: 45%;
     float: right;
-    & input {
-      width: 100px;
-    }
+
     & label {
-      width: 220px;
+      text-align: right;
+    }
+    & .row {
+      padding-bottom: 5px;
     }
   }
 

diff --git a/src/app/listen/listen.tpl.html b/src/app/listen/listen.tpl.html
@@ -86,7 +86,7 @@ <h1 id="chunkInfo" class="row">
         <div id="listenEditContainer" ng-class="{disabled : singleEditDisabled()}">
             <div class="panel panel-default">
 
-                <form id="annotationEditForm" name="annotationEditForm" class="panel-body">
+                <form id="annotationEditForm" name="annotationEditForm" class="panel-body form-inline" role="form">
                     <fieldset ng-disabled="singleEditDisabled()" class='tags-fs'>
                         <legend>Tags</legend>
 
@@ -108,47 +108,46 @@ <h1 id="chunkInfo" class="row">
                         <legend>
                             Bounds
                         </legend>
+                        <div class="container-fluid">
                         <div class="row">
-                            <div class="col-xs-6">
-                                <label>
-                                    <span>Start</span>
-                                    <input type="number" min="{{limits.timeMin}}" max="{{limits.timeMax}}" step="0.5" required
+                            <label class="col-xs-2">
+                                <span>Start</span>
+                            </label>
+                            <input class="col-xs-3" type="number" min="{{limits.timeMin}}" max="{{limits.timeMax}}" step="0.5" required
                                            ng-disabled="singleEditDisabled()"
                                            ng-model="model.selectedAudioEvent.startTimeSeconds"/>
-                                </label>
-                            </div>
-                            <div class="col-xs-6">
-                                                                <label> <span>High Frequency</span>
-                                    <input type="number" min="{{limits.freqMin}}" max="{{limits.freqMax}}" step="100" required
+
+                             <label class="col-xs-4">
+                                 <span>High Frequency</span>
+                             </label>
+                             <input class="col-xs-3" type="number" min="{{limits.freqMin}}" max="{{limits.freqMax}}" step="100" required
                                            ng-disabled="singleEditDisabled()"
                                            ng-model="model.selectedAudioEvent.highFrequencyHertz"/>
 
-                                </label>
-                            </div>
+
                         </div>
                         <div class="row">
-
-                            <div class="col-xs-6">
-
-                                <label><span>End</span>
-                                    <input type="number" min="{{limits.timeMin}}" max="{{limits.timeMax}}" step="0.5" required
+                            <label class="col-xs-2">
+                               <span>End</span>
+                            </label>
+                            <input class="col-xs-3" type="number" min="{{limits.timeMin}}" max="{{limits.timeMax}}" step="0.5" required
                                            ng-disabled="singleEditDisabled()"
                                            ng-model="model.selectedAudioEvent.endTimeSeconds"/>
-                                </label>
-                            </div>
-                            <div class="col-xs-6">
-                                <label>
+
+                            <label class="col-xs-4">
                                     <span>Low Frequency</span>
-                                    <input type="number" min="{{limits.freqMin}}" max="{{limits.freqMax}}" step="100" required
+                            </label>
+                            <input class="col-xs-3" type="number" min="{{limits.freqMin}}" max="{{limits.freqMax}}" step="100" required
                                            ng-disabled="singleEditDisabled()"
                                            ng-model="model.selectedAudioEvent.lowFrequencyHertz"/>
-                                </label>
-                            </div>
+
+
 
+                        </div>
                         </div>
                     </fieldset>
-
                 </form>
+
             </div>
         </div>
             <div class="debug-ui">