From 772a633bd0f47d7d82ac90a26d353b232a3dfe5d Mon Sep 17 00:00:00 2001 From: Alexander Petkov Date: Thu, 14 Sep 2023 11:36:19 +0300 Subject: [PATCH 01/10] ActiveCampaignCard: Fix breaking on smaller viewports --- .../ActiveCampaignCard/ActiveCampaignCard.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx index 03dd2f50c..ea969fa83 100644 --- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx +++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx @@ -39,16 +39,11 @@ export default function ActiveCampaignCard({ campaign, index }: Props) { Date: Thu, 14 Sep 2023 11:42:02 +0300 Subject: [PATCH 02/10] CompletedCampaignsSection: Fix campaign image on smaller widths --- .../CompletedCampaignsSection/CompletedCampaignsSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx index 44fe64d6d..b4247d051 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx @@ -53,7 +53,7 @@ export default function CompletedCampaignsSection() { theme.spacing(37.5) }}> + sx={{ position: 'relative', width: '100%', aspectRatio:1}}> {campaign.title} Date: Thu, 14 Sep 2023 11:50:17 +0300 Subject: [PATCH 03/10] ActiveCampaignCard: Switch to better aspectRatio values --- .../ActiveCampaignCard/ActiveCampaignCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx index ea969fa83..d4d428bde 100644 --- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx +++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx @@ -42,8 +42,8 @@ export default function ActiveCampaignCard({ campaign, index }: Props) { width: '100%', aspectRatio: 1.5, [theme.breakpoints.up('lg')]: { - maxHeight: index === 0 ? theme.spacing(70) : theme.spacing(27.1), - aspectRatio: index === 0 ? 1.11 : 1.43, + maxHeight: index === 0 ? theme.spacing(71.2) : theme.spacing(27.6), + aspectRatio: index === 0 ? 1.08 : 1.37, }, }}> Date: Thu, 14 Sep 2023 11:52:14 +0300 Subject: [PATCH 04/10] Run linting --- .../CompletedCampaignsSection/CompletedCampaignsSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx index b4247d051..f196b6c3e 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx @@ -53,7 +53,7 @@ export default function CompletedCampaignsSection() { + sx={{ position: 'relative', width: '100%', aspectRatio: 1 }}> {campaign.title} Date: Thu, 14 Sep 2023 12:57:35 +0300 Subject: [PATCH 05/10] ActiveCampaignCard: Move to even better aspectRatio values Seems stable enough across all >1200px widths --- .../ActiveCampaignCard/ActiveCampaignCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx index d4d428bde..9e5b5bdda 100644 --- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx +++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx @@ -42,8 +42,8 @@ export default function ActiveCampaignCard({ campaign, index }: Props) { width: '100%', aspectRatio: 1.5, [theme.breakpoints.up('lg')]: { - maxHeight: index === 0 ? theme.spacing(71.2) : theme.spacing(27.6), - aspectRatio: index === 0 ? 1.08 : 1.37, + maxHeight: index === 0 ? theme.spacing(71.2) : theme.spacing(27.65), + aspectRatio: index === 0 ? 0.9 : 1, }, }}> Date: Thu, 14 Sep 2023 12:58:59 +0300 Subject: [PATCH 06/10] CampaignProgress: Remove filling up animation Seems slugish on mobile devices. Worsens the CLS metric --- src/components/client/campaigns/CampaignProgress.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/client/campaigns/CampaignProgress.tsx b/src/components/client/campaigns/CampaignProgress.tsx index 9e2032a88..36286b27a 100644 --- a/src/components/client/campaigns/CampaignProgress.tsx +++ b/src/components/client/campaigns/CampaignProgress.tsx @@ -27,7 +27,6 @@ export default function CampaignProgress({ campaignId, raised, target }: Props) labelSize={theme.spacing(1.5)} labelAlignment={percentageRound < 10 ? 'left' : 'right'} customLabelStyles={{ fontWeight: 400 }} - animateOnRender={true} /> ) } From 5fe476014a7d29edfa3732bc0587fb518137776d Mon Sep 17 00:00:00 2001 From: Alexander Petkov Date: Thu, 14 Sep 2023 14:08:37 +0300 Subject: [PATCH 07/10] a11y: Remove aria ID duplicates on MobileNav Improves the accessibility rating --- src/components/client/layout/nav/DonationMenuMobile.tsx | 2 +- src/components/client/layout/nav/MobileNav/MobileNav.tsx | 4 ++-- src/components/client/layout/nav/ProjectMenuMobile.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/client/layout/nav/DonationMenuMobile.tsx b/src/components/client/layout/nav/DonationMenuMobile.tsx index 20eb9747b..0bd79406d 100644 --- a/src/components/client/layout/nav/DonationMenuMobile.tsx +++ b/src/components/client/layout/nav/DonationMenuMobile.tsx @@ -48,7 +48,7 @@ export default function DonationMenuMobile() { } - aria-controls="panel1a-content"> + aria-controls="campaign-panel-content"> {t('nav.campaigns.index')} diff --git a/src/components/client/layout/nav/MobileNav/MobileNav.tsx b/src/components/client/layout/nav/MobileNav/MobileNav.tsx index 644c765a3..5dfd8a92f 100644 --- a/src/components/client/layout/nav/MobileNav/MobileNav.tsx +++ b/src/components/client/layout/nav/MobileNav/MobileNav.tsx @@ -44,7 +44,7 @@ export default function MobileNav({ mobileOpen, setMobileOpen }: NavDeckProps) { }, []) return ( - + - + ) } diff --git a/src/components/client/layout/nav/ProjectMenuMobile.tsx b/src/components/client/layout/nav/ProjectMenuMobile.tsx index de204005c..224c32410 100644 --- a/src/components/client/layout/nav/ProjectMenuMobile.tsx +++ b/src/components/client/layout/nav/ProjectMenuMobile.tsx @@ -47,7 +47,7 @@ export default function ProjectMenuMobile() { } - aria-controls="panel1a-content" + aria-controls="aboutus-panel-content" className={classes.accordionSummary}> {t('nav.about.about-us')} From 1ba01caac6264c489cebc1c62dd4a5d12c037b9c Mon Sep 17 00:00:00 2001 From: Alexander Petkov Date: Thu, 14 Sep 2023 14:14:24 +0300 Subject: [PATCH 08/10] CampaignProgress: Set transitionDuration to 0 The progress bar seems animated, even with animateOnRender set to false --- src/components/client/campaigns/CampaignProgress.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/client/campaigns/CampaignProgress.tsx b/src/components/client/campaigns/CampaignProgress.tsx index 36286b27a..da42837cd 100644 --- a/src/components/client/campaigns/CampaignProgress.tsx +++ b/src/components/client/campaigns/CampaignProgress.tsx @@ -27,6 +27,7 @@ export default function CampaignProgress({ campaignId, raised, target }: Props) labelSize={theme.spacing(1.5)} labelAlignment={percentageRound < 10 ? 'left' : 'right'} customLabelStyles={{ fontWeight: 400 }} + transitionDuration={'0s'} /> ) } From ac092c368908551e31bf84c2c839544f2dbdfd4f Mon Sep 17 00:00:00 2001 From: Alexander Petkov Date: Thu, 14 Sep 2023 14:17:50 +0300 Subject: [PATCH 09/10] Cleanup unused imports --- src/components/client/campaigns/CampaignCard/CampaignCard.tsx | 2 +- .../ActiveCampaignCard/ActiveCampaignCard.tsx | 2 +- src/components/client/layout/AppNavBar.tsx | 2 +- src/components/client/layout/Footer/LogoSocialIcons.tsx | 2 +- src/components/client/layout/nav/MobileNav/MobileNav.tsx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/client/campaigns/CampaignCard/CampaignCard.tsx b/src/components/client/campaigns/CampaignCard/CampaignCard.tsx index b53f0c42e..2409a19a9 100644 --- a/src/components/client/campaigns/CampaignCard/CampaignCard.tsx +++ b/src/components/client/campaigns/CampaignCard/CampaignCard.tsx @@ -2,7 +2,7 @@ import { useMemo } from 'react' import { useTranslation, i18n } from 'next-i18next' import { CampaignResponse } from 'gql/campaigns' -import { Box, CardMedia } from '@mui/material' +import { Box } from '@mui/material' import { routes } from 'common/routes' import { campaignListPictureUrl } from 'common/util/campaignImageUrls' diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx index 9e5b5bdda..26969ddbc 100644 --- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx +++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx @@ -1,7 +1,7 @@ import { useTranslation, i18n } from 'next-i18next' import { CampaignResponse } from 'gql/campaigns' -import { Box, CardMedia } from '@mui/material' +import { Box } from '@mui/material' import Link from 'components/common/Link' import CampaignProgress from 'components/client/campaigns/CampaignProgress' diff --git a/src/components/client/layout/AppNavBar.tsx b/src/components/client/layout/AppNavBar.tsx index 43df340c9..b4d7f4c91 100644 --- a/src/components/client/layout/AppNavBar.tsx +++ b/src/components/client/layout/AppNavBar.tsx @@ -4,7 +4,7 @@ import Link from 'next/link' import { useRouter } from 'next/router' import { Menu } from '@mui/icons-material' import useScrollTrigger from '@mui/material/useScrollTrigger' -import { AppBar, Toolbar, IconButton, Grid, Hidden, ButtonBase } from '@mui/material' +import { AppBar, Toolbar, IconButton, Grid, ButtonBase } from '@mui/material' import { routes } from 'common/routes' import PodkrepiLogo from 'components/common/brand/PodkrepiLogo' diff --git a/src/components/client/layout/Footer/LogoSocialIcons.tsx b/src/components/client/layout/Footer/LogoSocialIcons.tsx index a8b8200d8..376610c78 100644 --- a/src/components/client/layout/Footer/LogoSocialIcons.tsx +++ b/src/components/client/layout/Footer/LogoSocialIcons.tsx @@ -6,7 +6,7 @@ import { Grid } from '@mui/material' import { routes } from 'common/routes' import PodkrepiLogo from 'components/common/brand/PodkrepiLogo' import { SocialIcons } from './SocialIcons' -import { SubscribeBtn } from './SubscribeBtn' +// import { SubscribeBtn } from './SubscribeBtn' export const LogoSocialIcons = () => { const { locale } = useRouter() diff --git a/src/components/client/layout/nav/MobileNav/MobileNav.tsx b/src/components/client/layout/nav/MobileNav/MobileNav.tsx index 5dfd8a92f..659a7aa1c 100644 --- a/src/components/client/layout/nav/MobileNav/MobileNav.tsx +++ b/src/components/client/layout/nav/MobileNav/MobileNav.tsx @@ -4,7 +4,7 @@ import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' import Link from 'next/link' -import { SwipeableDrawer, Hidden, Grid } from '@mui/material' +import { SwipeableDrawer, Grid } from '@mui/material' import FavoriteIcon from '@mui/icons-material/Favorite' import PodkrepiLogo from 'components/common/brand/PodkrepiLogo' From f1a503eca3812a5daa3cbb82bb28d971b8b86356 Mon Sep 17 00:00:00 2001 From: Alexander Petkov Date: Thu, 14 Sep 2023 14:30:16 +0300 Subject: [PATCH 10/10] a11y: Set aria-label to authentication button in navbar Improves accessibility rating --- src/components/client/layout/nav/PublicMenu.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/client/layout/nav/PublicMenu.tsx b/src/components/client/layout/nav/PublicMenu.tsx index 709c1de81..a3f927c60 100644 --- a/src/components/client/layout/nav/PublicMenu.tsx +++ b/src/components/client/layout/nav/PublicMenu.tsx @@ -58,6 +58,7 @@ export default function PublicMenu() { onClick={handleMenu} size="medium" color="inherit" + aria-label="authentication" classes={{ endIcon: classes.dropdownArrowIcon }} endIcon={ open ? :