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,8 +43,82 @@ export function List({ subtags, tag, content, metadata, file, config }) {
}}
>
{content.map(page => (
<div
<Card
key={page.file}
file={page.file}
image={page.metadata.image}
title={page.metadata.title}
text={
page.metadata.perex
? page.metadata.perex
: page.metadata.perex_e
? truncate(page.metadata.perex_e)
: page.content
? truncate(striptags(page.content))
: null
}
caption={
<>
{dateFilter(page.metadata.published, 'D. M. YYYY')} napsal
{page.metadata.author.gender === 'F' ? 'a' : ''}{' '}
{page.metadata.author.name}
</>
}
/>
))}
</div>
<Paginator metadata={metadata} file={file} config={config} />
</div>
<div className="hide-on-small-only">
{metadata.prevurl && (
<div style={{ left: 0 }} className="sidelink sidelink-l">
<a href={`/${metadata.prevurl}`}>
<div>
<SymbolBackward />
</div>
</a>
</div>
)}
{metadata.nexturl && (
<div style={{ right: 0 }} className="sidelink sidelink-r">
<a href={`/${metadata.nexturl}`}>
<div>
<SymbolForward />
</div>
</a>
</div>
)}
</div>
<script
dangerouslySetInnerHTML={{
__html: `
(function($) {
$(document).keyup(function(e) {
if($("#search-overlay").hasClass("shown")) return;
${
metadata.nexturl
? `if(e.key == "ArrowRight") window.location = "/${metadata.nexturl}";`
: ''
}
${
metadata.prevurl
? `if(e.key == "ArrowLeft") window.location = "/${metadata.prevurl}"`
: ''
}
});
})(jQuery);
`,
}}
/>
</div>
)
}
function Card({ file, image, title, text, caption }) {
return (
<div
css={{
'@media (min-width: 37.56rem)': {
width: 'calc(50% - 0.75rem)',
......@@ -62,13 +136,13 @@ export function List({ subtags, tag, content, metadata, file, config }) {
flexDirection: 'column',
}}
>
<a href={`/${page.file}`}>
<a href={`/${file}`}>
<div
css={{
height: 120,
backgroundColor: '#0288d1',
backgroundImage: page.metadata.image
? `url('${relURL(page.metadata.image, page.file)}')`
backgroundImage: image
? `url('${relURL(image, file)}')`
: undefined,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
......@@ -82,7 +156,7 @@ export function List({ subtags, tag, content, metadata, file, config }) {
height: 50px;
`}
>
<a href={`/${page.file}`}>
<a href={`/${file}`}>
<h5
css={{
textAlign: 'center',
......@@ -90,19 +164,11 @@ export function List({ subtags, tag, content, metadata, file, config }) {
margin: '0 10px',
}}
>
{page.metadata.title}
{title}
</h5>
</a>
</div>
<div css={{ padding: '0px 10px' }}>
{page.metadata.perex
? page.metadata.perex
: page.metadata.perex_e
? truncate(page.metadata.perex_e)
: page.content
? truncate(striptags(page.content))
: null}
</div>
<div css={{ padding: '0px 10px' }}>{text}</div>
<div css={{ flexGrow: 1 }}></div>
<div
css={{
......@@ -119,67 +185,17 @@ export function List({ subtags, tag, content, metadata, file, config }) {
display: 'inline-block',
}}
>
{dateFilter(page.metadata.published, 'D. M. YYYY')} napsal
{page.metadata.author.gender === 'F' ? 'a' : ''}{' '}
{page.metadata.author.name}
{caption}
</span>
<a
style={{
textAlign: 'right',
}}
href={`/${page.file}`}
href={`/${file}`}
>
Číst&nbsp;dál
</a>
</div>
</div>
))}
</div>
<Paginator metadata={metadata} file={file} config={config} />
</div>
<div className="hide-on-small-only">
{metadata.prevurl && (
<div style={{ left: 0 }} className="sidelink sidelink-l">
<a href={`/${metadata.prevurl}`}>
<div>
<SymbolBackward />
</div>
</a>
</div>
)}
{metadata.nexturl && (
<div style={{ right: 0 }} className="sidelink sidelink-r">
<a href={`/${metadata.nexturl}`}>
<div>
<SymbolForward />
</div>
</a>
</div>
)}
</div>
<script
dangerouslySetInnerHTML={{
__html: `
(function($) {
$(document).keyup(function(e) {
if($("#search-overlay").hasClass("shown")) return;
${
metadata.nexturl
? `if(e.key == "ArrowRight") window.location = "/${metadata.nexturl}";`
: ''
}
${
metadata.prevurl
? `if(e.key == "ArrowLeft") window.location = "/${metadata.prevurl}"`
: ''
}
});
})(jQuery);
`,
}}
/>
</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