From ded9426742a29deb5caadc811aff2efd5bcfc7eb Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 22 Aug 2018 18:19:51 +0200
Subject: [PATCH] Add simple layout

---
 client/src/App.vue                     |  3 +-
 client/src/components/RoomEntry.vue    |  4 +--
 client/src/components/images/Cross.vue |  6 ++++
 client/src/layouts/DefaultLayout.vue   |  2 +-
 client/src/layouts/SimpleLayout.vue    | 44 +++++++++++++++++++++++++-
 client/src/pages/room.vue              |  4 +--
 client/src/router/index.js             |  2 +-
 7 files changed, 57 insertions(+), 8 deletions(-)
 create mode 100644 client/src/components/images/Cross.vue

diff --git a/client/src/App.vue b/client/src/App.vue
index 0fcf7d44..06073bef 100644
--- a/client/src/App.vue
+++ b/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';
       }
     },
 
diff --git a/client/src/components/RoomEntry.vue b/client/src/components/RoomEntry.vue
index 2264f1e8..c287d233 100644
--- a/client/src/components/RoomEntry.vue
+++ b/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>
diff --git a/client/src/components/images/Cross.vue b/client/src/components/images/Cross.vue
new file mode 100644
index 00000000..818c0098
--- /dev/null
+++ b/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>
diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue
index 93143960..31c70bd4 100644
--- a/client/src/layouts/DefaultLayout.vue
+++ b/client/src/layouts/DefaultLayout.vue
@@ -40,7 +40,7 @@
           avatar: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCABkAGQDAREAAhEBAxEB/8QAHAAAAQUBAQEAAAAAAAAAAAAABwIDBQYIBAEA/8QAGgEAAgMBAQAAAAAAAAAAAAAAAAMBAgQFBv/aAAwDAQACEAMQAAABuOjn0FTM6p1JmeqDwjyJmCJ+1NF6cvsjZCLV7K3z4l4vU8lp0GpOu3TENBnhuKovSdHZyW1bBCSO4sDlNpODpaVx9i5XiedjTW2d75gvrwXZiT69LRCQ7y6AzpzOnoTJ2o26q67GRV6p5c5I3ciEbn1VqzMkICQLKDOmXTXM+zW+bpCG6iva1spAoF9NmTXS4rTcqCO8sosPUNBOLdshXTkoh21HivEpybzXunw2n4mw7CyggV3zHzeppKNt7i01ZDNLtVA85Fy6nEfmrYdJZQLDNvP32fP2ytLLdGLpKskhN+Il9HmIISQ+WUCwGmZ9Rw+jPNJkhPxT6Y59GPh6PKQCCOgn0FAqshfn9Uqq2wEKnFsIj8w363GFmrOZMmhAdAKBdZWTVKWBeHcdc3SsjUXDocrCXY5UUQWs7iIht0rf2BcS+WrNG5uxuI1H6h2ZM67MWc9C21XdZV2Ta2N3sDkT2xe0VbkSknRdp3RTH27n06t26S5cVEf/xAAmEAABBAIBAwUAAwAAAAAAAAABAgMEBQAGERASIQcTFCAiFRY1/9oACAEBAAEFAuM2yY7HiHuWoJ/SVBavY90ILsdXuBzKy8XUutLS80cPQjxuc19ieAVua9qL9u9E9P61l7+nVLgsNDryxZ1ogPL7iNEnLkwSM4zjOM3mheek6yyn5dWPjYw57hSCA55G7VzrL55GaK98a4Izjpxi2kuJXHTUXUN1uTBGyohIHqPIckQbd6Yh1tLyL6AIdpSzUw7sj676h1FxT7NLq8r4jEqBb6YXLWupWWllHA2HVxY2Duj1sCuHBQc46DN5hIkU0hCeyk/zJAGNfjHFDgeFGMGHSgIw/TYIiptOfLlFs7cyFEdefbCfyBjnjLPfJVXXxefjZx9NihIj2+t2cOC2xepWWZPeEnHlcjeIfzb3jgcfXdqxT8XW0hpmCpQZ7vK5CWxHJkGTXB5zwR9SkKSK40mwMXjCUTNhDqq2It0xme8eoOziogafsqW0H7bBbRa2LHkJlTFusNJqQqyctrJihq7GyetZ3fxlLvHxI7W0VbyOgxDZdVteqpkQYvKHNcrpOwT6/wBlEb1buO5/uwr5IOd3QdIZ7ZMwd0e/iNxrD00SBrkOU5/PbXKcl7FhxOc5/8QAIxEAAQQBBQEAAwEAAAAAAAAAAQACAxEhBBASIDFBEyJRI//aAAgBAwEBPwFM97ubfaNu0cLnIQNCLR/EGj+KRvE7PGerHUtO0F2UAiKRKap2E5Gz+2mdRtWnlYukG7SN4uTvEerPFFMWpziCpYmzZBpN/wAhxCBUkXPKihhLgx/1aiL8EpZ1Z7S4ik5Rp37Jo/qJxSa/kOLlrHc5ierDTtsPHJYGV9RK+KaT8fiOezHYWnia5tBSaUtyuNIoLVYHeN1YWmmLWcWhPPI25FDKOFqqLRvXXSyfCnkFXfiApSScfFPJWFG/4e4F+KP3O0svAUPU91CynW42VxTXH6uQ6jCaUZSArtTGzSq0BXUIIqEJ3uzsuQ6f/8QAIhEAAgIBBQEBAAMAAAAAAAAAAAECEQMQEiAhMUEEEyIw/9oACAECAQE/ASfNPbyn7WjyL4PI9GQekOM19MzExaMhLSHvLMu9InY6ekH0J98ppbieO+0JEZOA6m7JIjOuiU5JXExz/kgpccvllsXhIiSem2vDCtsEuORXHTzpjK6KvSCsXKcaY0/um4QzD3zyxvsbL0en57v/AAzY6EXQ3ZjhZ+fFud/DLj+rnKSXpLvTHj3EY29qIVBUjcThb/qbXxaU0NEYWyqMC63Fjdi4sj6Z+iHg/CPUVrEZ/8QAMxAAAgECAwYFAwIHAQAAAAAAAQIDABEEEiETICIxQVEQIzJhcQUUQpGxFSQwQ1JicoH/2gAIAQEABj8CrZwkh3F9Daj1N609VWtxdL0TlytQHfpVyPMNBlZtn+SdDSyIbqwuDumDNdAuh660LdaTP5MQ5tSuwZyO5riwwv3FXw8eWReWvOnDA5ugo6WqaB2zbJuH4O793EpdcvFbpS5gCTyvR0t42oyZC0LdR0PhLF0lT9t0qwup0IqWMeiN9Kzrrw0bRGR+gFbIYNYz1zNelzxqD25UVYXBHI1NEPSG0rCzOTYPY299N5mXyo9mpzf5UObRHTWoZtmLut+VM4uysb5rVtQoiJ/BOX6eEUkfDtjkkPbTnUjQ4KPFuozM0pOdvgjkaVlOZGUEH23dqRxRMP0NQqFtrUH/ACKBt4aVejJCMmc3e3Wgg0CgLu4mJNXtcD41pQ2mtJDhEWSZeHI5y158IgcfiGzDxNYdJsDs8dPHoSeEGos3qyi996YZCI817UIeTK2a/elAw0xvyKrWoIPv4/R0tcEsLd99cVHzj0f470VQX19NL5WTStRark6VnIsg5V9yVHkg8Z6d6BGoPXeIIuDzFFfTh5OKI9PimV3VCO9BMMrTMeoGlCSdszdugr/Wv4fhj/NTrrb8EpcBimsP7Uh/bftPGuIdvTCRehPMqqpfVF0ApRHbKeVqyxXXDpo8vf2FTYqTSOJdFHU9BU2Lna8spufb28EgxiPIF0Ei87Vm+7RfZ9DuZF9RppU1mUXv3qRGHvSRqSuFi1lft7CkjhQRommQdKw305G0QbVx79P6EfzTg8qGQW4Gai1uJpmuf0qVL8DXGWvqMkhu23Zf/AbD9t3/xAAkEAEAAgICAgIDAQEBAAAAAAABABEhMUFRYXEQkaGxwYHw8f/aAAgBAQABPyFrM0QDeASaxZ2ijLUzQXLirTRzHLArZfMrA6e0Mg0YNaiwzR/cEFQcLNjBUwjLkGI6QxZx4XCjfgRLGxz+oSx9Yr7jd4erqWWAZlrekzgmmx+Ybe68sAiSXycH3MUfgcYFcKgcI98LKFfN44iUhjuGLn+5CtmaV+aEKCs1XZDpVrnhy+BiqjINiWOSWqWv8uf7LwFrFSorBpXDvqBPqOKMvZJ2DBV1zDGq/TRcyKDeRb+viSUSpUFxWg5anLEwUqhlzyLLmnlkKPFShNC8N++F+ghnGc4Iutv5iwjYft/qUt7QfaiyD4VBFVpKzdlV91FHSWXllgV/8oTicyhbCI6IaekPbobHZ8rCS0YdUVBE+AgvWeeUU/EK0pyZXSnAtd14ga0qQ/4MHcgX4gqui5cfBxqaut+agTJUy2WsxJSVAgQP4KpWEvHjcAwX+21VWMy5Jaafw1Er6HtKJc9uJvvB0YUhROoxUqBAhPKLV3/iJRfZKg7GJarA1MCFU5FuWDH1xw4tQAWBu4nwQhADGpCxI67/AOTepcgMbRwYVpfbFDPm0NVgYWNhix8rC+3J9wV5NNwef8+CfBKuEcZhBBe29EJSWrSvglEHBBFaNDl+/t4gEnHZ1D7ZfO3q6DwGJkzAEVth6BHddwgbvEh+PgguHukHqErGipsJS+yU9ps6fsYAllRohNeRO1j8LmESjR2yo2vuEVFCKo3j94h7kKhxWKHm6hzB5MopNDkThjn3KVcPxSvoRd+5tGpLT//aAAwDAQACAAMAAAAQufyh/kpD8oJ4mJ5VRHNNNAuQ9soqm/acpGqO7cAJOvgiYFtgmahgtuyOkJJtdOqoptTJvYx5fWSpiaLEEoxK/wD/xAAfEQEBAQADAAMBAQEAAAAAAAABABEQITEgQXFRYYH/2gAIAQMBAT8Q9geoy+uDpvbLLYnvLwSbfl2qdS+xfBJcYKcEaJk5Do3Q0AYRBWJeof2A+qzLyPDw/k92Ap33bGBtq0M/Zzv6k0S2QuyLH1xlvDTqymLpYAsXQ+7+lnXuFAiZQ6bO39M8YwZP/pInDLIgfySqW1hOTwJh7c8u/wDeEeQBb0CHMfJyA9sr4siHdQLfTdivyZI92oO4vtbfcV8LpPBj/ZPjt1YhfsrJ3MODquuPZfW/IexipJbsrpEHcXT1OHXbDlHwDbqZdrqNQGw1NSlAE+RjJ/tyWbD2Q7lmD2UtfbFP1Z7QjZ7dyz4PV5YFdvW8ZKLAIkzj/8QAHhEBAQEAAgMBAQEAAAAAAAAAAQARITEQIEFhUbH/2gAIAQIBAT8Qkhh46n+2zn2OOpFpDpp5w8JhQNYnEQZGp3JzuV8PTPOvhVxKGEm62mDCfFk4+HyPblEGceOo05JcD3BjbFbIPt3hEPpEms7iaT0eITkkjaw5fsHqMH8Wy6wmOJBEmEZ9kcvrv200I/I1wFeo7GNOZMcs/NgA9tsJrBT5OiWHg957pwzDyy3qFeG4ZDpZPji/PbuRaQQkcpFzJzernPT/AGUfWWImcCnE98WnXqcvCNk4YdIn88KHd3zdTI+yhjd91YOFipwZVcDu08JsdXS40iM+318IBE73N2m7f//EACUQAQACAgIDAAICAwEAAAAAAAEAESExQVFhcYGRobHB0eHx8P/aAAgBAQABPxBuFwiqKZbXYlmWxw1TZcAqtVta/wCWoMLrTsd3j5CWXkG2jAPvVyiABmCDGOB/mBda0ooLEzzqMeqirQHb/cs/CBclNmB4urNjsXUkXQliP2NAdIqdX8iOLJQ7pjxpgZVtrXhFKrCmnICmICUlPRUTMCyl7uoMXVXGTbvPGoOpt7Cc3WH7KRnQcDalunpNepk3N5dmMW+4WGXHnq7qceoQUqvAH8yxYqYtXcR5iQCXixScq6qv5jPwpBrPEpmqiApeSH1Uy8JnZTnMdlmgm+yEN4Zg9eL32eaZbHiaaE6e6R97heshGhlMclXCRax1O0I2UEB49x/qwbEMlQqzZmruDror8h13kGRqAB6BovLxXMIl2rK9AfpqCmYypOAMedeY0cRgiJSTHsgNLLa6zDGq4Nmtr808RS37mVsW2ww79sL+ouo4VOdVXN0Ss4qv0z4zLX5LBf2gzEgktqbxNGSms9RnUqOMU8RaWx1FgboxEsCj5dMPSPKkWsq9WVOAExQyU5bnDUji0a5pL8zwxy7+wwuB1DcgWBAfwmemA3Yil3tgxYDDjXUumqwgVOPcF0zn/sMFEEVc7XMFiCtB0GhjziH1EF0KnyqgovfiWu6lMS+YuMEm6keUYeUhrRFpQZ/UtIKLFEc3/Vx6VK4eQqx8hFosxm5ag9JhltPw4jBDsqM3ubafCwtGLUkqfN3PETJsm05IFZIzWNuQzfcg9eJgqdlEVhblesxoTQcXzYrzqOWIbKreph6s7jVW8PyuILSJrYPqEG/Fzb+AZZwbiXf7griOAqfCHnejkTHolHoR4Y8wB0bLarLCwHQFL/PMAIU/cwBt3uYqHhp4muo3Mv6vBQuNFq6BlWfBQDpE2JzM2MesRa4/cHcH48QRcUiSRSI7ExUI5Ne2DnLlNd1XcaqyBDA+fE5ROGO6a+EWVoEfQH9wQpbocvIeoqTys2PwM+thMSZ0gVb3Ra2e66gq8UksYDzrVwB7hUu4GqywDMdOEYaO6vqM5KwLsawCI06UCg3j5Fk0RKzLf6B7Zn7HFh9FA8ZXTLsfgcWi8GAdHc6RXLeYQ1h8kCiX0ytKvt5LZTHSP8FJSMHmAKiWVaoxhv0b+TK8JmqDJ+pnyAjmpP3+o4X01S83JlFaLeC9KZ1jn222q5VVVtiWr+NWTfQf3zBurvPJGAqz/wBEcvyEUIZPgmw0QVUWOqPcyfphCWlHYx82dGFmz8WVjRIzUW9C/mMAROOOwHlz5ZZySaFAHQT8vMSlyUiq3IKS8W3jM6mp/9k='
         }
       }
-    },
+    }
 
   }
 </script>
diff --git a/client/src/layouts/SimpleLayout.vue b/client/src/layouts/SimpleLayout.vue
index a44ab87b..f4b6c493 100644
--- a/client/src/layouts/SimpleLayout.vue
+++ b/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>
diff --git a/client/src/pages/room.vue b/client/src/pages/room.vue
index 9a6287d2..df9bb94a 100644
--- a/client/src/pages/room.vue
+++ b/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 RoomEntryCountWidget from "@/components/rooms/RoomEntryCountWidget";
+  import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
+  import RoomEntryCountWidget from '@/components/rooms/RoomEntryCountWidget';
 
   export default {
     components: {
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 04edeed8..09214131 100644
--- a/client/src/router/index.js
+++ b/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',