From 8352c401a1bc84d7868ff79494e197d50c8db448 Mon Sep 17 00:00:00 2001 From: Aleksandar Petkov Date: Tue, 19 Sep 2023 23:17:43 +0300 Subject: [PATCH 1/5] QuillStyleWrapper: Make iframe responsive when inserted via MDXEditor (#1596) MDXEditor doesn't add the ql-video class to the iframe element, resulting in layout break on smaller viewports --- src/components/common/QuillStyleWrapper.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/common/QuillStyleWrapper.tsx b/src/components/common/QuillStyleWrapper.tsx index f436f6976..c571dd48d 100644 --- a/src/components/common/QuillStyleWrapper.tsx +++ b/src/components/common/QuillStyleWrapper.tsx @@ -15,7 +15,8 @@ export const QuillStypeWrapper = styled(Grid)(({ theme }) => ({ ['.ql-editor, .ql-video']: { maxWidth: '100%', }, - ['.ql-video']: { + + ['.ql-video, iframe']: { maxWidth: '100%', marginInline: 'auto', }, From d6fd92531986d2c44d1b03cc2cee28e541979111 Mon Sep 17 00:00:00 2001 From: Dimitar Filipov Date: Wed, 20 Sep 2023 10:14:24 +0300 Subject: [PATCH 2/5] Sort bank transactions by descening transactionDate (#1597) * sort bank transactions by descening date * sort bank transaction by desc transactionDate * return pageSize to 20 --- src/common/hooks/bank-transactions.ts | 5 +++-- src/components/admin/bank-transactions/grid/Grid.tsx | 7 +++++++ src/service/apiEndpoints.ts | 4 +++- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/common/hooks/bank-transactions.ts b/src/common/hooks/bank-transactions.ts index 205b326be..028acce03 100644 --- a/src/common/hooks/bank-transactions.ts +++ b/src/common/hooks/bank-transactions.ts @@ -4,17 +4,18 @@ import { useSession } from 'next-auth/react' import { useQuery } from '@tanstack/react-query' import { endpoints } from 'service/apiEndpoints' -import { PaginationData, FilterData } from 'gql/types' +import { PaginationData, FilterData, SortData } from 'gql/types' import { authQueryFnFactory } from 'service/restRequests' export function useBankTransactionsList( paginationData?: PaginationData, filterData?: FilterData, + sort?: SortData, searchData?: string, ) { const { data: session } = useSession() return useQuery( - [endpoints.bankTransactions.transactionsList(paginationData, filterData, searchData).url], + [endpoints.bankTransactions.transactionsList(paginationData, filterData, sort, searchData).url], { queryFn: authQueryFnFactory(session?.accessToken), }, diff --git a/src/components/admin/bank-transactions/grid/Grid.tsx b/src/components/admin/bank-transactions/grid/Grid.tsx index 3d1bc68d4..d54e62cb9 100644 --- a/src/components/admin/bank-transactions/grid/Grid.tsx +++ b/src/components/admin/bank-transactions/grid/Grid.tsx @@ -12,6 +12,7 @@ import { money } from 'common/util/money' import { useStores } from '../../../../common/hooks/useStores' import { BankTransactionsHistoryResponse } from 'gql/bank-transactions' import { useBankTransactionsList } from 'common/hooks/bank-transactions' +import { SortData } from 'gql/types' import RenderBankDonationStatusCell from './RenderEditBankDonationStatusCell' interface RenderCellProps { @@ -25,6 +26,11 @@ export default observer(function Grid() { pageSize: 20, }) + const defaultSort: SortData = { + sortBy: 'transactionDate', + sortOrder: 'desc', + } + const { t } = useTranslation() const { @@ -34,6 +40,7 @@ export default observer(function Grid() { }: UseQueryResult = useBankTransactionsList( { pageIndex: paginationModel.page, pageSize: paginationModel.pageSize }, bankTransactionsStore.bankTransactionsFilter, + defaultSort, bankTransactionsStore.bankTransactionSearch, ) diff --git a/src/service/apiEndpoints.ts b/src/service/apiEndpoints.ts index 114b80fb1..1c907ba48 100644 --- a/src/service/apiEndpoints.ts +++ b/src/service/apiEndpoints.ts @@ -148,14 +148,16 @@ export const endpoints = { transactionsList: ( paginationData?: PaginationData, filterData?: FilterData, + sort?: SortData, searchData?: string, ) => { const { pageIndex, pageSize } = (paginationData as PaginationData) || {} const { status, date } = (filterData as FilterData) || {} + const { sortBy, sortOrder } = (sort as SortData) || {} const { from, to } = date || {} return { - url: `/bank-transaction/list?pageindex=${pageIndex}&pagesize=${pageSize}&status=${status}&from=${from}&to=${to}&search=${searchData}`, + url: `/bank-transaction/list?pageindex=${pageIndex}&pagesize=${pageSize}&status=${status}&from=${from}&to=${to}&search=${searchData}&sortBy=${sortBy}&sortOrder=${sortOrder}`, method: 'GET', } }, From 707cc8a58a3333965abb795932efea12520a7eee Mon Sep 17 00:00:00 2001 From: Ani Date: Wed, 20 Sep 2023 10:16:07 +0300 Subject: [PATCH 3/5] Update Campaign News UI (#1598) * Update Campaign News UI * Reduce spacing after the title --------- Co-authored-by: ani-kalpachka --- .../client/campaign-news/CampaignNewsList.tsx | 9 +++- .../client/campaign-news/CampaignNewsPage.tsx | 50 ++++++++----------- 2 files changed, 29 insertions(+), 30 deletions(-) diff --git a/src/components/client/campaign-news/CampaignNewsList.tsx b/src/components/client/campaign-news/CampaignNewsList.tsx index 4e6d5cb9d..267b9f996 100644 --- a/src/components/client/campaign-news/CampaignNewsList.tsx +++ b/src/components/client/campaign-news/CampaignNewsList.tsx @@ -29,10 +29,9 @@ const classes = { } const ArticleSection = styled(Grid)(({ theme }) => ({ - paddingLeft: theme.spacing(7), - paddingRight: theme.spacing(7), paddingTop: theme.spacing(2), paddingBottom: theme.spacing(2), + [`& .${classes.articlepublishedDate}`]: { fontSize: theme.typography.pxToRem(14), fontWeight: 400, @@ -97,6 +96,12 @@ export default function CampaignNewsList({ articles }: Props) { backgroundColor: index % 2 === 0 ? theme.palette.common.white : '#E3E3E3', borderBottom: 1, borderColor: index % 2 === 0 ? theme.palette.common.white : '#C4C4C4', + justifyContent: 'center', + padding: theme.spacing(0, 2), + + [theme.breakpoints.up('sm')]: { + padding: theme.spacing(0, 5), + }, }}> diff --git a/src/components/client/campaign-news/CampaignNewsPage.tsx b/src/components/client/campaign-news/CampaignNewsPage.tsx index ec2771aa0..4ced2d01d 100644 --- a/src/components/client/campaign-news/CampaignNewsPage.tsx +++ b/src/components/client/campaign-news/CampaignNewsPage.tsx @@ -27,40 +27,20 @@ const classes = { support: `${PREFIX}-support`, applyButton: `${PREFIX}-applyButton`, arrowIcon: `${PREFIX}-arrowIcon`, - defaultPadding: `${PREFIX}-defaultPadding`, } const Root = styled(Layout)(({ theme }) => ({ - [theme.breakpoints.up('sm')]: { - padding: 0, - margin: 0, - paddingTop: theme.spacing(1), - maxWidth: theme.spacing(300), - }, - - [theme.breakpoints.up(2000)]: { - paddingTop: theme.spacing(1), - }, - - [`& .${classes.defaultPadding}`]: { - paddingLeft: theme.spacing(7), - paddingRight: theme.spacing(7), - [theme.breakpoints.down('sm')]: { - paddingLeft: theme.spacing(0), - paddingRight: theme.spacing(0), - }, - }, - - [theme.breakpoints.down('sm')]: { - paddingLeft: 0, - paddingRight: 0, - }, - [`& .${classes.title}`]: { fontWeight: 500, fontSize: theme.typography.pxToRem(45), lineHeight: theme.typography.pxToRem(60), letterSpacing: theme.typography.pxToRem(-1.5), + marginBottom: theme.spacing(1), + }, + + '.ql-video, img': { + margin: '0 auto', + display: 'block', }, })) @@ -87,6 +67,8 @@ export default function CampaignNewsPage({ page, slug = null }: Props) { return ( - + {t('news')} - + {data && data?.campaign.campaignNews.length > 0 && ( From a825c60cd3bda28188147f19d93787a18eda4ec3 Mon Sep 17 00:00:00 2001 From: Ani Date: Wed, 20 Sep 2023 10:17:06 +0300 Subject: [PATCH 4/5] Change donation card text (#1599) Co-authored-by: ani-kalpachka --- public/locales/bg/campaigns.json | 2 +- public/locales/en/campaigns.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/locales/bg/campaigns.json b/public/locales/bg/campaigns.json index 216af68b6..1af1f4bf1 100644 --- a/public/locales/bg/campaigns.json +++ b/public/locales/bg/campaigns.json @@ -100,7 +100,7 @@ "type": "Тип кампания", "state": "Статус", "from": "от", - "noCommissionInfo": "Подкрепи.бг работи с 0% комисиона. Заплащат се единствено банкови такси, които изрично се упоменават преди да направите дарението си.", + "noCommissionInfo": "Подкрепи.бг работи с 0% комисиона. Възможни са единствено изрично упоменати банкови такси.", "donors": "дарители", "documents": "документи", "guarantor": "гарант", diff --git a/public/locales/en/campaigns.json b/public/locales/en/campaigns.json index a95d147bd..078e494be 100644 --- a/public/locales/en/campaigns.json +++ b/public/locales/en/campaigns.json @@ -83,7 +83,7 @@ "type": "Campaign type", "state": "Campaign state", "from": "from", - "noCommissionInfo": "Podkrepi.bg works with 0% commission. Only bank charges are paid, which are explicitly mentioned before you make your donation.", + "noCommissionInfo": "Podkrepi.bg works with 0% commission. Only expressly mentioned bank charges are possible.", "donors": "donors", "documents": "documents", "guarantor": "guarantor", From abcb6c6b5b4963ddd3109959d2edda1d2eaaf12d Mon Sep 17 00:00:00 2001 From: Ani Date: Wed, 20 Sep 2023 10:18:18 +0300 Subject: [PATCH 5/5] Wrap completed campaign's content with link, update hover effect (#1600) Co-authored-by: ani-kalpachka --- .../CompletedCampaignsSection.styled.tsx | 12 ++-- .../CompletedCampaignsSection.tsx | 57 ++++++++++--------- 2 files changed, 35 insertions(+), 34 deletions(-) diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx index 3eb621712..5f2625dd8 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx @@ -1,6 +1,6 @@ import Slider from 'react-slick' -import { Link, Grid, Box, Typography } from '@mui/material' +import { Grid, Box, Typography } from '@mui/material' import DoneIcon from '@mui/icons-material/Done' import styled from '@emotion/styled' @@ -37,18 +37,18 @@ export const CardWrapper = styled(Grid)(() => ({ margin: theme.spacing(0, 1.25), paddingRight: theme.spacing(2.5), }, + + '&:hover': { + opacity: 0.9, + }, })) -export const CompletedCampaignLink = styled(Link)(() => ({ +export const CompletedCampaignImage = styled(Grid)(() => ({ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: theme.spacing(37.5), backgroundSize: 'cover', - - '&:hover': { - opacity: 0.9, - }, })) export const CampaignTitle = styled('h6')(() => ({ diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx index f196b6c3e..cd58e21ec 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx @@ -1,4 +1,6 @@ import { useTranslation, i18n } from 'next-i18next' +import Image from 'next/image' +import Link from 'next/link' import { CampaignResponse } from 'gql/campaigns' import 'slick-carousel/slick/slick-theme.css' @@ -17,7 +19,7 @@ import { CarouselWrapper, Sum, CampaignTitle, - CompletedCampaignLink, + CompletedCampaignImage, CardWrapper, SuccessfulCampaignLabel, CompletedSumWrapper, @@ -26,8 +28,6 @@ import { SuccessfullCampiagnText, } from './CompletedCampaignsSection.styled' -import Image from 'next/image' - export default function CompletedCampaignsSection() { const { t } = useTranslation('campaigns') const { data } = useCampaignList() @@ -50,31 +50,32 @@ export default function CompletedCampaignsSection() { {completedCampaigns?.map((campaign, index) => ( - - {campaign.title} - - - - {i18n.language === 'bg' - ? moneyPublic(campaign.summary.reachedAmount).split(',')[0] + ' лв.' - : moneyPublic(campaign.summary.reachedAmount).split('.')[0]} - - - - {t('successfull-label')} - - - - {campaign.title} + + + {campaign.title} + + + + {i18n.language === 'bg' + ? moneyPublic(campaign.summary.reachedAmount).split(',')[0] + ' лв.' + : moneyPublic(campaign.summary.reachedAmount).split('.')[0]} + + + + {t('successfull-label')} + + + + {campaign.title} + ))}