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

Update styling on room widget popover

This commit is contained in:
Ramon Wenger 2018-09-21 13:54:35 +02:00
parent b60f3f1c06
commit 7747547c8d
2 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
client/src/components/rooms/RoomWidget.vue
View File

@ -1,17 +1,19 @@
<template> <template>
<router-link :to="{name: 'room', params: {slug: slug}}" tag="div" class="room-widget" :class="roomClass"> <div class="room-widget" :class="roomClass">
<div class="room-widget__content"> <router-link :to="{name: 'room', params: {slug: slug}}" tag="div" class="room-widget__content">
<h2 class="room-widget__title">{{title}}</h2> <h2 class="room-widget__title">{{title}}</h2>
<room-group-widget v-bind="userGroup"></room-group-widget> <room-group-widget v-bind="userGroup"></room-group-widget>
<room-entry-count-widget :entryCount="entryCount"></room-entry-count-widget> <room-entry-count-widget :entryCount="entryCount"></room-entry-count-widget>
</div> </router-link>
<div class="room-widget__footer"> <div class="room-widget__footer">
<div class="room-widget__more-link"> <div>
<ellipses></ellipses> <a @click="showMenu = !showMenu" class="room-widget__more-link">
<room-popover :id="id"></room-popover> <ellipses></ellipses>
</a>
<room-popover :id="id" v-if="showMenu"></room-popover>
</div> </div>
</div> </div>
</router-link> </div>
</template> </template>
<script> <script>
@ -21,7 +23,7 @@
import RoomPopover from '@/components/rooms/RoomPopover'; import RoomPopover from '@/components/rooms/RoomPopover';
export default { export default {
props: ['slug', 'title', 'entryCount', 'appearance', 'userGroup'], props: ['slug', 'title', 'entryCount', 'appearance', 'userGroup', 'id'],
components: { components: {
RoomEntryCountWidget, RoomEntryCountWidget,
@ -30,6 +32,12 @@
RoomPopover RoomPopover
}, },
data() {
return {
showMenu: false
}
},
computed: { computed: {
roomClass() { roomClass() {
return `room-widget--${this.appearance}` return `room-widget--${this.appearance}`
@ -50,8 +58,7 @@
grid-template-rows: 210px 1fr; grid-template-rows: 210px 1fr;
/*overflow: hidden;*/ /*overflow: hidden;*/
@include widget-shadow; @include widget-shadow;
border: 0;
cursor: pointer;
/* /*
* For IE10+ * For IE10+
@ -70,18 +77,25 @@
&__content { &__content {
padding: 22px; padding: 22px;
color: $color-darkgrey-1; color: $color-darkgrey-1;
cursor: pointer;
} }
&__title { &__title {
font-size: 1.375rem; font-size: 1.375rem;
} }
&__more-link {
cursor: pointer;
}
&__footer { &__footer {
background-color: rgba(51, 51, 51, 0.18); background-color: rgba(51, 51, 51, 0.18);
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
align-items: center; align-items: center;
position: relative; position: relative;
border-bottom-left-radius: $default-border-radius;
border-bottom-right-radius: $default-border-radius;
/* /*
* For IE10+ * For IE10+

2
client/src/styles/_mixins.scss
View File

@ -3,7 +3,7 @@
@mixin widget-shadow { @mixin widget-shadow {
border-radius: $default-border-radius; border-radius: $default-border-radius;
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
border: 1px solid $color-lightgrey-2;
} }
@mixin room-widget-text-style { @mixin room-widget-text-style {