MaDgIK
/
usage-counts
13
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

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

This commit is contained in:
k.triantafyllou 2020-06-17 14:32:35 +00:00
parent 5008da8cc2
commit 85577a42ea
6 changed files with 993 additions and 973 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/home/home.component.css
View File

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

108
src/app/home/home.component.html
View File

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

12
src/app/home/home.component.ts
View File

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

1818
src/assets/usage-statistics-assets/home/2.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 177 KiB

After

Width:  |  Height:  |  Size: 232 KiB

4
src/material.scss
View File

@ -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); $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme); @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;
}

4
src/styles.css
View File

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