From 9b65b4db1d0157dd091db815d1bb66b942cd5b1a Mon Sep 17 00:00:00 2001
From: Simon Bruder <simon@sbruder.de>
Date: Thu, 1 Aug 2019 20:41:33 +0000
Subject: [PATCH] Style list items

---
 frontend/src/components/ListItem.vue | 34 ++++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ListItem.vue b/frontend/src/components/ListItem.vue
index 0ccbf27..b7b0088 100644
--- a/frontend/src/components/ListItem.vue
+++ b/frontend/src/components/ListItem.vue
@@ -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 {