Add room page and widgets

.gitignore

@@ -34,6 +34,5 @@ schema.json
 server/documents
 server/images
 server/original_images
-images/
 original_images/
 server/media/

client/src/App.vue

@@ -11,8 +11,8 @@
 </template>
 
 <script>
-  import TopNavigation from "@/components/TopNavigation.vue";
+  import TopNavigation from '@/components/TopNavigation.vue';
-  import Profile from "@/components/Profile.vue";
+  import Profile from '@/components/Profile.vue';
 
   export default {
     name: 'App',

client/src/components/RoomWidget.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="room-widget">
-    <div class="room-widget__content">
-      <h2 class="room-widget__title">Ein historisches Festival</h2>
-      <div>
-        Klasse 3b - 2018/2019
-      </div>
-      <div>
-        6 Beiträge
-      </div>
-    </div>
-    <div class="room-widget__footer">
-
-    </div>
-  </div>
-
-</template>
-
-<style scoped lang="scss">
-  .room-widget {
-    background-color: #FA5F5F;
-    border-radius: 12px;
-    display: grid;
-    grid-template-rows: 210px 1fr;
-    overflow: hidden;
-    box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
-
-    &__content {
-      padding: 22px;
-    }
-
-    &__title {
-      font-size: 1.375rem;
-    }
-
-    &__footer {
-      background-color: rgba(51, 51, 51, 0.18);
-    }
-  }
-</style>

client/src/components/images/Add.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>add</title>
+    <path
+      d="M50,6.48A43.62,43.62,0,0,0,6.56,47.08S6.5,48.46,6.5,50s.06,2.83.06,2.92A43.52,43.52,0,1,0,50,6.48Zm0,82.15A38.62,38.62,0,1,1,88.6,50,38.67,38.67,0,0,1,50,88.62Z"/>
+    <path
+      d="M67.71,47.55H52.43V32.27a2.45,2.45,0,1,0-4.9,0V47.55H32.25a2.45,2.45,0,0,0,0,4.9H47.53V67.73a2.45,2.45,0,1,0,4.9,0V52.45H67.71a2.45,2.45,0,0,0,0-4.9Z"/>
+  </svg>
+</template>

client/src/components/images/Cards.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>cards</title>
+    <path id="Fill-1"
+          d="M30.89,21v9.67H17.44v9.67H4V79H69.11V69.34H82.56V59.67H96V21Zm3.77,3.77H92.23V55.89H82.56V30.65H34.67ZM21.22,34.43H78.78V65.57H69.11V40.33H21.22ZM7.77,44.1H65.34V75.24H7.77Z"/>
+  </svg>
+</template>

client/src/components/images/Ellipses.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>elipses</title>
+    <circle cx="18.75" cy="50" r="5"/>
+    <circle cx="50" cy="50" r="5"/>
+    <circle cx="81.25" cy="50" r="5"/>
+  </svg>
+</template>

client/src/components/images/Group.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <title>group</title>
+    <path
+      d="M84.56,47H71.69a15.5,15.5,0,0,0-7.63,2,15.85,15.85,0,0,0-5,4.46,15.61,15.61,0,0,0-2.62-.22H43.57a15.51,15.51,0,0,0-2.6.22A15.85,15.85,0,0,0,36,49a15.5,15.5,0,0,0-7.63-2H15.49A15.66,15.66,0,0,0-.1,62.55v8.73A1.77,1.77,0,0,0,1.66,73H28v4.49a1.76,1.76,0,0,0,1.76,1.76H70.28A1.76,1.76,0,0,0,72,77.52V73H98.34a1.77,1.77,0,0,0,1.76-1.76V62.55A15.66,15.66,0,0,0,84.56,47ZM72,64.5V64l-.17-.48a15.8,15.8,0,0,0-8.39-8.85A12.31,12.31,0,0,1,65.79,52a12,12,0,0,1,5.88-1.55H84.56A12.13,12.13,0,0,1,96.62,62.55v7H72V64.8ZM31.52,66.22l.26-1a12.12,12.12,0,0,1,11.47-8.33l.36-.18H56.46a12.15,12.15,0,0,1,12,10.51,3,3,0,0,0,.07.77v7.73h-37V66.22Zm5.83-11.68A15.68,15.68,0,0,0,28.12,67.3v2.2H3.43v-7A12.13,12.13,0,0,1,15.49,50.49H28.36A12,12,0,0,1,34.24,52,12.22,12.22,0,0,1,37.35,54.54Z"/>
+    <path
+      d="M21.89,44.35h0a11.81,11.81,0,0,0,0-23.63h0a11.81,11.81,0,0,0,0,23.63Zm0-3.54h0a8.29,8.29,0,1,1,5.86-2.43A8.23,8.23,0,0,1,21.91,40.82Z"/>
+    <path
+      d="M78.11,44.34h0a11.81,11.81,0,0,0,0-23.63h0a11.81,11.81,0,0,0,0,23.63ZM69.84,32.53A8.29,8.29,0,1,1,84,38.38a8.23,8.23,0,0,1-5.86,2.43h0a8.29,8.29,0,0,1-8.29-8.28Z"/>
+    <path
+      d="M50,50.56A11.8,11.8,0,1,0,50,27h0a11.8,11.8,0,1,0,0,23.6ZM41.74,38.79A8.29,8.29,0,0,1,50,30.5h0a8.29,8.29,0,0,1,0,16.58h0A8.3,8.3,0,0,1,41.74,38.79Z"/>
+  </svg>
+</template>

client/src/components/rooms/AddRoom.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="add-room">
+    <add class="add-room__add"></add>
+  </div>
+</template>
+
+<script>
+  import Add from '@/components/images/Add.vue';
+
+  export default {
+    components: {
+      Add
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .add-room {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #D2D2D2;
+    border-radius: 12px;
+    @include widget-shadow;
+    box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
+
+    &__add {
+      width: 80px;
+      fill: $color-grey;
+    }
+  }
+</style>

client/src/components/rooms/RoomWidget.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="room-widget" :class="roomClass">
+    <div class="room-widget__content">
+      <h2 class="room-widget__title">{{title}}</h2>
+      <div class="room-widget__group">
+        <group></group>
+        <span>
+        {{group}}
+        </span>
+      </div>
+      <div class="room-widget__entries">
+        <cards></cards>
+        <span>{{entryCount}} {{entryCount === 1 ? 'Beitrag' : 'Beiträge'}}</span>
+      </div>
+    </div>
+    <div class="room-widget__footer">
+      <router-link to="/" class="room-widget__more-link">
+        <ellipses></ellipses>
+      </router-link>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  import Group from '@/components/images/Group.vue';
+  import Cards from '@/components/images/Cards.vue';
+  import Ellipses from '@/components/images/Ellipses.vue';
+
+  export default {
+    props: ['title', 'type', 'entries', 'group'],
+
+    components: {
+      Group,
+      Cards,
+      Ellipses
+    },
+    computed: {
+      entryCount() {
+        return this.entries.length
+      },
+      roomClass() {
+        return `room-widget--${this.type}`
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @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;
+    fill: $color-darkgrey-1;
+  }
+
+  .room-widget {
+    display: grid;
+    grid-template-rows: 210px 1fr;
+    overflow: hidden;
+    @include widget-shadow;
+
+    &--red {
+      background-color: $red;
+    }
+    &--green {
+      background-color: $green;
+    }
+    &--brown {
+      background-color: $brown;
+    }
+
+    svg {
+      width: 30px;
+      fill: $color-darkgrey-1;
+      margin-right: 15px;
+    }
+
+    &__content {
+      padding: 22px;
+      color: $color-darkgrey-1;
+    }
+
+    &__group {
+      display: flex;
+      align-items: center;
+      opacity: 0.6;
+
+      & > span {
+        @include text-style;
+      }
+    }
+
+    &__entries {
+      display: flex;
+      align-items: center;
+      opacity: 0.6;
+
+      & > span {
+        @include text-style;
+      }
+    }
+
+    &__title {
+      font-size: 1.375rem;
+    }
+
+    &__footer {
+      background-color: rgba(51, 51, 51, 0.18);
+      display: flex;
+      flex-direction: row-reverse;
+      align-items: center;
+    }
+  }
+</style>

client/src/pages/rooms.vue

@@ -1,17 +1,44 @@
 <template>
   <div class="rooms-page">
-    <room-widget></room-widget>
+    <room-widget v-for="room in rooms" v-bind="room" :key="room.title"></room-widget>
-    <room-widget></room-widget>
+    <add-room></add-room>
-    <room-widget></room-widget>
   </div>
 </template>
 
 <script>
-  import RoomWidget from '@/components/RoomWidget.vue';
+  import RoomWidget from '@/components/rooms/RoomWidget.vue';
+  import AddRoom from '@/components/rooms/AddRoom.vue';
 
   export default {
     components: {
-      RoomWidget
+      RoomWidget,
+      AddRoom
+    },
+
+    data() {
+      return {
+        rooms: [
+          {
+            title: 'Ein historische Festival',
+            type: 'red',
+            group: 'Klasse 3b - 2018/2019',
+            entries: [1, 1, 1, 1, 1, 1]
+          },
+          {
+            title: 'Erfahrungen Lehrbeginn',
+            type: 'green',
+            group: 'Klasse 3b - 2018/2019',
+            entries: [1]
+          },
+          {
+            title: 'Interview «Mein neues Umfeld»',
+            type: 'brown',
+            group: 'Hans Muster und 12 weitere Personen',
+            entries: [1, 1, 1, 1, 1, 1]
+          }
+
+        ]
+      }
     }
   }
 </script>
@@ -21,8 +48,9 @@
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-column-gap: 30px;
+    grid-row-gap: 30px;
     grid-auto-rows: 260px;
-    padding: 130px 45px;
+    padding: 50px 45px;
     max-width: 1440px;
     width: 100%;
     justify-self: center;

client/src/styles/_mixins.scss

@@ -0,0 +1,5 @@
+@mixin widget-shadow {
+  border-radius: 12px;
+  box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
+
+}