Add new room page

client/src/components/rooms/AddRoom.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="add-room">
+  <router-link to="/room/new" tag="div" class="add-room">
     <add-icon class="add-room__add"></add-icon>
-  </div>
+  </router-link>
 </template>
 
 <script>
@@ -26,6 +26,7 @@
     border-radius: 12px;
     @include widget-shadow;
     box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
+    cursor: pointer;
 
     &__add {
       width: 80px;

client/src/components/rooms/NewRoom.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="new-room">
+    <div class="new-room__content">
+      <h1 class="new-room__heading">Neues Board</h1>
+
+      <h2 class="new-room__property-heading">Titel</h2>
+      <input class="skillbox-input new-room__input">
+      <h2 class="new-room__property-heading">Beschreibung</h2>
+      <textarea class="skillbox-textarea new-room__textarea"></textarea>
+      <h2 class="new-room__property-heading">Farbe</h2>
+      <room-colors></room-colors>
+    </div>
+    <div class="new-room__footer">
+      <button class="button button--primary new-room__save-button">Speichern</button>
+      <button class="button">Abbrechen</button>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  import RoomColors from '@/components/rooms/RoomColors';
+
+  export default {
+    components: {
+      RoomColors
+    },
+
+    created() {
+      this.$store.dispatch('setSpecialContainerClass', 'red');
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .new-room {
+    width: 710px;
+    height: 760px;
+    max-height: 100%;
+    box-sizing: border-box;
+    background-color: $color-white;
+    border-radius: $default-border-radius;
+    display: grid;
+    grid-template-rows: auto 65px;
+
+    &__heading {
+      font-size: toRem(35px);
+    }
+
+    &__content {
+      padding: 26px;
+    }
+
+    &__footer {
+      border-top: 1px solid $color-lightgrey;
+      padding: 16px 26px;
+    }
+
+    &__property-heading {
+      font-size: toRem(21px);
+      font-weight: 800;
+    }
+
+    &__input,
+    &__textarea {
+      width: 100%;
+      margin-bottom: 35px;
+    }
+
+    &__save-button {
+      margin-right: 15px;
+    }
+  }
+</style>

client/src/components/rooms/RoomColors.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="room-colors">
+    <div v-for="color in colors" class="room-colors__color-wrapper"
+         :class="{'room-colors__color-wrapper--selected': color.selected}">
+      <div class="room-colors__color" :class="'room-colors__color--' + color.name">
+        <tick class="room-colors__selected-icon" v-if="color.selected"></tick>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Tick from '@/components/icons/Tick';
+
+  export default {
+    data() {
+      return {
+        colors: [
+          {
+            name: 'yellow',
+            selected: true
+          },
+          {
+            name: 'blue'
+          },
+          {
+            name: 'red'
+          },
+          {
+            name: 'green'
+          }
+        ]
+      }
+    },
+
+    components: {
+      Tick
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .room-colors {
+    display: flex;
+
+    &__color-wrapper {
+      margin-right: 10px;
+      border-radius: 50px;
+      padding: 10px;
+
+      &--selected {
+        border: 1px solid $color-darkgrey-1;
+      }
+    }
+
+    &__selected-icon {
+      width: 17px;
+      fill: $color-darkgrey-1;
+    }
+
+    &__color {
+      width: 46px;
+      height: 46px;
+      border-radius: 23px;
+      display: grid;
+      justify-items: center;
+      align-items: center;
+
+      &--yellow {
+        background-color: $color-accent-1;
+      }
+      &--blue {
+        background-color: $color-accent-2;
+      }
+      &--red {
+        background-color: $color-accent-3;
+      }
+      &--green {
+        background-color: $color-accent-4;
+      }
+    }
+  }
+</style>

client/src/layouts/DefaultLayout.vue

@@ -85,7 +85,7 @@
       align-items: center;
       justify-content: space-around;
       background-color: $color-white;
-      grid-auto-rows: 60px;
+      grid-auto-rows: 50px;
       width: 100%;
 
       grid-template-columns: 1fr 1fr 1fr;

client/src/pages/newRoom.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="new-room-page">
+    <new-room></new-room>
+  </div>
+</template>
+
+<script>
+  import NewRoom from '@/components/rooms/NewRoom';
+
+  export default {
+    components: {
+      NewRoom
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .new-room-page {
+    display: grid;
+    justify-items: center;
+    align-items: center;
+  }
+</style>

client/src/pages/room.vue

@@ -119,6 +119,7 @@
       },
       roomAppearance: {
         set(value) {
+          // todo: remove, this does nothing
           this.$store.dispatch('setSpecialContainerClass', value);
         },
         get() {
@@ -139,6 +140,7 @@
         result({data, loading, networkStatus}) {
           if (!loading) {
             this.room = Object.assign({}, this.$getRidOfEdges(data).room);
+            this.$store.dispatch('setSpecialContainerClass', this.room.appearance);
           }
         }
       }

client/src/router/index.js

@@ -6,6 +6,7 @@ import book from '@/pages/book'
 import module from '@/pages/module'
 import rooms from '@/pages/rooms'
 import room from '@/pages/room'
+import newRoom from '@/pages/newRoom'
 import article from '@/pages/article'
 import basicknowledge from '@/pages/basicknowledge'
 import p404 from '@/pages/p404'
@@ -14,6 +15,7 @@ const routes = [
   {path: '/', name: 'module', component: module},
   {path: '/module', name: 'module', component: module},
   {path: '/rooms', name: 'rooms', component: rooms},
+  {path: '/room/new', name: 'new-room', component: newRoom},
   {path: '/room/:slug', name: 'room', component: room, props: true},
   {path: '/article', name: 'article', component: article, meta: {layout: 'simple'}},
   {path: '/basic-knowledge', name: 'basic-knowledge', component: basicknowledge, meta: {layout: 'simple'}},

client/src/styles/_buttons.scss

@@ -11,4 +11,8 @@
   &--active {
     border-color: $color-brand;
   }
+
+  &--primary {
+    border-color: $color-brand;
+  }
 }

client/src/styles/_variables.scss

@@ -24,11 +24,13 @@ $color-brand-light: #ddf3ee;
 /* greyscale */
 $color-darkgrey-1: #333333;
 $color-darkgrey-2: #515151;
-$color-grey: #a1a1a1;
+$color-grey: rgba(51, 51, 51, 0.5);
+$color-lightgrey-2: #dbdbdb;
 $color-lightgrey: #f3f3f3;
 $color-white: #ffffff;
 
 
+
 $header-color: $color-darkgrey-1;
 $intro-color: $color-grey;
 
@@ -44,7 +46,7 @@ $green: #6DD79A;
 $brown: #EB9E77;
 
 
-
+$default-border-radius: 13px;
 
 //modal stuff
 $modal-lateral-padding: 34px;

server/book/factories.py

@@ -58,7 +58,7 @@ class BasicKnowledgeBlockFactory(wagtail_factories.StructBlockFactory):
 
 class ImageUrlBlockBlockFactory(wagtail_factories.StructBlockFactory):
     title = fake_title()
-    url = factory.LazyAttribute(lambda x: 'https://picsum.photos/300/200/?random')
+    url = factory.LazyAttribute(lambda x: 'https://picsum.photos/600/400/?random')
 
     class Meta:
         model = ImageUrlBlock
@@ -66,7 +66,7 @@ class ImageUrlBlockBlockFactory(wagtail_factories.StructBlockFactory):
 
 class LinkBlockFactory(wagtail_factories.StructBlockFactory):
     text = fake_title()
-    url = factory.LazyAttribute(lambda x: 'https://picsum.photos/300/200/?random')
+    url = factory.LazyAttribute(lambda x: 'https://picsum.photos/600/400/?random')
 
     class Meta:
         model = LinkBlock

server/core/management/commands/dummy_rooms.py

@@ -25,7 +25,7 @@ data = [
                         'type': 'image_url',
                         'value': {
                             'title': 'Ein Bild sagt mehr als 1000 Worte',
-                            'url': 'https://picsum.photos/300/200/?random'
+                            'url': 'https://picsum.photos/600/400/?random'
                         }
                     },
                     {
@@ -51,7 +51,7 @@ data = [
                         'type': 'image_url',
                         'value': {
                             'title': 'Ein Bild sagt mehr als 1000 Worte',
-                            'url': 'https://picsum.photos/300/200/?random'
+                            'url': 'https://picsum.photos/600/400/?random'
                         }
                     },
                     {
@@ -77,7 +77,7 @@ data = [
                         'type': 'image_url',
                         'value': {
                             'title': 'Ein Bild sagt mehr als 1000 Worte',
-                            'url': 'https://picsum.photos/300/200/?random'
+                            'url': 'https://picsum.photos/600/400/?random'
                         }
                     },
                     {
@@ -97,7 +97,7 @@ data = [
                         'type': 'image_url',
                         'value': {
                             'title': 'Ein Bild sagt mehr als 1000 Worte',
-                            'url': 'https://picsum.photos/300/200/?random'
+                            'url': 'https://picsum.photos/600/400/?random'
                         }
                     },
                     {
@@ -129,7 +129,7 @@ data = [
                         'type': 'image_url',
                         'value': {
                             'title': 'Ein Bild sagt mehr als 1000 Worte',
-                            'url': 'https://picsum.photos/300/200/?random'
+                            'url': 'https://picsum.photos/600/400/?random'
                         }
                     },
                     {
@@ -155,7 +155,7 @@ data = [
                         'type': 'image_url',
                         'value': {
                             'title': 'Ein Bild sagt mehr als 1000 Worte',
-                            'url': 'https://picsum.photos/300/200/?random'
+                            'url': 'https://picsum.photos/600/400/?random'
                         }
                     },
                     {