add help texts

src/app/analyze/analyze.component.ts

@@ -36,24 +36,24 @@ 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 => {
-      console.error(err);
-      this.status = "<label style='color:rgb(209, 39, 39); font-weight:bold;'>Dowloading OSM data failed!</label>\
+      .pipe(catchError(err => {
+        console.error(err);
+        this.status = "<label style='color:rgb(209, 39, 39); font-weight:bold;'>Dowloading OSM data failed!</label>\
       <br>You may have been set on pause by the server, because of too many requests in a short amount of time.";
-      return of("");
-    }))
-    .subscribe((data: string) => {
-      if(data != ""){
-        let osm: OSM = this.osmService.parseOsmContent(data);
-        // Analyze the OSM data
-        this.status = "Analyze OSM data...";
-        this.osmAnalysis = this.osmAnalysisService.getOsmAnalysis(osm);
-        this.status = "";
-      }
-    });
+        return of("");
+      }))
+      .subscribe((data: string) => {
+        if (data != "") {
+          let osm: OSM = this.osmService.parseOsmContent(data);
+          // Analyze the OSM data
+          this.status = "Analyze OSM data...";
+          this.osmAnalysis = this.osmAnalysisService.getOsmAnalysis(osm);
+          this.status = "";
+        }
+      });
   }
 
 }

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">
-
-        <span >
-          <b>{{result.properties.name}}</b> {{result.properties.postcode}} {{result.properties.city}} {{result.properties.country}}
+      <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 }}
         </span>
-
       </div>
     </div>
   </div>

src/app/search/search.component.scss

@@ -1,18 +1,19 @@
-.search-bar{
+.search-bar {
   margin-top: 50px;
   width: 600px;
   transition: 0.1s;
   transition-timing-function: linear;
 
-  &:hover{
+  &:hover,
+  &:focus-within {
     width: 700px;
   }
 
-  input{
+  input {
     width: 100%;
     border: 2px solid rgb(84, 206, 104);
     border-radius: 5px;
-    background-color: rgba(0,0,0,0);
+    background-color: rgba(0, 0, 0, 0);
     color: #fff;
     font-size: 1.5rem;
     padding: 10px;
@@ -21,42 +22,43 @@
     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);
+      background-color: rgba(255, 255, 255, 0.05);
       width: 100%;
     }
-
   }
 }
 
-.search-results{
+.search-results {
   display: block;
   width: 100%;
-  background-color: rgba(255,255,255,0.02);
+  background-color: rgba(255, 255, 255, 0.02);
   border-top: 0px !important;
   border: 2px solid rgb(59, 59, 59);
   margin-top: -2px;
   transition: 0.1s;
   transition-timing-function: linear;
 
-  &:hover{
+  &:hover {
     border-color: rgb(85, 85, 85);
     background-color: rgba(218, 216, 216, 0.03);
   }
 
-  .search-result{
+  .search-result {
     padding-top: 10px;
     padding-bottom: 10px;
     padding-left: 10px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.062);
     font-size: 12pt;
-    cursor:pointer;
+    cursor: pointer;
     transition: 0.1s;
     transition-timing-function: linear;
     letter-spacing: 1.5px;
 
-    &:hover{
+    &:hover {
       border-left: 5px solid rgb(84, 206, 104);
       padding-left: 25px;
       background-color: rgba(218, 216, 216, 0.05);