forked from ecamp/ecamp3
-
Notifications
You must be signed in to change notification settings - Fork 0
/
CampOverview.vue
99 lines (95 loc) · 2.38 KB
/
CampOverview.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!--
Show all event instances of a single period.
-->
<template>
<content-card>
<v-sheet>
<mobile-search v-if="$vuetify.breakpoint.xs" />
<v-btn
:fixed="$vuetify.breakpoint.xs"
:absolute="!$vuetify.breakpoint.xs"
light class="fab--top_nav"
fab small
style="z-index: 3"
top right
:class="{'float-right':!$vuetify.breakpoint.xs}"
color="white"
:to="{ query: { ...$route.query, list: !listFormat || undefined } }">
<v-icon v-if="listFormat">mdi-calendar-month</v-icon>
<v-icon v-else>mdi-menu</v-icon>
</v-btn>
<event-list
v-if="listFormat"
:camp="camp" :event-instances="firstPeriod.event_instances().items" />
<picasso
v-else
:camp="camp"
class="mx-2 ma-sm-0 pa-sm-2"
:event-instances="firstPeriod.event_instances().items"
:start="new Date(Date.parse(firstPeriod.start))"
:end="new Date(Date.parse(firstPeriod.end))" />
<v-btn
:fixed="$vuetify.breakpoint.xs"
:absolute="!$vuetify.breakpoint.xs"
dark
fab
style="z-index: 3"
bottom
right
class="fab--bottom_nav float-right"
color="red">
<v-icon>mdi-plus</v-icon>
</v-btn>
</v-sheet>
</content-card>
</template>
<script>
import ContentCard from '@/components/base/ContentCard'
export default {
name: 'CampOverview',
components: {
ContentCard,
MobileSearch: () => import('@/components/base/MobileSearch'),
Picasso: () => import('@/components/camp/Picasso'),
EventList: () => import('@/components/camp/EventList')
},
props: {
camp: { type: Function, required: true }
},
data () {
return {
tab: null
}
},
computed: {
listFormat () {
return this.$route.query.list
},
periods () {
return this.camp().periods()
},
firstPeriod () {
return this.periods.items[0]
}
},
mounted () {
this.camp().events()
}
}
</script>
<style lang="scss">
.fab--bottom_nav {
position: fixed;
bottom: 16px + 56px !important;
@media #{map-get($display-breakpoints, 'sm-and-up')}{
bottom: 16px + 36px !important;
}
}
.fab--top_nav {
position: fixed;
top: 16px + 105px !important;
@media #{map-get($display-breakpoints, 'sm-and-up')}{
top: 16px + 65px !important;
}
}
</style>