simon/mangareader
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Style list items

Browse source
This commit is contained in:
Simon Bruder 2019-08-01 20:41:33 +00:00
parent 4795aaa758
commit 9b65b4db1d
No known key found for this signature in database
GPG key ID: 6F03E0000CC5B62F
1 changed files with 32 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
frontend/src/components/ListItem.vue
View file

@ -1,8 +1,10 @@
<template>
<RouterLink :to="action">
<div class="list-item">
<h2>{{ title }}</h2>
<img v-bind:src="thumbnail"/>
<div class="image-overlay">
<span>{{ title }}</span>
</div>
</div>
</RouterLink>
</template>
@ -20,7 +22,35 @@ export default {
<style scoped>
.list-item {
padding: 8px;
margin: 8px;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.list-item img {
max-height: 512px;
max-width: 512px;
border-radius: 8px;
vertical-align: top;
}
.image-overlay {
position: absolute;
bottom: 0px;
background-color: #eee;
width: 100%;
font-size: 1.5em;
line-height: 3em;
height: 3em;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.image-overlay span {
margin: 4px;
}
a {