[Usage Statistics | Trunk]: Change search on home page. Make background of menu same with main.

src/app/home/home.component.css

@@ -10,8 +10,7 @@
   background-image: url("/assets/usage-statistics-assets/home/2.svg");
   background-size: contain;
   background-repeat: no-repeat;
-  background-position: top center;
-  min-height: 60vh;
+  background-position: bottom center;
 }
 
 .second input, .second input:focus {
@@ -23,17 +22,27 @@
   outline: none;
 }
 
+.second input::placeholder {
+  color: #a3a3a3;
+}
+
 .third {
   background-image: url("/assets/usage-statistics-assets/home/3.svg");
   background-size: contain;
   background-repeat: no-repeat;
-  background-position: center center;
-  min-height: 80vh;
+  background-position: bottom center;
 }
 
-a.search, a.search:hover {
+button.search, button.search:hover {
   color: #333333;
   font-weight: 700;
+  border: none;
+  outline: none;
+  background-color: transparent;
+}
+
+button.search:hover {
+  color: var(--portal-main-color);
 }
 
 .card {
@@ -43,6 +52,7 @@ a.search, a.search:hover {
   padding: 50px;
   text-align: center;
   position: relative;
+  height: 113px;
 }
 
 .card > img {

src/app/home/home.component.html

@@ -22,67 +22,69 @@
   </div>
 </ng-template>
 <ng-template #second>
-  <div class="uk-section uk-text-center">
-    <h3>Track Countries Usage Activity</h3>
-    <div class="second">
-      <div class="uk-container uk-container-small">
-        <div class="uk-flex uk-flex-middle uk-align-center uk-margin-large-bottom">
-          <input type="text" class="uk-width-4-5"
-                 placeholder="SEARCH FOR A COUNTRY"
+  <div class="uk-section second uk-text-center">
+    <h3 class="uk-margin-medium-bottom">Track Countries Usage Activity</h3>
+    <div class="uk-container uk-container-small">
+      <form [formGroup]="countryFb" (ngSubmit)="search()">
+        <div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-large-bottom">
+          <input type="text" class="uk-width-3-5"
+                 [placeholder]="(country)?country:'SEARCH FOR A COUNTRY'"
                  aria-label="Number"
-                 [formControl]="countryFb"
+                 formControlName="country"
                  [matAutocomplete]="auto">
-          <mat-autocomplete #auto="matAutocomplete">
+          <mat-autocomplete #auto="matAutocomplete" (optionSelected)="search()">
             <mat-option *ngFor="let option of countries | async" [value]="option">
               {{option}}
             </mat-option>
           </mat-autocomplete>
-          <a class="uk-width-1-6 uk-margin-medium-left search" (click)="search()">
+          <button class="uk-width-1-6 uk-margin-medium-left search" type="submit">
             <img src="assets/usage-statistics-assets/home/search.svg">
             <span class="uk-text-small uk-text-uppercase">search</span>
-          </a>
+          </button>
         </div>
-        <div class="uk-text-bold uk-margin-medium-bottom">
-          <div class="uk-text-uppercase">{{(country) ? country : 'world wide'}}</div>
-          <div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>
-        </div>
-        <div *ngIf="display" class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s uk-text-bold uk-grid-large"
-             uk-grid>
-          <div *ngIf="display.total_repositories">
-            <div class="card">
-              <div class="uk-margin-medium-bottom">
-                Repositories
-              </div>
-              <h3>
-                {{display.total_repositories | number}}
-              </h3>
-              <img src="assets/usage-statistics-assets/home/4.svg">
-            </div>
-          </div>
-          <div *ngIf="display.total_views">
-            <div class="card">
-              <div class="uk-margin-medium-bottom">
-                Views
-              </div>
-              <h3>
-                {{display.total_views | number}}
-              </h3>
-              <img src="assets/usage-statistics-assets/home/5.svg">
-            </div>
-          </div>
-          <div *ngIf="display.total_downloads">
-            <div class="card">
-              <div class="uk-margin-medium-bottom">
-                Downloads
-              </div>
-              <h3>
-                {{display.total_downloads | number}}
-              </h3>
-              <img src="assets/usage-statistics-assets/home/6.svg">
+      </form>
+      <div class="uk-text-bold uk-margin-medium-bottom">
+        <div class="uk-text-uppercase">{{(country) ? country : 'world wide'}}</div>
+        <div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>
+      </div>
+      <div *ngIf="display" class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s uk-text-bold uk-grid-large"
+           uk-grid>
+        <div *ngIf="display.total_repositories">
+          <div class="card">
+            <div class="uk-margin-medium-bottom">
+              Repositories
             </div>
+            <h3>
+              {{display.total_repositories | number}}
+            </h3>
+            <img src="assets/usage-statistics-assets/home/4.svg">
           </div>
         </div>
-        <div *ngIf="!display" class="card uk-text-bold">
+        <div *ngIf="display.total_views">
+          <div class="card">
+            <div class="uk-margin-medium-bottom">
+              Views
+            </div>
+            <h3>
+              {{display.total_views | number}}
+            </h3>
+            <img src="assets/usage-statistics-assets/home/5.svg">
+          </div>
+        </div>
+        <div *ngIf="display.total_downloads">
+          <div class="card">
+            <div class="uk-margin-medium-bottom">
+              Downloads
+            </div>
+            <h3>
+              {{display.total_downloads | number}}
+            </h3>
+            <img src="assets/usage-statistics-assets/home/6.svg">
+          </div>
+        </div>
+      </div>
+      <div *ngIf="!display" class="card uk-text-bold">
+        <div class="uk-position-center">
           No results found for that country
         </div>
       </div>
@@ -90,13 +92,11 @@
   </div>
 </ng-template>
 <ng-template #third>
-  <div class="uk-section uk-text-center">
-    <h3>Monthly Usage Events</h3>
-    <div class="third">
+  <div class="uk-section third uk-text-center">
+      <h3 class="uk-margin-medium-bottom">Monthly Usage Events</h3>
       <div class="uk-container">
-        <iframe width="742" height="453"  seamless frameborder="0" scrolling="no"
+        <iframe width="742" height="453" seamless frameborder="0" scrolling="no"
                 src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRN9KbdyQSnWrC-yNpZj3C0U6_Qp-XQBSm9KY0G1Pz5UMoi1Q0bL5RaC1-oBw3o6kYoT7drlGCjUNCy/pubchart?oid=82603024&amp;format=interactive"></iframe>
-      </div>
     </div>
   </div>
 </ng-template>

src/app/home/home.component.ts

@@ -2,7 +2,7 @@ import {Component, OnInit} from "@angular/core";
 import {UsageStatsService} from "../services/usage-stats.service";
 import {UsageStat} from "../entities/usage-stat";
 import {countries} from "../services/countries";
-import {FormControl} from "@angular/forms";
+import {FormControl, FormGroup} from "@angular/forms";
 import {Observable} from "rxjs";
 import {map, startWith} from "rxjs/operators";
 import {ActivatedRoute} from "@angular/router";
@@ -15,7 +15,9 @@ import {ActivatedRoute} from "@angular/router";
 export class HomeComponent implements OnInit{
   
   public stats: UsageStat[] = [];
-  public countryFb: FormControl = new FormControl();
+  public countryFb: FormGroup = new FormGroup({
+    country: new FormControl('')
+  });
   public countries: Observable<string[]>;
   public country: String;
   public display: UsageStat;
@@ -34,7 +36,7 @@ export class HomeComponent implements OnInit{
       this.stats = stats;
       this.search();
     });
-    this.countries = this.countryFb.valueChanges
+    this.countries = this.countryFb.get('country').valueChanges
       .pipe(
         startWith(''),
         map(value => this._filter(value))
@@ -42,12 +44,12 @@ export class HomeComponent implements OnInit{
   }
   
   public search() {
-    this.country = this.countryFb.value;
+    this.country = this.countryFb.value.country;
     this.display = this.stats.filter(stat => !this.country || stat.country === this.country)[0];
   }
   
   private _filter(value: string): string[] {
     const filterValue = value.toLowerCase();
-    return countries.map(value => value.name).filter(option => option.toLowerCase().includes(filterValue));
+    return countries.map(value => value.name).filter(option => filterValue && option.toLowerCase().includes(filterValue));
   }
 }

src/material.scss

@@ -7,3 +7,7 @@ $my-app-warn:    mat-palette($mat-deep-orange);
 $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
 
 @include angular-material-theme($my-app-theme);
+
+.mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled), .mat-option.mat-active:not(.mat-option-disabled) {
+  background-color: #F8CBBB;
+}

src/styles.css

@@ -17,6 +17,10 @@ main {
   line-height: 21px;
 }
 
+navbar > * {
+  background-color: #F9FBFC;
+}
+
 main.full-height {
   min-height: 100vh;
 }