From 77677900b016f54f7afa2ea75d06814fdf4b7f0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Isabella=20Sko=C5=99epov=C3=A1?= <isabella@skorepova.info>
Date: Sat, 11 Jan 2020 16:49:28 +0100
Subject: [PATCH] dejavascriptify article list
---
theme-source/partials/list.tsx | 182 ++++++++++++++++++---------------
1 file changed, 97 insertions(+), 85 deletions(-)
diff --git a/theme-source/partials/list.tsx b/theme-source/partials/list.tsx
index 6f0eea63..648c00b3 100644
--- a/theme-source/partials/list.tsx
+++ b/theme-source/partials/list.tsx
@@ -1,7 +1,7 @@
/* @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 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 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;
${
--
GitLab