feat: move date filter to popup and improve styling

src/components/date/datepickerWithRange.vue

@@ -1,37 +1,46 @@
 <template>
-	<div class="datepicker-with-range">
+	<a @click="showPopup = !showPopup">
-		<div class="selections">
+		{{ $t('task.show.select') }}
-			<button @click="setDateRange(datesToday)" :class="{'is-active': dateRange === datesToday}">
+	</a>
-				{{ $t('task.show.today') }}
+
-			</button>
+	<div class="datepicker-with-range-container">
-			<button @click="setDateRange(datesThisWeek)" :class="{'is-active': dateRange === datesThisWeek}">
+		<transition name="fade">
-				{{ $t('task.show.thisWeek') }}
+			<div class="datepicker-with-range" v-if="showPopup">
-			</button>
+				<div class="selections">
-			<button @click="setDateRange(datesNextWeek)" :class="{'is-active': dateRange === datesNextWeek}">
+					<button @click="setDateRange(datesToday)" :class="{'is-active': dateRange === datesToday}">
-				{{ $t('task.show.nextWeek') }}
+						{{ $t('task.show.today') }}
-			</button>
+					</button>
-			<button @click="setDateRange(datesNext7Days)" :class="{'is-active': dateRange === datesNext7Days}">
+					<button @click="setDateRange(datesThisWeek)" :class="{'is-active': dateRange === datesThisWeek}">
-				{{ $t('task.show.next7Days') }}
+						{{ $t('task.show.thisWeek') }}
-			</button>
+					</button>
-			<button @click="setDateRange(datesThisMonth)" :class="{'is-active': dateRange === datesThisMonth}">
+					<button @click="setDateRange(datesNextWeek)" :class="{'is-active': dateRange === datesNextWeek}">
-				{{ $t('task.show.thisMonth') }}
+						{{ $t('task.show.nextWeek') }}
-			</button>
+					</button>
-			<button @click="setDateRange(datesNextMonth)" :class="{'is-active': dateRange === datesNextMonth}">
+					<button @click="setDateRange(datesNext7Days)" :class="{'is-active': dateRange === datesNext7Days}">
-				{{ $t('task.show.nextMonth') }}
+						{{ $t('task.show.next7Days') }}
-			</button>
+					</button>
-			<button @click="setDateRange(datesNext30Days)" :class="{'is-active': dateRange === datesNext30Days}">
+					<button @click="setDateRange(datesThisMonth)" :class="{'is-active': dateRange === datesThisMonth}">
-				{{ $t('task.show.next30Days') }}
+						{{ $t('task.show.thisMonth') }}
-			</button>
+					</button>
-			<button @click="setDateRange('')" :class="{'is-active': customRangeActive}">
+					<button @click="setDateRange(datesNextMonth)" :class="{'is-active': dateRange === datesNextMonth}">
-				{{ $t('misc.custom') }}
+						{{ $t('task.show.nextMonth') }}
-			</button>
+					</button>
-		</div>
+					<button @click="setDateRange(datesNext30Days)"
-		<div class="flatpickr-container">
+							:class="{'is-active': dateRange === datesNext30Days}">
-			<flat-pickr
+						{{ $t('task.show.next30Days') }}
-				:config="flatPickerConfig"
+					</button>
-				v-model="dateRange"
+					<button @click="setDateRange('')" :class="{'is-active': customRangeActive}">
-			/>
+						{{ $t('misc.custom') }}
-		</div>
+					</button>
+				</div>
+				<div class="flatpickr-container">
+					<flat-pickr
+						:config="flatPickerConfig"
+						v-model="dateRange"
+					/>
+				</div>
+			</div>
+		</transition>
 	</div>
 </template>
 
@@ -61,6 +70,7 @@ const flatPickerConfig = computed(() => ({
 	},
 }))
 
+const showPopup = ref<Boolean>(false)
 const dateRange = ref<string>('')
 
 watch(
@@ -189,6 +199,11 @@ const customRangeActive = computed<Boolean>(() => {
 </script>
 
 <style lang="scss" scoped>
+.datepicker-with-range-container {
+	position: relative;
+	z-index: 10;
+}
+
 .datepicker-with-range {
 	border-radius: $radius;
 	border: 1px solid var(--grey-200);
@@ -196,6 +211,7 @@ const customRangeActive = computed<Boolean>(() => {
 	box-shadow: $shadow;
 	display: flex;
 	width: 500px;
+	position: absolute;
 
 	:deep(.flatpickr-calendar) {
 		margin: 0 auto 8px;
@@ -216,6 +232,7 @@ const customRangeActive = computed<Boolean>(() => {
 	width: 30%;
 	display: flex;
 	flex-direction: column;
+	padding-top: .5rem;
 
 	button {
 		display: block;

src/i18n/lang/en.json

@@ -535,7 +535,7 @@
       "noDates": "Show tasks without dates",
       "overdue": "Show overdue tasks",
       "fromuntil": "Tasks from {from} until {until}",
-      "select": "Select a range:",
+      "select": "Select a date range",
       "today": "Today",
       "thisWeek": "This Week",
       "nextWeek": "Next Week",

src/views/tasks/ShowTasks.vue

@@ -1,26 +1,25 @@
 <template>
-	<div class="is-max-width-desktop show-tasks">
+	<div class="is-max-width-desktop has-text-left ">
 		<h3 class="mb-2">
 			{{ pageTitle }}
 		</h3>
-		<p v-if="!showAll">
+		<p v-if="!showAll" class="show-tasks-options">
-			<fancycheckbox @change="setShowNulls">
+			<datepicker-with-range @dateChanged="setDate"/>
+			<fancycheckbox @change="setShowNulls" class="mr-2">
 				{{ $t('task.show.noDates') }}
 			</fancycheckbox>
 			<fancycheckbox @change="setShowOverdue">
 				{{ $t('task.show.overdue') }}
 			</fancycheckbox>
-			{{ $t('task.show.select') }}
-			<datepicker-with-range @dateChanged="setDate"/>
 		</p>
 		<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
-			<h3 class="nothing">{{ $t('task.show.noTasks') }}</h3>
+			<h3 class="has-text-centered mt-6">{{ $t('task.show.noTasks') }}</h3>
-			<LlamaCool class="llama-cool"/>
+			<LlamaCool class="mt-5"/>
 		</template>
 		<div :class="{ 'is-loading': loading}" class="spinner"></div>
 
 		<card :padding="false" class="has-overflow" :has-content="false" v-if="tasks && tasks.length > 0">
-			<div class="tasks">
+			<div class="p-2">
 				<single-task-in-list
 					v-for="t in tasksSorted"
 					:key="t.id"
@@ -212,26 +211,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-h3 {
+.show-tasks-options {
-	text-align: left;
+	display: flex;
+	flex-direction: column;
 	
-	&.nothing {
+	> :deep(a) {
-		text-align: center;
+		margin-right: .5rem;
-		margin-top: 3rem;
 	}
-
-	:deep(.input) {
-		width: 190px;
-		vertical-align: middle;
-		margin: .5rem 0;
-	}
-}
-
-.tasks {
-	padding: .5rem;
-}
-
-.llama-cool {
-	margin-top: 2rem;
 }
 </style>