Merge branch 'main' into feature/date-math

src/components/home/contentAuth.vue

@@ -235,7 +235,6 @@ store.dispatch('labels/loadAllLabels')
 
   .app-content {
     padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
-    z-index: 2;
 
     @media screen and (max-width: $tablet) {
       margin-left: 0;
@@ -252,11 +251,6 @@ store.dispatch('labels/loadAllLabels')
       }
     }
 
-	&.task\.detail {
-		padding-left: 0;
-		padding-right: 0;
-	}
-
     .card {
       background: var(--white);
     }

src/components/input/datepicker.vue

@@ -183,6 +183,10 @@ export default {
 				this.updateData()
 			},
 			get() {
+				if(!this.date) {
+					return ''
+				}
+
 				return format(this.date, 'yyy-LL-dd H:mm')
 			},
 		},

src/components/tasks/partials/kanban-card.vue

@@ -104,11 +104,12 @@ export default {
 		async toggleTaskDone(task) {
 			this.loadingInternal = true
 			try {
+				const done = !task.done
 				await this.$store.dispatch('tasks/update', {
 					...task,
-					done: !task.done,
+					done,
 				})
-				if (task.done) {
+				if (done) {
 					playPop()
 				}
 			} finally {

src/helpers/playPop.ts

@@ -3,11 +3,15 @@ import popSoundFile from '@/assets/audio/pop.mp3'
 export const playSoundWhenDoneKey = 'playSoundWhenTaskDone'
 
 export function playPop() {
-	const enabled = Boolean(localStorage.getItem(playSoundWhenDoneKey))
-	if(!enabled) {
+	const enabled = localStorage.getItem(playSoundWhenDoneKey) === 'true'
+	if (!enabled) {
 		return
 	}
 
+	playPopSound()
+}
+
+export function playPopSound() {
 	const popSound = new Audio(popSoundFile)
 	popSound.play()
-}
+}

src/styles/components/list.scss

@@ -23,7 +23,7 @@ $filter-container-top-link-share-list: -47px;
     display: flex;
     justify-content: flex-end;
 
-    .button:not(:last-child) {
+    .button:not(:last-of-type) {
       margin-right: .5rem;
     }
   }

src/styles/theme/theme.scss

@@ -18,6 +18,11 @@
   box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
 }
 
+:root {
+  // Bulma sets this to "scroll" which gives us a scrollbar even if there's no content to scroll
+  --body-overflow-y: auto;
+}
+
 body {
   background: var(--site-background);
   min-height: 100vh;

src/views/list/ListKanban.vue

@@ -616,7 +616,7 @@ $crazy-height-calculation-tasks: '#{$crazy-height-calculation} - 1rem - 2.5rem -
 $filter-container-height: '1rem - #{$switch-view-height}';
 
 // FIXME:
-.app-content.list\.kanban {
+.app-content.list\.kanban, .app-content.task\.detail {
 	padding-bottom: 0 !important;
 }
 
@@ -653,17 +653,22 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			border-radius: $radius;
 		}
 	}
+	
+	.sortable-chosen .task {
+		transform: rotate(3deg);
+	}
 
 	.bucket {
 		border-radius: $radius;
 		position: relative;
 
 		margin: 0 $bucket-right-margin 0 0;
-		max-height: 100%;
+		max-height: calc(100% - 1rem); // 1rem spacing to the bottom
 		min-height: 20px;
 		width: $bucket-width;
 		display: flex;
 		flex-direction: column;
+		overflow: hidden; // Make sure the edges are always rounded		
 
 		.tasks {
 			overflow: hidden auto;
@@ -764,6 +769,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 		background-color: var(--grey-100);
 		border-bottom-left-radius: $radius;
 		border-bottom-right-radius: $radius;
+		transform: none;
 
 		.button {
 			background-color: transparent;
@@ -775,6 +781,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 	}
 }
 
+// FIXME: This does not seem to work
 .task-dragging {
 	transform: rotateZ(3deg);
 	transition: transform 0.18s ease;

src/views/list/ListWrapper.vue

@@ -139,6 +139,7 @@ async function loadList(listIdToLoad: number) {
   @media screen and (max-width: $tablet) {
     display: flex;
     justify-content: center;
+    flex-direction: column;
   }
 }
 
@@ -149,7 +150,7 @@ async function loadList(listIdToLoad: number) {
   font-size: .75rem;
   box-shadow: var(--shadow-sm);
   height: $switch-view-height;
-  margin-bottom: 1rem;
+  margin: 0 auto 1rem;
   padding: .5rem;
 
   a {

src/views/user/settings/General.vue

@@ -135,7 +135,7 @@
 import {computed, watch, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
 
-import {playSoundWhenDoneKey, playPop} from '@/helpers/playPop'
+import {playSoundWhenDoneKey, playPopSound} from '@/helpers/playPop'
 import {availableLanguages} from '@/i18n'
 import {getQuickAddMagicMode, setQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PrefixMode} from '@/modules/parseTaskText'
@@ -230,13 +230,13 @@ export default {
 	watch: {
 		playSoundWhenDone(play) {
 			if (play) {
-				playPop()
+				playPopSound()
 			}
 		},
 	},
 	methods: {
 		async updateSettings() {
-			localStorage.setItem(playSoundWhenDoneKey, this.playSoundWhenDone)
+			localStorage.setItem(playSoundWhenDoneKey, this.playSoundWhenDone ? 'true' : 'false')
 			setQuickAddMagicMode(this.quickAddMagicMode)
 
 			await this.$store.dispatch('auth/saveUserSettings', {