Update styling of room page

client/src/components/BackLink.vue

@@ -10,6 +10,7 @@
 <script>
   import ChevronLeft from '@/components/icons/ChevronLeft';
   import {MODULE_PAGE} from '@/router/module.names';
+  import {ROOMS_PAGE} from '@/router/room.names';
 
   export default {
     props: {
@@ -33,15 +34,25 @@
 
     computed: {
       to() {
-        if (this.type === 'topic') {
-          return {name: 'topic', params: {topicSlug: this.slug}};
-        } else {
-          return {name: MODULE_PAGE};
+        switch (this.type) {
+          case 'topic':
+            return {name: 'topic', params: {topicSlug: this.slug}};
+          case 'module':
+            return {name: MODULE_PAGE};
+          default:
+            return {name: ROOMS_PAGE};
         }
       },
       fullTitle() {
-        return this.type === 'topic' ? `Thema: ${this.title}` : `Modul: ${this.title}`;
-      }
+        switch (this.type) {
+          case 'topic':
+            return `Thema: ${this.title}`;
+          case 'module':
+            return `Modul: ${this.title}`;
+          default:
+            return this.title;
+        }
+      },
     },
   };
 </script>

client/src/components/ContentBlock.vue

@@ -13,10 +13,19 @@
           v-bind="me"
           class="block-actions__user-widget content-block__user-widget"/>
         <more-options-widget>
-          <li class="popover-links__link"><a
-            data-cy="delete-content-block-link"
-            @click="deleteContentBlock(contentBlock)">Löschen</a></li>
-          <li class="popover-links__link"><a @click="editContentBlock(contentBlock)">Bearbeiten</a></li>
+          <li class="popover-links__link">
+            <popover-link
+              data-cy="delete-content-block-link"
+              text="Löschen"
+              @link-action="deleteContentBlock(contentBlock)" />
+
+          </li>
+
+          <li class="popover-links__link">
+            <popover-link
+              text="Bearbeiten"
+              @link-action="editContentBlock(contentBlock)" />
+          </li>
         </more-options-widget>
       </div>
       <div class="content-block__visibility">
@@ -67,6 +76,7 @@
   import me from '@/mixins/me';
   import {hidden} from '@/helpers/visibility';
   import {CONTENT_TYPE} from '@/consts/types';
+  import PopoverLink from '@/components/ui/PopoverLink';
 
   const instruments = {
     base_communication: 'Sprache & Kommunikation',
@@ -82,6 +92,7 @@
     mixins: [me],
 
     components: {
+      PopoverLink,
       ContentComponent,
       AddContentButton,
       VisibilityAction,
@@ -238,8 +249,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+  @import "~styles/helpers";
 
   .content-block {
     margin-bottom: $section-spacing;

client/src/components/MoreOptionsWidget.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-  import WidgetPopover from '@/components/WidgetPopover';
+  import WidgetPopover from '@/components/ui/WidgetPopover';
   import Ellipses from '@/components/icons/Ellipses.vue';
 
   export default {

client/src/components/modules/SnapshotMenu.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-  import WidgetPopover from '@/components/WidgetPopover';
+  import WidgetPopover from '@/components/ui/WidgetPopover';
   import {SNAPSHOT_LIST} from '@/router/module.names';
   import me from '@/mixins/me';
 

client/src/components/portfolio/ProjectActions.vue

@@ -27,7 +27,7 @@
 
 <script>
   import Ellipses from '@/components/icons/Ellipses.vue';
-  import WidgetPopover from '@/components/WidgetPopover';
+  import WidgetPopover from '@/components/ui/WidgetPopover';
 
   import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
   import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';

client/src/components/portfolio/ProjectWidget.vue

@@ -32,7 +32,7 @@
   import OwnerWidget from '@/components/portfolio/OwnerWidget';
   import ProjectActions from '@/components/portfolio/ProjectActions';
   import EntryCountWidget from '@/components/rooms/EntryCountWidget';
-  import WidgetFooter from '@/components/WidgetFooter';
+  import WidgetFooter from '@/components/ui/WidgetFooter';
 
   export default {
     props: ['title', 'appearance', 'slug', 'id', 'final', 'student', 'entriesCount', 'userId', 'readOnly'],

client/src/components/rooms/Comment.vue

@@ -36,7 +36,9 @@
     display: grid;
     grid-template-columns: auto auto;
     grid-template-rows: 2rem auto;
-    grid-template-areas: "o d" "t t";
+    grid-template-areas:
+      "o d"
+      "t t";
     padding: $medium-spacing 0 $large-spacing 0;
     border-bottom: 1px solid $color-silver;
     grid-row-gap: $medium-spacing;

client/src/components/rooms/RoomActions.vue

@@ -11,30 +11,54 @@
       class="room-actions__popover"
       v-if="showMenu"
       @hide-me="showMenu = false">
-      <li class="popover-links__link"><a @click="deleteRoom()">Raum löschen</a></li>
-      <li class="popover-links__link"><a @click="editRoom()">Raum bearbeiten</a></li>
+      <li class="popover-links__link">
+        <popover-link
+          icon="pen-icon"
+          text="Bearbeiten"
+          @link-action="editRoom()"/>
+      </li>
+      <li class="popover-links__link">
+        <popover-link
+          icon="eye-icon"
+          text="Sichtbarkeit anpassen"
+          @link-action="editRoom()"/>
+      </li>
+      <li class="popover-links__link">
+        <popover-link
+          icon="trash-icon"
+          text="Löschen"
+          @link-action="deleteRoom()"/>
+      </li>
     </widget-popover>
   </div>
 </template>
 
 <script>
   import Ellipses from '@/components/icons/Ellipses.vue';
-  import WidgetPopover from '@/components/WidgetPopover';
+  import WidgetPopover from '@/components/ui/WidgetPopover';
 
   import DELETE_ROOM_MUTATION from '@/graphql/gql/mutations/deleteRoom.gql';
   import ROOMS_QUERY from '@/graphql/gql/queries/roomsQuery.gql';
+  import PenIcon from '@/components/icons/PenIcon';
+  import TrashIcon from '@/components/icons/TrashIcon';
+  import EyeIcon from '@/components/icons/EyeIcon';
+  import PopoverLink from '@/components/ui/PopoverLink';
 
   export default {
     props: ['id'],
 
     components: {
+      PopoverLink,
+      EyeIcon,
+      TrashIcon,
+      PenIcon,
       Ellipses,
-      WidgetPopover
+      WidgetPopover,
     },
 
     data() {
       return {
-        showMenu: false
+        showMenu: false,
       };
     },
 
@@ -48,8 +72,8 @@
           mutation: DELETE_ROOM_MUTATION,
           variables: {
             input: {
-              id: theId
-            }
+              id: theId,
+            },
           },
           update(store, {data: {deleteRoom: {success}}}) {
             if (success) {
@@ -59,26 +83,32 @@
                 store.writeQuery({query: ROOMS_QUERY, data});
               }
             }
-          }
+          },
         });
       },
       editRoom() {
         this.$router.push({name: 'edit-room', params: {id: this.id}});
-      }
-    }
+      },
+    },
   };
 </script>
 
 <style scoped lang="scss">
   @import "~styles/helpers";
 
+  $height: 30px;
+
   .room-actions {
+    height: $height;
+
     &__more-link {
       cursor: pointer;
+      height: $height;
     }
 
     &__popover {
-      @include popover-defaults();
+      display: flex;
+      width: max-content;
     }
 
     svg {

client/src/components/rooms/RoomWidget.vue

@@ -22,7 +22,7 @@
 
   import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
   import EntryCountWidget from '@/components/rooms/EntryCountWidget';
-  import WidgetFooter from '@/components/WidgetFooter';
+  import WidgetFooter from '@/components/ui/WidgetFooter';
   import RoomActions from '@/components/rooms/RoomActions';
 
   import {meQuery} from '@/graphql/queries';

client/src/components/school-class/ClassSelectionWidget.vue

@@ -50,7 +50,7 @@
 </template>
 
 <script>
-  import WidgetPopover from '@/components/WidgetPopover';
+  import WidgetPopover from '@/components/ui/WidgetPopover';
   import ChevronDown from '@/components/icons/ChevronDown';
   import CurrentClass from '@/components/school-class/CurrentClass';
   import AddIcon from '@/components/icons/AddIcon';

client/src/components/ui/PopoverLink.vue

@@ -0,0 +1,58 @@
+<template>
+  <a
+    class="popover-link"
+    @click="$emit('link-action')">
+    <component
+      :is="icon"
+      class="popover-link__icon"/>
+    <span class="popover-link__text">{{ text }}</span>
+  </a>
+</template>
+
+<script>
+  import EyeIcon from '@/components/icons/EyeIcon';
+  import TrashIcon from '@/components/icons/TrashIcon';
+  import PenIcon from '@/components/icons/PenIcon';
+
+  export default {
+    props: {
+      icon: {
+        type: String,
+        default: '',
+      },
+      text: {
+        type: String,
+        default: '',
+      },
+    },
+    components: {
+      EyeIcon,
+      TrashIcon,
+      PenIcon,
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .popover-link {
+    @include popover-link;
+
+    &__icon {
+      width: 30px;
+      fill: $color-charcoal-dark;
+      margin-right: 15px;
+      display: flex;
+      flex-basis: auto;
+      flex-shrink: 0;
+    }
+
+    &__text {
+      width: auto;
+      display: flex;
+      flex-basis: auto;
+      flex-shrink: 0;
+    }
+  }
+</style>

client/src/components/ui/WidgetFooter.vue

@@ -5,8 +5,7 @@
 </template>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+  @import "~styles/_helpers";
 
   .widget-footer {
     background-color: $color-grey--lighter;

client/src/pages/room.vue

@@ -1,14 +1,23 @@
 <template>
   <div class="room">
+    <div class="room__back">
+
+      <back-link
+        type="room"
+        title="Zurück zur Übersicht"/>
+    </div>
+    <div class="room__context-menu">
+      <room-actions
+        :id="room.id"
+        class="room__actions"
+        v-if="canEdit"/>
+    </div>
     <div class="room__header">
       <h1 class="room__title">{{ room.title }}</h1>
       <p class="room__intro">
         {{ room.description }}
       </p>
       <div class="room__meta">
-        <room-actions
-          :id="room.id"
-          v-if="canEdit"/>
         <room-group-widget v-bind="room.schoolClass"/>
         <entry-count-widget :entry-count="roomEntryCount"/>
       </div>
@@ -34,10 +43,12 @@
   import ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/roomEntriesQuery.gql';
   import room from '@/mixins/room';
   import me from '@/mixins/me';
+  import BackLink from '@/components/BackLink';
 
   export default {
     props: ['slug'],
     mixins: [room, me],
+    components: {BackLink},
 
     computed: {
       canEdit() {

client/src/router/room.names.js

@@ -1 +1,2 @@
 export const NEW_ROOM_PAGE = 'new-room';
+export const ROOMS_PAGE = 'rooms';

client/src/router/room.routes.js

@@ -3,10 +3,10 @@ import newRoom from '@/pages/newRoom';
 import editRoom from '@/pages/editRoom';
 import room from '@/pages/room';
 import moduleRoom from '@/pages/module/moduleRoom';
-import {NEW_ROOM_PAGE} from '@/router/room.names';
+import {NEW_ROOM_PAGE, ROOMS_PAGE} from '@/router/room.names';
 
 export default [
-  {path: '/rooms', name: 'rooms', component: rooms, meta: {filter: true, hideFooter: true}},
+  {path: '/rooms', name: ROOMS_PAGE, component: rooms, meta: {filter: true, hideFooter: true}},
   {path: '/new-room/', name: NEW_ROOM_PAGE, component: newRoom},
   {path: '/edit-room/:id', name: 'edit-room', component: editRoom, props: true},
   {path: '/room/:slug', name: 'room', component: room, props: true},

client/src/styles/_mixins.scss

@@ -302,3 +302,13 @@
   border: 0;
   min-height: 110px;
 }
+
+@mixin popover-link {
+  @include large-link;
+  padding: $small-spacing 0;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}

client/src/styles/_room.scss

@@ -1,14 +1,29 @@
-@import "@/styles/_variables.scss";
-@import "@/styles/_functions.scss";
-@import "@/styles/_mixins.scss";
+@import "~styles/helpers";
 
 .room {
   display: grid;
-  grid-template-rows: max-content 1fr;
+  grid-template-rows: 30px max-content 1fr;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas:
+    "b m"
+    "h h"
+    "c c";
   margin-bottom: -90px;
+  padding: $medium-spacing;
+
+  &__back {
+    grid-area: b;
+  }
+
+  &__context-menu {
+    position: relative;
+    grid-area: m;
+    justify-self: end;
+  }
 
   &__header {
-    padding: 30px;
+    padding: 30px 0;
+    grid-area: h;
   }
 
   &__intro {
@@ -39,6 +54,8 @@
   }
 
   &__content {
+    margin: 0 -$medium-spacing;
+    grid-area: c;
     padding: 50px 15px;
     background-color: rgba($color-charcoal-dark, 0.18);
     @include desktop {

client/src/styles/_widget-popover.scss

@@ -19,7 +19,9 @@
 
 .popover-links {
   list-style: none;
-  display: grid;
+  display: flex;
+  flex-direction: column;
+  padding: $small-spacing;
 
   &__icon {
     width: 25px;
@@ -35,15 +37,17 @@
   &__link {
     cursor: pointer;
     padding: 0 $medium-spacing;
+    box-sizing: border-box;
+    position: relative;
+
+    display: flex;
+    flex-shrink: 0;
+    flex-grow: 1;
+    width: auto;
+
 
     & > a {
-      display: inline-block;
-      color: $color-silver-dark;
-      font-family: $sans-serif-font-family;
-      font-size: toRem(14px);
-      line-height: 1.5;
-      padding: 5px 0;
-      cursor: pointer;
+      @include popover-link;
     }
 
     &--large {