fix: fix episode page layout spacing

This commit is contained in:
Hossein Mehrabi 2023-08-28 19:23:13 +03:30
parent bb7c387353
commit 01e7396334
No known key found for this signature in database
GPG Key ID: 45C04964191AFAA1
2 changed files with 65 additions and 35 deletions

View File

@ -1,47 +1,60 @@
import { Breakpoints } from '@acid-info/lsd-react'
import { THEME_BREAKPOINTS } from '@acid-info/lsd-react'
import { css } from '@emotion/react'
import styled from '@emotion/styled'
import { lsdUtils } from '../../utils/lsd.utils'
export const Grid = styled.div<{
export type GridOptions = {
cols?: number
}
breakpoints?: {
xs?: {
cols?: number
}
sm?: {
cols?: number
}
md?: {
cols?: number
}
lg?: {
cols?: number
}
xl?: {
cols?: number
}
export type GridProps = React.HTMLProps<HTMLDivElement> &
GridOptions & {
xs?: GridOptions
sm?: GridOptions
md?: GridOptions
lg?: GridOptions
xl?: GridOptions
}
}>`
export const Grid = styled.div<GridProps>`
display: grid;
grid-template-columns: repeat(${(props) => props.cols || 16}, 1fr);
gap: 16px;
${(props) =>
Object.entries(props.breakpoints || {}).map(([key, bp]) =>
lsdUtils.responsive(
THEME_BREAKPOINTS.map((key) => {
if (!props[key]) return null
const bp = props[key] as GridItemOptions
return lsdUtils.responsive(
props.theme,
key as Breakpoints,
'exact',
key,
'up',
)(css`
${bp.cols && `grid-template-columns: repeat(${bp.cols}, 1fr)`}
`),
)}
${bp.cols &&
css`
grid-template-columns: repeat(${bp.cols}, 1fr);
`}
`)
})}
`
export const GridItem = styled.div`
grid-column: span 4;
export type GridItemOptions = {
cols?: number
}
export type GridItemProps = React.HTMLProps<HTMLDivElement> &
GridItemOptions & {
xs?: GridItemOptions
sm?: GridItemOptions
md?: GridItemOptions
lg?: GridItemOptions
xl?: GridItemOptions
}
export const GridItem = styled.div<GridItemProps>`
grid-column: span ${(props) => props.cols || 4};
&.w-1 {
grid-column: span 1;
@ -74,4 +87,20 @@ export const GridItem = styled.div`
@media (max-width: 768px) {
grid-column: span 16 !important;
}
${(props) =>
THEME_BREAKPOINTS.map((key) => {
if (!props[key]) return null
const bp = props[key] as GridItemOptions
return lsdUtils.responsive(
props.theme,
key,
'up',
)(css`
${bp.cols === 0 ? `display: none;` : `display: initial;`}
${bp.cols && `grid-column: span ${bp.cols};`}
`)
})}
`

View File

@ -11,13 +11,17 @@ interface Props {
const EpisodeContainer = (props: Props) => {
const { episode, relatedEpisodes } = props
const emptyGridItem = (
<GridItem xs={{ cols: 0 }} sm={{ cols: 2 }} lg={{ cols: 4 }} />
)
return (
<EpisodeGrid>
<GridItem className={'w-4'} />
<EpisodeBodyContainer className={'w-8'}>
<EpisodeGrid cols={16} xs={{ cols: 1 }} sm={{ cols: 12 }} lg={{ cols: 16 }}>
{emptyGridItem}
<EpisodeBodyContainer cols={8} xs={{ cols: 1 }} sm={{ cols: 8 }}>
<EpisodeBody episode={episode} relatedEpisodes={relatedEpisodes} />
</EpisodeBodyContainer>
<GridItem className={'w-4'} />
{emptyGridItem}
</EpisodeGrid>
)
}
@ -26,9 +30,6 @@ const EpisodeBodyContainer = styled(GridItem)``
const EpisodeGrid = styled(Grid)`
width: 100%;
@media (max-width: 768px) {
margin-top: 32px;
}
`
export default EpisodeContainer