MycroftAI
/
selene-ui
mirror of https://github.com/MycroftAI/selene-ui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

improved spacing

pull/3/head
Chris Veilleux 2019-03-15 01:39:03 -05:00
parent c166ec41d7
commit 18b852ccde
2 changed files with 66 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
projects/account/src/app/modules/device/defaults/defaults.component.html
View File

@ -5,66 +5,68 @@
<p class="mat-body">Optional values used as defaults during device setup.</p>
<h2 class="mat-h2">Geographical Location</h2>
<mat-form-field [appearance]="'outline'">
<mat-label>Country</mat-label>
<input
matInput
type="text"
formControlName="country"
[matAutocomplete]="countryComplete"
(focus)="getCountries()"
>
<mat-autocomplete #countryComplete="matAutocomplete">
<mat-option *ngFor="let country of filteredCountries$ | async" [value]="country.name">
{{country.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field [appearance]="'outline'">
<mat-label>Region</mat-label>
<input
matInput
type="text"
formControlName="region"
[matAutocomplete]="regionComplete"
(focus)="getRegions()"
>
<mat-autocomplete #regionComplete="matAutocomplete">
<mat-option *ngFor="let region of filteredRegions$ | async" [value]="region.name">
{{region.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field [appearance]="'outline'">
<mat-label>City</mat-label>
<input
matInput
type="text"
formControlName="city"
[matAutocomplete]="cityComplete"
(focus)="getCities()"
>
<mat-autocomplete #cityComplete="matAutocomplete">
<mat-option *ngFor="let city of filteredCities$ | async" [value]="city.name">
{{city.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field [appearance]="'outline'">
<mat-label>Time Zone</mat-label>
<input
matInput
type="text"
formControlName="timezone"
[matAutocomplete]="timezoneComplete"
(focus)="getTimezones()"
>
<mat-autocomplete #timezoneComplete="matAutocomplete">
<mat-option *ngFor="let timezone of filteredTimezones$ | async" [value]="timezone.name">
{{timezone.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<div fxLayout="row wrap" fxLayoutAlign="space-around" fxLayout.xs="column">
<mat-form-field fxFlex.gt-xs="40" [appearance]="'outline'">
<mat-label>Country</mat-label>
<input
matInput
type="text"
formControlName="country"
[matAutocomplete]="countryComplete"
(focus)="getCountries()"
>
<mat-autocomplete #countryComplete="matAutocomplete">
<mat-option *ngFor="let country of filteredCountries$ | async" [value]="country.name">
{{country.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field fxFlex.gt-xs="40" [appearance]="'outline'">
<mat-label>Region</mat-label>
<input
matInput
type="text"
formControlName="region"
[matAutocomplete]="regionComplete"
(focus)="getRegions()"
>
<mat-autocomplete #regionComplete="matAutocomplete">
<mat-option *ngFor="let region of filteredRegions$ | async" [value]="region.name">
{{region.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field fxFlex.gt-xs="40" [appearance]="'outline'">
<mat-label>City</mat-label>
<input
matInput
type="text"
formControlName="city"
[matAutocomplete]="cityComplete"
(focus)="getCities()"
>
<mat-autocomplete #cityComplete="matAutocomplete">
<mat-option *ngFor="let city of filteredCities$ | async" [value]="city.name">
{{city.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field fxFlex.gt-xs="40" [appearance]="'outline'">
<mat-label>Time Zone</mat-label>
<input
matInput
type="text"
formControlName="timezone"
[matAutocomplete]="timezoneComplete"
(focus)="getTimezones()"
>
<mat-autocomplete #timezoneComplete="matAutocomplete">
<mat-option *ngFor="let timezone of filteredTimezones$ | async" [value]="timezone.name">
{{timezone.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<h2 class="mat-h2">Voice</h2>
<account-option-buttons

4
projects/account/src/app/modules/device/defaults/defaults.component.scss
View File

@ -15,4 +15,8 @@ mat-card {
color: mat-color($mycroft-accent, A700);
margin-top: 32px;
}
mat-form-field {
max-width: 280px;
}
}