119 lines
2.4 KiB
Vue
119 lines
2.4 KiB
Vue
<template>
|
|
<div
|
|
:class="roomClass"
|
|
class="room-widget">
|
|
<router-link
|
|
:to="{name: 'room', params: {slug: slug}}"
|
|
tag="div"
|
|
class="room-widget__content">
|
|
<h2 class="room-widget__title">{{ title }}</h2>
|
|
<room-group-widget v-bind="schoolClass"/>
|
|
<entry-count-widget :entry-count="entryCount"/>
|
|
</router-link>
|
|
<widget-footer
|
|
data-cy="widget-footer"
|
|
v-if="canEditRoom">
|
|
<room-actions :id="id"/>
|
|
</widget-footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
|
|
import EntryCountWidget from '@/components/rooms/EntryCountWidget';
|
|
import WidgetFooter from '@/components/WidgetFooter';
|
|
import RoomActions from '@/components/rooms/RoomActions';
|
|
|
|
import {meQuery} from '@/graphql/queries';
|
|
|
|
export default {
|
|
props: ['slug', 'title', 'entryCount', 'appearance', 'schoolClass', 'id'],
|
|
|
|
components: {
|
|
EntryCountWidget,
|
|
RoomGroupWidget,
|
|
WidgetFooter,
|
|
RoomActions
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
showMenu: false,
|
|
me: {
|
|
permissions: []
|
|
}
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
roomClass() {
|
|
return `room-widget--${this.appearance}`;
|
|
},
|
|
canEditRoom() {
|
|
return this.me.isTeacher && !this.me.readOnly && !this.me.selectedClass.readOnly;
|
|
}
|
|
},
|
|
|
|
apollo: {
|
|
me: meQuery
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.room-widget {
|
|
display: -ms-grid;
|
|
@supports (display: grid) {
|
|
display: grid;
|
|
}
|
|
height: 260px;
|
|
grid-template-rows: 210px 1fr;
|
|
/*overflow: hidden;*/
|
|
@include widget-shadow;
|
|
border: 0;
|
|
|
|
/*
|
|
* For IE10+
|
|
*/
|
|
-ms-grid-rows: 210px 1fr;
|
|
-ms-grid-columns: 1fr;
|
|
|
|
@include skillbox-colors;
|
|
|
|
svg {
|
|
width: 30px;
|
|
fill: $color-charcoal-dark;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
&__content {
|
|
padding: 22px;
|
|
color: $color-charcoal-dark;
|
|
cursor: pointer;
|
|
|
|
/*
|
|
* For IE10+
|
|
*/
|
|
display: -ms-grid;
|
|
-ms-grid-rows: 80px 30px 30px;
|
|
& > :nth-child(1) {
|
|
-ms-grid-row: 1;
|
|
}
|
|
& > :nth-child(2) {
|
|
-ms-grid-row: 2;
|
|
}
|
|
& > :nth-child(3) {
|
|
-ms-grid-row: 3;
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
font-size: 1.375rem;
|
|
}
|
|
}
|
|
</style>
|