feat: move date filter to popup and improve styling

src/components/date/datepickerWithRange.vue

@@ -1,5 +1,11 @@
 <template>
-	<div class="datepicker-with-range">
+	<a @click="showPopup = !showPopup">
+		{{ $t('task.show.select') }}
+	</a>
+
+	<div class="datepicker-with-range-container">
+		<transition name="fade">
+			<div class="datepicker-with-range" v-if="showPopup">
 				<div class="selections">
 					<button @click="setDateRange(datesToday)" :class="{'is-active': dateRange === datesToday}">
 						{{ $t('task.show.today') }}
@@ -19,7 +25,8 @@
 					<button @click="setDateRange(datesNextMonth)" :class="{'is-active': dateRange === datesNextMonth}">
 						{{ $t('task.show.nextMonth') }}
 					</button>
-			<button @click="setDateRange(datesNext30Days)" :class="{'is-active': dateRange === datesNext30Days}">
+					<button @click="setDateRange(datesNext30Days)"
+							:class="{'is-active': dateRange === datesNext30Days}">
 						{{ $t('task.show.next30Days') }}
 					</button>
 					<button @click="setDateRange('')" :class="{'is-active': customRangeActive}">
@@ -33,6 +40,8 @@
 					/>
 				</div>
 			</div>
+		</transition>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -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">
-			<fancycheckbox @change="setShowNulls">
+		<p v-if="!showAll" class="show-tasks-options">
+			<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>
-			<LlamaCool class="llama-cool"/>
+			<h3 class="has-text-centered mt-6">{{ $t('task.show.noTasks') }}</h3>
+			<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 {
-	text-align: left;
+.show-tasks-options {
+	display: flex;
+	flex-direction: column;
 	
-	&.nothing {
-		text-align: center;
-		margin-top: 3rem;
+	> :deep(a) {
+		margin-right: .5rem;
 	}
-
-	:deep(.input) {
-		width: 190px;
-		vertical-align: middle;
-		margin: .5rem 0;
-	}
-}
-
-.tasks {
-	padding: .5rem;
-}
-
-.llama-cool {
-	margin-top: 2rem;
 }
 </style>