diff --git a/source/js/components/calendar/Renderer.vue b/source/js/components/calendar/Renderer.vue index 44197d1b85f0007359f63f2545263bd4d846b76a..5e7a59f81009281a380ebefc3cbf96446d102004 100644 --- a/source/js/components/calendar/Renderer.vue +++ b/source/js/components/calendar/Renderer.vue @@ -1,6 +1,6 @@ <template> <div class="calendar grid grid-cols-4"> - <div class="col-span-4 xl:col-span-1"> + <div v-if="showBanner" class="col-span-4 xl:col-span-1"> <aside class="banner bg-orange-300 text-white h-full"> <i class="ico--calendar banner__icon"></i> <div class="banner__body"> @@ -11,8 +11,8 @@ </div> </aside> </div> - <div class="col-span-4 xl:col-span-3"> - <div class="grid grid-cols-12 items-center calendar-table-row" v-for="event in events" v-bind:key="event.id"> + <div :class="{'col-span-4 xl:col-span-3': showBanner, 'col-span-4': !showBanner}"> + <div class="grid grid-cols-12 items-center calendar-table-row" v-for="event in events" v-bind:key="event.id" :class="{'calendar-table-row--standalone': !showBanner}"> <div class="col-span-2 text-orange-300 head-alt-md calendar-table-row__col"><span>{{ event.startTimestamp | dateDay }}</span></div> <div class="col-span-8 grid grid-cols-3 col-gap-4 calendar-table-row__col" :class="{'calendar-table-row__col--norborder': !event.mapLink}"> <div class="col-span-3 md:col-span-1"> @@ -54,7 +54,11 @@ hasMore: { type: Boolean, default: true, - } + }, + showBanner: { + type: Boolean, + default: true, + }, }, filters: { dateDay: (val) => {