From 707e136fc606dd8f380ca9c2da07007030379a2a Mon Sep 17 00:00:00 2001 From: Michal Zielenkiewicz Date: Wed, 14 Jun 2023 14:03:00 +0200 Subject: [PATCH 1/2] Set laptop breakpoint to handle more edge cases --- .changelog/532.bugfix.md | 1 + src/styles/theme/defaultTheme.ts | 6 ++++++ 2 files changed, 7 insertions(+) create mode 100644 .changelog/532.bugfix.md diff --git a/.changelog/532.bugfix.md b/.changelog/532.bugfix.md new file mode 100644 index 000000000..1b4b9d406 --- /dev/null +++ b/.changelog/532.bugfix.md @@ -0,0 +1 @@ +Set laptop breakpoint to handle more edge cases diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts index cea932ace..984fa4fbe 100644 --- a/src/styles/theme/defaultTheme.ts +++ b/src/styles/theme/defaultTheme.ts @@ -83,6 +83,12 @@ declare module '@mui/material/styles' { } export const defaultTheme = createTheme({ + breakpoints: { + values: { + ...createTheme().breakpoints.values, + lg: 1024, + }, + }, palette: { background: { default: COLORS.brandDark, From 96669c43e1e0c2c1fe62b7689d44cb7f322594fb Mon Sep 17 00:00:00 2001 From: Michal Zielenkiewicz Date: Thu, 15 Jun 2023 09:30:38 +0200 Subject: [PATCH 2/2] Adjust layout to new breakpoint --- .changelog/532.bugfix.2.md | 1 + src/app/components/Blocks/index.tsx | 8 ++++++-- src/app/components/PageLayout/Header.tsx | 4 ++-- src/app/components/PageLayout/NetworkSelector.tsx | 6 +++--- src/app/components/PageLayout/index.tsx | 4 ++-- src/app/hooks/useScreensize.ts | 3 ++- src/locales/en/translation.json | 1 + 7 files changed, 17 insertions(+), 10 deletions(-) create mode 100644 .changelog/532.bugfix.2.md diff --git a/.changelog/532.bugfix.2.md b/.changelog/532.bugfix.2.md new file mode 100644 index 000000000..ec3542f5b --- /dev/null +++ b/.changelog/532.bugfix.2.md @@ -0,0 +1 @@ +Adjust layout to new breakpoint diff --git a/src/app/components/Blocks/index.tsx b/src/app/components/Blocks/index.tsx index c168db005..937268d0a 100644 --- a/src/app/components/Blocks/index.tsx +++ b/src/app/components/Blocks/index.tsx @@ -6,6 +6,7 @@ import { paraTimesConfig } from '../../../config' import { TablePaginationProps } from '../Table/TablePagination' import { BlockHashLink, BlockLink } from './BlockLink' import { formatDistanceStrict } from '../../utils/dateFormatter' +import { useScreenSize } from '../../hooks/useScreensize' export type TableRuntimeBlock = RuntimeBlock & { markAsNew?: boolean @@ -28,12 +29,15 @@ type BlocksProps = { export const Blocks = (props: BlocksProps) => { const { isLoading, blocks, verbose, pagination, limit } = props const { t } = useTranslation() - + const { isLaptop } = useScreenSize() const tableColumns: TableColProps[] = [ { content: t('common.fill') }, { content: t('common.height'), align: TableCellAlign.Right }, { content: t('common.age'), align: TableCellAlign.Right }, - { content: t('common.transactions'), align: TableCellAlign.Right }, + { + content: isLaptop ? t('common.transactionAbbreviation') : t('common.transactions'), + align: TableCellAlign.Right, + }, ...(verbose ? [{ content: t('common.hash') }] : []), { content: t('common.size'), align: TableCellAlign.Right }, ...(verbose ? [{ content: t('common.gasUsed'), align: TableCellAlign.Right }] : []), diff --git a/src/app/components/PageLayout/Header.tsx b/src/app/components/PageLayout/Header.tsx index 443a519b3..99270824d 100644 --- a/src/app/components/PageLayout/Header.tsx +++ b/src/app/components/PageLayout/Header.tsx @@ -51,10 +51,10 @@ export const Header: FC = () => { {scope && ( <> - + - + )} diff --git a/src/app/components/PageLayout/NetworkSelector.tsx b/src/app/components/PageLayout/NetworkSelector.tsx index 940926fac..7a1947fc1 100644 --- a/src/app/components/PageLayout/NetworkSelector.tsx +++ b/src/app/components/PageLayout/NetworkSelector.tsx @@ -34,7 +34,7 @@ type NetworkSelectorProps = { export const NetworkSelector: FC = ({ layer, network }) => { const { t } = useTranslation() const navigate = useNavigate() - const { isDesktop, isMobile } = useScreenSize() + const { isMobile, isTablet } = useScreenSize() const labels = getNetworkNames(t) const [openDrawer, setOpenDrawer] = useState(false) const handleDrawerClose = () => setOpenDrawer(false) @@ -46,7 +46,7 @@ export const NetworkSelector: FC = ({ layer, network }) => sx={{ display: 'flex', alignItems: 'center', - justifyContent: isDesktop ? 'center' : 'flex-end', + justifyContent: isTablet ? 'flex-end' : 'center', }} > = ({ layer, network }) => {!isMobile && ( )} - {isDesktop && network !== Network.mainnet && ( + {!isTablet && network !== Network.mainnet && ( > = ({ children, mobileFooterAction }) => { const theme = useTheme() - const { isMobile, isDesktop } = useScreenSize() + const { isMobile, isTablet } = useScreenSize() const scope = useScopeParam() const isApiOffline = useIsApiOffline(scope?.network || Network.mainnet) @@ -62,7 +62,7 @@ export const PageLayout: FC> = ({ children, m mb: 6, }} > - + )} {children} diff --git a/src/app/hooks/useScreensize.ts b/src/app/hooks/useScreensize.ts index f1cd032e6..d93b91820 100644 --- a/src/app/hooks/useScreensize.ts +++ b/src/app/hooks/useScreensize.ts @@ -6,6 +6,7 @@ export const useScreenSize = () => { return { isMobile: useMediaQuery(theme.breakpoints.down('sm')), isTablet: useMediaQuery(theme.breakpoints.down('md')), - isDesktop: useMediaQuery(theme.breakpoints.up('md')), + isLaptop: useMediaQuery(theme.breakpoints.down('lg')), + isDesktop: useMediaQuery(theme.breakpoints.up('lg')), } } diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 48683fc59..f117d26c3 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -76,6 +76,7 @@ "to": "To", "totalSent": "Total Sent", "transactions": "Transactions", + "transactionAbbreviation": "Txs", "txnFee": "Txn Fee", "type": "Type", "unknown": "Unknown",