Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
ok1kvk.cz
content
Commits
a2df07db
Commit
a2df07db
authored
Jan 22, 2020
by
Isabella Skořepová
Browse files
Card as separate component
parent
deeab935
Pipeline
#1027
failed with stage
in 1 minute and 38 seconds
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
theme-source/partials/list.tsx
View file @
a2df07db
...
...
@@ -43,96 +43,28 @@ export function List({ subtags, tag, content, metadata, file, config }) {
}
}
>
{
content
.
map
(
page
=>
(
<
div
<
Card
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
=
{
`/
${
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
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
}
</
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
'
,
}
}
>
:
null
}
caption
=
{
<>
{
dateFilter
(
page
.
metadata
.
published
,
'
D. M. YYYY
'
)
}
napsal
{
page
.
metadata
.
author
.
gender
===
'
F
'
?
'
a
'
:
''
}{
'
'
}
{
page
.
metadata
.
author
.
name
}
</
span
>
<
a
style
=
{
{
textAlign
:
'
right
'
,
}
}
href
=
{
`/
${
page
.
file
}
`
}
>
Číst
dál
</
a
>
</
div
>
</
div
>
</>
}
/>
))
}
</
div
>
<
Paginator
metadata
=
{
metadata
}
file
=
{
file
}
config
=
{
config
}
/>
...
...
@@ -183,3 +115,87 @@ export function List({ subtags, tag, content, metadata, file, config }) {
</
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
dál
</
a
>
</
div
>
</
div
>
)
}
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment