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

Add popover to room entry

This commit is contained in:
Ramon Wenger 2018-10-29 13:30:31 +01:00
parent cc99dd00b1
commit acf59b218b
1 changed files with 61 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
client/src/components/rooms/RoomEntry.vue
View File

@ -1,26 +1,49 @@
<template>
<router-link :to="{name: 'article', params: { slug: slug }}" tag="div" class="room-entry">
<div class="room-entry__header" v-if="image">
<img class="room-entry__image" :src="image" :alt="title">
<div class="room-entry">
<div class="room-entry__more">
<a @click="showMenu = !showMenu" class="room-entry__more-link">
<ellipses class="room-entry__ellipses"></ellipses>
</a>
<widget-popover entity="Eintrag"
@delete="deleteRoomEntry"
@hide-me="showMenu = false"
:id="id"
class="room-entry__popover"
v-if="showMenu"></widget-popover>
</div>
<div class="room-entry__content">
<h2 class="room-entry__title">{{title}}</h2>
<p class="room-entry__teaser" v-html="teaser">
<router-link :to="{name: 'article', params: { slug: slug }}" tag="div" class="room-entry__router-link">
<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">{{title}}</h2>
<p class="room-entry__teaser" v-html="teaser">
</p>
<user-widget class="room-entry__author" v-bind="author"></user-widget>
</div>
</router-link>
</div>
</p>
<user-widget class="room-entry__author" v-bind="author"></user-widget>
</div>
</router-link>
</template>
<script>
import UserWidget from '@/components/UserWidget.vue';
import Ellipses from '@/components/icons/Ellipses.vue';
import WidgetPopover from '@/components/rooms/WidgetPopover';
export default {
props: ['title', 'author', 'contents', 'slug'],
props: ['title', 'author', 'contents', 'slug', 'id'],
components: {
UserWidget
UserWidget,
Ellipses,
WidgetPopover
},
methods: {
deleteRoomEntry() {
}
},
computed: {
@ -48,8 +71,13 @@
}
return '';
}
}
},
data() {
return {
showMenu: false
}
}
}
</script>
@ -66,6 +94,7 @@
break-inside: avoid; /* IE 10+ */
margin-bottom: 25px;
cursor: pointer;
position: relative;
&__image {
max-width: 100%;
@ -85,5 +114,24 @@
margin-bottom: 10px;
}
&__ellipses {
width: 30px;
fill: $color-darkgrey-1;
}
&__more {
position: absolute;
top: 5px;
right: 10px;
display: flex;
justify-content: flex-end;
}
&__more-link {
}
&__popover {
width: 180px;
}
}
</style>