<template>
<div>
<MenuComponent view="analytics"></MenuComponent>
<FilterAnalyticsComponent view="globalanalytics"></FilterAnalyticsComponent>
<FilterComponent view="analytics-1D"></FilterComponent>
<div class="container">
<div class="wrapper">
<div class="box a">
<div class="box-description">
<h4>Feedback di rinforzo</h4>
</div>
</div>
<div class="box b">
<div class="box-description">
<h4>Feedback positivi</h4>
</div>
</div>
<div class="box c">
<div class="box-description">
<h4>Last Feedback</h4>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import FilterComponent from '@/components/global/FilterComponent.vue'
import FilterAnalyticsComponent from '../global/FilterAnalyticsComponent.vue';
import MenuComponent from '../global/MenuComponent.vue';
export default {
name: 'GlobalAnalyticsComponent',
components: {
FilterComponent,
FilterAnalyticsComponent,
MenuComponent
}
}
</script>
<style scoped>
.container {
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 20px;
}
.wrapper {
display: grid;
grid-template-columns: auto auto;
grid-gap: 40px;
}
.box {
color: #fff;
border-radius: 4px;
font-size: 13px;
text-align: left;
height: 150px;
background-color: #F9F9F9;
}
.box-description {
color: #ec8c6c;
margin: 10px;
}
.a {
grid-column: 1/2;
grid-row: 1/2;
}
.b {
grid-column: 2/3;
grid-row: 1/2;
}
.c {
grid-column: 1/3;
grid-row: 2/3;
}
@media (max-width: 720px) {
.container {
width: 96%;
margin-left: 2%;
margin-right: 2%;
margin-top: 20px;
}
.a {
grid-column: 1/3;
grid-row: 1/2;
}
.b {
grid-column: 1/3;
grid-row: 2/3;
}
.c {
grid-column: 1/3;
grid-row: 3/4;
}
}
</style>