Add simple layout

client/src/App.vue

@@ -16,7 +16,8 @@
 
     computed: {
       layout() {
-        return 'default-layout';
+        console.log(this.$route.meta.layout);
+        return (this.$route.meta.layout || 'default') + '-layout';
       }
     },
 

client/src/components/RoomEntry.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="room-entry">
+  <router-link to="/article" tag="div" class="room-entry">
     <div class="room-entry__header" v-if="image">
       <img class="room-entry__image" :src="image" :alt="title">
     </div>
@@ -10,7 +10,7 @@
       </p>
       <user-widget class="room-entry__author" v-bind="author"></user-widget>
     </div>
-  </div>
+  </router-link>
 </template>
 
 <script>

client/src/components/images/Cross.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>cross</title>
+    <path
+      d="M53.91,50,87.19,16.73a2.77,2.77,0,1,0-3.91-3.91L50,46.09,16.73,12.81a2.77,2.77,0,1,0-3.91,3.91L46.09,50,12.81,83.27a2.77,2.77,0,1,0,3.91,3.91L50,53.91,83.27,87.19a2.77,2.77,0,0,0,3.91-3.91Z"/>
+  </svg>
+</template>

client/src/layouts/SimpleLayout.vue

@@ -1,3 +1,45 @@
 <template>
-  <router-view></router-view>
+  <div class="skillbox layout--simple">
+    <div class="close-button" v-on:click="back">
+      <cross class="close-button__icon"></cross>
+    </div>
+    <router-view></router-view>
+  </div>
 </template>
+
+<style lang="scss">
+  .layout {
+    &--simple {
+      display: -ms-grid;
+      display: grid;
+      padding: 20px;
+    }
+  }
+
+  .close-button {
+    justify-self: end;
+    cursor: pointer;
+
+    &__icon {
+      width: 40px;
+      height: 40px;
+    }
+  }
+</style>
+
+<script>
+  import Cross from '@/components/images/Cross';
+
+  export default {
+    components: {
+      Cross
+    },
+
+    methods: {
+      back() {
+        this.$router.go(-1);
+      }
+    }
+  }
+
+</script>

client/src/pages/room.vue

@@ -22,8 +22,8 @@
 <script>
   import AddRoomEntry from '@/components/AddRoomEntry.vue';
   import RoomEntry from '@/components/RoomEntry.vue';
-  import RoomGroupWidget from "@/components/rooms/RoomGroupWidget";
+  import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
-  import RoomEntryCountWidget from "@/components/rooms/RoomEntryCountWidget";
+  import RoomEntryCountWidget from '@/components/rooms/RoomEntryCountWidget';
 
   export default {
     components: {

client/src/router/index.js

@@ -14,7 +14,7 @@ const routes = [
   {path: '/module', name: 'module', component: module},
   {path: '/rooms', name: 'rooms', component: rooms},
   {path: '/room', name: 'room', component: room},
-  {path: '/article', name: 'article', component: article},
+  {path: '/article', name: 'article', component: article, meta: {layout: 'simple'}},
   {
     path: '/book',
     name: 'book',