[Usage Statistics | Trunk]: Change search on home page. Make background of menu same with main.
This commit is contained in:
parent
5008da8cc2
commit
85577a42ea
|
@ -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 {
|
||||
|
|
|
@ -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&format=interactive"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
File diff suppressed because it is too large
Load Diff
Before Width: | Height: | Size: 177 KiB After Width: | Height: | Size: 232 KiB |
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -17,6 +17,10 @@ main {
|
|||
line-height: 21px;
|
||||
}
|
||||
|
||||
navbar > * {
|
||||
background-color: #F9FBFC;
|
||||
}
|
||||
|
||||
main.full-height {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue