Skip to content

Commit 0811f21

Browse files
jeroenouwjeroenouw
committed
Material "mat-input-container" refactored to "mat-form-field"
1 parent 1abbf6f commit 0811f21

10 files changed

+53
-53
lines changed

‎src/app/components/auth/phone-signin/phone-signin.component.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@
33
<h3>Phone Number login</h3><h5>Currently only saving phonenumber to database, login in progress. (temporary place)</h5>
44

55
<br/>+
6-
<mat-input-container>
6+
<mat-form-field>
77
<input matInput type="text" [(ngModel)]="phoneNumber.country" class="input" placeholder="31" maxlength="2">
8-
</mat-input-container>
9-
<mat-input-container>
8+
</mat-form-field>
9+
<mat-form-field>
1010
<input matInput type="text" [(ngModel)]="phoneNumber.area" class="input" placeholder="612" maxlength="3">
11-
</mat-input-container>
12-
<mat-input-container>
11+
</mat-form-field>
12+
<mat-form-field>
1313
<input matInput type="text" [(ngModel)]="phoneNumber.prefix" class="input" placeholder="345" maxlength="3">
14-
</mat-input-container>
15-
<mat-input-container>
14+
</mat-form-field>
15+
<mat-form-field>
1616
<input matInput type="text" [(ngModel)]="phoneNumber.line" class="input" placeholder="678" maxlength="4">
17-
</mat-input-container>
17+
</mat-form-field>
1818

1919
<div id="recaptcha-container"></div><br/>
2020

@@ -23,9 +23,9 @@ <h3>Phone Number login</h3><h5>Currently only saving phonenumber to database, lo
2323
<div *ngIf="windowRef.confirmationResult">
2424
<hr>
2525
<h4>Enter your verification code here</h4><br>
26-
<mat-input-container>
26+
<mat-form-field>
2727
<input matInput type="text" name="code" [(ngModel)]="verificationCode">
28-
</mat-input-container>
28+
</mat-form-field>
2929

3030
<button mat-raised-button (click)="verifyLoginCode()">Verify</button>
3131
</div>

‎src/app/components/auth/signin.component.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<!-- Progress bar -->
44
<mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
55

6-
<mat-card>
6+
<mat-card>
77
<h3>Social login</h3>
88
<form (ngSubmit)="onSignInGoogle(g)" #g="ngForm">
99
<mat-card-actions class="button">
@@ -26,19 +26,19 @@ <h3>Social login</h3>
2626
<button class="btn btn-block btn-social btn-github" type="submit" [disabled]="!gh.valid"><span class="fa fa-github"></span> Login with your Github Account</button>
2727
</mat-card-actions>
2828
</form>
29-
29+
3030
<hr>
3131

3232
<h3>Login</h3>
3333
<form (ngSubmit)="onSignin(f)" #f="ngForm">
34-
<mat-input-container class="full-width">
34+
<mat-form-field class="full-width">
3535
<!--<label for ="email">Mail</label>-->
3636
<input matInput placeholder="Email" type="email" id="email" name="email" ngModel required>
37-
</mat-input-container>
38-
<mat-input-container class="full-width">
37+
</mat-form-field>
38+
<mat-form-field class="full-width">
3939
<!--<label for ="password">Password</label>-->
4040
<input matInput placeholder="Password" type="password" id="password" name="password" ngModel required>
41-
</mat-input-container>
41+
</mat-form-field>
4242
<mat-card-actions class="button">
4343
<button mat-raised-button class="primary" type="submit" [disabled]="!f.valid">Login</button>
4444
</mat-card-actions>
@@ -50,7 +50,7 @@ <h3>Anonymous login</h3>
5050
<form (ngSubmit)="onSigninAnonymous(a)" #a="ngForm">
5151
<mat-card-actions class="button">
5252
<button mat-raised-button class="primary" type="submit">Login anonymously</button>
53-
</mat-card-actions>
53+
</mat-card-actions>
5454
</form>
5555

5656
</mat-card>

‎src/app/components/auth/signup.component.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -30,32 +30,32 @@ <h3>Social Sign up</h3>
3030
<h3>Or sign up with your email</h3>
3131

3232
<form (ngSubmit)="onSignup(f)" #f="ngForm">
33-
<mat-input-container class="full-width">
33+
<mat-form-field class="full-width">
3434
<!--<label for ="email">Mail</label>-->
3535
<input matInput placeholder="Email" type="email" id="email" name="email" ngModel required>
36-
</mat-input-container>
37-
<mat-input-container class="full-width">
36+
</mat-form-field>
37+
<mat-form-field class="full-width">
3838
<!--<label for ="password">Password</label>-->
3939
<input matInput placeholder="Password" type="password" id="password" name="password" ngModel required>
40-
</mat-input-container>
40+
</mat-form-field>
4141
<mat-card-actions class="button">
4242
<button mat-raised-button class="primary" type="submit" [disabled]="!f.valid">Register</button>
4343
</mat-card-actions>
4444
</form>
4545
<!--
4646
<form (ngSubmit)="onSignupCellphone(cp)" #cp="ngForm">
47-
<mat-input-container class="full-width">-->
47+
<mat-form-field class="full-width">-->
4848
<!--<label for ="email">Mail</label>-->
4949
<!--<input matInput placeholder="phoneNumber" type="phoneNumber" id="phoneNumber" name="phoneNumber" ngModel>
50-
</mat-input-container>
51-
<mat-input-container class="form-group">-->
50+
</mat-form-field>
51+
<mat-form-field class="form-group">-->
5252
<!--<label for ="password">Password</label>-->
5353
<!--<input matInput placeholder="appVerifier" type="appVerifier" id="appVerifier" name="appVerifier" ngModel>
54-
</mat-input-container>
55-
<mat-input-container class="form-group">-->
54+
</mat-form-field>
55+
<mat-form-field class="form-group">-->
5656
<!--<label for ="password">Password</label>-->
5757
<!--<input matInput placeholder="code" type="code" id="code" name="code" ngModel>
58-
</mat-input-container>
58+
</mat-form-field>
5959
<mat-card-actions class="button">
6060
<button mat-raised-button class="primary" type="submit" [disabled]="!cp.valid">Cellphone</button>
6161
</mat-card-actions>

‎src/app/components/contact/contact.component.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,38 @@
22
<mat-card>
33
<h1>Contact us</h1>
44
<form class="form" (ngSubmit)="onSubmit(c)" #c="ngForm" >
5-
<mat-input-container class="full-width">
5+
<mat-form-field class="full-width">
66
<input matInput placeholder="Company" id="company" name="company" value="Google" ngModel required>
7-
</mat-input-container>
7+
</mat-form-field>
88

99
<table class="full-width" cellspacing="0"><tr>
10-
<td><mat-input-container class="full-width">
10+
<td><mat-form-field class="full-width">
1111
<input matInput placeholder="First name" id="firstname" name="firstname" ngModel required>
12-
</mat-input-container></td>
13-
<td><mat-input-container class="full-width">
12+
</mat-form-field></td>
13+
<td><mat-form-field class="full-width">
1414
<input matInput placeholder="Last name" id="lastname" name="lastname" ngModel required>
15-
</mat-input-container></td>
15+
</mat-form-field></td>
1616
</tr></table>
1717

1818
<p>
19-
<mat-input-container class="full-width">
19+
<mat-form-field class="full-width">
2020
<textarea matInput placeholder="Address" value="Streetname 12a" id="address" name="address" ngModel required></textarea>
21-
</mat-input-container>
21+
</mat-form-field>
2222
</p>
2323

2424
<table class="full-width" cellspacing="0"><tr>
25-
<td><mat-input-container class="full-width">
25+
<td><mat-form-field class="full-width">
2626
<input matInput placeholder="City" id="city" name="city" ngModel required>
27-
</mat-input-container></td>
28-
<td><mat-input-container class="full-width">
27+
</mat-form-field></td>
28+
<td><mat-form-field class="full-width">
2929
<input matInput #postalCode maxlength="6" id="postal" name="postal" placeholder="Zip Code" value="2900TY" ngModel required>
3030
<mat-hint align="end">{{postalCode.value.length}} / 6</mat-hint>
31-
</mat-input-container></td>
31+
</mat-form-field></td>
3232
</tr></table>
3333
<p>
34-
<mat-input-container class="full-width">
34+
<mat-form-field class="full-width">
3535
<textarea matInput placeholder="Your message" id="message" name="message" ngModel required></textarea>
36-
</mat-input-container>
36+
</mat-form-field>
3737
</p>
3838
<br />
3939
<button mat-raised-button type="submit" [disabled]="c.invalid">Submit</button>

‎src/app/components/email-me/email-me.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<form class="form" [formGroup]="form" (ngSubmit)="onSubmit(f)" #f="ngForm">
22
<mat-card>
33
<h3>Keep in touch!</h3>
4-
<mat-input-container class="full-width">
4+
<mat-form-field class="full-width">
55
<input matInput formControlName="email" placeholder="Your Email" type="email" ngModel required>
6-
</mat-input-container>
6+
</mat-form-field>
77
<div *ngIf="!form.controls.email.valid && form.controls.email.dirty">
88
<p>Please enter a valid email.</p>
99
</div>

‎src/app/components/messages/messages.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ <h1>Messages</h1> <h4>(currently only passes messages to database, visible in co
1414
</div>
1515
</div>
1616
<!-- <div class="highlight">
17-
<mat-input-container class="full-width">
17+
<mat-form-field class="full-width">
1818
<textarea matInput type="textarea" placeholder="Message here:" [(ngModel)]="newMessage" (keyup.enter)="sendMessage()"></textarea>
19-
</mat-input-container>
19+
</mat-form-field>
2020
<br />
2121
<a mat-raised-button class="send-message" (click)="sendMessage()">Send</a>
2222
</div> -->

‎src/app/components/messages/messages.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
mat-input-container {
1+
mat-form-field {
22
left: 25%;
33
width: 50%;
44
}

‎src/app/components/misc/misc.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ <h4>Various components ready to use in your own project.</h4>
1010

1111
<!-- Miscellaneous material components -->
1212
<h3>Two-way data binding :</h3>
13-
<mat-input-container class="full-width">
13+
<mat-form-field class="full-width">
1414
<input matInput placeholder="I am feeling good!" type="text" [(ngModel)]="answer"/>
15-
</mat-input-container>
15+
</mat-form-field>
1616

1717
<mat-toolbar>Repeat yourself : {{answer}}</mat-toolbar>
1818

‎src/app/components/profile/profile-settings.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ <h3>My profile settings</h3>
44

55
<form class="form" (ngSubmit)="onUpdateUserInfo(sv)" #sv="ngForm">
66

7-
<mat-input-container class="form-group">
7+
<mat-form-field class="form-group">
88
<input matInput placeholder="Username" id="displayName" name="displayName" [(ngModel)]="displayName" required>
9-
</mat-input-container>
9+
</mat-form-field>
1010

11-
<mat-input-container class="form-group">
11+
<mat-form-field class="form-group">
1212
<textarea matInput placeholder="Short Bio" rows="6" id="bio" name="bio" [(ngModel)]="bio" required></textarea>
13-
</mat-input-container>
13+
</mat-form-field>
1414

1515
<hr>
1616

‎src/app/components/profile/profile-settings.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ mat-card {
1313
margin: 100px auto;
1414
}
1515

16-
mat-input-container {
16+
mat-form-field {
1717
width: 100%;
1818
}
1919

0 commit comments

Comments
 (0)