100 lines
2.0 KiB
Vue
100 lines
2.0 KiB
Vue
<template>
|
|
<router-link to="/room" tag="div" class="room-widget" :class="roomClass">
|
|
<div class="room-widget__content">
|
|
<h2 class="room-widget__title">{{title}}</h2>
|
|
<room-group-widget :group="group"></room-group-widget>
|
|
<room-entry-count-widget :entryCount="entryCount"></room-entry-count-widget>
|
|
</div>
|
|
<div class="room-widget__footer">
|
|
<router-link to="/room" class="room-widget__more-link">
|
|
<ellipses></ellipses>
|
|
</router-link>
|
|
</div>
|
|
</router-link>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import Ellipses from '@/components/images/Ellipses.vue';
|
|
import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
|
|
import RoomEntryCountWidget from '@/components/rooms/RoomEntryCountWidget';
|
|
|
|
export default {
|
|
props: ['title', 'type', 'entries', 'group'],
|
|
|
|
components: {
|
|
RoomEntryCountWidget,
|
|
Ellipses,
|
|
RoomGroupWidget
|
|
},
|
|
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";
|
|
|
|
.room-widget {
|
|
display: -ms-grid;
|
|
@supports (display: grid) {
|
|
display: grid;
|
|
}
|
|
grid-template-rows: 210px 1fr;
|
|
overflow: hidden;
|
|
@include widget-shadow;
|
|
|
|
cursor: pointer;
|
|
|
|
/*
|
|
* For IE10+
|
|
*/
|
|
-ms-grid-rows: 210px 1fr;
|
|
-ms-grid-columns: 1fr;
|
|
|
|
&--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;
|
|
}
|
|
|
|
&__title {
|
|
font-size: 1.375rem;
|
|
}
|
|
|
|
&__footer {
|
|
background-color: rgba(51, 51, 51, 0.18);
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
|
|
/*
|
|
* For IE10+
|
|
*/
|
|
-ms-grid-row: 2;
|
|
}
|
|
}
|
|
</style>
|