From 0c43af9ad3dd764a6014ed6bb05bf3d40a9cc2c0 Mon Sep 17 00:00:00 2001 From: justhenrique Date: Sun, 18 Apr 2021 19:04:10 -0300 Subject: [PATCH] minute to mobile --- src/components/Header/styles.ts | 9 ++++ src/components/Input/styles.ts | 2 +- .../Distributions/Distributions.tsx | 10 ++-- .../Minute/components/Distributions/styles.ts | 41 ++++++++++++---- .../Minute/components/Initial/Initial.tsx | 47 ++++++++++--------- src/pages/Minute/components/Initial/styles.ts | 31 +++++++++++- .../MinuteViewer/components/Minute/styles.ts | 7 ++- .../Minute/components/MinuteViewer/styles.ts | 10 ++++ .../Minute/components/OptionButtons/styles.ts | 6 +++ .../ProjectInformation/ProjectInformation.tsx | 26 +++++----- .../components/ProjectInformation/styles.ts | 26 ++++++---- .../components/SubjectModal/styles.ts | 13 +++++ .../Minute/components/Subjects/styles.ts | 10 ++-- src/pages/Minute/components/Topics/Topics.tsx | 3 +- src/pages/Minute/components/Topics/styles.ts | 23 +++++++-- 15 files changed, 193 insertions(+), 71 deletions(-) diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts index d33ebbd..47167a5 100644 --- a/src/components/Header/styles.ts +++ b/src/components/Header/styles.ts @@ -61,4 +61,13 @@ export const StyledHeader = styled.header` border: none; background: none; } + + @media (max-width: 960px) { + zoom: 70%; + height: 6rem; + + img { + zoom: 135%; + } + } `; diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts index be5e3d3..ce06b53 100644 --- a/src/components/Input/styles.ts +++ b/src/components/Input/styles.ts @@ -18,7 +18,7 @@ export const StyledInput = styled.div` h3 { font-weight: 500; font-size: ${props => props.Size || '1.5rem'}; - color: ${props => props.Color || 'var(--gray)'}; + color: ${props => props.Color || 'var(--black)'}; margin-bottom: 5px; } diff --git a/src/pages/Minute/components/Distributions/Distributions.tsx b/src/pages/Minute/components/Distributions/Distributions.tsx index 50ca2dc..ed22c34 100644 --- a/src/pages/Minute/components/Distributions/Distributions.tsx +++ b/src/pages/Minute/components/Distributions/Distributions.tsx @@ -32,9 +32,9 @@ const Distributions = () => { }; const deleteDistributions = (value: string) => { - setDistributions(distributions.filter( - distributionValue => distributionValue !== value, - )); + setDistributions( + distributions.filter(distributionValue => distributionValue !== value), + ); }; return ( @@ -46,7 +46,7 @@ const Distributions = () => {
setDistribution(e.target.value)} /> @@ -63,6 +63,7 @@ const Distributions = () => {
+

Distribuições adicionadas:

{distributions.map(distributionValue => ( {

{distributionValue}

 ))} -
diff --git a/src/pages/Minute/components/Distributions/styles.ts b/src/pages/Minute/components/Distributions/styles.ts index f37a00c..7c1d138 100644 --- a/src/pages/Minute/components/Distributions/styles.ts +++ b/src/pages/Minute/components/Distributions/styles.ts @@ -5,8 +5,7 @@ const StyledDistributions = styled.div` justify-content: center; align-items: center; - width: 100%; - max-width: 102.125rem; + width: 102.125rem; background-color: #ffffff; border-radius: 20px; @@ -23,21 +22,45 @@ const StyledDistributions = styled.div` width: 100%; h1 { - color: var(--gray); - font-size: 2.25rem; + color: var(--black); + font-size: 3rem; font-weight: bold; - - margin-bottom: 4rem; + width: 100%; + text-align: left; } .SectionDistributions { display: grid; grid-template-columns: 1fr 1fr; - gap: 3.3rem; + gap: 2.5rem; + + width: 100%; .DataDepartments { - Button { - margin: 3.438rem 0 0 25.625rem; + display: flex; + flex-direction: column; + align-items: flex-end; + + gap: 2rem; + width: 100%; + } + } + } + + @media (max-width: 960px) { + max-width: 100vw; + .SectionDistributions { + display: flex !important; + flex-direction: column; + + width: 100%; + + .Departments { + h3 { + font-weight: 500; + font-size: 1.5rem; + color: var(--black); + margin-bottom: 5px; } } } diff --git a/src/pages/Minute/components/Initial/Initial.tsx b/src/pages/Minute/components/Initial/Initial.tsx index 91814e6..306b0eb 100644 --- a/src/pages/Minute/components/Initial/Initial.tsx +++ b/src/pages/Minute/components/Initial/Initial.tsx @@ -24,28 +24,31 @@ const Initial = () => {

ATA DE REUNIÃO

- setLocal(e.target.value)} - /> - - setStartDate(e.target.value)} - /> - - setStartHour(e.target.value)} - /> +
+ setLocal(e.target.value)} + /> +
+
+ setStartDate(e.target.value)} + /> + + setStartHour(e.target.value)} + /> +
diff --git a/src/pages/Minute/components/Initial/styles.ts b/src/pages/Minute/components/Initial/styles.ts index 21ce4fd..bec15ee 100644 --- a/src/pages/Minute/components/Initial/styles.ts +++ b/src/pages/Minute/components/Initial/styles.ts @@ -32,12 +32,39 @@ export const StyledInitial = styled.div` border-radius: 20px; padding: 3rem; - gap: 3rem; align-items: center; - justify-content: space-between; + justify-content: center; + gap: 3rem; margin-top: 4rem; + + .Local { + width: 100%; + } + + .HorarioData { + display: flex; + justify-content: center; + align-items: center; + + width: 100%; + gap: 3rem; + } + } + } + + @media (max-width: 960px) { + form { + display: flex; + flex-direction: column; + width: 100%; + max-width: 100vw; + + div { + width: 100%; + max-width: 100vw; + } } } `; diff --git a/src/pages/Minute/components/MinuteViewer/components/Minute/styles.ts b/src/pages/Minute/components/MinuteViewer/components/Minute/styles.ts index 0f41619..27addce 100644 --- a/src/pages/Minute/components/MinuteViewer/components/Minute/styles.ts +++ b/src/pages/Minute/components/MinuteViewer/components/Minute/styles.ts @@ -17,8 +17,13 @@ export const Container = styled.div` margin: 15px 0; } - h2, h3 { + h2, + h3 { margin: 0; font-weight: bolder; } + + @media (max-width: 960px) { + zoom: 30%; + } `; diff --git a/src/pages/Minute/components/MinuteViewer/styles.ts b/src/pages/Minute/components/MinuteViewer/styles.ts index d04319c..5019dc1 100644 --- a/src/pages/Minute/components/MinuteViewer/styles.ts +++ b/src/pages/Minute/components/MinuteViewer/styles.ts @@ -28,4 +28,14 @@ export const Container = styled.div` margin-left: 10px; } } + + @media (max-width: 960px) { + max-width: 100vw; + + .minuteButtons { + zoom: 70%; + justify-content: center !important; + margin: 3rem !important; + } + } `; diff --git a/src/pages/Minute/components/OptionButtons/styles.ts b/src/pages/Minute/components/OptionButtons/styles.ts index fa3bf34..adceb2f 100644 --- a/src/pages/Minute/components/OptionButtons/styles.ts +++ b/src/pages/Minute/components/OptionButtons/styles.ts @@ -16,4 +16,10 @@ export const Container = styled.div` margin-bottom: 5rem; } + + @media (max-width: 960px) { + .buttons { + zoom: 100%; + } + } `; diff --git a/src/pages/Minute/components/ProjectInformation/ProjectInformation.tsx b/src/pages/Minute/components/ProjectInformation/ProjectInformation.tsx index 1fbe3a9..8ea5d22 100644 --- a/src/pages/Minute/components/ProjectInformation/ProjectInformation.tsx +++ b/src/pages/Minute/components/ProjectInformation/ProjectInformation.tsx @@ -85,7 +85,7 @@ const ProjectInformation = () => { setProjectName(e.target.value)} /> @@ -96,17 +96,17 @@ const ProjectInformation = () => {
setName(e.target.value)} /> setRole(e.target.value)} /> @@ -115,24 +115,24 @@ const ProjectInformation = () => {
setEnterprise(e.target.value)} /> setPhone(e.target.value)} /> setEmail(e.target.value)} /> @@ -150,7 +150,7 @@ const ProjectInformation = () => {
-

Participantes

+

Participantes Adicionados:

{members.map(member => ( diff --git a/src/pages/Minute/components/ProjectInformation/styles.ts b/src/pages/Minute/components/ProjectInformation/styles.ts index fbe816b..66b8ced 100644 --- a/src/pages/Minute/components/ProjectInformation/styles.ts +++ b/src/pages/Minute/components/ProjectInformation/styles.ts @@ -22,7 +22,7 @@ const StyledProjectInformation = styled.div` padding: 3rem; h1 { - color: var(--gray); + color: var(--black); font-size: 3rem; font-weight: bold; @@ -33,7 +33,7 @@ const StyledProjectInformation = styled.div` .AddUsers { display: grid; grid-template-columns: 2fr 1fr; - gap: 1.875rem; + gap: 3rem; width: 100%; @@ -42,9 +42,10 @@ const StyledProjectInformation = styled.div` .DataUser { display: flex; flex-direction: column; + gap: 1.5rem; h1 { - color: var(--gray); + color: var(--black); font-size: 2.375rem; font-weight: 500; @@ -53,19 +54,17 @@ const StyledProjectInformation = styled.div` .NameTitle { display: flex; + gap: 1.5rem; justify-content: space-between; } .CompanyPhoneEmail { display: flex; justify-content: space-between; + gap: 1.5rem; margin-top: 0.75rem; } - - Button { - margin: 3rem 0 0 51.25rem; - } } .Users { @@ -75,8 +74,8 @@ const StyledProjectInformation = styled.div` padding-top: 4rem; h2 { - color: var(--gray); - font-size: 1.5ren; + color: var(--black); + font-size: 1.5rem; font-weight: bold; margin-bottom: 0.875rem; @@ -84,6 +83,15 @@ const StyledProjectInformation = styled.div` } } } + + @media (max-width: 960px) { + max-width: 100vw; + + .AddUsers { + display: flex !important; + flex-direction: column; + } + } `; export default StyledProjectInformation; diff --git a/src/pages/Minute/components/Subjects/components/SubjectModal/styles.ts b/src/pages/Minute/components/Subjects/components/SubjectModal/styles.ts index 9b63ae4..053243b 100644 --- a/src/pages/Minute/components/Subjects/components/SubjectModal/styles.ts +++ b/src/pages/Minute/components/Subjects/components/SubjectModal/styles.ts @@ -75,4 +75,17 @@ export const Container = styled.div` } } } + + @media (max-width: 960px) { + .modal { + max-width: 100vw; + textarea { + height: 40rem; + } + + button { + font-size: 80%; + } + } + } `; diff --git a/src/pages/Minute/components/Subjects/styles.ts b/src/pages/Minute/components/Subjects/styles.ts index f70522f..9093615 100644 --- a/src/pages/Minute/components/Subjects/styles.ts +++ b/src/pages/Minute/components/Subjects/styles.ts @@ -7,9 +7,7 @@ const StyledSubjects = styled.div` align-items: left; justify-content: center; - max-width: 102.125rem; - - width: 100%; + width: 102.125rem; background-color: #ffffff; border-radius: 20px; @@ -17,7 +15,7 @@ const StyledSubjects = styled.div` padding: 3rem; h1 { - color: var(--gray); + color: var(--black); font-size: 3rem; font-weight: bold; } @@ -116,6 +114,10 @@ const StyledSubjects = styled.div` } } } + + @media (max-width: 960px) { + max-width: 100vw; + } `; export default StyledSubjects; diff --git a/src/pages/Minute/components/Topics/Topics.tsx b/src/pages/Minute/components/Topics/Topics.tsx index 4dcb875..3869930 100644 --- a/src/pages/Minute/components/Topics/Topics.tsx +++ b/src/pages/Minute/components/Topics/Topics.tsx @@ -51,7 +51,7 @@ const Topics = () => {
setTopicName(e.target.value)} /> @@ -68,6 +68,7 @@ const Topics = () => {
+

Pautas adicionadas:

{topics?.map(topic => (