From 4e66a4f8e78b187234269d0727fec396b72f0a0e Mon Sep 17 00:00:00 2001
From: Jonathan Weth <git@jonathanweth.de>
Date: Fri, 25 Aug 2023 12:41:05 +0200
Subject: [PATCH] Make CalendarWithControls more dense
---
.../components/calendar/CalendarControlBar.vue | 9 ++++-----
.../components/calendar/CalendarWithControls.vue | 11 ++++++++++-
2 files changed, 14 insertions(+), 6 deletions(-)
diff --git a/aleksis/core/frontend/components/calendar/CalendarControlBar.vue b/aleksis/core/frontend/components/calendar/CalendarControlBar.vue
index c3f9c45c4..2120ee1cd 100644
--- a/aleksis/core/frontend/components/calendar/CalendarControlBar.vue
+++ b/aleksis/core/frontend/components/calendar/CalendarControlBar.vue
@@ -6,15 +6,14 @@ export default {
</script>
<template>
- <div class="d-flex justify-center">
- <v-btn icon class="mx-2" @click="$emit('prev')">
+ <div class="d-flex justify-center mx-2">
+ <v-btn icon @click="$emit('prev')">
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
- <v-btn outlined text class="mx-2" @click="$emit('today')">
- <v-icon left>mdi-calendar-today-outline</v-icon>
+ <v-btn outlined text class="mx-1" @click="$emit('today')">
{{ $t("calendar.today") }}
</v-btn>
- <v-btn icon class="mx-2" @click="$emit('next')">
+ <v-btn icon @click="$emit('next')">
<v-icon>mdi-chevron-right</v-icon>
</v-btn>
</div>
diff --git a/aleksis/core/frontend/components/calendar/CalendarWithControls.vue b/aleksis/core/frontend/components/calendar/CalendarWithControls.vue
index 304904f3d..68d631591 100644
--- a/aleksis/core/frontend/components/calendar/CalendarWithControls.vue
+++ b/aleksis/core/frontend/components/calendar/CalendarWithControls.vue
@@ -1,5 +1,12 @@
<template>
<div>
+ <div
+ class="mx-2 mb-2 text-center"
+ v-if="$refs.calendar && $vuetify.breakpoint.smAndDown"
+ >
+ {{ $refs.calendar.title }}
+ </div>
+
<div class="d-flex mb-3 justify-space-between">
<!-- Control bar with prev, next and today buttons -->
<calendar-control-bar
@@ -9,7 +16,9 @@
/>
<!-- Calendar title with current calendar time range -->
- <div class="mx-2" v-if="$refs.calendar">{{ $refs.calendar.title }}</div>
+ <div class="mx-2" v-if="$refs.calendar && $vuetify.breakpoint.mdAndUp">
+ {{ $refs.calendar.title }}
+ </div>
<calendar-type-select v-model="calendarType" />
</div>
--
GitLab