sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Enfin du style en utilisant Material Angular

Browse Source
This commit is contained in:
Sébastien André
2020-04-01 19:55:11 +02:00
parent c4e9ac5c52
commit 5c961f8f3d
12 changed files with 89 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Front/skydivelogs-app/src/app/login/login.component.html
View File

@@ -1,4 +1,4 @@
<div class="col-md-6 offset-md-3 mt-5"> <div class="col-md-4 offset-md-3 mt-5">
<div class="card"> <div class="card">
<h4 class="card-header">Login to the Skydive log</h4> <h4 class="card-header">Login to the Skydive log</h4>
<div class="card-body"> <div class="card-body">

17
Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.css
View File

@@ -1,18 +1 @@
/* label {
display: inline-block;
width: 150px;
}
input[type="text"] {
width: 200px;
} */
mat-form-field.mat-form-field {
font-size: 16px;
}
mat-label {
color: #424242;
}

9
Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html
View File

@@ -1,7 +1,10 @@
<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)"> <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
<p class="form-group"> <p>
<label for="aircraftName">Aircraft name</label> <mat-form-field>
<input id="aircraftName" type="text" formControlName="aircraftName" class="form-control"> <mat-label>Aircraft name</mat-label>
<input matInput type="text" formControlName="aircraftName">
</mat-form-field>
</p> </p>
<button type="submit" mat-raised-button color="accent">Add</button> <button type="submit" mat-raised-button color="accent">Add</button>
</form> </form>

25
Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.css
View File

@@ -1,26 +1 @@
/* label {
display: inline-block;
width: 150px;
}
input[type="text"] {
width: 200px;
}
input[type="email"] {
width: 200px;
}
textarea {
width: 200px;
} */
mat-form-field.mat-form-field {
font-size: 16px;
}
mat-label {
color: #424242;
}

55
Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.html
View File

@@ -1,31 +1,34 @@
<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)"> <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
<mat-form-field> <p>
<mat-label>Dropzone name</mat-label> <mat-form-field>
<input matInput formControlName="dzName"> <mat-label>Dropzone name</mat-label>
</mat-form-field> <input matInput type="text" formControlName="dzName" />
<br> </mat-form-field>
<mat-form-field> </p>
<mat-label>GPS</mat-label> <p>
<input matInput formControlName="gps"> <mat-form-field>
</mat-form-field> <mat-label>GPS</mat-label>
<br> <input matInput type="text" formControlName="gps" />
<mat-form-field> </mat-form-field>
<mat-label>Address</mat-label> </p>
<textarea matInput formControlName="address" placeholder="Address of the DZ"></textarea> <p>
</mat-form-field> <mat-form-field>
<br> <mat-label>Address of the DZ</mat-label>
<mat-form-field> <textarea matInput formControlName="address"></textarea>
<mat-label>Mail of contact</mat-label> </mat-form-field>
<input matInput formControlName="contactMail"> </p>
</mat-form-field> <p>
<br> <mat-form-field>
<mat-form-field> <mat-label>Mail of contact</mat-label>
<input matInput type="text" formControlName="contactMail" />
</mat-form-field>
</p>
<p>
<mat-checkbox formControlName="isDz">Is a dropzone</mat-checkbox> <mat-checkbox formControlName="isDz">Is a dropzone</mat-checkbox>
</mat-form-field> </p>
<br> <p>
<mat-form-field>
<mat-checkbox formControlName="isTunnel">Is a tunnel</mat-checkbox> <mat-checkbox formControlName="isTunnel">Is a tunnel</mat-checkbox>
</mat-form-field> </p>
<br>
<button type="submit" mat-raised-button color="accent">Add</button> <button type="submit" mat-raised-button color="accent">Add</button>
</form> </form>

16
Front/skydivelogs-app/src/app/new-gear/new-gear.component.css
View File

@@ -1,17 +1 @@
/* label {
display: inline-block;
width: 150px;
}
input[type="text"] {
width: 200px;
} */
mat-form-field.mat-form-field {
font-size: 16px;
}
mat-label {
color: #424242;
}

56
Front/skydivelogs-app/src/app/new-gear/new-gear.component.html
View File

@@ -1,31 +1,45 @@
<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)"> <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
<p class="form-group"> <p>
<label for="name">Name of gear</label> <mat-form-field>
<input id="name" type="text" formControlName="name" class="form-control"> <mat-label>Name of gear</mat-label>
<input matInput type="text" formControlName="name">
</mat-form-field>
</p> </p>
<p class="form-group"> <p>
<label for="manufacturer">Manufacturer</label> <mat-form-field>
<input id="manufacturer" type="text" formControlName="manufacturer" class="form-control"> <mat-label>Manufacturer</mat-label>
<input matInput type="text" formControlName="manufacturer">
</mat-form-field>
</p> </p>
<p class="form-group"> <p>
<label for="minSize">Min size of canopy</label> <mat-form-field>
<input id="minSize" type="text" formControlName="minSize" class="form-control"> <mat-label>Min size of canopy</mat-label>
<input matInput type="text" formControlName="minSize">
</mat-form-field>
</p> </p>
<p class="form-group"> <p>
<label for="maxSize">Max size of canopy</label> <mat-form-field>
<input id="maxSize" type="text" formControlName="maxSize" class="form-control"> <mat-label>Max size of canopy</mat-label>
<input matInput type="text" formControlName="maxSize">
</mat-form-field>
</p> </p>
<p class="form-group"> <p>
<label for="aad">AAD system</label> <mat-form-field>
<input id="aad" type="text" formControlName="aad" class="form-control"> <mat-label>AAD system</mat-label>
<input matInput type="text" formControlName="aad">
</mat-form-field>
</p> </p>
<p class="form-group"> <p>
<label for="mainCanopy">Main Canopy</label> <mat-form-field>
<input id="mainCanopy" type="text" formControlName="mainCanopy" class="form-control"> <mat-label>Main Canopy</mat-label>
<input matInput type="text" formControlName="mainCanopy">
</mat-form-field>
</p> </p>
<p class="form-group"> <p>
<label for="reserveCanopy">Reserve canopy</label> <mat-form-field>
<input id="reserveCanopy" type="text" formControlName="reserveCanopy" class="form-control"> <mat-label>Reserve canopy</mat-label>
<input matInput type="text" formControlName="reserveCanopy">
</mat-form-field>
</p> </p>
<button mat-raised-button color="accent" type="submit">Add</button> <button mat-raised-button color="accent" type="submit">Add</button>

17
Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.css
View File

@@ -1,18 +1 @@
/* label {
display: inline-block;
width: 150px;
}
input[type="text"] {
width: 200px;
}
*/
mat-form-field.mat-form-field {
font-size: 16px;
}
mat-label {
color: #424242;
}

9
Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.html
View File

@@ -1,7 +1,10 @@
<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)"> <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
<p class="form-group"> <p>
<label for="jumptypeName">Jump type name</label> <mat-form-field>
<input id="jumptypeName" type="text" formControlName="jumptypeName" class="form-control"> <mat-label>Jump type name</mat-label>
<input matInput type="text" formControlName="jumptypeName">
</mat-form-field>
</p> </p>
<button type="submit" mat-raised-button color="accent">Add</button> <button type="submit" mat-raised-button color="accent">Add</button>
</form> </form>

8
Front/skydivelogs-app/src/app/new-jump/new-jump.component.css
View File

@@ -12,11 +12,3 @@
.formNewJumps>* { .formNewJumps>* {
width: 100%; width: 100%;
} }
mat-form-field.mat-form-field {
font-size: 16px;
}
mat-label {
color: #424242;
}

16
Front/skydivelogs-app/src/app/new-jump/new-jump.component.html
View File

@@ -7,7 +7,7 @@
{{jumpType.name}} {{jumpType.name}}
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>
<button mat-raised-button color="accent" *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear" <button mat-button *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear"
(click)="selectedJumpType=undefined"> (click)="selectedJumpType=undefined">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
@@ -21,7 +21,7 @@
{{aircraft.name}} {{aircraft.name}}
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>
<button mat-raised-button color="accent" *ngIf="selectedAircraft" matSuffix mat-icon-button aria-label="Clear" <button mat-button *ngIf="selectedAircraft" matSuffix mat-icon-button aria-label="Clear"
(click)="selectedAircraft=undefined"> (click)="selectedAircraft=undefined">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
@@ -38,7 +38,7 @@
style="width: 16px;"> style="width: 16px;">
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>
<button mat-raised-button color="accent" *ngIf="selectedDz" matSuffix mat-icon-button aria-label="Clear" (click)="selectedDz=undefined"> <button mat-button *ngIf="selectedDz" matSuffix mat-icon-button aria-label="Clear" (click)="selectedDz=undefined">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
@@ -51,7 +51,7 @@
{{gear.name}} {{gear.name}}
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>
<button mat-raised-button color="accent" *ngIf="selectedGear" matSuffix mat-icon-button aria-label="Clear" <button mat-button *ngIf="selectedGear" matSuffix mat-icon-button aria-label="Clear"
(click)="selectedGear=undefined"> (click)="selectedGear=undefined">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
@@ -73,14 +73,14 @@
<mat-form-field> <mat-form-field>
<input matInput placeholder="Exit altitude" [(ngModel)]="exitAltitude" name="exitAltitude" type="number"> <input matInput placeholder="Exit altitude" [(ngModel)]="exitAltitude" name="exitAltitude" type="number">
<button mat-raised-button color="accent" *ngIf="exitAltitude" matSuffix mat-icon-button aria-label="Clear" <button mat-button *ngIf="exitAltitude" matSuffix mat-icon-button aria-label="Clear"
(click)="exitAltitude=undefined"> (click)="exitAltitude=undefined">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Deploy altitude" [(ngModel)]="deployAltitude" name="deployAltitude" type="number"> <input matInput placeholder="Deploy altitude" [(ngModel)]="deployAltitude" name="deployAltitude" type="number">
<button mat-raised-button color="accent" *ngIf="deployAltitude" matSuffix mat-icon-button aria-label="Clear" <button mat-button *ngIf="deployAltitude" matSuffix mat-icon-button aria-label="Clear"
(click)="deployAltitude=undefined"> (click)="deployAltitude=undefined">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
@@ -88,14 +88,14 @@
<mat-form-field> <mat-form-field>
<input matInput placeholder="Count of jumps" [(ngModel)]="countOfJumps" name="countOfJumps" type="number"> <input matInput placeholder="Count of jumps" [(ngModel)]="countOfJumps" name="countOfJumps" type="number">
<button mat-raised-button color="accent" *ngIf="countOfJumps" matSuffix mat-icon-button aria-label="Clear" <button mat-button *ngIf="countOfJumps" matSuffix mat-icon-button aria-label="Clear"
(click)="countOfJumps=undefined"> (click)="countOfJumps=undefined">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
<br /> <br />
<button mat-raised-button color="accent" *ngIf="isValidatedForm()">Submit</button> <button mat-button *ngIf="isValidatedForm()">Submit</button>
</form> </form>
<ng-template #loading> <ng-template #loading>

4
Front/skydivelogs-app/src/assets/css/custom-theme.scss
View File

@@ -223,3 +223,7 @@ $altTheme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
padding: .5em .85em; padding: .5em .85em;
min-height: 2.5em; min-height: 2.5em;
} }
.mat-form-field {
width: 100%;
}