Add "dynamic" room data

client/src/App.vue

@@ -53,10 +53,10 @@
     margin: 0 auto;
     width: 100%;
     display: grid;
-    grid-template-rows: auto 1fr 50px;
+    grid-template-rows: auto 1fr;
     grid-row-gap: 32px;
     min-height: 100vh;
-    grid-template-areas: "h" "c" "f";
+    grid-template-areas: "h" "c";
 
     &--red { // todo: define a better name when usage is clear
       background-color: $red;

client/src/components/RoomEntry.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="room-entry">
-    <div class="room-entry__header">
+    <div class="room-entry__header" v-if="image">
-      <img class="room-entry__image" src="https://picsum.photos/400/300" alt="">
+      <img class="room-entry__image" :src="image" :alt="title">
     </div>
     <div class="room-entry__content">
-      <h2 class="room-entry__title">Ein neues Festival auf dem Gurten – und ich bin dabei!</h2>
+      <h2 class="room-entry__title">{{title}}</h2>
       <p class="room-entry__teaser">
-        Endlich war es soweit. Zum ersten Mal fand am 2. und 3. Juli 1977 das 1. Internationale …
+        {{teaser}}
       </p>
       <user-widget class="room-entry__author"></user-widget>
     </div>
@@ -33,6 +33,10 @@
     border-radius: 12px;
     overflow: hidden;
     background-color: $color-white;
+    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
+          page-break-inside: avoid; /* Firefox */
+               break-inside: avoid; /* IE 10+ */
+    margin-bottom: 25px;
 
     &__image {
       max-width: 100%;

client/src/pages/room.vue

@@ -8,10 +8,7 @@
       </p>
     </div>
     <div class="room__content">
-      <room-entry></room-entry>
+      <room-entry v-for="entry in entries" v-bind="entry" :key="entry.id"></room-entry>
-      <room-entry></room-entry>
-      <room-entry></room-entry>
-      <room-entry></room-entry>
     </div>
   </div>
 </template>
@@ -36,7 +33,50 @@
 
     data() {
       return {
-        entries: []
+        entries: [
+          {
+            id: 1,
+            title: 'Ein neues Festival auf dem Gurten – und ich bin dabei!',
+            teaser: 'Endlich war es soweit. Zum ersten Mal fand am 2. und 3. Juli 1977 das 1. Internationale …',
+            image: 'https://picsum.photos/600/300',
+            author: {}
+          },
+          {
+            id: 2,
+            title: 'Mein Tagesblog',
+            teaser: 'https://blogger.com/cruel-festivals-around-the-world/',
+            image: '',
+            author: {}
+          },
+          {
+            id: 3,
+            title: 'Woodstock',
+            teaser: 'In Woodstock hat sich dem Mythos nach vor genau vierzig Jahren das Lebensgefühl …',
+            image: '',
+            author: {}
+          },
+          {
+            id: 4,
+            title: 'Ein neues Festival auf dem Gurten – und ich bin dabei!',
+            teaser: 'Endlich war es soweit. Zum ersten Mal fand am 2. und 3. Juli 1977 das 1. Internationale …',
+            image: '',
+            author: {}
+          },
+          {
+            id: 5,
+            title: 'Das Festival',
+            teaser: 'www.meinblog.ch',
+            image: 'https://picsum.photos/600/300/?random',
+            author: {}
+          },
+          {
+            id: 6,
+            title: 'Danke, Gurten! Meine Highlights 2017',
+            teaser: 'Ich war am Gurten-Festival. Das war ein bisschen verrückt. Aber auch sehr schön. Und weil\'s so schön war, lasse ich die drei Tage nochmal Revue passieren. Et voilà ...',
+            image: 'https://picsum.photos/600/300/?random',
+            author: {}
+          }
+        ]
       }
     }
   }