Skip to content
Snippets Groups Projects
Commit 77677900 authored by Isabella Skořepová's avatar Isabella Skořepová
Browse files

dejavascriptify article list

parent 328b6521
No related branches found
No related tags found
No related merge requests found
Pipeline #1022 passed
Stage: test
Hide whitespace changes
Inline Side-by-side
theme-source/partials/list.tsx
+ 97
− 85
View file @ 77677900
/* @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;
${
......
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