Add popover to room entry

client/src/components/rooms/RoomEntry.vue

@@ -1,26 +1,49 @@
 <template>
-  <router-link :to="{name: 'article', params: { slug: slug }}" tag="div" class="room-entry">
+  <div class="room-entry">
-    <div class="room-entry__header" v-if="image">
+    <div class="room-entry__more">
-      <img class="room-entry__image" :src="image" :alt="title">
+      <a @click="showMenu = !showMenu" class="room-entry__more-link">
+        <ellipses class="room-entry__ellipses"></ellipses>
+      </a>
+      <widget-popover entity="Eintrag"
+                      @delete="deleteRoomEntry"
+                      @hide-me="showMenu = false"
+                      :id="id"
+                      class="room-entry__popover"
+                      v-if="showMenu"></widget-popover>
     </div>
-    <div class="room-entry__content">
+    <router-link :to="{name: 'article', params: { slug: slug }}" tag="div" class="room-entry__router-link">
-      <h2 class="room-entry__title">{{title}}</h2>
+      <div class="room-entry__header" v-if="image">
-      <p class="room-entry__teaser" v-html="teaser">
+        <img class="room-entry__image" :src="image" :alt="title">
+      </div>
+      <div class="room-entry__content">
+        <h2 class="room-entry__title">{{title}}</h2>
+        <p class="room-entry__teaser" v-html="teaser">
+
+        </p>
+        <user-widget class="room-entry__author" v-bind="author"></user-widget>
+      </div>
+    </router-link>
+  </div>
 
-      </p>
-      <user-widget class="room-entry__author" v-bind="author"></user-widget>
-    </div>
-  </router-link>
 </template>
 
 <script>
   import UserWidget from '@/components/UserWidget.vue';
+  import Ellipses from '@/components/icons/Ellipses.vue';
+  import WidgetPopover from '@/components/rooms/WidgetPopover';
 
   export default {
-    props: ['title', 'author', 'contents', 'slug'],
+    props: ['title', 'author', 'contents', 'slug', 'id'],
 
     components: {
-      UserWidget
+      UserWidget,
+      Ellipses,
+      WidgetPopover
+    },
+
+    methods: {
+      deleteRoomEntry() {
+      }
     },
 
     computed: {
@@ -48,8 +71,13 @@
         }
         return '';
       }
-    }
+    },
 
+    data() {
+      return {
+        showMenu: false
+      }
+    }
   }
 </script>
 
@@ -66,6 +94,7 @@
     break-inside: avoid; /* IE 10+ */
     margin-bottom: 25px;
     cursor: pointer;
+    position: relative;
 
     &__image {
       max-width: 100%;
@@ -85,5 +114,24 @@
       margin-bottom: 10px;
     }
 
+    &__ellipses {
+      width: 30px;
+      fill: $color-darkgrey-1;
+    }
+
+    &__more {
+      position: absolute;
+      top: 5px;
+      right: 10px;
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    &__more-link {
+    }
+
+    &__popover {
+      width: 180px;
+    }
   }
 </style>