72 lines
1.2 KiB
Vue
72 lines
1.2 KiB
Vue
<template>
|
|
<div class="snapshot">
|
|
<header class="snapshot__header">
|
|
<snapshot-header
|
|
:snapshot="snapshot"
|
|
/>
|
|
</header>
|
|
|
|
<module
|
|
:module="snapshot"
|
|
class="snapshot__module"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SNAPSHOT_DETAIL_QUERY from '@/graphql/gql/queries/snapshots/detail.gql';
|
|
|
|
import Module from '@/components/modules/Module';
|
|
import Checkbox from '@/components/ui/Checkbox';
|
|
import SnapshotHeader from '@/components/modules/SnapshotHeader';
|
|
|
|
export default {
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
|
|
components: {
|
|
SnapshotHeader,
|
|
Checkbox,
|
|
Module,
|
|
},
|
|
|
|
apollo: {
|
|
snapshot: {
|
|
query: SNAPSHOT_DETAIL_QUERY,
|
|
variables() {
|
|
return {
|
|
id: this.id,
|
|
};
|
|
},
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '~styles/helpers';
|
|
|
|
.snapshot {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 800px 1fr;
|
|
grid-template-rows: auto auto;
|
|
|
|
&__header {
|
|
background-color: $color-brand-light;
|
|
grid-column: 1 / span 3;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
&__module {
|
|
grid-column: 2;
|
|
}
|
|
}
|
|
</style>
|