feat: add grave photo indicator, move wikidata link on hover

Closes #7.
yarl · Oct 18, 2018 · e55c574 · e55c574
1 parent 03b8c4b
commit e55c574
Showing 1 changed file with 23 additions and 1 deletion.
diff --git a/src/components/PersonPanel.vue b/src/components/PersonPanel.vue
@@ -15,6 +15,8 @@
         <div class="media-content">
           <div class="content">
             <p>
+              <img v-if="person.graveImage" :src="icons.greenIcon" alt="Grave image present">
+              <img v-else :src="icons.redIcon" alt="Grave image missing">
               <a class="wikidata-link"
                   :href="`//www.wikidata.org/wiki/${person.id}`"
                   target="_blank">
@@ -40,6 +42,8 @@
 
 <script>
   import store from '@/store';
+  import redIcon from '@/assets/marker_red.png';
+  import greenIcon from '@/assets/marker_green.png';
 
   function showModal() {
     console.log(this.person);
@@ -48,19 +52,28 @@
   }
 
   export default {
+    data() {
+      return {
+        icons: { redIcon, greenIcon },
+      };
+    },
     props: ['person'],
     methods: { showModal },
   };
 </script>
 
 <style scoped>
   .panel-block {
+    position: relative;
     border-left: 0;
     border-right: 0;
   }
   .panel-block:first-child {
     border-top: 0;
   }
+  .panel-block:hover .wikidata-link {
+    display: inline;
+  }
   .image {
     background: #ccc;
   }
@@ -78,6 +91,15 @@
     margin: auto;
   }
   .wikidata-link {
-    vertical-align: text-bottom;
+    display: none;
+    position: absolute;
+    top: 6px;
+    right: 10px;
+    width: 30px;
+    height: 30px;
+    background: whitesmoke;
+    border-radius: 50%;
+    line-height: 27px;
+    text-align: center;
   }
 </style>