searchbar design, lukke resultat, hoyde med scroll og tomme inputen + plassering
authorRoza Moustafa <roza.92m@hotmail.com>
Sun, 6 Dec 2015 14:35:51 +0000 (15:35 +0100)
committerRoza Moustafa <roza.92m@hotmail.com>
Sun, 6 Dec 2015 14:35:51 +0000 (15:35 +0100)
src/components/app.html
src/components/search/search.html
src/components/search/search.ts
src/css/map.css

index 57e6d01..874d3be 100644 (file)
@@ -4,6 +4,7 @@
     <div class="col-lg-3 col-md-4 col-xs-5 no-padding"><mou-sidebar (tempmarker)="map.tempMarker($event)" #sidebar></mou-sidebar></div>
     <mou-map (newactive)="sidebar.update($event)" (neworg)="sidebar.add($event)"#map></mou-map>
 
+
 </div>
 
 
index 5102804..b00679f 100644 (file)
@@ -2,7 +2,7 @@
 
     <label class="sr-only" for="livesearch">Search</label>
 
-    <form>
+    <form id="myForm">
         <div class="row">
             <input
                     mou-live-search
                     value=""/>
 
 
-            <!--<button class="exitsearch" id="exitsearch" (click)="emptyByClick()">
-          &cross; </button>-->
+            <!--   onblur= "this.placeholder = 'Search'"
+                    onfocus="this.placeholder = ''"-->
+
+
             <button type="button" class="knapp col-md-2" (click)="toggle()"
                     onclick="$('#ownershipSelector, #typeSelector, #locationSelector').prop('selectedIndex',0);"
                     data-toggle="collapse" data-target="#dropdown-menu">
         </div>
     </form>
 
+    <div class="row">
 <span [hidden]="hideDiv()">
-
-
-    <div class="divresult" id="divresult" [hidden]="checkOrgunits()">
-        <ul id="d" class="dropdown-menu result">
-            <li id="c" *ng-for="#orgunit of filteredOrgunits" id="orglist" (click)="getMoreInfo(orgunit)">
-                <a id="left-menu" href="#">{{orgunit.name}}<br/><span>{{orgunit.lastUpdated}}</span></a>
+    <div class="divresult col-md-10" id="divresult" [hidden]="checkOrgunits()">
+        <ul class="dropdown-menu result">
+            <li><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="#">{{orgunit.name}}</a>
             </li>
         </ul>
     </div>
-
 </span>
-
-
-    <ul id="dropdown-menu" class="dropdown-menu">
-        <li><select class="form-control filtervalg" id="ownershipSelector" (click)="setFilter()">
-
-        </select></li>
-        <li><select class="form-control filtervalg" id="typeSelector" (click)="setFilter()">
-
-        </select></li>
-        <li><select class="form-control filtervalg" id="locationSelector" (click)="setFilter()">
-
-        </select></li>
+        <div class="row">
+            <div class="test col-md-8"></div>
+
+
+<div id="dropdowndiv" class="btn-group collapse col-md-2">
+
+    <ul id="dropdown-menu" role="menu" class="dropdown-menu meny">
+        <li>Facility</li>
+        <li class="dropdown-header">Ownership</li>
+        <li>
+            <select class="form-control filtervalg" id="ownershipSelector" (click)="setFilter()"></select>
+        </li>
+        <li class="dropdown-header">Type</li>
+        <li>
+            <select class="form-control filtervalg" 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 filtervalg" id="locationSelector" (click)="setFilter()"></select>
+        </li>
     </ul>
 
-
 </div>
 
+        </div>
+
+</div>
 
 
 
+</div>
 
index 28aad7a..4933210 100644 (file)
@@ -25,14 +25,11 @@ export class Search {
     option: any;
     searchBar: any;
     filterset: boolean = false;
-    emptySearch: any;
-    slide: any;
 
 
     constructor(public http:Http) {
         this.newsearch = new EventEmitter();
         this.visible = true;
-        this.emptySearch = document.getElementById("divresult");
         this.getUnitGroupSets();
         this.ownershipSelector = document.getElementById("ownershipSelector");
         this.typeSelector = document.getElementById("typeSelector");
@@ -45,6 +42,8 @@ export class Search {
     getMoreInfo(orgunit) {
         this.orgunits = [];
         this.newsearch.next(orgunit.id);
+        return document.getElementById("myForm").reset();
+
     }
 
     //pil opp og ned
@@ -57,15 +56,14 @@ export class Search {
     hideDiv(){
         if(livesearch.value == "")
             return true;
-
     }
 
 
     emptyByClick(){
-        return this.emptySearch = document.getElementById("divresult").style.visibility = "hidden";
+        this.orgunits = [];
+        return document.getElementById("myForm").reset();
     }
 
-
     getUnitGroupSets(){
         this.http.get(dhisAPI + "/api/organisationUnitGroupSets")
         .map(res => res.json())
@@ -104,7 +102,7 @@ export class Search {
 
     setOptionHeader(selector, value){
         this.option = document.createElement("option");
-        this.option.text = "-- " + value + " --";
+        this.option.text = "All";
         this.option.value = "";
         selector.appendChild(this.option);
     }
index cb967a2..a434134 100644 (file)
@@ -15,114 +15,64 @@ html, body {
     z-index: 0;
 }
 
-/*
-.search div{
-    position: relative;
-}*/
-
-.results > li > a{
-    position: relative;
-
-    margin-top: 10px;
-    display: block;
-    padding: 3px 5px;
-    clear: both;
-    font-weight: 400;
-    line-height: 1.42857143;
-    color: #333;
-    white-space: nowrap
-}
-
-.results > li > a:focus, .results > li > a:hover {
-    position: relative;
-
-    margin-top: 20px;
-    color: #262626;
-    text-decoration: none;
-    background-color: #f5f5f5
-}
-
-.dropdown-menu{
-    margin-top: -17px;
-    margin-left: 649px;
-    background-color: white;
-    border-radius: 0px;
-}
-
-.dropdown-menu li{
-    background-color: white;
-    padding-left: 20px;
-    padding-right: 20px;
-}
+/* search div */
 
 #search {
     position: relative;
     z-index: 1;
     margin-top: 20px;
-    padding-left: 20px;
+    margin-left: 20px;
     background: transparent;
     display: inline-block;
     width: 400px;
     max-width: 100%;
 }
 
+/* search input*/
+
 #livesearch{
-    box-shadow: 0 0 1px darkgrey;
-    padding: 5px 0 5px 20px;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
     font-size: 16px;
     font-family: Montserrat, sans-serif;
-    border-left: 1px solid darkgrey;
-    border-top:1px solid darkgrey;
-    border-bottom: 1px solid darkgrey;
-    border-right: 0 none;
+    border: 1px solid white;
     height: 52px;
     margin-right: 0;
-    color: white;
+    color: black;
     outline: none;
-    background: #e2e2e2;
+    background: white;
     float: left;
     box-sizing: border-box;
     transition: all 0.15s;
+    border-radius: 2px 0px 0px 2px; /* top left, top right, bottom right, bottom left */
+
 }
 
 ::-webkit-input-placeholder {
-    color: white;
+    color: grey;
 }
 :-moz-placeholder {
-    color: white;
+    color: grey;
 }
 ::-moz-placeholder {
-    color: white;
+    color: grey;
 }
 :-ms-input-placeholder {
-    color: white;
+    color: grey;
 }
 
 #livesearch:focus {
-    background: darkgrey;
-}
-
-.dropdown-div{
-    border: 0 none;
-    background: #BAB8B8;
-    width: 60px;
-    float: left;
-    padding: 0;
-    margin: 0;
-    text-align: center;
-    height: 52px;
-    cursor: pointer;
-    border-radius: 0px;
+    background: white;
 }
 
 .knapp
 {
-    box-shadow: 0 0 1px darkgrey;
-    border-right: 1px solid darkgrey;
-    border-top:1px solid darkgrey;
-    border-bottom: 1px solid darkgrey;
-    border-left: 0 none;
-    background: #BAB8B8;
+    border-radius: 0px 2px 2px 0px; /* top left, top right, bottom right, bottom left */
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
+    border-right: 1px solid white;
+    border-top:1px solid white;
+    border-bottom: 1px solid white;
+    border-left: 2px solid darkgrey;
+    background: white;
     width: 60px;
     padding: 0;
     margin: 0;
@@ -132,38 +82,125 @@ html, body {
     float: left;
 }
 
-.glyphicon-menu-down{
-    color: white;
+.knapp:focus {
+    outline:0;
+}
+
+/* search results */
+
+
+.divresult{
+    padding:0;
+    margin: 0;
+    background-color: white;
+    border-radius: 0;
+    border-top: 2px solid darkgrey;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
+
+}
+
+.test{
+    padding:0;
+    margin: 0;
+    height: 40vh;
+    position: relative;
+    z-index: 1;
+    display: inline-block;
+    width: 80%;
+    margin-top: 0;
+    left: 0;
+    float: left;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-color: transparent;
+    border: none;
+    border-radius: 0px;
 }
 
 .result{
-    width: 500px;
-    margin-left: 150px;
-    display: block;
-    position: absolute;
-    top: 100%;
+    height: 25vh;
+    overflow: scroll;
+    position: relative;
+    z-index: 1;
+    display: inline-block;
+    width: 100%;
+    margin-top: 0;
     left: 0;
-    z-index: 1000;
     float: left;
-    min-width: 160px;
-    padding: 1px 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-radius: 4px;
-    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
-    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+    border: 1px solid whitesmoke;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
+    border-radius: 0px 0px 2px 2px; /* top left, top right, bottom right, bottom left */
 }
 
 .result li{
-    margin-top: 20px;
-    margin-left: 20px;
     padding: 0.5em 0.5em 0.5em 0;
+    margin: auto;
     float: none;
+    border-bottom: 1px solid grey;
+
+}
+
+.result > li:first-child {
+    padding: 5px;
+    border: none;
+}
+
+.results > li > a{
+    position: relative;
+    margin-top: 10px;
+    display: block;
+    padding: 3px 5px;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.42857143;
+    color: #333;
+    white-space: nowrap
+}
+
+.results > li > a:focus, .results > li > a:hover {
+    position: relative;
+    margin-top: 20px;
+    color: #262626;
+    text-decoration: none;
+    background-color: #f5f5f5
+}
+
+.emptyresult{
+    float: right;
+    border: 0;
+}
+
+.emptyresult:hover{
+    outline:0;
+    background: white;
+}
+
+/* filter options */
+
+.dropdowndiv{
+    padding:0;
+    margin: 0;
+}
+.meny{
+    top: 0px;
+    margin-top: 0;
+    z-index: 1;
+    position: absolute;
+    float: left;
+    background-color: white;
+    border-radius: 0px;
+    margin-left: 6px;
+}
+
+.meny li{
+    background-color: white;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 
 .filtervalg{
@@ -177,7 +214,7 @@ html, body {
     border: 1px solid darkgrey;
     color: black;
     outline: none;
-    background: #BAB8B8;
+    background: whitesmoke;
     box-sizing: border-box;
     transition: all 0.15s;
 }
@@ -186,29 +223,11 @@ html, body {
     display:none;
 }
 
-.exitsearch {
-    border-radius: 60px;
-    background-color: lightgrey;
-    border: black;
-    position: relative;
-}
-
-.exitsearch:hover{
-    background-color: white;
-    position: relative;
-
-}
-
-.exitsearch:after {
-    display: block;
-    margin: auto;
-    padding: 2px;
-    cursor: pointer;
+.glyphicon-menu-down{
+    color: white;
 }
-.livesearch:not(:valid) ~ .close-icon {
-     display: none;
- }
 
+/* modal */
 
 #divModal{
     position: relative;
@@ -216,6 +235,11 @@ html, body {
 
 }
 
+/* other */
+
 .no-padding{
     padding: 0;
+    padding: 0 !important;
+    margin: 0 !important;
 }
+