Skip to content

Commit 0c43af9

Browse files
author
justhenrique
committed
minute to mobile
1 parent 080b31b commit 0c43af9

File tree

15 files changed

+193
-71
lines changed

15 files changed

+193
-71
lines changed

‎src/components/Header/styles.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,4 +61,13 @@ export const StyledHeader = styled.header`
6161
border: none;
6262
background: none;
6363
}
64+
65+
@media (max-width: 960px) {
66+
zoom: 70%;
67+
height: 6rem;
68+
69+
img {
70+
zoom: 135%;
71+
}
72+
}
6473
`;

‎src/components/Input/styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const StyledInput = styled.div<Props>`
1818
h3 {
1919
font-weight: 500;
2020
font-size: ${props => props.Size || '1.5rem'};
21-
color: ${props => props.Color || 'var(--gray)'};
21+
color: ${props => props.Color || 'var(--black)'};
2222
2323
margin-bottom: 5px;
2424
}

‎src/pages/Minute/components/Distributions/Distributions.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@ const Distributions = () => {
3232
};
3333

3434
const deleteDistributions = (value: string) => {
35-
setDistributions(distributions.filter(
36-
distributionValue => distributionValue !== value,
37-
));
35+
setDistributions(
36+
distributions.filter(distributionValue => distributionValue !== value),
37+
);
3838
};
3939

4040
return (
@@ -46,7 +46,7 @@ const Distributions = () => {
4646
<div className="DataDepartments">
4747
<Input
4848
title="Área"
49-
styleWidth="49.375rem"
49+
styleWidth="100%"
5050
value={distribution}
5151
onChange={(e: any) => setDistribution(e.target.value)}
5252
/>
@@ -63,6 +63,7 @@ const Distributions = () => {
6363
</div>
6464

6565
<div className="Departments">
66+
<h3>Distribuições adicionadas:</h3>
6667
<ScrollBox>
6768
{distributions.map(distributionValue => (
6869
<BoxInformation
@@ -72,7 +73,6 @@ const Distributions = () => {
7273
<h4>{distributionValue}</h4>
7374
</BoxInformation>
7475
))}
75-
7676
</ScrollBox>
7777
</div>
7878
</div>

‎src/pages/Minute/components/Distributions/styles.ts‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ const StyledDistributions = styled.div`
55
justify-content: center;
66
align-items: center;
77
8-
width: 100%;
9-
max-width: 102.125rem;
8+
width: 102.125rem;
109
1110
background-color: #ffffff;
1211
border-radius: 20px;
@@ -23,21 +22,45 @@ const StyledDistributions = styled.div`
2322
width: 100%;
2423
2524
h1 {
26-
color: var(--gray);
27-
font-size: 2.25rem;
25+
color: var(--black);
26+
font-size: 3rem;
2827
font-weight: bold;
29-
30-
margin-bottom: 4rem;
28+
width: 100%;
29+
text-align: left;
3130
}
3231
3332
.SectionDistributions {
3433
display: grid;
3534
grid-template-columns: 1fr 1fr;
36-
gap: 3.3rem;
35+
gap: 2.5rem;
36+
37+
width: 100%;
3738
3839
.DataDepartments {
39-
Button {
40-
margin: 3.438rem 0 0 25.625rem;
40+
display: flex;
41+
flex-direction: column;
42+
align-items: flex-end;
43+
44+
gap: 2rem;
45+
width: 100%;
46+
}
47+
}
48+
}
49+
50+
@media (max-width: 960px) {
51+
max-width: 100vw;
52+
.SectionDistributions {
53+
display: flex !important;
54+
flex-direction: column;
55+
56+
width: 100%;
57+
58+
.Departments {
59+
h3 {
60+
font-weight: 500;
61+
font-size: 1.5rem;
62+
color: var(--black);
63+
margin-bottom: 5px;
4164
}
4265
}
4366
}

‎src/pages/Minute/components/Initial/Initial.tsx‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -24,28 +24,31 @@ const Initial = () => {
2424
<div className="Initial">
2525
<h1>ATA DE REUNIÃO</h1>
2626
<form action="">
27-
<Input
28-
title="Local"
29-
color="var(--gray)"
30-
styleWidth="49.375rem"
31-
onChange={(e: any) => setLocal(e.target.value)}
32-
/>
33-
34-
<Input
35-
title="Data de Inicio"
36-
color="var(--gray)"
37-
styleWidth="23.75rem"
38-
type="date"
39-
onChange={(e: any) => setStartDate(e.target.value)}
40-
/>
41-
42-
<Input
43-
title="Horário de Inicio"
44-
color="var(--gray)"
45-
styleWidth="23.75rem"
46-
type="time"
47-
onChange={(e: any) => setStartHour(e.target.value)}
48-
/>
27+
<div className="Local">
28+
<Input
29+
title="Local"
30+
color="var(--black)"
31+
styleWidth="100%"
32+
onChange={(e: any) => setLocal(e.target.value)}
33+
/>
34+
</div>
35+
<div className="HorarioData">
36+
<Input
37+
title="Data de Inicio"
38+
color="var(--black)"
39+
styleWidth="100%"
40+
type="date"
41+
onChange={(e: any) => setStartDate(e.target.value)}
42+
/>
43+
44+
<Input
45+
title="Horário"
46+
color="var(--black)"
47+
styleWidth="100%"
48+
type="time"
49+
onChange={(e: any) => setStartHour(e.target.value)}
50+
/>
51+
</div>
4952
</form>
5053
</div>
5154
</StyledInitial>

‎src/pages/Minute/components/Initial/styles.ts‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,39 @@ export const StyledInitial = styled.div`
3232
border-radius: 20px;
3333
3434
padding: 3rem;
35-
gap: 3rem;
3635
3736
align-items: center;
38-
justify-content: space-between;
37+
justify-content: center;
38+
gap: 3rem;
3939
4040
margin-top: 4rem;
41+
42+
.Local {
43+
width: 100%;
44+
}
45+
46+
.HorarioData {
47+
display: flex;
48+
justify-content: center;
49+
align-items: center;
50+
51+
width: 100%;
52+
gap: 3rem;
53+
}
54+
}
55+
}
56+
57+
@media (max-width: 960px) {
58+
form {
59+
display: flex;
60+
flex-direction: column;
61+
width: 100%;
62+
max-width: 100vw;
63+
64+
div {
65+
width: 100%;
66+
max-width: 100vw;
67+
}
4168
}
4269
}
4370
`;

‎src/pages/Minute/components/MinuteViewer/components/Minute/styles.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,13 @@ export const Container = styled.div`
1717
margin: 15px 0;
1818
}
1919
20-
h2, h3 {
20+
h2,
21+
h3 {
2122
margin: 0;
2223
font-weight: bolder;
2324
}
25+
26+
@media (max-width: 960px) {
27+
zoom: 30%;
28+
}
2429
`;

‎src/pages/Minute/components/MinuteViewer/styles.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,14 @@ export const Container = styled.div`
2828
margin-left: 10px;
2929
}
3030
}
31+
32+
@media (max-width: 960px) {
33+
max-width: 100vw;
34+
35+
.minuteButtons {
36+
zoom: 70%;
37+
justify-content: center !important;
38+
margin: 3rem !important;
39+
}
40+
}
3141
`;

‎src/pages/Minute/components/OptionButtons/styles.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,10 @@ export const Container = styled.div`
1616
1717
margin-bottom: 5rem;
1818
}
19+
20+
@media (max-width: 960px) {
21+
.buttons {
22+
zoom: 100%;
23+
}
24+
}
1925
`;

‎src/pages/Minute/components/ProjectInformation/ProjectInformation.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ const ProjectInformation = () => {
8585
<Input
8686
title="Nome do Projeto"
8787
Size="2.375rem"
88-
color="var(--gray)"
88+
color="var(--black)"
8989
styleWidth="102.1rem"
9090
onChange={(e: any) => setProjectName(e.target.value)}
9191
/>
@@ -96,17 +96,17 @@ const ProjectInformation = () => {
9696

9797
<div className="NameTitle">
9898
<Input
99-
title="Nome completo do Participante"
100-
color="var(--gray)"
101-
styleWidth="49.375rem"
99+
title="Nome completo"
100+
color="var(--black)"
101+
styleWidth="100%"
102102
value={name}
103103
onChange={(e: any) => setName(e.target.value)}
104104
/>
105105

106106
<Input
107107
title="Título / Cargo"
108-
color="var(--gray)"
109-
styleWidth="23.75rem"
108+
color="var(--black)"
109+
styleWidth="100%"
110110
value={role}
111111
onChange={(e: any) => setRole(e.target.value)}
112112
/>
@@ -115,24 +115,24 @@ const ProjectInformation = () => {
115115
<div className="CompanyPhoneEmail">
116116
<Input
117117
title="Empresa"
118-
color="var(--gray)"
119-
styleWidth="23.75rem"
118+
color="var(--black)"
119+
styleWidth="100%"
120120
value={enterprise}
121121
onChange={(e: any) => setEnterprise(e.target.value)}
122122
/>
123123

124124
<Input
125-
color="var(--gray)"
125+
color="var(--black)"
126126
title="Telefone"
127-
styleWidth="23.75rem"
127+
styleWidth="100%"
128128
value={phone}
129129
onChange={(e: any) => setPhone(e.target.value)}
130130
/>
131131

132132
<Input
133133
title="E-mail"
134-
color="var(--gray)"
135-
styleWidth="23.75rem"
134+
color="var(--black)"
135+
styleWidth="100%"
136136
value={email}
137137
onChange={(e: any) => setEmail(e.target.value)}
138138
/>
@@ -150,7 +150,7 @@ const ProjectInformation = () => {
150150
</div>
151151

152152
<div className="Users">
153-
<h2>Participantes</h2>
153+
<h2>Participantes Adicionados:</h2>
154154

155155
<ScrollBox>
156156
{members.map(member => (

0 commit comments

Comments
 (0)