add help texts

src/app/analyze/analyze.component.ts

@@ -36,7 +36,7 @@ export class AnalyzeComponent implements OnInit {
     let minLat: number = parseFloat(this.lat!) - 0.13;
     let maxLat: number = parseFloat(this.lat!) + 0.13;
 
-    this.status = "Downloading OSM data...";
+    this.status = "Downloading OSM data... This might take a few minutes ";
 
     this.overpassApiService.sendQueryRequest(`${minLon},${minLat},${maxLon},${maxLat}`)
       .pipe(catchError(err => {

src/app/search/search.component.html

@@ -1,18 +1,38 @@
 <div class="search-bar center">
-  <input class="center" type="text" name="searchValue" #searchInput (change)="inputChange(searchInput.value)" placeholder="Search your address" />
+  <input
+    class="center"
+    type="text"
+    name="searchValue"
+    #searchInput
+    (change)="inputChange(searchInput.value)"
+    placeholder="Search address (Enter to search)"
+    tabindex="1"
+    [ngClass]="{ active: searchInput.value }"
+  />
 
-
-  <div *ngIf="searchResults && searchResults.length > 0" class="search-results center">
-    <br>
+  <div
+    *ngIf="searchResults && searchResults.length > 0"
+    class="search-results center"
+  >
+    <br />
     <div *ngFor="let result of searchResults">
-      <div class="search-result"
-       (click)="analyze(result.geometry!.coordinates[0], result.geometry!.coordinates[1])"
-        *ngIf="result.geometry!.coordinates && result.geometry?.coordinates!.length >= 2">
-
+      <div
+        class="search-result"
+        (click)="
+          analyze(
+            result.geometry!.coordinates[0],
+            result.geometry!.coordinates[1]
+          )
+        "
+        *ngIf="
+          result.geometry!.coordinates &&
+          (result.geometry?.coordinates)!.length >= 2
+        "
+      >
         <span>
-          <b>{{result.properties.name}}</b> {{result.properties.postcode}} {{result.properties.city}} {{result.properties.country}}
+          <b>{{ result.properties.name }}</b> {{ result.properties.postcode }}
+          {{ result.properties.city }} {{ result.properties.country }}
         </span>
-
       </div>
     </div>
   </div>

src/app/search/search.component.scss

@@ -4,7 +4,8 @@
   transition: 0.1s;
   transition-timing-function: linear;
 
-  &:hover{
+  &:hover,
+  &:focus-within {
     width: 700px;
   }
 
@@ -21,12 +22,13 @@
     transition: 0.1s;
     transition-timing-function: linear;
 
-    &:hover{
+    &:hover,
+    &:focus,
+    &.active {
       border-color: rgb(128, 240, 147);
       background-color: rgba(255, 255, 255, 0.05);
       width: 100%;
     }
-
   }
 }