fix(campaign-news): Adjust initial article height with font's lineHei…

…ght (#1787) This way the See more, See less buttons wont be visible if text is just around the height limit
podkrepi-bg · May 21, 2024 · be7a555 · be7a555
1 parent addc724
commit be7a555
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/src/components/client/campaign-news/CampaignNewsList.tsx b/src/components/client/campaign-news/CampaignNewsList.tsx
@@ -81,7 +81,9 @@ type Props = {
 
 export default function CampaignNewsList({ articles }: Props) {
   const { t, i18n } = useTranslation('news')
-  const INITIAL_HEIGHT_LIMIT = 400
+
+  const LINE_HEIGHT = theme.typography.body1.lineHeight
+  const INITIAL_HEIGHT_LIMIT = 400 * Number(LINE_HEIGHT)
   const [isExpanded, expandContent] = useShowMoreContent()
   return (
     <>
@@ -131,10 +133,12 @@ export default function CampaignNewsList({ articles }: Props) {
                   maxWidth: 1200,
                 }}>
                 <Grid container item direction={'column'} gap={1}>
-                  <Typography className={classes.articleHeader}>{article.title}</Typography>
+                  <Typography component={'h2'} className={classes.articleHeader}>
+                    {article.title}
+                  </Typography>
                   <QuillStypeWrapper>
                     <Typography
-                      component={'div'}
+                      component={'article'}
                       className={classes.articleDescription}
                       dangerouslySetInnerHTML={{
                         __html: sanitizedDescription,

diff --git a/src/components/client/campaigns/CampaignNewsSection.tsx b/src/components/client/campaigns/CampaignNewsSection.tsx
@@ -113,7 +113,7 @@ const StyledTimeline = styled(Timeline)(({ theme }) => ({
     padding: 0,
   },
 
-  [`div.${classes.articleDescription} > p`]: {
+  [`article.${classes.articleDescription} > p`]: {
     margin: 0,
   },
 
@@ -162,7 +162,8 @@ export default function CampaignNewsSection({ campaign, canCreateArticle }: Prop
   const { t, i18n } = useTranslation('news')
   const { small }: { small: boolean } = useMobile()
 
-  const INITIAL_HEIGHT_LIMIT = 200
+  const LINE_HEIGHT = theme.typography.body1.lineHeight
+  const INITIAL_HEIGHT_LIMIT = 200 * Number(LINE_HEIGHT)
   const [isExpanded, expandContent] = useShowMoreContent()
 
   return (
@@ -249,7 +250,9 @@ export default function CampaignNewsSection({ campaign, canCreateArticle }: Prop
                     )}
                     <Grid container gap={1} direction={'column'} className={classes.articleContent}>
                       <Grid item>
-                        <Typography className={classes.articleHeader}>{article.title}</Typography>
+                        <Typography component={'h2'} className={classes.articleHeader}>
+                          {article.title}
+                        </Typography>
                       </Grid>
                       <Grid
                         container
@@ -265,7 +268,7 @@ export default function CampaignNewsSection({ campaign, canCreateArticle }: Prop
                         }}>
                         <QuillStypeWrapper>
                           <Typography
-                            component={'div'}
+                            component={'article'}
                             className={classes.articleDescription}
                             dangerouslySetInnerHTML={{
                               __html: sanitizedDescription,

diff --git a/src/components/common/QuillStyleWrapper.tsx b/src/components/common/QuillStyleWrapper.tsx
@@ -7,7 +7,7 @@ export const QuillStypeWrapper = styled(Grid)(({ theme }) => ({
   },
 
   ['p']: {
-    fontSize: theme.spacing(2),
+    fontSize: theme.typography.pxToRem(16),
     fontWeight: 400,
     lineHeight: theme.spacing(2.85),
   },