Skip to content

Commit

Permalink
Merge pull request #159 from prefeitura-rio/mobile-version
Browse files Browse the repository at this point in the history 
Mobile version
  • Loading branch information
@lucastavarex
lucastavarex authored Jul 25, 2024
2 parents 91cc1a8 + 26d38cd commit f179150
Show file tree
Hide file tree
Showing 12 changed files with 591 additions and 472 deletions.
187 changes: 96 additions & 91 deletions src/components/sidebars/bairroDescription/BairroDescriptionBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,8 @@ const BairroDescriptionBar = forwardRef(
setUnderSearchBar,
loadData,
setActiveBar,
openedPopup
openedPopup,
gestao
}, ref) => {

const classes = useStyles();
Expand Down Expand Up @@ -399,50 +400,52 @@ const BairroDescriptionBar = forwardRef(
</Box>

</Paper>
<Paper
elevation={6}
className={classes.underSearch4Mobile}
>
<div className={classes.basicInfo}>
<Typography className={classes.sobreMunicipio}>Destaques</Typography>
<ul className={classes.listStyle} style={{ listStyleType: 'none', padding: 0, textAlign: "left", }}>
{isLoading ? (
<>
<Skeleton variant="text" />
<Skeleton height="15px" width="80%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
<br></br>
<Skeleton variant="text" />
<Skeleton height="15px" width="40%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
<br></br>
<Skeleton variant="text" />
<Skeleton height="15px" width="80%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
<br></br>
<Skeleton variant="text" />
<Skeleton height="15px" width="40%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
</>
) : destaquesBairro.length === 0 ? (
<Typography className={classes.subtitulo}>Nenhum destaque encontrado para este bairro.</Typography>
) : (
destaquesBairro.map((item, index) => (
<li key={index} style={{ paddingBottom: "15px" }}>
<Typography className={classes.title_li} onClick={() => handleTitleClick(item.title)}>
{item.title} <ArrowOutwardIcon sx={{ paddingLeft: "20px", marginBottom: "-5px" }} />
</Typography>
<Typography className={classes.subtituloDestaques}>{item.description}</Typography>
</li>
))
)}
</ul>
</div>
</Paper>
{gestao != "1_2" &&
<Paper
elevation={6}
className={classes.underSearch4Mobile}
>
<div className={classes.basicInfo}>
<Typography className={classes.sobreMunicipio}>Destaques</Typography>
<ul className={classes.listStyle} style={{ listStyleType: 'none', padding: 0, textAlign: "left", }}>
{isLoading ? (
<>
<Skeleton variant="text" />
<Skeleton height="15px" width="80%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
<br></br>
<Skeleton variant="text" />
<Skeleton height="15px" width="40%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
<br></br>
<Skeleton variant="text" />
<Skeleton height="15px" width="80%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
<br></br>
<Skeleton variant="text" />
<Skeleton height="15px" width="40%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
</>
) : destaquesBairro.length === 0 ? (
<Typography className={classes.subtitulo}>Nenhum destaque encontrado para este bairro.</Typography>
) : (
destaquesBairro.map((item, index) => (
<li key={index} style={{ paddingBottom: "15px" }}>
<Typography className={classes.title_li} onClick={() => handleTitleClick(item.title)}>
{item.title} <ArrowOutwardIcon sx={{ paddingLeft: "20px", marginBottom: "-5px" }} />
</Typography>
<Typography className={classes.subtituloDestaques}>{item.description}</Typography>
</li>
))
)}
</ul>
</div>
</Paper>
}
</Stack>)
}
const [value, setValue] = useState(1);
Expand Down Expand Up @@ -556,52 +559,54 @@ const BairroDescriptionBar = forwardRef(

</Paper>
</Slide>
<Slide direction="up" timeout={1000} in={underSearchBar} mountOnEnter unmountOnExit>
<Paper
elevation={6}
className={classes.underSearch3}
>
<div className={classes.basicInfo}>
<Typography className={classes.sobreMunicipio}>Destaques</Typography>
<ul className={classes.listStyle} style={{ listStyleType: 'none', padding: 0, textAlign: "left", }}>
{isLoading ? (
<>
<Skeleton variant="text" />
<Skeleton height="15px" width="80%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
<br></br>
<Skeleton variant="text" />
<Skeleton height="15px" width="40%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
<br></br>
<Skeleton variant="text" />
<Skeleton height="15px" width="80%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
<br></br>
<Skeleton variant="text" />
<Skeleton height="15px" width="40%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
</>
) : destaquesBairro.length === 0 ? (
<Typography className={classes.subtitulo}>Nenhum destaque encontrado para este bairro.</Typography>
) : (
destaquesBairro.map((item, index) => (
<li key={index} style={{ paddingBottom: "15px" }}>
<Typography className={classes.title_li} onClick={() => handleTitleClick(item.title)}>
{item.title} <ArrowOutwardIcon sx={{ paddingLeft: "20px", marginBottom: "-5px" }} />
</Typography>
<Typography className={classes.subtituloDestaques}>{item.description}</Typography>
</li>
))
)}
</ul>
</div>
</Paper>
</Slide>
{gestao != "1_2" &&
<Slide direction="up" timeout={1000} in={underSearchBar} mountOnEnter unmountOnExit>
<Paper
elevation={6}
className={classes.underSearch3}
>
<div className={classes.basicInfo}>
<Typography className={classes.sobreMunicipio}>Destaques</Typography>
<ul className={classes.listStyle} style={{ listStyleType: 'none', padding: 0, textAlign: "left", }}>
{isLoading ? (
<>
<Skeleton variant="text" />
<Skeleton height="15px" width="80%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
<br></br>
<Skeleton variant="text" />
<Skeleton height="15px" width="40%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
<br></br>
<Skeleton variant="text" />
<Skeleton height="15px" width="80%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
<br></br>
<Skeleton variant="text" />
<Skeleton height="15px" width="40%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
</>
) : destaquesBairro.length === 0 ? (
<Typography className={classes.subtitulo}>Nenhum destaque encontrado para este bairro.</Typography>
) : (
destaquesBairro.map((item, index) => (
<li key={index} style={{ paddingBottom: "15px" }}>
<Typography className={classes.title_li} onClick={() => handleTitleClick(item.title)}>
{item.title} <ArrowOutwardIcon sx={{ paddingLeft: "20px", marginBottom: "-5px" }} />
</Typography>
<Typography className={classes.subtituloDestaques}>{item.description}</Typography>
</li>
))
)}
</ul>
</div>
</Paper>
</Slide>
}
</>
)}

Expand Down
52 changes: 27 additions & 25 deletions src/components/sidebars/bairroDescription/BairroDescriptionContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import { connect, useDispatch } from "react-redux";

import { setDescriptionData } from "../../../redux/place/actions";
import { loadData } from "../../../redux/place/actions";
import { setActiveBar, setPhotoGallery} from "../../../redux/active/actions";
import { setActiveBar, setPhotoGallery } from "../../../redux/active/actions";
import { useEffect } from "react";
import { loadBairroData, loadDadosAgregadosAbaProgramaBairro, loadDadosAgregadosAbaSumarioStatusEntregasBairro, loadDadosAgregadosAbaTemaBairro } from "../../../redux/bairros/actions";
import { loadAllImagesBairro,setImagesType } from "../../../redux/images/actions";
import { loadAllImagesBairro, setImagesType } from "../../../redux/images/actions";


const BairroDescriptionContainer = (props) => {
Expand All @@ -24,29 +24,30 @@ const BairroDescriptionContainer = (props) => {
}, [props.descriptionData]);

return (
<BairroDescriptionBar
underSearchBar={props.underSearchBar}
images_bairro={props.images_bairro}
bairro={props.bairro}
dadosAgregadosAbaSumarioStatusEntregasBairro={props.dadosAgregadosAbaSumarioStatusEntregasBairro}
dadosAgregadosAbaTemaBairro={props.dadosAgregadosAbaTemaBairro}
dadosAgregadosAbaProgramaBairro={props.dadosAgregadosAbaProgramaBairro}
setUnderSearchBar={props.setUnderSearchBar}
setActiveBar={props.setActiveBar}
setDescriptionData={props.setDescriptionData}
loadData={props.loadData}
setPhotoGallery={props.setPhotoGallery}
setImagesType={props.setImagesType}
tema={props.tema}
programa={props.programa}

// remove if not useful
profile={props.profile}
login={props.login}
anyLoading={props.anyLoading}
openedPopup={props.openedPopup}
<BairroDescriptionBar
underSearchBar={props.underSearchBar}
images_bairro={props.images_bairro}
bairro={props.bairro}
dadosAgregadosAbaSumarioStatusEntregasBairro={props.dadosAgregadosAbaSumarioStatusEntregasBairro}
dadosAgregadosAbaTemaBairro={props.dadosAgregadosAbaTemaBairro}
dadosAgregadosAbaProgramaBairro={props.dadosAgregadosAbaProgramaBairro}
setUnderSearchBar={props.setUnderSearchBar}
setActiveBar={props.setActiveBar}
setDescriptionData={props.setDescriptionData}
loadData={props.loadData}
setPhotoGallery={props.setPhotoGallery}
setImagesType={props.setImagesType}
tema={props.tema}
programa={props.programa}

/>
// remove if not useful
profile={props.profile}
login={props.login}
anyLoading={props.anyLoading}
openedPopup={props.openedPopup}
gestao={props.gestao}

/>
);
};

Expand All @@ -62,11 +63,12 @@ const mapStateToProps = (state) => {
dadosAgregadosAbaProgramaBairro: state.bairros.dadosAgregadosAbaProgramaBairro,
profile: state.auth.profile,
anyLoading: state.places.loading || state.place.loading,
setImagesType: state.images.setImagesType,
setImagesType: state.images.setImagesType,
openedPopup: state.active.openedPopup,
tema: state.filtros.tema,
programa: state.filtros.programa,
bairro: state.filtros.bairro,
gestao: state.active.gestao,
};
};

Expand Down
Loading

0 comments on commit f179150

Please sign in to comment.