Translate alt texts on images, update see more/less button

podkrepi-bg · Sep 11, 2024 · 8fce75e · 8fce75e
1 parent 1278c7c
commit 8fce75e
Show file tree

Hide file tree

Showing 12 changed files with 54 additions and 20 deletions.
diff --git a/public/locales/bg/about.json b/public/locales/bg/about.json
@@ -8,6 +8,7 @@
     "linkedIn": "LinkedIn",
     "about-the-team": "За екипа",
     "team-description": "Ние сме група доброволци от IT средите, юристи, счетоводители, маркетолози, медици, НПО представители. Обединява ни желанието да създадем подобрена дарителска среда в България, създавайки максимално прозрачна платформа за дарения. Целта ни е платформата да се издържа от членски внос и дарения към нея, а не от процент комисиона от кампаниите, които тя обслужва.",
+    "avatar-alt-text": "Аватар на член на екипа",
     "see-less": "Вижте по-малко",
     "see-more": "Вижте повече"
   }

diff --git a/public/locales/bg/index.json b/public/locales/bg/index.json
@@ -4,7 +4,8 @@
   "team-section": {
     "heading": "Кой стои зад Подкрепи.бг?",
     "content": "Подкрепи.бг представлява общност от специалисти в областта на програмирането, правото, маркетинга, дизайна, медицината, финансите, социалното предприемачество и др. Обединени сме от целта да създадем устойчива и прозрачна платформа за дарения, която подкрепя каузи и хора в нужда, като заедно с това популяризира и връща доверието към дарителството в България.",
-    "meet-our-team": "Запознайте се с екипа ни"
+    "meet-our-team": "Запознайте се с екипа ни",
+    "team-image-alt-text": "Изображение на екипа"
   },
   "subscription-section": {
     "heading": "Искате да сте в час с бъдещите ни постижения?",

diff --git a/public/locales/en/about.json b/public/locales/en/about.json
@@ -8,6 +8,7 @@
     "linkedIn": "LinkedIn",
     "about-the-team": "About the team",
     "team-description": "We are volunteers from the IT community, lawyers, accountants, marketers, medics, and NGO representatives. We are united by the desire to create an improved fundraising environment in Bulgaria by developing the most transparent platform for donations. The platform will support itself by membership fees and grants and not by charging a percentage of the funds raised for the campaigns that go through it.",
+    "avatar-alt-text": "Team member avatar",
     "see-less": "See less",
     "see-more": "See more"
   }

diff --git a/public/locales/en/index.json b/public/locales/en/index.json
@@ -4,7 +4,8 @@
   "team-section": {
     "heading": "Who is behind Podkrepi.bg?",
     "content": "Podkrepi.bg is a community of specialists in the field of programming, law, marketing, design, medicine, finance, social entrepreneurship and others. We are united by the goal of creating a sustainable and transparent donation platform that supports causes and people in need, while promoting and restoring trust in donations in Bulgaria.",
-    "meet-our-team": "Meet our team"
+    "meet-our-team": "Meet our team",
+    "team-image-alt-text": "Team image"
   },
   "subscription-section": {
     "heading": "You want to know about our future achievements?",

diff --git a/src/components/admin/donations/grid/Grid.tsx b/src/components/admin/donations/grid/Grid.tsx
@@ -181,7 +181,6 @@ export default observer(function Grid() {
     },
     {
       field: 'paymentId',
-      //TODO:Ttranslate
       headerName: 'Плащане номер',
       width: 150,
       renderCell: (params: GridRenderCellParams) => {
@@ -192,15 +191,13 @@ export default observer(function Grid() {
     },
     {
       field: 'payment.status',
-      //TODO:Ttranslate
       headerName: 'Статус на плащане',
       renderCell(params) {
         return params.row.payment?.status
       },
     },
     {
       field: 'payment.provider',
-      //TODO:Ttranslate
       headerName: 'Разплащателна система',
       renderCell(params) {
         return params.row.payment?.provider
@@ -215,7 +212,6 @@ export default observer(function Grid() {
     },
     {
       field: 'payment.billingName',
-      //TODO:Ttranslate
       headerName: 'billingName',
       width: 250,
       renderCell(params) {
@@ -224,7 +220,6 @@ export default observer(function Grid() {
     },
     {
       field: 'payment.billingEmail',
-      //TODO:Ttranslate
       headerName: 'billingEmail',
       width: 300,
       renderCell(params) {

diff --git a/src/components/client/about/sections/ActiveMembersSection/ActiveMembersSection.tsx b/src/components/client/about/sections/ActiveMembersSection/ActiveMembersSection.tsx
@@ -24,7 +24,12 @@ export default function ActiveMembersSection() {
       <AboutWrapper>
         {data.map((teamMember) => (
           <ТeamMemberWrapper key={teamMember.name}>
-            <Avatar alt="Team member avatar" src={teamMember.img} width={200} height={200} />
+            <Avatar
+              alt={t('about.avatar-alt-text')}
+              src={teamMember.img}
+              width={200}
+              height={200}
+            />
             <TeamMemberName variant="subtitle1">{teamMember.name}</TeamMemberName>
             <Typography variant="body2">{teamMember.description}</Typography>
             <LinkedInButton href={teamMember.linkedInProfile} target="_blank">

diff --git a/src/components/client/about/sections/AssociationMembersSection/AssociationMembersSection.tsx b/src/components/client/about/sections/AssociationMembersSection/AssociationMembersSection.tsx
@@ -24,7 +24,12 @@ export default function AssociationMembersSection() {
       <AboutWrapper>
         {data.map((teamMember) => (
           <TeamMemberWrapper key={teamMember.name}>
-            <Avatar alt="Team member avatar" src={teamMember.img} width={200} height={200} />
+            <Avatar
+              alt={t('about.avatar-alt-text')}
+              src={teamMember.img}
+              width={200}
+              height={200}
+            />
             <TeamMemberName variant="subtitle1">{teamMember.name}</TeamMemberName>
             {teamMember.linkedInProfile ? (
               <LinkedInButton href={teamMember.linkedInProfile} target="_blank">

diff --git a/src/components/client/about/sections/ManagementBoardSection/ManagementBoardSection.tsx b/src/components/client/about/sections/ManagementBoardSection/ManagementBoardSection.tsx
@@ -29,7 +29,12 @@ export default function ManagementBoardSection() {
       <AboutWrapper>
         {data.map((teamMember) => (
           <ТeamMemberWrapper key={teamMember.name}>
-            <Avatar alt="Team member avatar" src={teamMember.img} width={200} height={200} />
+            <Avatar
+              alt={t('about.avatar-alt-text')}
+              src={teamMember.img}
+              width={200}
+              height={200}
+            />
             <TeamMemberName variant="subtitle1" height={50}>
               {teamMember.name}
             </TeamMemberName>

diff --git a/...components/client/about/sections/ManagementBoardSection/ManagementBoardsection.styled.tsx b/...components/client/about/sections/ManagementBoardSection/ManagementBoardsection.styled.tsx
@@ -21,6 +21,7 @@ export const ТeamMemberWrapper = styled(Grid)(() => ({
   },
   [theme.breakpoints.up('md')]: {
     flex: '1 0 30%',
+    maxWidth: '30%',
   },
   [theme.breakpoints.up('lg')]: {
     flex: '1 0 10%',
@@ -56,6 +57,6 @@ export const ShowMoreButton = styled(Button)(() => ({
 
 export const Description = styled(Typography)(() => ({
   textAlign: 'initial',
-  marginBottom: theme.spacing(3),
+  marginBottom: theme.spacing(2),
   overflow: 'hidden',
 }))
diff --git a/src/components/client/about/sections/ManagementBoardSection/TeamMemberDescription.tsx b/src/components/client/about/sections/ManagementBoardSection/TeamMemberDescription.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect, useRef } from 'react'
 
 import { useTranslation } from 'next-i18next'
 
@@ -9,19 +9,34 @@ import { ShowMoreButton, Description } from './ManagementBoardsection.styled'
 type Props = {
   description: string
 }
+
 export function TeamMemberDescription({ description }: Props) {
   const { t } = useTranslation('about')
-
   const [show, setShow] = useState(false)
+  const [isOverflowing, setIsOverflowing] = useState(false)
+
+  const descriptionRef = useRef<HTMLDivElement | null>(null)
+
+  // Check if the content overflows the specified height
+  useEffect(() => {
+    if (descriptionRef.current) {
+      const elementHeight = descriptionRef.current.scrollHeight
+      const maxHeight = parseFloat(theme.spacing(23).toString().replace('px', ''))
+      setIsOverflowing(elementHeight >= maxHeight)
+    }
+  }, [description])
 
   return (
     <>
-      <Description variant="body2" height={show ? 'auto' : theme.spacing(25)}>
+      <Description ref={descriptionRef} variant="body2" maxHeight={show ? 'auto' : theme.spacing(23)}>
         {description}
       </Description>
-      <ShowMoreButton onClick={() => setShow(!show)}>
-        {show ? t('about.see-less') : t('about.see-more')}
-      </ShowMoreButton>
+
+      {isOverflowing && (
+        <ShowMoreButton onClick={() => setShow(!show)}>
+          {show ? t('about.see-less') : t('about.see-more')}
+        </ShowMoreButton>
+      )}
     </>
   )
 }
diff --git a/src/components/client/about/sections/SupervisoryBoardSection/SupervisoryBoardSection.tsx b/src/components/client/about/sections/SupervisoryBoardSection/SupervisoryBoardSection.tsx
@@ -30,7 +30,12 @@ export default function SupervisoryBoardSection() {
         {data.map((teamMember) => (
           <TeamMemberWrapper key={teamMember.name}>
             <Wrapper>
-              <Avatar alt="Team member avatar" src={teamMember.img} width={200} height={200} />
+              <Avatar
+                alt={t('about.avatar-alt-text')}
+                src={teamMember.img}
+                width={200}
+                height={200}
+              />
               <NameLinkedInWrapper>
                 <TeamMemberName variant="subtitle1">{teamMember.name}</TeamMemberName>
                 <LinkedInButton

diff --git a/src/components/client/index/sections/TeamMembersSection/TeamMembersSection.tsx b/src/components/client/index/sections/TeamMembersSection/TeamMembersSection.tsx
@@ -18,14 +18,13 @@ export default function TeamMembersSection() {
       <InfoText maxWidth="lg">{t('team-section.content')}</InfoText>
       <Box>
         <Image
-          alt="Team image"
+          alt={t('team-section.team-image-alt-text')}
           src={teamImagePath}
           style={{ maxWidth: '100%', height: 'auto', objectFit: 'contain' }}
           width={1095}
           height={150}
         />
       </Box>
-      {/* A11Y TODO: Translate alt text */}
       <OutlinedButton href={routes.about} variant="outlined" endIcon={<ChevronRightIcon />}>
         {t('team-section.meet-our-team')}
       </OutlinedButton>