fix: fix episode page layout spacing
This commit is contained in:
parent
bb7c387353
commit
01e7396334
|
@ -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 { css } from '@emotion/react'
|
||||||
import styled from '@emotion/styled'
|
import styled from '@emotion/styled'
|
||||||
import { lsdUtils } from '../../utils/lsd.utils'
|
import { lsdUtils } from '../../utils/lsd.utils'
|
||||||
|
|
||||||
export const Grid = styled.div<{
|
export type GridOptions = {
|
||||||
cols?: number
|
cols?: number
|
||||||
|
}
|
||||||
|
|
||||||
breakpoints?: {
|
export type GridProps = React.HTMLProps<HTMLDivElement> &
|
||||||
xs?: {
|
GridOptions & {
|
||||||
cols?: number
|
xs?: GridOptions
|
||||||
}
|
sm?: GridOptions
|
||||||
sm?: {
|
md?: GridOptions
|
||||||
cols?: number
|
lg?: GridOptions
|
||||||
}
|
xl?: GridOptions
|
||||||
md?: {
|
|
||||||
cols?: number
|
|
||||||
}
|
|
||||||
lg?: {
|
|
||||||
cols?: number
|
|
||||||
}
|
|
||||||
xl?: {
|
|
||||||
cols?: number
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}>`
|
|
||||||
|
export const Grid = styled.div<GridProps>`
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(${(props) => props.cols || 16}, 1fr);
|
grid-template-columns: repeat(${(props) => props.cols || 16}, 1fr);
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
|
||||||
${(props) =>
|
${(props) =>
|
||||||
Object.entries(props.breakpoints || {}).map(([key, bp]) =>
|
THEME_BREAKPOINTS.map((key) => {
|
||||||
lsdUtils.responsive(
|
if (!props[key]) return null
|
||||||
|
|
||||||
|
const bp = props[key] as GridItemOptions
|
||||||
|
|
||||||
|
return lsdUtils.responsive(
|
||||||
props.theme,
|
props.theme,
|
||||||
key as Breakpoints,
|
key,
|
||||||
'exact',
|
'up',
|
||||||
)(css`
|
)(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`
|
export type GridItemOptions = {
|
||||||
grid-column: span 4;
|
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 {
|
&.w-1 {
|
||||||
grid-column: span 1;
|
grid-column: span 1;
|
||||||
|
@ -74,4 +87,20 @@ export const GridItem = styled.div`
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
grid-column: span 16 !important;
|
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};`}
|
||||||
|
`)
|
||||||
|
})}
|
||||||
`
|
`
|
||||||
|
|
|
@ -11,13 +11,17 @@ interface Props {
|
||||||
const EpisodeContainer = (props: Props) => {
|
const EpisodeContainer = (props: Props) => {
|
||||||
const { episode, relatedEpisodes } = props
|
const { episode, relatedEpisodes } = props
|
||||||
|
|
||||||
|
const emptyGridItem = (
|
||||||
|
<GridItem xs={{ cols: 0 }} sm={{ cols: 2 }} lg={{ cols: 4 }} />
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EpisodeGrid>
|
<EpisodeGrid cols={16} xs={{ cols: 1 }} sm={{ cols: 12 }} lg={{ cols: 16 }}>
|
||||||
<GridItem className={'w-4'} />
|
{emptyGridItem}
|
||||||
<EpisodeBodyContainer className={'w-8'}>
|
<EpisodeBodyContainer cols={8} xs={{ cols: 1 }} sm={{ cols: 8 }}>
|
||||||
<EpisodeBody episode={episode} relatedEpisodes={relatedEpisodes} />
|
<EpisodeBody episode={episode} relatedEpisodes={relatedEpisodes} />
|
||||||
</EpisodeBodyContainer>
|
</EpisodeBodyContainer>
|
||||||
<GridItem className={'w-4'} />
|
{emptyGridItem}
|
||||||
</EpisodeGrid>
|
</EpisodeGrid>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -26,9 +30,6 @@ const EpisodeBodyContainer = styled(GridItem)``
|
||||||
|
|
||||||
const EpisodeGrid = styled(Grid)`
|
const EpisodeGrid = styled(Grid)`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@media (max-width: 768px) {
|
|
||||||
margin-top: 32px;
|
|
||||||
}
|
|
||||||
`
|
`
|
||||||
|
|
||||||
export default EpisodeContainer
|
export default EpisodeContainer
|
||||||
|
|
Loading…
Reference in New Issue