SavioCarvalhoMoraes/desafio-react-e-typescript-savio-carvalho-moraes
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(form): Adicionado os estilos mobile do formulário

Browse Source
This commit is contained in:
Savio Carvalho Moraes 2023-01-19 23:41:43 -03:00
parent 38c812e39c
commit ea6ea69a0b
12 changed files with 178 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/components/AccordionBody/AccordionBody.tsx
View File

@ -7,21 +7,33 @@ import styles from "./accordionBody.module.scss";
const AccordionBody = () => {
return (
<Tab.Container id="list-group-tabs" defaultActiveKey="#link1">
<Row>
<Col sm={4}>
<Row className="fileiraItens">
<Col sm={4} className="indexLista">
<ListGroup className="accList">
<ListGroup.Item variant="dark" action href="#link1">
Sobre
</ListGroup.Item>
<ListGroup.Item variant="dark" action href="#link2">
Forma de Pagamento
</ListGroup.Item>
<ListGroup.Item variant="dark" action href="#link3">
Entrega
</ListGroup.Item>
<ListGroup.Item variant="dark" action href="#link4">
Troca e Devolução
</ListGroup.Item>
<ListGroup.Item variant="dark" action href="#link5">
Segurança e Privacidade
</ListGroup.Item>
<ListGroup.Item variant="dark" action href="#link6">
Contato
</ListGroup.Item>
</ListGroup>
</Col>
<Col sm={8}>
<Col sm={8} className="conteudoLista">
<Tab.Content>
<Tab.Pane eventKey="#link1">
<div>
<div className="conteudo">
<h2>Sobre</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
@ -31,26 +43,90 @@ const AccordionBody = () => {
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Sed ut perspiciatis unde omnis
iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut
aliquid ex ea commodi consequatur? Quis autem vel eum iure
reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?
mollit anim id est laborum.
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
dolor sit amet, consectetur, adipisci velit, sed quia non
numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem.
</p>
<p>
Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel
illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
</div>
</Tab.Pane>
<Tab.Pane className="contato-item" eventKey="#link2">
<div className="conteudo">
<h2>Forma de Pagamento</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</Tab.Pane>
<Tab.Pane className="contato-item" eventKey="#link3">
<div className="conteudo">
<h2>Entrega</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</Tab.Pane>
<Tab.Pane className="contato-item" eventKey="#link4">
<div className="conteudo">
<h2>Troca e Devolução</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</Tab.Pane>
<Tab.Pane className="contato-item" eventKey="#link5">
<div className="conteudo">
<h2>Segurança e Privacidade</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</Tab.Pane>
<Tab.Pane className="contato-item" eventKey="#link6">
<FormInput></FormInput>
</Tab.Pane>
</Tab.Content>

7
src/components/FormInput/formInput.module.scss
View File

@ -17,6 +17,11 @@
@media screen and (min-width: 2500px) {
font-size: 48px;
}
@media screen and (max-width: 1024px) {
display: flex;
align-items: center;
justify-content: center;
}
}
.form-wrapper form {
width: 100%;
@ -93,6 +98,8 @@
}
#check {
display: flex;
align-items: center;
font-size: 15px;
border: 1px solid #000000;
border-radius: 3px;

2
src/components/NavigationBar/NavigationBar.tsx
View File

@ -59,7 +59,7 @@ const NavigationBar = () => {
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/cursos">
<Link className="nav-link" to="/saiba">
SAIBA MAIS
</Link>
</li>

11
src/components/Router/Router.tsx
View File

@ -5,15 +5,7 @@ import { Home } from "../../pages/Home";
import { Teste } from "../../pages/Teste";
import { Cursos } from "../../pages/Cursos";
import { Institucionais } from "../../pages/Institucionais";
/*
import Home from "./Home";
import Sobre from "./Sobre";
import Usuario from "./Usuario";
<Route component={Home} path="/" exact />
<Route component={Sobre} path="/sobre" />
<Route component={Usuario} path="/usuario" />
*/
import { Saiba } from "../../pages/Saiba";
const RoutesUrl = () => {
return (
<Routes>
@ -23,6 +15,7 @@ const RoutesUrl = () => {
path="/institucionais"
element={<Institucionais titulo="Institucional" />}
/>
<Route path="/saiba" element={<Saiba titulo="Saiba mais" />} />
</Routes>
);
};

10
src/pages/Home.tsx
View File

@ -1,8 +1,12 @@
import React from "react";
import { Header } from "../sectors/Header/Header";
import { Footer } from "../sectors/Footer/Footer";
import { HomeBody } from "../sectors/Body/HomeBody";
const Home = (prop: { titulo: string }) => {
return <div></div>;
return (
<div>
<HomeBody></HomeBody>
</div>
);
};
export { Home };

13
src/pages/Saiba.tsx Normal file
View File

@ -0,0 +1,13 @@
import React from "react";
import { SaibaBody } from "../sectors/Body/SaibaBody";
import { Caminhos } from "../components/Caminhos/Caminhos";
const Saiba = (prop: { titulo: string }) => {
return (
<div>
<Caminhos titulo={prop.titulo}></Caminhos>
<SaibaBody></SaibaBody>
</div>
);
};
export { Saiba };

4
src/sectors/Body/CursosBody.tsx
View File

@ -2,8 +2,8 @@ import React from "react";
const CursosBody = () => {
return (
<div>
<h2>Cursos</h2>;
<div className="body-wrapper">
<h2 className="body-title">CURSOS</h2>;
</div>
);
};

11
src/sectors/Body/HomeBody.tsx Normal file
View File

@ -0,0 +1,11 @@
import React from "react";
const HomeBody = () => {
return (
<div className="body-wrapper">
<h2 className="body-title">BEM-VINDO</h2>
</div>
);
};
export { HomeBody };

4
src/sectors/Body/InstitucionaisBody.tsx
View File

@ -2,8 +2,8 @@ import React from "react";
import { AccordionBody } from "../../components/AccordionBody/AccordionBody";
const InstitucionaisBody = () => {
return (
<div className="institucional-wrapper">
<h2 className="institucional-title">INSTITUCIONAL</h2>
<div className="body-wrapper">
<h2 className="body-title">INSTITUCIONAL</h2>
<AccordionBody></AccordionBody>
</div>
);

11
src/sectors/Body/SaibaBody.tsx Normal file
View File

@ -0,0 +1,11 @@
import React from "react";
const SaibaBody = () => {
return (
<div className="body-wrapper">
<h2 className="body-title">SAIBA MAIS</h2>
</div>
);
};
export { SaibaBody };

18
src/styles/partials/accordionBody.scss
View File

@ -18,3 +18,21 @@
.contato-item {
width: 100%;
}
@media screen and (max-width: 1025px) {
.fileiraItens {
flex-direction: column;
}
.conteudoLista {
width: 100%;
margin-top: 30px;
}
.indexLista {
width: 100%;
}
.conteudo {
h2 {
display: flex;
justify-content: center;
}
}
}

10
src/styles/partials/body.scss
View File

@ -1,15 +1,21 @@
.institucional-wrapper {
.body-wrapper {
width: 100%;
display: flex;
flex-direction: column;
margin: 80px 0 80px 0;
padding: 0 100px 0 100px;
@media screen and (max-width: 1025px) {
padding: 0 16px 0 16px;
}
}
.institucional-title {
.body-title {
font-family: "Roboto";
font-weight: 400;
font-size: 24px;
line-height: 28.13px;
display: flex;
justify-content: center;
margin-bottom: 80px;
@media screen and (min-width: 2500px) {
font-size: 48px;
line-height: 56.25px;