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

dejavascriptify article list

parent 328b6521
Pipeline #1022 passed with stage
in 2 minutes and 14 seconds
/* @jsx jsx */
import React from 'react'
import moment from 'moment'
import { jsx } from '@emotion/react'
import { jsx, css } from '@emotion/react'
import { Paginator } from './paginator'
import { SymbolBackward, SymbolForward } from './svgs'
import { dateFilter, truncate, striptags } from '../utils'
......@@ -33,66 +33,107 @@ export function List({ subtags, tag, content, metadata, file, config }) {
))}
</div>
</div>
<div className="row">
<div
css={{
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'stretch',
justifyContent: 'space-between',
}}
>
{content.map(page => (
<div className="col s12 m6 l4" key={page.file}>
<div className="block article">
<div
key={page.file}
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={`${config.baseurl}/${page.file}`}>
<div
css={{
height: 120,
backgroundColor: '#0288d1',
backgroundImage: page.metadata.image
? `url('${config.baseurl}${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={`${config.baseurl}/${page.file}`}>
<div
<h5
css={{
height: 120,
backgroundColor: '#0288d1',
backgroundImage: page.metadata.image
? `url('${config.baseurl}${relURL(
page.metadata.image,
page.file,
)}')`
: undefined,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: '50% 50%',
}}
></div>
</a>
<div className="head-title">
<a href={`${config.baseurl}/${page.file}`}>
<h5 className="center">{page.metadata.title}</h5>
</a>
</div>
<div style={{ padding: '0px 10px' }} className="head-perex">
{page.metadata.perex
? page.metadata.perex
: page.metadata.perex_e
? truncate(page.metadata.perex_e)
: page.content
? truncate(striptags(page.content))
: null}
</div>
<div className="clear"></div>
<div style={{ padding: 10 }} className="head-info">
<span
style={{
color: '#a2a2a2',
textAlign: 'left',
display: 'inline-block',
width: '75%',
textAlign: 'center',
fontSize: '1.3rem',
margin: '0 10px',
}}
>
{dateFilter(page.metadata.published, 'D. M. YYYY')} napsal
{page.metadata.author.gender === 'F' ? 'a' : ''}{' '}
{page.metadata.author.name}
</span>
<a
style={{
textAlign: 'right',
display: 'inline-block',
width: '25%',
}}
href={`${config.baseurl}/${page.file}`}
>
Číst&nbsp;dál
</a>
</div>
{page.metadata.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={{ flexGrow: 1 }}></div>
<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
{page.metadata.author.gender === 'F' ? 'a' : ''}{' '}
{page.metadata.author.name}
</span>
<a
style={{
textAlign: 'right',
}}
href={`${config.baseurl}/${page.file}`}
>
Číst&nbsp;dál
</a>
</div>
</div>
))}
......@@ -125,35 +166,6 @@ export function List({ subtags, tag, content, metadata, file, config }) {
dangerouslySetInnerHTML={{
__html: `
(function($) {
var onresize = function(){
// equalize article sizes
$(".head-perex").height("auto");
var maxHeight = 0;
$(".head-perex").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".head-perex").height(maxHeight);
$(".head-title").height("auto");
maxHeight = 0;
$(".head-title").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".head-title").height(maxHeight);
$(".head-info").height("auto");
maxHeight = 0;
$(".head-info").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".head-info").height(maxHeight);
// Sidelink icons of same size
$(".sidelink-icon").css("top",$(window).height()/2);
};
$(window).resize(onresize);
$(document).load(onresize);
$(document).ready(onresize);
$(document).keyup(function(e) {
if($("#search-overlay").hasClass("shown")) return;
${
......
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