Skip to content

Commit 8282e62

Browse files
michaelhyimichaelhyi
authored
Merge pull request #174 from GTBitsOfGood/Shivani/166-pmt-mobile-views
Mobile redesign for login, sign up, and password reset page
2 parents a98f5e5 + 7f7b48d commit 8282e62

2 files changed

Lines changed: 149 additions & 62 deletions

File tree

‎src/app/auth/layout.module.css‎

Lines changed: 76 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,83 @@
1-
.screen {
2-
width: 100vw;
3-
min-height: 100vh;
4-
background: white;
5-
display: flex;
6-
align-items: center;
7-
justify-content: center;
8-
}
1+
@media screen and (max-width: 768px) {
2+
.screen {
3+
width: 100vw;
4+
min-height: 100vh;
5+
background: white;
6+
display: flex;
7+
flex-direction: column;
8+
align-items: center;
9+
justify-content: center;
10+
}
911

10-
.splitScreen {
11-
display: flex;
12-
width: 100%;
13-
min-height: 100vh;
14-
}
12+
.splitScreen {
13+
display: flex;
14+
flex-direction: column;
15+
min-height: 100vh;
16+
min-width: 100vw;
17+
}
1518

16-
.leftPanel {
17-
background-color: #f4f7fe;
18-
display: flex;
19-
justify-content: center;
20-
align-items: center;
19+
.leftPanel {
20+
background-color: #f4f7fe;
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
height: 60%;
25+
width: 100%;
26+
padding: 2.5% 5%;
27+
}
2128

22-
position: fixed;
23-
width: 60%;
24-
height: 100%;
25-
padding: 0 5%;
26-
}
29+
.rightPanel {
30+
height: 40%;
31+
background-color: white;
32+
display: flex;
33+
justify-content: center;
34+
padding-top: 2.5%;
35+
}
2736

28-
.rightPanel {
29-
margin-left: 60%;
30-
width: 40%;
31-
background-color: white;
32-
display: flex;
33-
justify-content: center;
37+
.rightContainer {
38+
padding: 0 10%;
39+
width: 90%;
40+
}
3441
}
3542

36-
.rightContainer {
37-
padding: 25% 0 10%;
38-
width: 55%;
43+
@media screen and (min-width: 768px) {
44+
.screen {
45+
width: 100vw;
46+
min-height: 100vh;
47+
background: white;
48+
display: flex;
49+
align-items: center;
50+
justify-content: center;
51+
}
52+
53+
.splitScreen {
54+
display: flex;
55+
width: 100%;
56+
min-height: 100vh;
57+
}
58+
59+
.leftPanel {
60+
background-color: #f4f7fe;
61+
display: flex;
62+
justify-content: center;
63+
align-items: center;
64+
65+
position: fixed;
66+
width: 60%;
67+
height: 100%;
68+
padding: 0 5%;
69+
}
70+
71+
.rightPanel {
72+
margin-left: 60%;
73+
width: 40%;
74+
background-color: white;
75+
display: flex;
76+
justify-content: center;
77+
}
78+
79+
.rightContainer {
80+
padding: 25% 0 10%;
81+
width: 55%;
82+
}
3983
}

‎src/components/LeftSideOfPage/LeftSideOfPage.module.css‎

Lines changed: 73 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,79 @@
1-
.wrapper {
2-
display: flex;
3-
flex-direction: column;
4-
margin-bottom: 10%;
5-
}
1+
@media screen and (max-width: 768px) {
2+
.wrapper {
3+
display: flex;
4+
flex-direction: column;
5+
align-items: center;
6+
}
67

7-
.text-wrapper {
8-
display: flex;
9-
flex-direction: column;
10-
width: 80%;
11-
}
8+
.text-wrapper {
9+
display: flex;
10+
flex-direction: column;
11+
width: 95%;
12+
}
1213

13-
.bei {
14-
font-family: var(--font-poppins);
15-
color: #2b3674;
16-
font-size: 48px;
17-
font-weight: 700;
18-
word-wrap: break-word;
19-
padding-bottom: 1%;
20-
}
14+
.bei {
15+
font-family: var(--font-poppins);
16+
color: #2b3674;
17+
font-weight: 700;
18+
word-wrap: break-word;
19+
padding-bottom: 1%;
20+
font-size: 28px;
21+
text-align: center;
22+
}
23+
24+
.slogan {
25+
color: #008afc;
26+
font-size: 20px;
27+
text-align: center;
28+
font-family: var(--font-poppins);
29+
font-weight: 700;
30+
word-wrap: break-word;
31+
width: 100%;
32+
}
2133

22-
.slogan {
23-
color: #008afc;
24-
font-size: 35px;
25-
font-family: var(--font-poppins);
26-
font-weight: 700;
27-
word-wrap: break-word;
28-
width: 100%;
34+
.BEI-image {
35+
padding-bottom: 3%;
36+
width: 35%;
37+
height: 35%;
38+
max-width: 350px;
39+
}
2940
}
3041

31-
.BEI-image {
32-
padding-bottom: 3%;
33-
width: 35%;
34-
height: 35%;
35-
max-width: 350px;
42+
@media screen and (min-width: 768px) {
43+
.wrapper {
44+
display: flex;
45+
flex-direction: column;
46+
margin-bottom: 10%;
47+
}
48+
49+
.text-wrapper {
50+
display: flex;
51+
flex-direction: column;
52+
width: 80%;
53+
}
54+
55+
.bei {
56+
font-family: var(--font-poppins);
57+
color: #2b3674;
58+
font-size: 48px;
59+
font-weight: 700;
60+
word-wrap: break-word;
61+
padding-bottom: 1%;
62+
}
63+
64+
.slogan {
65+
color: #008afc;
66+
font-size: 35px;
67+
font-family: var(--font-poppins);
68+
font-weight: 700;
69+
word-wrap: break-word;
70+
width: 100%;
71+
}
72+
73+
.BEI-image {
74+
padding-bottom: 3%;
75+
width: 35%;
76+
height: 35%;
77+
max-width: 350px;
78+
}
3679
}

0 commit comments

Comments
 (0)