Merge pull request #532 from oasisprotocol/mz/tablet

Tweak md breakpoint
oasisprotocol · Jun 15, 2023 · 7d79541 · 7d79541
2 parents 19cb876 + 96669c4
commit 7d79541
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 10 deletions.
diff --git a/.changelog/532.bugfix.2.md b/.changelog/532.bugfix.2.md
@@ -0,0 +1 @@
+Adjust layout to new breakpoint
diff --git a/.changelog/532.bugfix.md b/.changelog/532.bugfix.md
@@ -0,0 +1 @@
+Set laptop breakpoint to handle more edge cases
diff --git 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
@@ -51,10 +51,10 @@ export const Header: FC = () => {
           </Grid>
           {scope && (
             <>
-              <Grid md={6} xs={8}>
+              <Grid lg={6} xs={8}>
                 <NetworkSelector layer={scope.layer} network={scope.network} />
               </Grid>
-              <Grid md={3} xs={0} />
+              <Grid lg={3} xs={0} />
             </>
           )}
         </Grid>

diff --git a/src/app/components/PageLayout/NetworkSelector.tsx b/src/app/components/PageLayout/NetworkSelector.tsx
@@ -34,7 +34,7 @@ type NetworkSelectorProps = {
 export const NetworkSelector: FC<NetworkSelectorProps> = ({ 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<NetworkSelectorProps> = ({ layer, network }) =>
       sx={{
         display: 'flex',
         alignItems: 'center',
-        justifyContent: isDesktop ? 'center' : 'flex-end',
+        justifyContent: isTablet ? 'flex-end' : 'center',
       }}
     >
       <ParaTimePicker
@@ -60,7 +60,7 @@ export const NetworkSelector: FC<NetworkSelectorProps> = ({ layer, network }) =>
       {!isMobile && (
         <NetworkButton isOutOfDate={outOfDate} layer={layer} network={network} onClick={handleDrawerOpen} />
       )}
-      {isDesktop && network !== Network.mainnet && (
+      {!isTablet && network !== Network.mainnet && (
         <StyledBox>
           <Typography
             component="span"

diff --git a/src/app/components/PageLayout/index.tsx b/src/app/components/PageLayout/index.tsx
@@ -21,7 +21,7 @@ export const StyledMain = styled('main')({
 
 export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ 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<PropsWithChildren<PageLayoutProps>> = ({ children, m
                 mb: 6,
               }}
             >
-              <Search scope={scope} variant={isDesktop ? 'button' : 'icon'} disabled={isApiOffline} />
+              <Search scope={scope} variant={isTablet ? 'icon' : 'button'} disabled={isApiOffline} />
             </Box>
           )}
           <StyledMain>{children}</StyledMain>

diff --git 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
@@ -76,6 +76,7 @@
     "to": "To",
     "totalSent": "Total Sent",
     "transactions": "Transactions",
+    "transactionAbbreviation": "Txs",
     "txnFee": "Txn Fee",
     "type": "Type",
     "unknown": "Unknown",

diff --git 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,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Set laptop breakpoint to handle more edge cases