Skip to content

Commit

Permalink
Simplify header height calculation
Browse files Browse the repository at this point in the history
  • Loading branch information
lubej committed Jun 9, 2023
1 parent 1cdf7f6 commit fe5a22f
Show file tree
Hide file tree
Showing 5 changed files with 30 additions and 71 deletions.
14 changes: 4 additions & 10 deletions src/app/components/BuildBanner/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { forwardRef, ForwardRefRenderFunction } from 'react'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import Alert from '@mui/material/Alert'
import { styled } from '@mui/material/styles'
Expand All @@ -22,7 +22,7 @@ const StyledAlert = styled(Alert)(({ theme }) => ({
},
}))

const BuildBannerCmp: ForwardRefRenderFunction<Alert | null> = (_, ref) => {
export const BuildBanner: FC = () => {
const { t } = useTranslation()

if (window.location.origin === deploys.localhost) {
Expand All @@ -33,7 +33,7 @@ const BuildBannerCmp: ForwardRefRenderFunction<Alert | null> = (_, ref) => {
}
if (window.location.origin === deploys.staging) {
return (
<StyledAlert ref={ref} severity="warning">
<StyledAlert severity="warning">
{t('banner.buildStaging')}
<Link
component={RouterLink}
Expand All @@ -46,11 +46,5 @@ const BuildBannerCmp: ForwardRefRenderFunction<Alert | null> = (_, ref) => {
</StyledAlert>
)
}
return (
<StyledAlert ref={ref} severity="warning">
{t('banner.buildPreview')}
</StyledAlert>
)
return <StyledAlert severity="warning">{t('banner.buildPreview')}</StyledAlert>
}

export const BuildBanner = forwardRef(BuildBannerCmp)
19 changes: 5 additions & 14 deletions src/app/components/OfflineBanner/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { FC, forwardRef, ForwardRefRenderFunction } from 'react'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import Alert from '@mui/material/Alert'
import { styled } from '@mui/material/styles'
Expand All @@ -22,39 +22,30 @@ const StyledAlert = styled(Alert)(({ theme }) => ({
},
}))

const NetworkOfflineBannerCmp: ForwardRefRenderFunction<Alert | null, { wantedNetwork?: Network }> = (
{ wantedNetwork },
ref,
) => {
export const NetworkOfflineBanner: FC<{ wantedNetwork?: Network }> = ({ wantedNetwork }) => {
const scope = useScopeParam()
const { t } = useTranslation()
const targetNetwork = wantedNetwork || scope?.network || Network.mainnet
const isNetworkOffline = useIsApiOffline(targetNetwork)
const networkNames = getNetworkNames(t)
const target = networkNames[targetNetwork]
return isNetworkOffline ? (
<StyledAlert ref={ref} severity="warning">
{t('home.apiOffline', { target })}
</StyledAlert>
<StyledAlert severity="warning">{t('home.apiOffline', { target })}</StyledAlert>
) : null
}

export const NetworkOfflineBanner = forwardRef(NetworkOfflineBannerCmp)

const RuntimeOfflineBannerCmp: ForwardRefRenderFunction<Alert | null> = (_, ref) => {
export const RuntimeOfflineBanner: FC = () => {
const scope = useRequiredScopeParam()
const { t } = useTranslation()

const { outOfDate, lastUpdate } = useRuntimeFreshness(scope)
if (!outOfDate) return null
const target = getNameForScope(t, scope)
return (
<StyledAlert ref={ref} severity="warning">
<StyledAlert severity="warning">
{lastUpdate
? t('home.runtimeOutOfDateSince', { target, lastUpdate })
: t('home.runtimeOutOfDate', { target })}
</StyledAlert>
)
}

export const RuntimeOfflineBanner = forwardRef(RuntimeOfflineBannerCmp)
49 changes: 17 additions & 32 deletions src/app/components/PageLayout/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { FC, useLayoutEffect, useRef } from 'react'
import { FC, useEffect, useRef } from 'react'
import AppBar from '@mui/material/AppBar'
import Grid from '@mui/material/Unstable_Grid2'
import useScrollTrigger from '@mui/material/useScrollTrigger'
Expand All @@ -10,51 +10,36 @@ import Box from '@mui/material/Box'
import { useScopeParam } from '../../hooks/useScopeParam'
import { BuildBanner } from '../BuildBanner'
import { NetworkOfflineBanner, RuntimeOfflineBanner } from '../OfflineBanner'
import Alert from '@mui/material/Alert'
import useResizeObserver from 'use-resize-observer'

export const Header: FC = () => {
const theme = useTheme()
const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
const isTablet = useMediaQuery(theme.breakpoints.down('md'))
const scope = useScopeParam()
const scrollTrigger = useScrollTrigger({
disableHysteresis: true,
threshold: 0,
})
const buildBannerRef = useRef<(typeof Alert & HTMLElement) | null>(null)
const networkOfflineBannerRef = useRef<(typeof Alert & HTMLElement) | null>(null)
const runtimeOfflineBannerRef = useRef<(typeof Alert & HTMLElement) | null>(null)
const headerRef = useRef<HTMLDivElement | null>(null)

useLayoutEffect(() => {
if (!isMobile) {
return
}

const bodyStyles = document.body.style

if (buildBannerRef.current !== null) {
const buildBannerHeight = buildBannerRef.current?.clientHeight
bodyStyles.setProperty('--app-build-banner-height', `${buildBannerHeight?.toFixed(2) || 0}px`)
}
const { height: headerHeight } = useResizeObserver<Element>({
ref: headerRef,
})

if (networkOfflineBannerRef.current !== null) {
const networkOfflineBannerHeight = networkOfflineBannerRef.current?.clientHeight
bodyStyles.setProperty(
'--app-network-offline-banner-height',
`${networkOfflineBannerHeight?.toFixed(2) || 0}px`,
)
useEffect(() => {
if (!isTablet) {
return
}

if (runtimeOfflineBannerRef.current !== null) {
const runtimeOfflineBannerHeight = runtimeOfflineBannerRef.current?.clientHeight
bodyStyles.setProperty(
'--app-runtime-offline-banner-height',
`${runtimeOfflineBannerHeight?.toFixed(2) || 0}px`,
)
if (headerRef.current !== null) {
document.body.style.setProperty('--app-header-height', `${headerHeight?.toFixed(2) || 0}px`)
}
})
}, [isTablet, headerHeight])

return (
<AppBar
ref={headerRef}
position="sticky"
sx={{
transitionProperty: 'background-color',
Expand All @@ -69,9 +54,9 @@ export const Header: FC = () => {
: 'none',
}}
>
<BuildBanner ref={buildBannerRef} />
<NetworkOfflineBanner ref={networkOfflineBannerRef} />
{scope && <RuntimeOfflineBanner ref={runtimeOfflineBannerRef} />}
<BuildBanner />
<NetworkOfflineBanner />
{scope && <RuntimeOfflineBanner />}
<Box sx={{ px: '15px' }}>
<Grid
container
Expand Down
4 changes: 1 addition & 3 deletions src/styles/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@
@import '../../node_modules/@fontsource/roboto-mono/variable.css';

:root {
--app-build-banner-height: 0px;
--app-network-offline-banner-height: 0px;
--app-runtime-offline-banner-height: 0px;
--app-header-height: 0px;
}

html {
Expand Down
15 changes: 3 additions & 12 deletions src/styles/theme/defaultTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import { inputBaseClasses } from '@mui/material/InputBase'
import { inputAdornmentClasses } from '@mui/material/InputAdornment'
import { tabClasses } from '@mui/material/Tab'
import { menuItemClasses } from '@mui/material/MenuItem'
import { drawerClasses } from '@mui/material/Drawer'
import { modalClasses, paperClasses } from '@mui/material'
import { modalClasses } from '@mui/material/Modal'

declare module '@mui/material/styles' {
interface Palette {
Expand Down Expand Up @@ -508,16 +507,8 @@ export const defaultTheme = createTheme({
}),
paper: ({ theme }) => ({
[theme.breakpoints.down('md')]: {
height: `calc(100vh - var(--app-build-banner-height) - var(--app-network-offline-banner-height) - var(--app-runtime-offline-banner-height) - 82px)`,
top: `calc(var(--app-build-banner-height) + var(--app-network-offline-banner-height) + var(--app-runtime-offline-banner-height) + 82px)`,
},
[theme.breakpoints.down('sm')]: {
height: `calc(100vh - var(--app-build-banner-height) - var(--app-network-offline-banner-height) - var(--app-runtime-offline-banner-height) - ${theme.spacing(
6,
)})`,
top: `calc(var(--app-build-banner-height) + var(--app-network-offline-banner-height) + var(--app-runtime-offline-banner-height) + ${theme.spacing(
6,
)})`,
height: `calc(100vh - var(--app-header-height))`,
top: `var(--app-header-height)`,
},
}),
},
Expand Down

0 comments on commit fe5a22f

Please sign in to comment.