Add room page with widgets

client/src/components/Checkbox.vue

@@ -48,7 +48,6 @@
       border: 0;
       background-color: $color-brand;
 
-
       svg{
         display: block;
         fill: white;

client/src/components/RoomEntry.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="room-entry">
+    <div class="room-entry__header">
+      <img class="room-entry__image" src="https://picsum.photos/400/300" alt="">
+    </div>
+    <div class="room-entry__content">
+      <h2 class="room-entry__title">Ein neues Festival auf dem Gurten – und ich bin dabei!</h2>
+      <p class="room-entry__teaser">
+        Endlich war es soweit. Zum ersten Mal fand am 2. und 3. Juli 1977 das 1. Internationale …
+      </p>
+      <user-widget class="room-entry__author"></user-widget>
+    </div>
+  </div>
+</template>
+
+<script>
+  import UserWidget from '@/components/UserWidget.vue';
+
+  export default {
+    props: ['title', 'teaser', 'image', 'author'],
+
+    components: {
+      UserWidget
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_functions.scss";
+  @import "@/styles/_variables.scss";
+
+  .room-entry {
+    border-radius: 12px;
+    overflow: hidden;
+    background-color: $color-white;
+
+    &__image {
+      max-width: 100%;
+    }
+
+    &__content {
+      padding: 15px;
+    }
+
+    &__title {
+      font-size: toRem(21px);
+      margin-bottom: 10px;
+    }
+
+    &__teaser {
+      font-size: toRem(18px);
+      line-height: 1.5;
+      margin-bottom: 10px;
+    }
+
+  }
+</style>

client/src/components/rooms/RoomWidget.vue

@@ -14,7 +14,7 @@
       </div>
     </div>
     <div class="room-widget__footer">
-      <router-link to="/" class="room-widget__more-link">
+      <router-link to="/room" class="room-widget__more-link">
         <ellipses></ellipses>
       </router-link>
     </div>
@@ -50,11 +50,6 @@
   @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
 
-  //temporary, for mock, todo: define with real types
-  $red: #FA5F5F;
-  $green: #6DD79A;
-  $brown: #EB9E77;
-
   @mixin text-style {
     font-family: $sans-serif-font-family;
     font-size: 1rem;

client/src/pages/room.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="room">
+    <div class="room__header">
+      <h1 class="room__title">Ein historisches Festival</h1>
+      <p class="room__intro">
+        Schildern Sie ein historisches Festival (z. B. Woodstock, Isle of Wight), an dem Sie gerne dabei gewesen wären.
+        Schreiben Sie einen Tagesblog.
+      </p>
+    </div>
+    <div class="room__content">
+      <room-entry></room-entry>
+      <room-entry></room-entry>
+      <room-entry></room-entry>
+      <room-entry></room-entry>
+    </div>
+  </div>
+</template>
+
+<script>
+  import RoomEntry from '@/components/RoomEntry.vue';
+
+  export default {
+    components: {
+      RoomEntry
+    },
+
+    beforeDestroy() {
+      this.$store.dispatch('showFilter');
+      this.$store.dispatch('setSpecialContainerClass', '');
+    },
+
+    created() {
+      this.$store.dispatch('hideFilter');
+      this.$store.dispatch('setSpecialContainerClass', 'red');
+    },
+
+    data() {
+      return {
+        entries: []
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .room {
+    &__header {
+      padding: 30px;
+    }
+    &__intro {
+      font-family: $sans-serif-font-family;
+      font-weight: 500;
+      font-size: toRem(17px);
+    }
+
+    &__content {
+      padding: 50px 60px;
+      background-color: rgba($color-darkgrey-1, 0.18);
+      columns: 4;
+    }
+  }
+</style>

client/src/router/index.js

@@ -5,12 +5,14 @@ import topic from '@/pages/topic'
 import book from '@/pages/book'
 import module from '@/pages/module'
 import rooms from '@/pages/rooms'
+import room from '@/pages/room'
 import p404 from '@/pages/p404'
 
 const routes = [
   {path: '/', name: 'index', component: index},
   {path: '/module', name: 'module', component: module},
   {path: '/rooms', name: 'rooms', component: rooms},
+  {path: '/room', name: 'room', component: room},
   {
     path: '/book',
     name: 'book',
@@ -22,12 +24,6 @@ const routes = [
   {path: '*', component: p404}
 ]
 
-// const routes = routerOptions.map(route => {
-//   return {
-//     ...route
-//   }
-// })
-
 Vue.use(Router)
 export default new Router({
   routes,

client/src/styles/_variables.scss

@@ -35,5 +35,10 @@ $intro-color: $color-grey;
 $sans-serif-font-family: 'Montserrat', Arial, sans-serif;
 $serif-font-family: "ff-meta-serif-web-pro", serif;
 $base-font-size: 100%; // 16px in most browsers
+$base-font-size-pixels: 16px; // used to calculate rem
 
 
+//temporary, for room mock, todo: define with real types
+$red: #FA5F5F;
+$green: #6DD79A;
+$brown: #EB9E77;