Samuel/desafio-react-e-typescript-samuelcondack
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feat: Adiciona o layout Mobile

Browse Source
This commit is contained in:
SamuelCondack 2023-01-11 20:30:35 -03:00
parent 4be1045b38
commit 7a8a055b5f
12 changed files with 295 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
my-app/src/assets/svgs/Close.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2284 1.28215L1.22996 10.9942C0.550673 11.6541 0.568968 12.7044 1.27083 13.3401C1.97268 13.9759 3.09232 13.9564 3.77161 13.2966L13.77 3.58449C14.4493 2.92466 14.431 1.87436 13.7292 1.23858C13.0273 0.602806 11.9077 0.622311 11.2284 1.28215Z" fill="white"/>
<path d="M1.65213 3.40819L10.8751 13.7186C11.5082 14.4263 12.6262 14.5239 13.3724 13.9366C14.1185 13.3493 14.2102 12.2995 13.5771 11.5918L4.35414 1.28143C3.72107 0.573715 2.603 0.476092 1.85686 1.06338C1.11072 1.65067 1.01906 2.70048 1.65213 3.40819Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 638 B

3
my-app/src/assets/svgs/Plus.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.625 3.32031H7.79688V4.6875H4.625V8.28125H3.17188V4.6875H0V3.32031H3.17188V0H4.625V3.32031Z" fill="#303030"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 220 B

174
my-app/src/components/FooterTop/FooterTop.modules.scss
View File

@ -1,25 +1,174 @@
.footerTop{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
@media (max-width: 1024px){
flex-direction: column;
align-items: baseline;
}
}
.menuTitle{
width: 100%;
align-items: center;
& label {
width: 85px;
}
}
.CheckInput{
display: none;
@media (max-width: 1024px){
&:checked ~ .footerUl{
height: auto;
max-height: 200px;
transform: all;
}
}
}
.CHeckLabel{
width: 155px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: #303030;
margin-left: 40px;
@media (max-width: 1024px) {
margin-left: 16px;
padding-right: 20px;
text-transform: capitalize;
}
& h3{
margin-bottom: 0;
}
}
.h3Check{
margin-bottom: 0;
margin-top: 0;
height: 18px;
}
.h3Check::after{
content: "Institucional";
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
margin-left: 40px;
@media (max-width: 1024px){
margin-left: 16px;
}
}
.h3Check::before{
@media (max-width: 1024px){
content: "+";
float: right;
margin-right: 16px;
}
}
.CHeckLabel2{
width: 155px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: #303030;
margin-left: 40px;
@media (max-width: 1024px) {
margin-left: 16px;
padding-right: 20px;
text-transform: capitalize;
}
& h3{
margin-bottom: 0;
}
}
.h3Check2{
margin-bottom: 0;
margin-top: 0;
height: 18px;
}
.h3Check2::after{
content: "Dúvidas";
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
margin-left: 40px;
@media (max-width: 1024px){
margin-left: 16px;
}
}
.h3Check2::before{
@media (max-width: 1024px){
content: "+";
float: right;
margin-right: 16px;
}
}
.CHeckLabel3{
width: 155px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: #303030;
margin-left: 40px;
@media (max-width: 1024px) {
margin-left: 16px;
padding-right: 20px;
text-transform: capitalize;
}
& h3{
margin-bottom: 0;
}
}
.h3Check3{
margin-bottom: 0;
margin-top: 0;
height: 18px;
}
.h3Check3::after{
content: "Fale Conosco";
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
margin-left: 40px;
@media (max-width: 1024px){
margin-left: 16px;
}
}
.h3Check3::before{
@media (max-width: 1024px){
content: "+";
float: right;
margin-right: 16px;
}
}
.footerUl{
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
& p{
width: 155px;
height: 0px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: #303030;
@media (max-width: 1024px){
overflow: hidden;
max-height: 0;
transition: all .3s linear
}
& a{
width: 155px;
@ -33,7 +182,9 @@
text-decoration: none;
color: #303030;
}
}
.ulP2{
width: 155px;
height: 0px;
@ -65,6 +216,7 @@
display: flex;
flex-direction: column;
gap: 5px;
margin-right: 16px;
}
.backTop{
cursor: pointer;

55
my-app/src/components/FooterTop/FooterTop.tsx
View File

@ -6,33 +6,46 @@ import Youtube from '../../assets/svgs/Youtube.svg'
import Linkedin from '../../assets/svgs/Linkedin.svg'
import Whatsapp from '../../assets/svgs/Whatsapp.svg'
import Arrow from '../../assets/svgs/ArrowEdt.png'
import Plus from '../../assets/svgs/Plus.svg'
const FooterTop = () => {
return (
<>
<footer className='footerTop_wrapper'>
<div className='footerTop'>
<ul className='footerUl'>
<p>INSTITUCIONAL</p>
<li><a href="/">Quem Somos</a></li>
<li><a href="/">Política de Privacidade</a></li>
<li><a href="/">Segurança</a></li>
<li><a href="/">Seja um Revendedor</a></li>
</ul>
<ul className='footerUl'>
<p>INSTITUCIONAL</p>
<li><a href="/">Entrega</a></li>
<li><a href="/">Pagamento</a></li>
<li><a href="/">Troca e Devoluções</a></li>
<li><a href="/">Dúvidas Frequentes</a></li>
</ul>
<ul className='footerUl'>
<p>FALE CONOSCO</p>
<p className='ulP2'>Atendimento Ao Consumidor</p>
<p>(11) 4159-9504</p>
<p className='ulP2'>Atendimento Online</p>
<p>(11) 99433-8825</p>
</ul>
<div className='menuTitle'>
<label className='CheckLabel' htmlFor="inst"><h3 className='h3Check'></h3></label>
<input type="checkbox" className='CheckInput' id="inst"/>
<ul className='footerUl'>
<li className='footerLi'><a href="/">Quem Somos</a></li>
<li className='footerLi'><a href="/">Política de Privacidade</a></li>
<li className='footerLi'><a href="/">Segurança</a></li>
<li className='footerLi'><a href="/">Seja um Revendedor</a></li>
</ul>
</div>
<div className='menuTitle'>
<input type="checkbox" className='CheckInput' id='Duvidas'/>
<label className='CheckLabel2' htmlFor="Duvidas"><h3 className='h3Check2'></h3></label>
<ul className='footerUl'>
<li className='footerLi'><a href="/">Entrega</a></li>
<li className='footerLi'><a href="/">Pagamento</a></li>
<li className='footerLi'><a href="/">Troca e Devoluções</a></li>
<li className='footerLi'><a href="/">Dúvidas Frequentes</a></li>
</ul>
</div>
<div className='menuTitle'>
<input type="checkbox" className='CheckInput' id='fale'/>
<label className='CheckLabel3' htmlFor="fale"><h3 className='h3Check3'></h3></label>
<ul className='footerUl'>
<p className='ulP2'>Atendimento Ao Consumidor</p>
<p>(11) 4159-9504</p>
<p className='ulP2'>Atendimento Online</p>
<p>(11) 99433-8825</p>
</ul>
</div>
<div>
<div className='networkIcons'>
<a href="/"><img src={Facebook} alt="FacebooIcon" /></a>

2
my-app/src/components/Header/Header.modules.scss
View File

@ -10,6 +10,8 @@
@media (max-width: 1024px){
flex-wrap: wrap;
justify-content: space-between;
padding-left: 16px;
padding-right: 16px;
}
}
.academylogo{

5
my-app/src/components/MenuMobile/MenuMobile.modules.scss
View File

@ -10,7 +10,7 @@
}
.menuTop{
background-color: black;
width: 988px;
max-width: 988px;
height: 78px;
z-index: 1;
display: flex;
@ -35,10 +35,11 @@
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
margin-right: 16px;
}
.menuBody{
background-color: white;
width: 988px;
max-width: 988px;
height: 585px;
margin: 0;
list-style: none;

5
my-app/src/components/MenuMobile/MenuMobile.tsx
View File

@ -1,5 +1,6 @@
import './MenuMobile.modules.scss'
import {NavLink} from "react-router-dom"
import Close from '../../assets/svgs/Close.svg'
const MenuMobile = () => {
return(
@ -7,7 +8,9 @@ const MenuMobile = () => {
<div className='menuAll'>
<div className='menuTop'>
<a href="/">ENTRAR</a>
<NavLink className="closeMenu" to="/">X</NavLink>
<NavLink className="closeMenu" to="/">
<img src={Close} alt="Close Button" />
</NavLink>
</div>
<ul className='menuBody'>
<li>

35
my-app/src/components/NewsLetter/NewsLetter.modules.scss
View File

@ -7,10 +7,20 @@
border-color: #000000;
margin-top: 81px;
margin-bottom: 50px;
@media (max-width: 1024px) {
justify-content: left;
margin-left: 16px;
margin-right: 16px;
width: inherit;
margin-bottom: 24px;
}
}
.newssletter{
margin-top: 16px;
margin-bottom: 16px;
@media (max-width: 1024px) {
width: 100%;
}
}
.letter{
font-family: 'Roboto';
@ -21,6 +31,16 @@
letter-spacing: 0.05em;
font-variant: small-caps;
color: #303030;
@media (max-width: 1024px) {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
letter-spacing: 0.05em;
font-variant: small-caps;
color: #303030;
}
}
.errorD{
height: 0px;
@ -55,6 +75,12 @@
&::placeholder{
color: #C4C4C4;
}
@media (max-width: 1024px) {
width: inherit;
margin-bottom: 16px;
margin-top: 16px;
margin-right: 0px;
}
}
& button {
background: #000000;
@ -71,5 +97,14 @@
letter-spacing: 0.05em;
color: #FFFFFF;
cursor: pointer;
@media (max-width: 1024px) {
width: inherit;
}
}
}
.letterForm{
@media (max-width: 1024px) {
display: flex;
flex-direction: column;
}
}

3
my-app/src/components/NewsLetter/NewsLetter.tsx
View File

@ -24,7 +24,8 @@ const NewsLetter = () => {
<div className='newssletter'>
<label className='letter' htmlFor="email">ASSINE NOSSA NEWSLETTER</label>
<div className='LetterInputButton'>
<form onSubmit={handleSubmit}>
<form className='letterForm'
onSubmit={handleSubmit}>
{errors.email && touched.email &&
<div className='errorD'>
<p className='errorPara'>{errors.email}</p></div>}

15
my-app/src/pages/About.modules.scss
View File

@ -9,6 +9,16 @@
@media (max-width: 1185px){
width: 50%;
}
@media (max-width: 1024px) {
width: 100%;
left: 0;
bottom: 0;
}
& h1{
@media (max-width: 1024px) {
text-align: center;
}
}
& p {
font-family: 'Roboto';
font-style: normal;
@ -16,5 +26,10 @@
font-size: 13px;
line-height: 15px;
color: #7D7D7D;
@media (max-width: 1024px) {
text-align: justify;
margin-left: 16px;
margin-right: 16px;
}
}
}

20
my-app/src/pages/Contact.modules.scss
View File

@ -6,9 +6,24 @@
width: 748px;
@media (max-width: 1400px){
width: 55%;
}
}
@media (max-width: 1024px) {
justify-content: center;
width: inherit;
position: revert;
margin-left: 16px;
margin-right: 16px;
}
& h1{
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 28px;
margin: 0;
@media (max-width: 1024px) {
text-align: center;
}
}
}
.formLabel{
@ -20,6 +35,9 @@
font-size: 14px;
line-height: 16px;
color: #100D0E;
@media (max-width: 1024px) {
margin-left: 31px;
}
}
.formInput{
height: 46px;

11
my-app/src/pages/institucional.modules.scss
View File

@ -39,12 +39,23 @@
margin-left: 100px;
width: 302px;
float: left;
@media (max-width: 1024px) {
margin-left: 16px;
margin-right: 16px;
width: inherit;
float: none;
}
}
.instituUl{
display: flex;
flex-direction: column;
border-right: 1px solid #000000;
padding: 0;
@media (max-width: 1024px) {
border: 0;
width: 100%;
}
}
.instituLi{
list-style: none;