From 85577a42ea18191d49dadacea66c5adaec899cb7 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Wed, 17 Jun 2020 14:32:35 +0000 Subject: [PATCH] [Usage Statistics | Trunk]: Change search on home page. Make background of menu same with main. --- src/app/home/home.component.css | 20 +- src/app/home/home.component.html | 108 +- src/app/home/home.component.ts | 12 +- src/assets/usage-statistics-assets/home/2.svg | 1818 ++++++++--------- src/material.scss | 4 + src/styles.css | 4 + 6 files changed, 993 insertions(+), 973 deletions(-) diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css index e5e4110..58094d1 100644 --- a/src/app/home/home.component.css +++ b/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 { diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 8c6a1b6..7a2a303 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -22,67 +22,69 @@ -
-

Track Countries Usage Activity

-
-
-
- +

Track Countries Usage Activity

+
+
+
+ - + {{option}} - +
-
-
{{(country) ? country : 'world wide'}}
-
Results
-
-
-
-
-
- Repositories -
-

- {{display.total_repositories | number}} -

- -
-
-
-
-
- Views -
-

- {{display.total_views | number}} -

- -
-
-
-
-
- Downloads -
-

- {{display.total_downloads | number}} -

- + +
+
{{(country) ? country : 'world wide'}}
+
Results
+
+
+
+
+
+ Repositories
+

+ {{display.total_repositories | number}} +

+
-
+
+
+
+ Views +
+

+ {{display.total_views | number}} +

+ +
+
+
+
+
+ Downloads +
+

+ {{display.total_downloads | number}} +

+ +
+
+
+
+
No results found for that country
@@ -90,13 +92,11 @@
-
-

Monthly Usage Events

-
+
+

Monthly Usage Events

- -
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 44697d4..ae73261 100644 --- a/src/app/home/home.component.ts +++ b/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; 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)); } } diff --git a/src/assets/usage-statistics-assets/home/2.svg b/src/assets/usage-statistics-assets/home/2.svg index b524a84..4dc09af 100644 --- a/src/assets/usage-statistics-assets/home/2.svg +++ b/src/assets/usage-statistics-assets/home/2.svg @@ -1,1375 +1,1375 @@ - + - + - + - + - + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - - - - + + + + diff --git a/src/material.scss b/src/material.scss index 1957d96..95bb8c4 100644 --- a/src/material.scss +++ b/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; +} diff --git a/src/styles.css b/src/styles.css index b0132fd..9d043c7 100644 --- a/src/styles.css +++ b/src/styles.css @@ -17,6 +17,10 @@ main { line-height: 21px; } +navbar > * { + background-color: #F9FBFC; +} + main.full-height { min-height: 100vh; }