design ferdig for i dag

[u/erikhf/frm.git] / src / components / search / search.html

diff --git a/src/components/search/search.html b/src/components/search/search.html
index 0c67195e8f1a7a06791d655ef362844011c794ff..67694037877ce140ce9ac72d9defe01c3b17849e 100644 (file)
--- a/src/components/search/search.html
+++ b/src/components/search/search.html
@@ -1,74 +1,72 @@
-<div id="search" >
+<div id="search">
 
+    <!-- Search bar -->
     <label class="sr-only" for="livesearch">Search</label>
 
-        <input  mou-live-search
-               (results)="orgunits = $event"
-               (loading)="loading = $event"
-               type="text"
-               autofocus
-               class="livesearch"
-               name="livesearch"
-               id="livesearch"
-                value="lol"
-               placeholder="Search"
-                />
-    <img class="loadingpic" [hidden]="!loading"
-         src="https://www.brown.edu/sites/default/themes/pawtuxet/img/loader-larger.gif">
-
-
-    <div  class="divresult" id="divresult" [hidden]="!orgunits.length">
-        <ul class="dropdown-menu result"  >
-            <li *ng-for="#orgunit of orgunits" (click)="getMoreInfo(orgunit)">
-                <a href="#">{{orgunit.name}}<br/><span>{{orgunit.lastUpdated}}</span></a>
-            </li>
-        </ul>
-    </div>
-
-
-
-</div>
-
-<button type="button" class="knapp" data-toggle="collapse" data-target="#dropdown-menu">
-
-    <!--pil opp og ned-->
-
-    <div class="zippy">
-        <div (click)="toggle()" class="zippy__title">
-            {{ visible ? '&xdtri;' : '&xutri;' }} {{title}}
+    <form id="searchform">
+        <div class="row">
+            <input
+                    mou-live-search
+                    (results)="orgunits = $event"
+                    (loading)="loading = $event"
+                    type="text"
+                    autofocus
+                    class="livesearch col-md-10"
+                    name="livesearch"
+                    id="livesearch"
+                    placeholder="Search"
+                    onblur="this.placeholder = 'Search'"
+                    onfocus="this.placeholder = ''"
+                    value=""/>
+
+            <!--Show and empty filtermenu-->
+            <button type="button" class="filterbutton col-md-2" (click)="toggle()"
+                    data-toggle="collapse" data-target="#dropdown-menu">
+                {{ visible ? '&xdtri;' : '&khcy;' }}
+            </button>
         </div>
-        <div [hidden]="!visible" class="zippy__content">
-            <content></content>
+    </form>
+
+    <!-- Searchresult div -->
+    <div class="row">
+        <span [hidden]="hideDiv()">
+            <div class="divresult col-md-10" id="divresult" [hidden]="checkOrgunits()">
+                <ul class="dropdown-menu result">
+                    <li>
+                        <!--exit results-->
+                        <button type="button" class="btn btn-default emptyresult" (click)="emptyByClick()">
+                            <span class="glyphicon glyphicon-remove"></span></button>
+                    </li>
+                    <li *ng-for="#orgunit of filteredOrgunits" id="orglist" (click)="getMoreInfo(orgunit)">
+                        <a id="left-menu" href="#"><span class="glyphicon glyphicon-map-marker glyresult"></span>  {{orgunit.name}}</a>
+                    </li>
+                    <li *ng-if="filteredOrgunits.length == 0">
+                        <p class="nomatch"><span class="glyphicon glyphicon-info-sign glyinfo"></span>   No matching results </p>
+                    </li>
+                </ul>
+            </div>
+        </span>
+
+        <!-- Filter selectors to be filled inn by getUnitGroupSets() -->
+        <div id="dropdowndiv" class="btn-group collapse col-md-2">
+            <ul id="dropdown-menu" role="menu" class="dropdown-menu filtermenu">
+                <li>Facility</li>
+                <li class="dropdown-header">Ownership</li>
+                <li>
+                    <select class="form-control filteroption" id="ownershipSelector" (click)="setFilter()"></select>
+                </li>
+                <li class="dropdown-header">Type</li>
+                <li>
+                    <select class="form-control filteroption" id="typeSelector" (click)="setFilter()"></select>
+                </li>
+                <li class="divider"></li>
+                <li>Location</li>
+                <li class="dropdown-header">Rural/Urban</li>
+                <li>
+                    <select class="form-control filteroption" id="locationSelector" (click)="setFilter()"></select>
+                </li>
+            </ul>
         </div>
     </div>
-
-</button>
-
-<div>
-<ul id="dropdown-menu" class="dropdown-menu">
-
-    <li><a href="#">Another action</a></li>
-    <li><a href="#">Something else here</a></li>
-    <li role="separator" class="divider"></li>
-    <li><a href="#">Separated link</a></li>
-    <li><div class="checkbox">
-        <label><input type="checkbox" value="">Option 1</label>
-    </div>
-        <div class="checkbox">
-            <label><input type="checkbox" value="">Option 2</label>
-        </div>
-        <div class="checkbox disabled">
-            <label><input type="checkbox" value="" disabled>Option 3</label>
-        </div></li>
-    <select>
-        <option value="volvo">Volvo</option>
-        <option value="saab">Saab</option>
-        <option value="opel">Opel</option>
-        <option value="audi">Audi</option>
-    </select>
-
-
-</ul>
-
 </div>