Browse Source

nicer search fields

Davide Alberani 9 years ago
parent
commit
a0344514f3
2 changed files with 26 additions and 12 deletions
  1. 13 6
      angular_app/events-list.html
  2. 13 6
      angular_app/persons-list.html

+ 13 - 6
angular_app/events-list.html

@@ -2,12 +2,19 @@
 <div class="container">
     <div class="row">
         <div class="col-lg-12">
-            Search: <input ng-model="query">
-            Sort by:
-            <select ng-model="orderProp">
-                <option value="title">Alphabetical</option>
-                <option value="begin-datetime">Date</option>
-            </select>
+            <form class="form-inline">
+                <div class="form-group">
+                    <label for="query-events">Search:</label>
+                    <input type="text" id="query-events" class="form-control" placeholder="Event title" ng-model="query">
+                </div>
+                <div class="form-group">
+                    <label for="events-order">Sort by:</label>
+                    <select id="events-order" class="form-control" ng-model="orderProp">
+                        <option value="title">Alphabetical</option>
+                        <option value="begin-datetime">Date</option>
+                    </select>
+                </div>
+            </form>
         </div>
     </div>
 </div>

+ 13 - 6
angular_app/persons-list.html

@@ -2,12 +2,19 @@
 <div class="container">
     <div class="row">
         <div class="col-lg-12">
-            Search: <input ng-model="query">
-            Sort by:
-            <select ng-model="orderProp">
-                <option value="name">Alphabetical</option>
-                <option value="id">ID</option>
-            </select>
+            <form class="form-inline">
+                <div class="form-group">
+                    <label for="query-persons">Search:</label>
+                    <input type="text" id="query-persons" class="form-control" placeholder="Name or email" ng-model="query">
+                </div>
+                <div class="form-group">
+                    <label for="persons-order">Sort by:</label>
+                    <select id="persons-order" class="form-control" ng-model="orderProp">
+                        <option value="name">Alphabetical</option>
+                        <option value="_id">ID</option>
+                    </select>
+                </div>
+            </form>
         </div>
     </div>
 </div>