feat(main): cria main mobile e componentiza breadcrumbs

This commit is contained in:
Andrea Matsunaga 2023-01-11 17:26:44 -03:00
parent b4811476cc
commit ae55f866e5
10 changed files with 138 additions and 57 deletions

View File

@ -2,6 +2,11 @@
margin-left: 30px;
padding: 10px 0;
@media screen and (width <= 1024px) {
padding: 0;
margin: 0;
}
.section-title {
font-family: "Roboto";
font-style: normal;
@ -15,6 +20,10 @@
font-size: 48px;
line-height: 56px;
}
@media screen and (width <= 1024px) {
text-align: center;
}
}
.section-description {
@ -27,6 +36,16 @@
height: 376px;
}
@media screen and (width <= 1024px) {
height: 142px;
gap: 20px;
overflow: scroll;
}
@media screen and (width <= 480px) {
height: 344px;
}
.section-content {
font-family: "Roboto";
font-style: normal;
@ -41,6 +60,13 @@
font-size: 26px;
line-height: 30px;
}
@media screen and (width <= 1024px) {
font-size: 12px;
line-height: 18px;
text-align: justify;
padding-right: 1px;
}
}
}
}

View File

@ -4,9 +4,18 @@
list-style: none;
text-decoration: none;
@media screen and (width <= 1024px) {
margin-bottom: 30px;
}
li {
padding: 10px 16px;
transition: all 0.2s ease-in-out;
// background-color: yellow;
@media screen and (width <= 1024px) {
width: calc(100% - 32px);
}
a {
font-family: "Roboto";
@ -33,7 +42,8 @@
// }
&:hover {
background: #292929;
// &.active
background: #292929; // #000000;
a {
font-weight: 700;

View File

@ -2,6 +2,11 @@
margin-left: 30px;
padding: 10px 0;
@media screen and (width <= 1024px) {
padding: 0;
margin: 0;
}
.section-title {
font-family: "Roboto";
font-style: normal;
@ -15,5 +20,9 @@
font-size: 48px;
line-height: 56px;
}
@media screen and (width <= 1024px) {
text-align: center;
}
}
}

View File

@ -49,7 +49,7 @@
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #000000;
color: #000000; //#b9b7b7? #100d0e?
outline: 0;
@media screen and (width >= 2500px) {
@ -148,7 +148,8 @@
letter-spacing: 0.05em;
color: #ffffff;
text-transform: uppercase;
border: none;
border: 0;
outline: 0;
cursor: pointer;
transition: all 0.2s ease-in-out;

View File

@ -0,0 +1,51 @@
.breadcrumbs {
display: flex;
gap: 9.72px;
align-items: center;
margin-bottom: 80px;
@media screen and (width >= 2500px) {
gap: 12px;
}
.home-icon {
img {
width: 16px;
height: 16px;
display: block;
@media screen and (width >= 2500px) {
width: 31.22px;
height: 31.25px;
}
}
}
.arrow-icon {
img {
width: 4.56px;
height: 8px;
display: block;
@media screen and (width >= 2500px) {
width: 8.9px;
height: 15.62px;
}
}
}
.current-location {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
color: #c4c4c4;
margin: 0;
// padding: 0;
@media screen and (width >= 2500px) {
font-size: 24px;
}
}
}

View File

@ -0,0 +1,22 @@
import React from "react";
import styles from "./Breadcrumbs.module.scss";
import homeIcon from "./assets/home-icon.svg";
import arrowIcon from "./assets/arrow-icon.svg";
const Breadcrumbs = () => {
return (
<div className={styles["breadcrumbs"]}>
<div className={styles["home-icon"]}>
<img src={homeIcon} alt="Ícone da Home" />
</div>
<div className={styles["arrow-icon"]}>
<img src={arrowIcon} alt="Ícone de seta para a direita" />
</div>
<p className={styles["current-location"]}>Institucional</p>
</div>
);
};
export { Breadcrumbs };

View File

Before

Width:  |  Height:  |  Size: 510 B

After

Width:  |  Height:  |  Size: 510 B

View File

Before

Width:  |  Height:  |  Size: 848 B

After

Width:  |  Height:  |  Size: 848 B

View File

@ -7,55 +7,8 @@
margin-bottom: 84px;
}
.breadcrumbs {
display: flex;
gap: 9.72px;
align-items: center;
margin-bottom: 80px;
@media screen and (width >= 2500px) {
gap: 12px;
}
.home-icon {
width: 16px;
height: 16px;
background: url("../../assets/svg/home-icon.svg");
background-repeat: no-repeat;
background-size: cover;
@media screen and (width >= 2500px) {
width: 31.22px;
height: 31.25px;
}
}
.arrow-icon {
width: 4.56px;
height: 8px;
background-image: url("../../assets/svg/arrow-icon.svg");
background-repeat: no-repeat;
background-size: cover;
@media screen and (width >= 2500px) {
width: 8.9px;
height: 15.62px;
}
}
.current-location {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
color: #c4c4c4;
margin: 0;
@media screen and (width >= 2500px) {
font-size: 24px;
}
}
@media screen and (width <= 1024px) {
margin: 30px 16px 80px;
}
.main-title {
@ -74,6 +27,10 @@
font-size: 48px;
line-height: 56px;
}
@media screen and (width <= 1024px) {
margin-bottom: 40px;
}
}
.main-content {
@ -84,6 +41,10 @@
grid-template-columns: 590px 1px 1fr;
}
@media screen and (width <= 1024px) {
grid-template-columns: 1fr;
}
.vertical-divider {
width: 1px;
height: 285px;
@ -92,6 +53,10 @@
@media screen and (width >= 2500px) {
height: 465px;
}
@media screen and (width <= 1024px) {
display: none;
}
}
}
}

View File

@ -3,6 +3,7 @@ import { Outlet } from "react-router-dom";
import { AsideMenu } from "../AsideMenu/AsideMenu";
import { Footer } from "../Footer/Footer";
import { Header } from "../Header/Header";
import { Breadcrumbs } from "./Breadcrumbs/Breadcrumbs";
import styles from "./MainLayout.module.scss";
@ -11,11 +12,7 @@ const MainLayout = () => {
<>
<Header />
<main className={styles["main-container"]}>
<div className={styles["breadcrumbs"]}>
<div className={styles["home-icon"]}></div>
<div className={styles["arrow-icon"]}></div>
<p className={styles["current-location"]}>Institucional</p>
</div>
<Breadcrumbs />
<h1 className={styles["main-title"]}>Institucional</h1>
<div className={styles["main-content"]}>
<AsideMenu />