132 lines
2.4 KiB
Vue
132 lines
2.4 KiB
Vue
<template>
|
|
<div class="room-widget" :class="roomClass">
|
|
<div class="room-widget__content">
|
|
<h2 class="room-widget__title">{{title}}</h2>
|
|
<div class="room-widget__group">
|
|
<group></group>
|
|
<span>
|
|
{{group}}
|
|
</span>
|
|
</div>
|
|
<div class="room-widget__entries">
|
|
<cards></cards>
|
|
<span>{{entryCount}} {{entryCount === 1 ? 'Beitrag' : 'Beiträge'}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="room-widget__footer">
|
|
<router-link to="/room" class="room-widget__more-link">
|
|
<ellipses></ellipses>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import Group from '@/components/images/Group.vue';
|
|
import Cards from '@/components/images/Cards.vue';
|
|
import Ellipses from '@/components/images/Ellipses.vue';
|
|
|
|
export default {
|
|
props: ['title', 'type', 'entries', 'group'],
|
|
|
|
components: {
|
|
Group,
|
|
Cards,
|
|
Ellipses
|
|
},
|
|
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";
|
|
|
|
@mixin text-style {
|
|
font-family: $sans-serif-font-family;
|
|
font-size: 1rem;
|
|
fill: $color-darkgrey-1;
|
|
}
|
|
|
|
.room-widget {
|
|
display: -ms-grid;
|
|
@supports (display: grid) {
|
|
display: grid;
|
|
}
|
|
grid-template-rows: 210px 1fr;
|
|
overflow: hidden;
|
|
@include widget-shadow;
|
|
|
|
/*
|
|
* 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;
|
|
}
|
|
|
|
&__group {
|
|
display: flex;
|
|
align-items: center;
|
|
opacity: 0.6;
|
|
|
|
& > span {
|
|
@include text-style;
|
|
}
|
|
}
|
|
|
|
&__entries {
|
|
display: flex;
|
|
align-items: center;
|
|
opacity: 0.6;
|
|
|
|
& > span {
|
|
@include text-style;
|
|
}
|
|
}
|
|
|
|
&__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>
|