from to search styling

sdhoek · Mar 27, 2018 · 0cbd2ee · 0cbd2ee
1 parent df6752a
commit 0cbd2ee
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 12 deletions.
diff --git a/src/app/map/from-to/from-to.component.css b/src/app/map/from-to/from-to.component.css
@@ -4,8 +4,8 @@
  width: 380px;
  background: #f6be0e;
  z-index: 500;
- right: 40px;
- top: 40px;
+ right: 20px;
+ top: 20px;
  display:flex;
  flex-direction: row;
  padding: 7px 10px 13px;
@@ -17,25 +17,23 @@ label {
  top: -3px;
 }
 
-.from-container input{
+#from-container input{
  width: 141px;
 }
 
 input {
- line-height: 26px;
  width: 145px;
  background: #f3ca44;
  border: solid 2px black;
- padding: 2px 5px;
+ padding: 6px 5px;
 }
 
 button {
  background: #cfa109;
  border: solid 2px black;
  cursor: pointer;
- line-height: 26px;
  margin-top: 21px;
- padding: 1px 9px 2px;
+ padding: 5px 9px 6px;
 }
 
 button:hover {
@@ -44,4 +42,55 @@ button:hover {
 
 button:active {
  background: #f3ca44;
-}
+}
+
+#vansuggests{
+ position: absolute;
+ background: #ffe79a;
+ left: 0px;
+ top: 76px;
+ width: 400px;
+}
+
+#vansuggests ul{
+ list-style-type: none;
+ padding-left: 0;
+ margin: 0;
+}
+
+#vansuggests li{
+ padding: 8px 10px;
+ cursor: pointer;
+ font-size: 14px;
+ border-bottom: 1px solid #f6be0e;
+}
+
+#vansuggests li:hover{
+ background: #fff;
+}
+
+#naarsuggests{
+ position: absolute;
+ background: #ffe79a;
+ left: 0px;
+ top: 76px;
+ width: 400px;
+}
+
+#naarsuggests ul{
+ list-style-type: none;
+ padding-left: 0;
+ margin: 0;
+}
+
+#naarsuggests li{
+ padding: 8px 10px;
+ cursor: pointer;
+ font-size: 14px;
+ border-bottom: 1px solid #f6be0e;
+}
+
+#naarsuggests li:hover{
+ background: #fff;
+}
+
diff --git a/src/app/map/from-to/from-to.component.html b/src/app/map/from-to/from-to.component.html
@@ -3,7 +3,7 @@
  <div id="from-container">
  <label>van</label>
  <input [(ngModel)]="van" (keyup)="vanUp($event)" placeholder="Kies een startpunt" >
- <div id="vansuggests">
+ <div *ngIf="vanSuggests.length > 0" id="vansuggests">
  <ul>
  <li *ngFor="let vanSuggest of vanSuggests" (click)="locateVan(vanSuggest)">
  {{vanSuggest.weergavenaam}}
@@ -16,7 +16,7 @@
 <label>naar</label>
 
 <input [(ngModel)]="naar" (keyup)="naarUp($event)" placeholder="Kies een bestemming">
-<div id="naarsuggests">
+<div *ngIf="naarSuggests.length > 0" id="naarsuggests">
  <ul>
  <li *ngFor="let naarSuggest of naarSuggests" (click)="locateNaar(naarSuggest)">
  {{naarSuggest.weergavenaam}}

diff --git a/src/styles.css b/src/styles.css
@@ -84,10 +84,10 @@ app-map{
 
 app-popup{
  position: absolute;
- top: 116px;
+ top: 96px;
  z-index: 401;
  background: #101010e8;
- right: 40px;
+ right: 20px;
  width: 400px;
  max-height: 80%;
  max-width: 80%;