Add popover for room widget menu

client/src/components/icons/Ellipses.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>elipses</title>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <circle cx="18.75" cy="50" r="5"/>
     <circle cx="50" cy="50" r="5"/>
     <circle cx="81.25" cy="50" r="5"/>

client/src/components/rooms/RoomPopover.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="room-popover">
+    <a class="room-popover__link">Raum löschen</a>
+    <a class="room-popover__link">Raum bearbeiten</a>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['room']
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+  @import "@/styles/_mixins.scss";
+
+  .room-popover {
+    position: absolute;
+    right: 0;
+    bottom: -110px;
+    display: grid;
+    background-color: $color-white;
+    padding: 20px;
+    width: 240px;
+    z-index: 10;
+    @include widget-shadow;
+
+    &__link {
+      color: $color-grey;
+      font-family: $sans-serif-font-family;
+      font-size: toRem(14px);
+      line-height: 1.5;
+      padding: 5px 0;
+    }
+  }
+</style>

client/src/components/rooms/RoomWidget.vue

@@ -8,6 +8,7 @@
     <div class="room-widget__footer">
       <div class="room-widget__more-link">
         <ellipses></ellipses>
+        <room-popover :id="id"></room-popover>
       </div>
     </div>
   </router-link>
@@ -17,6 +18,7 @@
   import Ellipses from '@/components/icons/Ellipses.vue';
   import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
   import RoomEntryCountWidget from '@/components/rooms/RoomEntryCountWidget';
+  import RoomPopover from '@/components/rooms/RoomPopover';
 
   export default {
     props: ['slug', 'title', 'entryCount', 'appearance', 'userGroup'],
@@ -24,7 +26,8 @@
     components: {
       RoomEntryCountWidget,
       Ellipses,
-      RoomGroupWidget
+      RoomGroupWidget,
+      RoomPopover
     },
 
     computed: {
@@ -45,7 +48,7 @@
       display: grid;
     }
     grid-template-rows: 210px 1fr;
-    overflow: hidden;
+    /*overflow: hidden;*/
     @include widget-shadow;
 
     cursor: pointer;
@@ -78,6 +81,7 @@
       display: flex;
       flex-direction: row-reverse;
       align-items: center;
+      position: relative;
 
       /*
        * For IE10+

client/src/pages/rooms.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="rooms-page">
-    <room-widget v-for="room in rooms" v-bind="room" :key="room.id"></room-widget>
+    <room-widget v-for="room in rooms" v-bind="room" :key="room.name"></room-widget>
     <add-room></add-room>
   </div>
 </template>

client/src/styles/_mixins.scss

@@ -1,7 +1,7 @@
 @import 'variables';
 
 @mixin widget-shadow {
-  border-radius: 12px;
+  border-radius: $default-border-radius;
   box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
 
 }