Merge branch 'main' into bulma-css-variables

# Conflicts:
#	package.json
#	src/components/misc/no-auth-wrapper.vue
#	yarn.lock

.drone.yml

@@ -202,6 +202,7 @@ steps:
       YARN_CACHE_FOLDER: .cache/yarn/
     commands:
       - yarn --frozen-lockfile --network-timeout 100000
+      - npx browserslist@latest --update-db
       - yarn run lint
       - "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
       - yarn run build

package.json

@@ -19,15 +19,15 @@
   "dependencies": {
     "@github/hotkey": "1.6.0",
     "@kyvg/vue3-notification": "2.3.4",
-    "@sentry/tracing": "6.14.3",
-    "@sentry/vue": "6.14.3",
-    "@vue/compat": "3.2.21",
+    "@sentry/tracing": "6.15.0",
+    "@sentry/vue": "6.15.0",
+    "@vue/compat": "3.2.22",
     "@vueuse/core": "^6.8.0",
     "bulma-css-variables": "^0.9.33",
     "camel-case": "4.1.2",
-    "codemirror": "5.63.3",
+    "codemirror": "5.64.0",
     "copy-to-clipboard": "3.3.1",
-    "date-fns": "2.25.0",
+    "date-fns": "2.26.0",
     "dompurify": "2.3.3",
     "easymde": "2.15.0",
     "flatpickr": "4.6.9",
@@ -36,7 +36,7 @@
     "is-touch-device": "1.0.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.debounce": "4.0.8",
-    "marked": "4.0.3",
+    "marked": "4.0.4",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
     "ufo": "0.7.9",
@@ -44,11 +44,11 @@
     "vue-advanced-cropper": "2.7.0",
     "vue-drag-resize": "2.0.3",
     "vue-flatpickr-component": "9.0.5",
-    "vue-i18n": "9.2.0-beta.18",
+    "vue-i18n": "9.2.0-beta.20",
     "vue-router": "4.0.12",
     "vuedraggable": "4.1.0",
     "vuex": "4.0.2",
-    "workbox-precaching": "6.3.0"
+    "workbox-precaching": "6.4.1"
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "2.0.0",
@@ -57,37 +57,37 @@
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/vue-fontawesome": "3.0.0-5",
     "@types/flexsearch": "0.7.2",
-    "@types/jest": "27.0.2",
+    "@types/jest": "27.0.3",
     "@typescript-eslint/eslint-plugin": "5.4.0",
     "@typescript-eslint/parser": "5.4.0",
-    "@vitejs/plugin-legacy": "1.6.2",
-    "@vitejs/plugin-vue": "1.9.4",
-    "@vue/eslint-config-typescript": "9.0.1",
-    "autoprefixer": "10.4.0",
+    "@vitejs/plugin-legacy": "1.6.3",
+    "@vitejs/plugin-vue": "1.10.0",
+    "@vue/eslint-config-typescript": "9.1.0",
     "axios": "0.24.0",
     "browserslist": "4.18.1",
     "cypress": "9.0.0",
     "cypress-file-upload": "5.0.8",
-    "esbuild": "0.13.13",
-    "eslint": "8.2.0",
-    "eslint-plugin-vue": "8.0.3",
+    "esbuild": "0.13.15",
+    "eslint": "8.3.0",
+    "eslint-plugin-vue": "8.1.1",
     "express": "4.17.1",
     "faker": "5.5.3",
     "jest": "27.3.1",
-    "netlify-cli": "6.14.25",
+    "netlify-cli": "7.0.4",
     "postcss": "8.3.11",
-    "rollup": "2.60.0",
+    "postcss-preset-env": "7.0.1",
+    "rollup": "2.60.1",
     "rollup-plugin-visualizer": "5.5.2",
     "sass": "1.43.4",
-    "slugify": "1.6.2",
+    "slugify": "1.6.3",
     "ts-jest": "27.0.7",
-    "typescript": "4.4.4",
+    "typescript": "4.5.2",
     "vite": "2.6.14",
-    "vite-plugin-pwa": "0.11.5",
+    "vite-plugin-pwa": "0.11.6",
     "vite-svg-loader": "3.1.0",
-    "vue-tsc": "0.29.5",
+    "vue-tsc": "0.29.6",
     "wait-on": "6.0.0",
-    "workbox-cli": "6.3.0"
+    "workbox-cli": "6.4.1"
   },
   "eslintConfig": {
     "root": true,

src/components/misc/no-auth-wrapper.vue

@@ -38,6 +38,7 @@ const motd = computed(() => store.state.config.motd)
 }
 
 .logo {
+	max-width: 100%;
 	color: var(--logo-text-color);
 }
 </style>

src/components/tasks/gantt-component.vue

@@ -500,7 +500,6 @@ $gantt-vertical-border-color: var(--grey-100);
 
 	.tasks {
 		max-width: unset !important;
-		margin: 0;
 		border-top: $gantt-border;
 
 		.row {

src/components/tasks/partials/comments.vue

@@ -306,24 +306,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.media.comment {
-  align-items: center;
+.media-left {
+	margin: 0 1rem;
+}
 
-  .media-left {
-    margin: 0 1rem;
-  }
-
-  .comment-info {
-    display: flex;
-    align-items: center;
-
-    * {
-      padding-right: .5rem;
-    }
-
-    img {
-      display: none;
+.comment-info {
+	display: flex;
+	align-items: center;
+	gap: .5rem;
 
+	img {
 		@media screen and (max-width: $tablet) {
 			display: block;
 			width: 20px;
@@ -331,22 +323,20 @@ export default {
 			padding-right: 0;
 			margin-right: .5rem;
 		}
-    }
+
+		@media screen and (min-width: $tablet) {
+			display: none;
+		}
+	}
 
 
-    span {
-      font-size: .75rem;
-      line-height: 1;
-    }
-  }
-
-  .editor {
-    margin-top: .5rem;
-  }
-
+	span {
+		font-size: .75rem;
+		line-height: 1;
+	}
 }
 
 .media-content {
-  width: calc(100% - 48px - 2rem);
+	width: calc(100% - 48px - 2rem);
 }
 </style>

src/components/tasks/partials/heading.vue

@@ -7,7 +7,7 @@
 			:class="{'disabled': !canWrite}"
 			@blur="save($event.target.textContent)"
 			@keydown.enter.prevent.stop="$event.target.blur()"
-			:contenteditable="canWrite ? 'true' : 'false'"
+			:contenteditable="canWrite ? true : undefined"
 			:spellcheck="false"
 		>
 			{{ task.title.trim() }}

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

@@ -1,5 +1,6 @@
 <template>
 	<div
+		class="task loader-container draggable"
 		:class="{
 			'is-loading': loadingInternal || loading,
 			'draggable': !(loadingInternal || loading),
@@ -9,7 +10,6 @@
 		@click.ctrl="() => toggleTaskDone(task)"
 		@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
 		@click.meta="() => toggleTaskDone(task)"
-		class="task loader-container draggable"
 	>
 		<span class="task-id">
 			<Done class="kanban-card__done" :is-done="task.done" variant="small" />

src/components/tasks/partials/relatedTasks.vue

@@ -319,6 +319,10 @@ export default {
 	margin: 0;
 }
 
+.tasks {
+	padding: .5rem;
+}
+
 .task {
 	display: flex;
 	flex-wrap: wrap;

src/helpers/checkAndSetApiUrl.ts

@@ -7,6 +7,10 @@ export const ERROR_NO_API_URL = 'noApiUrlProvided'
 const updateConfig = () => store.dispatch('config/update') 
 
 export const checkAndSetApiUrl = (url: string): Promise<string> => {
+	if(url.startsWith('/')) {
+		url = window.location.host + url
+	}
+	
 	// Check if the url has an http prefix
 	if (
 		!url.startsWith('http://') &&

src/models/task.js

@@ -7,6 +7,8 @@ import {REPEAT_MODE_DEFAULT} from './constants/taskRepeatModes'
 import SubscriptionModel from '@/models/subscription'
 import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 
+const SUPPORTS_TRIGGERED_NOTIFICATION = 'Notification' in window && 'showTrigger' in Notification.prototype
+
 export default class TaskModel extends AbstractModel {
 
 	defaultColor = '198CFF'
@@ -161,7 +163,7 @@ export default class TaskModel extends AbstractModel {
 	}
 
 	async cancelScheduledNotifications() {
-		if (!(Notification && 'showTrigger' in Notification.prototype)) {
+		if (!SUPPORTS_TRIGGERED_NOTIFICATION) {
 			console.debug('This browser does not support triggered notifications')
 			return
 		}
@@ -196,7 +198,7 @@ export default class TaskModel extends AbstractModel {
 			return
 		}
 
-		if (!(Notification && 'showTrigger' in Notification.prototype)) {
+		if (!SUPPORTS_TRIGGERED_NOTIFICATION) {
 			console.debug('This browser does not support triggered notifications')
 			return
 		}

src/store/modules/labels.js

@@ -37,8 +37,8 @@ export default {
 			update(label)
 		},
 		removeLabelById(state, label) {
-			delete state.labels[label.id]
 			remove(label)
+			delete state.labels[label.id]
 		},
 		setLoaded(state, loaded) {
 			state.loaded = loaded

src/store/modules/lists.js

@@ -23,8 +23,8 @@ export default {
 			})
 		},
 		removeListById(state, list) {
-			delete state[list.id]
 			remove(list)
+			delete state[list.id]
 		},
 	},
 	getters: {

src/store/modules/namespaces.js

@@ -55,8 +55,8 @@ export default {
 		removeNamespaceById(state, namespaceId) {
 			for (const n in state.namespaces) {
 				if (state.namespaces[n].id === namespaceId) {
-					state.namespaces.splice(n, 1)
 					remove(state.namespaces[n])
+					state.namespaces.splice(n, 1)
 					return
 				}
 			}

src/styles/components/tasks.scss

@@ -2,8 +2,6 @@
 // very hard to untangle
 // they have many overwrites at different positions
 .tasks {
-	margin-top: 1rem;
-	padding: 0;
 	text-align: left;
 
 	
@@ -26,19 +24,6 @@
 		margin: 1rem -0.5rem;
 	}
 
-	.task {
-		margin: 0 .5rem;
-	
-		&:first-child {
-			margin-top: .5rem;
-		}
-	
-		&:last-child {
-			margin-bottom: .5rem;
-			border-bottom: none;
-		}
-	}
-
 	.checklist-summary {
 		padding-left: .5rem;
 		font-size: .9rem;

src/sw.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 /* eslint-disable no-undef */
 
-const workboxVersion = 'v6.3.0'
+const workboxVersion = 'v6.4.1'
 importScripts( `/workbox-${workboxVersion}/workbox-sw.js`)
 workbox.setConfig({
 	modulePathPrefix: `/workbox-${workboxVersion}`,

src/views/list/views/Kanban.vue

@@ -43,7 +43,7 @@
 								@blur="saveBucketTitle(bucket.id, $event.target.textContent)"
 								@click="focusBucketTitle"
 								class="title input"
-								:contenteditable="(bucketTitleEditable && canWrite && !collapsedBuckets[bucket.id]) ? 'true' : 'false'"
+								:contenteditable="(bucketTitleEditable && canWrite && !collapsedBuckets[bucket.id]) ? true : undefined"
 								:spellcheck="false">{{ bucket.title }}</h2>
 							<span
 								:class="{'is-max': bucket.tasks.length >= bucket.limit}"
@@ -635,7 +635,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 		.tasks {
 			max-height: calc(#{$crazy-height-calculation-tasks});
 			overflow: auto;
-			margin-top: 0;
 
 			@media screen and (max-width: $tablet) {
 				max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height});

src/views/list/views/List.vue

@@ -323,6 +323,7 @@ export default {
 
 	.tasks {
 		width: 100%;
+		padding: .5rem;
 
 		.ghost {
 			border-radius: $radius;

src/views/namespaces/NewNamespace.vue

@@ -31,12 +31,12 @@
 				<color-picker v-model="namespace.hexColor" />
 			</div>
 		</div>
-		<p
-			class="is-small has-text-centered"
-			v-tooltip.bottom="$t('namespace.create.explanation')"
-		>
-			{{ $t('namespace.create.tooltip') }}
-		</p>
+
+		<div class="notification is-info mt-4">
+			<h4 class="title">{{ $t('namespace.create.tooltip') }}</h4>
+
+			{{ $t('namespace.create.explanation') }}
+		</div>
 	</create-edit>
 </template>
 

src/views/tasks/ShowTasks.vue

@@ -271,6 +271,10 @@ h3 {
 	}
 }
 
+.tasks {
+	padding: .5rem;
+}
+
 .llama-cool {
 	margin-top: 2rem;
 }