diff --git a/components/Schedule.vue b/components/Schedule.vue index 1a20bfd..71791f5 100644 --- a/components/Schedule.vue +++ b/components/Schedule.vue @@ -23,7 +23,7 @@ ) template(v-for="day in days") v-text(:config="day" :key="day.text") - template(v-if="!allEventsAreOnBothWeeks") + template(v-if="showWeekTypesHeader") v-text(:config="weekTypes(day).even" :key="`${day.text}-even`") v-text(:config="weekTypes(day).odd" :key="`${day.text}-odd`") @@ -91,11 +91,22 @@ export default { ...defaults, uuid: null }, - recomputeCanvasWidth: 1, - headerHeight: 50 + recomputeCanvasWidth: 1 } }, computed: { + headerHeight() { + const dayHeaderHeight = 40 + const weekTypesHeaderHeight = 20 + let headerHeight = dayHeaderHeight + if (this.showWeekTypesHeader) { + headerHeight += weekTypesHeaderHeight + } + return headerHeight + }, + showWeekTypesHeader() { + return !this.allEventsAreOnBothWeeks && this.bothWeeks + }, dayNames() { const names = ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi'] if (this.colmunsCount >= 6) names.push('Samedi') @@ -210,7 +221,7 @@ export default { // The width is the total width divided by the number of columns there should be let width = total / this.colmunsCount // Half the width if its not on both week types - if (event.week_type !== 'BOTH') { + if (event.week_type !== 'BOTH' && this.bothWeeks) { width /= 2 } return width @@ -226,7 +237,7 @@ export default { const baseWidth = this.resolveWidth({ week_type: 'BOTH' }) let x = baseWidth * event.day - baseWidth // If the event is in Q2, we need to offset it to the right - if (event.week_type === 'Q2') x += baseWidth / 2 + if (event.week_type === 'Q2' && this.bothWeeks) x += baseWidth / 2 // Get the difference between the start of the day and the start of this event, // Multiply by the height factor let y = @@ -267,6 +278,7 @@ export default { } }, handleEventClick(vueComponent) { + if (this.readOnly) return const eventUUID = vueComponent.target.attrs.id if (!eventUUID) return console.log(vueComponent) @@ -279,6 +291,7 @@ export default { this.$modal.open('edit-event') }, handleHover(evt) { + if (this.readOnly) return const canvas = this.$el // Check if its an event if (!evt.target.attrs.id) return diff --git a/pages/schedule/index.vue b/pages/schedule/index.vue index b4e87f0..ce52bd1 100644 --- a/pages/schedule/index.vue +++ b/pages/schedule/index.vue @@ -1,19 +1,22 @@ @@ -56,6 +62,12 @@ export default { // Cheap hack, if overflow-x is auto, overflow-y becomes either auto or scroll. // See: https://stackoverflow.com/a/39554003 padding-bottom: 500px + display flex + flex-direction column + align-items center + +.schedule .heading + margin-bottom 2em h2 margin-bottom: 1em