Merge pull request #175 from prefeitura-rio/mobile-version

Mobile version
prefeitura-rio · Aug 9, 2024 · 8560132 · 8560132
2 parents e1b29ec + adbccdf
commit 8560132
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 23 deletions.
diff --git a/src/components/assets/whatsapp.png b/src/components/assets/whatsapp.png
diff --git a/src/components/sidebars/placeDescription/PlaceDescriptionBar.js b/src/components/sidebars/placeDescription/PlaceDescriptionBar.js
@@ -13,7 +13,8 @@ import {
  Card,
  CardContent,
  CardActions,
- Collapse
+ Collapse,
+ Grow
 } from "@material-ui/core";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import ExpandLessIcon from "@material-ui/icons/ExpandLess";
@@ -709,6 +710,10 @@ const PlaceDescriptionBar = forwardRef(
  setIsTextClamped(textRef.current.scrollHeight > textRef.current.clientHeight);
  }
  }, [fullText]);
+ const [hovered, setHovered] = useState(false);
+
+ const handleMouseEnter = () => setHovered(true);
+ const handleMouseLeave = () => setHovered(false);
 
  return (
  <>
@@ -788,22 +793,56 @@ const PlaceDescriptionBar = forwardRef(
  </Typography>
  </Collapse>
  </CardContent>
- <CardActions style={{ paddingTop: '0px', justifyContent: 'flex-end' }}>
- {fullText && isTextClamped && (
- <Button size="small" onClick={handleExpandClick}>
- {expanded ? 'Leia menos' : 'Leia mais'}
- {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+ <CardActions style={{ paddingTop: '0px', justifyContent: 'space-between' }}>
+ <Slide direction="right" timeout={1000} in={activeBar == DESCRIPTION_BAR} mountOnEnter unmountOnExit>
+ <Button
+ sx={{
+ display: 'flex',
+ alignItems: 'center',
+ padding: '8px',
+ }}
+ onMouseEnter={handleMouseEnter}
+ onMouseLeave={handleMouseLeave}
+ onClick={handleShareWhatsApp}
+ >
+ <Box sx={{ display: 'flex', alignItems: 'center' }}>
+ <img src={whatsapp} alt="WhatsApp Icon" style={{ width: "20px", marginRight: '8px' }} />
+
+ <Grow in={hovered} timeout={500} style={{ transformOrigin: 'left' }}>
+ <Typography
+ variant="body2"
+ sx={{
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ fontSize: '14px',
+ marginLeft: '8px',
+ }}
+ >
+ Compartilhar
+ </Typography>
+ </Grow>
+ </Box>
  </Button>
- )}
- <Button
- onClick={() => {
- setTema(content?.tema);
- setPrograma(content?.programa);
- setActiveBar(PROGRAMA_DESCRIPTION_BAR);
- }}
- size="small" color="primary">
- Saiba mais
- </Button>
+ </Slide>
+ <div style={{ display: 'flex', gap: '8px' }}>
+ {fullText && isTextClamped && (
+ <Button size="small" onClick={handleExpandClick}>
+ {expanded ? 'Leia menos' : 'Leia mais'}
+ {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+ </Button>
+ )}
+ <Button
+ onClick={() => {
+ setTema(content?.tema);
+ setPrograma(content?.programa);
+ setActiveBar(PROGRAMA_DESCRIPTION_BAR);
+ }}
+ size="small"
+ color="primary"
+ >
+ Saiba mais
+ </Button>
+ </div>
  </CardActions>
  </Card>
  </Slide>
@@ -847,7 +886,7 @@ const PlaceDescriptionBar = forwardRef(
  </BottomSheet>
  </div>
  )}
- {isDesktop() && (
+ {/* {isDesktop() && (
  <Slide direction="up" timeout={1000} in={activeBar == DESCRIPTION_BAR} mountOnEnter unmountOnExit>
  <Button
  style={{
@@ -861,7 +900,7 @@ const PlaceDescriptionBar = forwardRef(
  <img src={whatsapp} alt="Fixed Button" style={{ width: "50px" }} />
  </Button>
  </Slide>
- )}
+ )} */}
  </>
  );
  });

diff --git a/src/components/sidebars/programaDescription/ProgramaDescriptionBar.js b/src/components/sidebars/programaDescription/ProgramaDescriptionBar.js
@@ -389,7 +389,9 @@ const ProgramaDescriptionBar = forwardRef(
  const [isScreen500, setTextScreen500] = useState(false);
 
 
- const fullText = programaData?.descricao?.replace(/&lt;br \/&gt;\\r/g, '<br />').replace(/- /g, '• ')
+ const fullText = programaData?.descricao
+ ?.replace(/&lt;br \/&gt;/g, '<br />')
+ .replace(/- /g, '• ');
 
  // Calcule o número de caracteres com base na altura da janela
  const numChars = Math.floor(windowHeight / (isScreen900 ? 3.9 : (isScreen500 ? 4 : 1.1)));

diff --git a/src/components/sidebars/temaDescription/TemaDescriptionBar.js b/src/components/sidebars/temaDescription/TemaDescriptionBar.js
@@ -409,8 +409,11 @@ const TemaDescriptionBar = forwardRef(
  const [isScreen500, setTextScreen500] = useState(false);
 
 
- const fullText = temaData?.descricao;
+ const fullText = temaData?.descricao
+ ?.replace(/&lt;br \/&gt;/g, '<br />')
+ .replace(/- /g, '• ');
 
+ console.log("fullText", fullText)
  // Calcule o número de caracteres com base na altura da janela
  const numChars = Math.floor(windowHeight / (isScreen900 ? 3 : (isScreen500 ? 4 : 1.8)));
 
@@ -468,7 +471,7 @@ const TemaDescriptionBar = forwardRef(
 
 
  <Typography className={classes.subtituloMunicipio}>
- {isTextExpanded ? fullText : shortText == "undefined ..." ? "Desculpe, ainda não possuímos descrição para este tema. Por favor, tente novamente mais tarde." : (fullText + " ..." === shortText) ? fullText : shortText}
+ <span dangerouslySetInnerHTML={{ __html: isTextExpanded ? fullText : shortText == "undefined ..." ? "Desculpe, ainda não possuímos descrição para este tema. Por favor, tente novamente mais tarde." : (fullText + " ..." === shortText) ? fullText : shortText }} />
 
  {fullText && fullText !== "" && fullText + " ..." !== shortText &&
  <Button onClick={() => setTextExpanded(!isTextExpanded)}>
@@ -628,8 +631,7 @@ const TemaDescriptionBar = forwardRef(
 
 
  <Typography className={classes.subtituloMunicipio}>
- {isTextExpanded ? fullText : shortText == "undefined ..." ? "Desculpe, ainda não possuímos descrição para este tema. Por favor, tente novamente mais tarde." : (fullText + " ..." === shortText) ? fullText : shortText}
-
+ <span dangerouslySetInnerHTML={{ __html: isTextExpanded ? fullText : shortText == "undefined ..." ? "Desculpe, ainda não possuímos descrição para este tema. Por favor, tente novamente mais tarde." : (fullText + " ..." === shortText) ? fullText : shortText }} />
  {fullText && fullText !== "" && fullText + " ..." !== shortText &&
  <Button onClick={() => setTextExpanded(!isTextExpanded)}>
  {isTextExpanded ? 'Leia menos' : 'Leia mais'}