Commit a2df07db authored by Isabella Skořepová's avatar Isabella Skořepová
Browse files

Card as separate component

parent deeab935
Pipeline #1027 failed with stage
in 1 minute and 38 seconds
...@@ -43,96 +43,28 @@ export function List({ subtags, tag, content, metadata, file, config }) { ...@@ -43,96 +43,28 @@ export function List({ subtags, tag, content, metadata, file, config }) {
}} }}
> >
{content.map(page => ( {content.map(page => (
<div <Card
key={page.file} key={page.file}
css={{ file={page.file}
'@media (min-width: 37.56rem)': { image={page.metadata.image}
width: 'calc(50% - 0.75rem)', title={page.metadata.title}
}, text={
'@media (min-width: 62rem)': { page.metadata.perex
width: 'calc(33.3333% - 0.75rem)',
},
margin: '10px 0',
overflow: 'hidden',
textAlign: 'justify',
backgroundColor: 'white',
boxShadow:
'0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
display: 'flex',
flexDirection: 'column',
}}
>
<a href={`/${page.file}`}>
<div
css={{
height: 120,
backgroundColor: '#0288d1',
backgroundImage: page.metadata.image
? `url('${relURL(page.metadata.image, page.file)}')`
: undefined,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: '50% 50%',
}}
></div>
</a>
<div
css={css`
margin: 10px 0;
height: 50px;
`}
>
<a href={`/${page.file}`}>
<h5
css={{
textAlign: 'center',
fontSize: '1.3rem',
margin: '0 10px',
}}
>
{page.metadata.title}
</h5>
</a>
</div>
<div css={{ padding: '0px 10px' }}>
{page.metadata.perex
? page.metadata.perex ? page.metadata.perex
: page.metadata.perex_e : page.metadata.perex_e
? truncate(page.metadata.perex_e) ? truncate(page.metadata.perex_e)
: page.content : page.content
? truncate(striptags(page.content)) ? truncate(striptags(page.content))
: null} : null
</div> }
<div css={{ flexGrow: 1 }}></div> caption={
<div <>
css={{
padding: 10,
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
}}
>
<span
css={{
color: '#a2a2a2',
textAlign: 'left',
display: 'inline-block',
}}
>
{dateFilter(page.metadata.published, 'D. M. YYYY')} napsal {dateFilter(page.metadata.published, 'D. M. YYYY')} napsal
{page.metadata.author.gender === 'F' ? 'a' : ''}{' '} {page.metadata.author.gender === 'F' ? 'a' : ''}{' '}
{page.metadata.author.name} {page.metadata.author.name}
</span> </>
<a }
style={{ />
textAlign: 'right',
}}
href={`/${page.file}`}
>
Číst&nbsp;dál
</a>
</div>
</div>
))} ))}
</div> </div>
<Paginator metadata={metadata} file={file} config={config} /> <Paginator metadata={metadata} file={file} config={config} />
...@@ -183,3 +115,87 @@ export function List({ subtags, tag, content, metadata, file, config }) { ...@@ -183,3 +115,87 @@ export function List({ subtags, tag, content, metadata, file, config }) {
</div> </div>
) )
} }
function Card({ file, image, title, text, caption }) {
return (
<div
css={{
'@media (min-width: 37.56rem)': {
width: 'calc(50% - 0.75rem)',
},
'@media (min-width: 62rem)': {
width: 'calc(33.3333% - 0.75rem)',
},
margin: '10px 0',
overflow: 'hidden',
textAlign: 'justify',
backgroundColor: 'white',
boxShadow:
'0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
display: 'flex',
flexDirection: 'column',
}}
>
<a href={`/${file}`}>
<div
css={{
height: 120,
backgroundColor: '#0288d1',
backgroundImage: image
? `url('${relURL(image, file)}')`
: undefined,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: '50% 50%',
}}
></div>
</a>
<div
css={css`
margin: 10px 0;
height: 50px;
`}
>
<a href={`/${file}`}>
<h5
css={{
textAlign: 'center',
fontSize: '1.3rem',
margin: '0 10px',
}}
>
{title}
</h5>
</a>
</div>
<div css={{ padding: '0px 10px' }}>{text}</div>
<div css={{ flexGrow: 1 }}></div>
<div
css={{
padding: 10,
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
}}
>
<span
css={{
color: '#a2a2a2',
textAlign: 'left',
display: 'inline-block',
}}
>
{caption}
</span>
<a
style={{
textAlign: 'right',
}}
href={`/${file}`}
>
Číst&nbsp;dál
</a>
</div>
</div>
)
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment