[search] Styling the search input and results
authorErik Haider Forsén <erik@forsen.not>
Sun, 15 Nov 2015 15:30:21 +0000 (16:30 +0100)
committerErik Haider Forsén <erik@forsen.not>
Sun, 15 Nov 2015 15:30:21 +0000 (16:30 +0100)
src/components/search/search.css
src/components/search/search.html

index 6f88808..2344396 100644 (file)
@@ -1,3 +1,7 @@
+.search div{
+    position: relative;
+}
+
 .search img{
     width: 20px;
     position: absolute;
@@ -5,5 +9,44 @@
 
 .search li{
     padding: 0.5em 0.5em 0.5em 0;
+    float: none;
+}
+
+.search ul {
+    display: block;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    float: left;
+    min-width: 160px;
+    padding: 5px 0;
+    margin: 4px 0 0;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0, 0, 0, .15);
+    border-radius: 4px;
+    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+}
+
+.results > li > a{
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.42857143;
+    color: #333;
+    white-space: nowrap
 }
 
+.results > li > a:focus, .results > li > a:hover {
+    color: #262626;
+    text-decoration: none;
+    background-color: #f5f5f5
+}
index c1b36d5..bae546b 100644 (file)
@@ -1,5 +1,4 @@
-<div class="search">
-    <section class="form-group">
+<div class="search clearfix">
         <label class="sr-only" for="livesearch">Search</label>
         <input
                 mou-live-search
@@ -7,15 +6,16 @@
                 (loading)="loading = $event"
                 type="text"
                 autofocus
+                class="form-control"
                 id="livesearch">
         <img [hidden]="!loading"
              src="https://www.brown.edu/sites/default/themes/pawtuxet/img/loader-larger.gif">
-    </section>
-    <section>
-        <ul>
-            <li *ng-for="#orgunit of orgunits" (click)="getMoreInfo(orgunit)">
-                {{orgunit.name}}
-            </li>
-        </ul>
-    </section>
+
+        <div [hidden]="!orgunits.length">
+            <ul class="results" >
+                <li *ng-for="#orgunit of orgunits" (click)="getMoreInfo(orgunit)">
+                    <a href="#">{{orgunit.name}}<br/><span>{{orgunit.lastUpdated}}</span></a>
+                </li>
+            </ul>
+        </div>
 </div>