From 5fe2a6666fa6a7c271a4fae43a29621ddf38dd9b Mon Sep 17 00:00:00 2001
From: "Henrique V. Ehrenfried" <hvehrenfried@inf.ufpr.br>
Date: Thu, 4 Feb 2021 08:27:14 -0300
Subject: [PATCH] Improve Responsivity of page TabResourceHelpNetPart
Signed-off-by: Henrique V. Ehrenfried <hvehrenfried@inf.ufpr.br>
---
src/Pages/TabsHelp/TabNetPart.js | 78 +++++++++++++++-----------------
1 file changed, 37 insertions(+), 41 deletions(-)
diff --git a/src/Pages/TabsHelp/TabNetPart.js b/src/Pages/TabsHelp/TabNetPart.js
index c63a0816..107a998b 100644
--- a/src/Pages/TabsHelp/TabNetPart.js
+++ b/src/Pages/TabsHelp/TabNetPart.js
@@ -73,37 +73,29 @@ export default function TabNetPart (props) {
</StyledBreadCrumbs>
</BreadCrumbsDiv>
- <Grid container spacing={4}>
- <Grid item xs={3}>
- <Menu>
- <h4>{tabs[2]}</h4>
- <TabsStyled orientation = "vertical"
- variant = "scrollable"
- value = {tabValue}
- onChange = {handleChangeTab}
- TabIndicatorProps = {{style:{display: "none"}}}
- >
- <TabStyled label={tabs[0]}></TabStyled>
- <TabStyled label={tabs[1]}></TabStyled>
- </TabsStyled>
- <br/>
- <div className="voltarInicio">
- <a href="ajuda">VOLTAR AO ÃNICIO</a>
- </div>
- <hr/>
- <div className="procurava">
- Não encontrou o que procurava? Entre em
- <a href="contato"> contato</a>
- </div>
- </Menu>
- </Grid>
-
- <Grid item xs={9}>
+ <Grid container justify="center">
+ <Grid item xs={12} md={10} >
<Principal>
- <div className="fixo">
+ <Menu>
+ <div className="fixo">
<img src={ParticipandoRede} alt="Participando da Rede"/>
- <span>{tabs[2]}</span>
- </div>
+ <span>{tabs[2]}</span>
+ </div>
+ <TabsStyled orientation = "vertical"
+ variant = "scrollable"
+ value = {tabValue}
+ onChange = {handleChangeTab}
+ TabIndicatorProps = {{style:{display: "none"}}}
+ >
+ <TabStyled label={tabs[0]}></TabStyled>
+ <TabStyled label={tabs[1]}></TabStyled>
+ </TabsStyled>
+ <br/>
+ <div className="voltarInicio">
+ <a href="ajuda">VOLTAR AO ÃNICIO</a>
+ </div>
+ </Menu>
+
{tabValue === 0 && <How title={tabs[0]}/>}
{tabValue === 1 && <What title={tabs[1]}/>}
<div className="resultadosProcura">
@@ -112,24 +104,25 @@ export default function TabNetPart (props) {
<span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
</div>
</div>
- <Grid style={{marginBottom:"50px"}} container spacing={2}>
- <Grid item xs={4}>
+
+ </Principal>
+ </Grid>
+ </Grid>
+
+
+ <Grid style={{paddingBottom:"50px"}} container justify={"center"}>
+ <Grid item xs={12} md={3} style={{margin:5}}>
<CardPublicando/>
</Grid>
- <Grid item xs={4}>
+ <Grid item xs={12} md={3} style={{margin:5}}>
<CardEncontrando/>
</Grid>
- <Grid item xs={4}>
+ <Grid item xs={12} md={3} style={{margin:5}}>
<CardGerenciando/>
</Grid>
</Grid>
- </Principal>
- </Grid>
- </Grid>
-
-
</Secao>
</div>
);
@@ -137,7 +130,6 @@ export default function TabNetPart (props) {
const StyledBreadCrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
- max-width : 1170px;
span {
color : #a5a5a5;
}
@@ -161,7 +153,6 @@ const Principal = styled.div`
height: 40px;
text-align: center;
background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 30px;
margin-bottom: 30px;
color: #666;
@@ -218,7 +209,10 @@ const TabsStyled = styled(Tabs)`
.MuiTab-root{
text-transform: none !important;
+ max-width:100%
}
+ text-align: center;
+ width:100%
`
@@ -228,6 +222,7 @@ const TabStyled = styled(Tab)`
font-weight: 500;
font-size: 14px !important;
border-radius: 4px !important;
+ text-align: center;
@@ -245,6 +240,8 @@ const Menu = styled.div`
color: #666;
padding-block: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ margin-bottom:30px
+
h4 {
padding-inline: 15px;
@@ -290,7 +287,6 @@ const Menu = styled.div`
`
const Secao = styled.div`
- width: 1138px;
margin-inline: auto;
`
--
GitLab