ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add "dynamic" room data

This commit is contained in:
Ramon Wenger 2018-08-22 13:23:44 +02:00
parent 7e3455340f
commit 600a7ec66e
3 changed files with 55 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/App.vue
View File

@ -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;

12
client/src/components/RoomEntry.vue
View File

@ -1,12 +1,12 @@
<template>
<div class="room-entry">
<div class="room-entry__header">
<img class="room-entry__image" src="https://picsum.photos/400/300" alt="">
<div class="room-entry__header" v-if="image">
<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%;

50
client/src/pages/room.vue
View File

@ -8,10 +8,7 @@
</p>
</div>
<div class="room__content">
<room-entry></room-entry>
<room-entry></room-entry>
<room-entry></room-entry>
<room-entry></room-entry>
<room-entry v-for="entry in entries" v-bind="entry" :key="entry.id"></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: {}
}
]
}
}
}