Skip to content

Commit 07329c8

Browse files
khoadnguyenkhoadnguyen
authored
Merge pull request #98 from SoftStackFactory/49-register-layout-inconsistencies
49 register layout inconsistencies
2 parents b8a61b5 + 5084401 commit 07329c8

2 files changed

Lines changed: 179 additions & 86 deletions

File tree

‎src/pages/register/register.html‎

Lines changed: 127 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -8,97 +8,142 @@
88
</ion-header>
99

1010
<ion-content >
11+
<div id="header">
12+
<h1 id="title">INTRANSITION</h1>
13+
</div>
14+
<!--
1115
<div class="ion-card">
1216
<div class="card-title">INTRANSITION</div>
1317
</div>
14-
<div class="message">
15-
<p>Transitioning from the military to civilian environment<br>
16-
is more than a job change
17-
</p>
18-
<p><strong>It's a life change
19-
</strong><p>
20-
</div>
18+
-->
19+
20+
<ion-grid fixed>
21+
22+
<br>
23+
24+
<ion-row justify-content-center>
25+
<ion-col col-10>
26+
<h2 text-center>Transitioning from the military to civilian environment is more than just a job change.</h2>
27+
<br>
28+
<h2 id="lifechange" text-center>It's a life change.</h2>
29+
</ion-col>
30+
</ion-row>
31+
32+
<br>
33+
<!--</ion-grid>-->
2134

22-
<form class="form" [formGroup]='validate' (ngSubmit)='regform()'>
23-
<ion-item class="input" no-lines>
24-
<ion-input
25-
class="input"
26-
type="text"
27-
#first
28-
placeholder="First Name"
29-
formControlName='first'
30-
[class.invalid]="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
31-
</ion-input>
32-
</ion-item>
33-
<ion-item class="input" no-lines *ngIf="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
34-
<p class="invalid-text">Enter a valid name</p>
35-
</ion-item><br>
35+
<form [formGroup]='validate' (ngSubmit)='regform()'>
36+
37+
<ion-row justify-content-center>
38+
<ion-col col-10>
39+
<ion-item no-lines>
40+
<ion-input
41+
class="inputs"
42+
type="text"
43+
#first
44+
placeholder="First Name"
45+
formControlName='first'
46+
[class.invalid]="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
47+
</ion-input>
48+
</ion-item>
49+
<ion-item no-lines *ngIf="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
50+
<p class="invalid-text">Enter a valid name</p>
51+
</ion-item><br>
52+
</ion-col>
53+
</ion-row>
3654

37-
<ion-item class="input" no-lines>
38-
<ion-input
39-
class="input"
40-
type="text"
41-
#last
42-
placeholder="Last Name"
43-
formControlName='last'
44-
[class.invalid]="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)"></ion-input>
45-
</ion-item>
46-
<ion-item class="input" no-lines *ngIf="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)">
47-
<p class="invalid-text">Enter a valid name</p>
48-
</ion-item><br>
55+
<ion-row justify-content-center>
56+
<ion-col col-10>
57+
<ion-item no-lines>
58+
<ion-input
59+
type="text"
60+
#last
61+
placeholder="Last Name"
62+
formControlName='last'
63+
[class.invalid]="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)">
64+
</ion-input>
65+
</ion-item>
66+
<ion-item no-lines *ngIf="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)">
67+
<p class="invalid-text">Enter a valid name</p>
68+
</ion-item><br>
69+
</ion-col>
70+
</ion-row>
4971

50-
<ion-item class="input" no-lines>
51-
<ion-input
52-
class="input"
53-
type="email"
54-
#email
55-
placeholder="Email Address"
56-
formControlName='email'
57-
[class.invalid]="!validate.controls.email.valid && (validate.controls.email.dirty || submitAttempt)"></ion-input>
58-
</ion-item>
59-
<ion-item class="input" no-lines *ngIf="!validate.controls.email.valid && (validate.controls.email.dirty || submitAttempt)">
60-
<p class="invalid-text">Enter a valid email</p>
61-
</ion-item><br>
72+
<ion-row justify-content-center>
73+
<ion-col col-10>
74+
<ion-item no-lines>
75+
<ion-input
76+
type="email"
77+
#email
78+
placeholder="Email Address"
79+
formControlName='email'
80+
[class.invalid]="!validate.controls.email.valid && (validate.controls.email.dirty || submitAttempt)">
81+
</ion-input>
82+
</ion-item>
83+
<ion-item no-lines *ngIf="!validate.controls.email.valid && (validate.controls.email.dirty || submitAttempt)">
84+
<p class="invalid-text">Enter a valid email</p>
85+
</ion-item><br>
86+
</ion-col>
87+
</ion-row>
6288

63-
<div formGroupName="pass">
64-
<ion-item class="input" no-lines>
65-
<ion-input
66-
class="input"
67-
type="password"
68-
#pass
69-
placeholder="Password"
70-
formControlName='password'
71-
[class.invalid]="!validate.controls.pass.controls.password.valid && (validate.controls.pass.controls.password.dirty || submitAttempt)"></ion-input>
72-
</ion-item>
73-
<ion-item class="input" no-lines *ngIf="!validate.controls.pass.controls.password.valid && (validate.controls.pass.controls.password.dirty || submitAttempt)">
74-
<p class="invalid-text">Enter a password between 6-30 characters using only letters and numbers</p>
75-
</ion-item><br>
89+
<ion-row justify-content-center>
90+
<ion-col col-10>
91+
<ion-item no-lines>
92+
<ion-input
93+
type="password"
94+
#pass
95+
placeholder="Password"
96+
formControlName='password'
97+
[class.invalid]="!validate.controls.password.valid && (validate.controls.password.dirty || submitAttempt)">
98+
</ion-input>
99+
</ion-item>
100+
<ion-item no-lines *ngIf="!validate.controls.password.valid && (validate.controls.password.dirty || submitAttempt)">
101+
<p class="invalid-text">Enter a password between 6-30 characters using only letters and numbers</p>
102+
</ion-item><br>
103+
</ion-col>
104+
</ion-row>
76105

77-
<ion-item class="input" no-lines>
78-
<ion-input
79-
class="input"
80-
type="password"
81-
#repass
82-
placeholder="Password Confirmation"
83-
formControlName='passwordCheck'
84-
[class.invalid]="!validate.controls.pass.controls.passwordCheck.valid && (validate.controls.pass.controls.passwordCheck.dirty || submitAttempt)"></ion-input>
85-
</ion-item>
86-
<ion-item class="input" no-lines *ngIf="!validate.controls.pass.valid && (validate.controls.pass.controls.passwordCheck.dirty || submitAttempt)">
87-
<p class="invalid-text">Password does not match</p>
88-
</ion-item>
89-
<!--
90-
<div class="error" *ngIf="validate.get('pass.passwordCheck').dirty && validate.get('pass.passwordCheck').hasError('nomatch')">
91-
Email addresses must match
92-
</div>
93-
-->
94-
</div>
106+
<ion-row justify-content-center>
107+
<ion-col col-10>
108+
<ion-item no-lines>
109+
<ion-input
110+
type="password"
111+
#repass
112+
placeholder="Password Confirmation"
113+
formControlName='passwordCheck'
114+
[class.invalid]="!validate.controls.passwordCheck.valid && (validate.controls.passwordCheck.dirty || submitAttempt)">
115+
</ion-input>
116+
</ion-item>
117+
<ion-item no-lines *ngIf="!validate.controls.passwordCheck.valid && (validate.controls.passwordCheck.dirty || submitAttempt)">
118+
<p class="invalid-text">Passwords do not match</p>
119+
</ion-item>
120+
</ion-col>
121+
</ion-row>
95122

96-
<button id="register-button"color="secondary" ion-button [disabled]="!validate.valid">REGISTER </button>
97-
</form>
123+
<br>
124+
<br>
98125

99-
<div class='login2'>
100-
<p id="sign-in">If you already have an account, sign in.</p>
101-
<button id="login-button"color="primary" ion-button>LOGIN</button>
102-
</div>
126+
<ion-row justify-content-center>
127+
<ion-col col-8>
128+
<button id="regButton" ion-button block [disabled]="!validate.valid" (click)='regForm()'>REGISTER</button>
129+
</ion-col>
130+
</ion-row>
131+
</form>
132+
133+
<br>
134+
<br>
135+
136+
<ion-row justify-content-center>
137+
<ion-col col-10>
138+
<h3 text-center>If you already have an account, sign in.</h3>
139+
</ion-col>
140+
</ion-row>
141+
142+
<ion-row justify-content-center>
143+
<ion-col col-8>
144+
<button id="loginButton" ion-button block>LOGIN</button>
145+
</ion-col>
146+
</ion-row>
103147

148+
</ion-grid>
104149
</ion-content>

‎src/pages/register/register.scss‎

Lines changed: 52 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,41 @@
11
page-register {
2+
#regButton {
3+
font-size: 25px;
4+
background-color: rgb(130,180,64);
5+
}
6+
7+
#loginButton {
8+
background-color: rgb(42,61,79);
9+
font-size: 25px
10+
}
11+
12+
#header {
13+
display: flex;
14+
padding: 65px;
15+
justify-content: center;
16+
align-items: center;
17+
background-position: 0px -250px;
18+
background-size: 100% 500%;
19+
background-image: url('../assets/imgs/background.png');
20+
}
21+
22+
#title {
23+
letter-spacing: 3px;
24+
font-weight: bold;
25+
font-family: proxima-nova;
26+
font-size: 70px;
27+
color: white;
28+
}
29+
30+
#lifechange {
31+
font-weight: bold;
32+
}
33+
34+
.inputs {
35+
font-size: 25px;
36+
}
37+
38+
239
.ion-card {
340
display: flex;
441
justify-content: center;
@@ -19,7 +56,7 @@ page-register {
1956
// max-width: 3050px;
2057
// border: 10px solid greenyellow;
2158
// }
22-
59+
2360
.card-title {
2461
text-align: center;
2562
margin: auto;
@@ -48,7 +85,7 @@ page-register {
4885

4986
.input {
5087
margin: .4vw auto;
51-
display: block;
88+
display: flex;
5289
font-size: 3vw;
5390
width: 80%;
5491
height: 8vw;
@@ -76,6 +113,7 @@ page-register {
76113
top: -13px;
77114
}
78115
}
116+
79117
#register-button{
80118
text-align: center;
81119
position: relative;
@@ -96,6 +134,7 @@ page-register {
96134
display: block;
97135
font-size: 2.2vw;
98136
}
137+
99138
#login-button {
100139
height: 8vw;
101140
max-height: 70px;
@@ -112,11 +151,13 @@ page-register {
112151
@media (min-width: 2300px) {
113152

114153
}
154+
115155
@media screen and (min-width:1150px) {
116156
.card-title {
117157
//edited for portrait mode
118158
font-size: 100px; //200px;
119-
}
159+
}
160+
120161
#sign-in {
121162
margin: 50px auto 0px auto;
122163
font-size: 40px;
@@ -128,7 +169,14 @@ page-register {
128169
margin: 3vw auto;
129170
font-size: 40px;
130171
}
131-
}
172+
}
173+
174+
175+
@media screen and (orientation:landscape){
176+
#header {
177+
padding: 20px;
178+
}
179+
}
132180

133181
.invalid {
134182
border: 1px solid #ea6153;

0 commit comments

Comments
 (0)