Implement mobile list option

DCsunset · Feb 9, 2023 · 5b9648a · 5b9648a
1 parent f740b49
commit 5b9648a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/frontend/components/SettingsDialog.vue b/frontend/components/SettingsDialog.vue
@@ -24,6 +24,20 @@
 						</v-list-item-action>
 					</v-list-item>
 
+					<v-list-item>
+						<v-list-item-content>
+							<v-list-item-title>
+								Mobile Tasklist
+							</v-list-item-title>
+							<v-list-item-subtitle>
+								multiple tasks per line
+							</v-list-item-subtitle>
+						</v-list-item-content>
+						<v-list-item-action>
+							<v-checkbox v-model="settings.mobilelist" />
+						</v-list-item-action>
+					</v-list-item>
+
 					<v-list-item>
 						<v-list-item-content>
 							<v-list-item-title>
@@ -106,7 +120,8 @@ export default defineComponent({
 		const settings = reactive({
 			dark: store.state.settings.dark,
 			autoRefresh: store.state.settings.autoRefresh,
-			autoSync: store.state.settings.autoSync
+			autoSync: store.state.settings.autoSync,
+			mobilelist: store.state.settings.mobilelist
 		});
 
 		const reset = () => {

diff --git a/frontend/components/TaskList.vue b/frontend/components/TaskList.vue
@@ -47,6 +47,7 @@
 			v-model="selected"
 			class="elevation-1"
 			style="width: 100%"
+			:mobile-breakpoint="store.state.settings.mobilelist ? undefined : 0"
 		>
 			<template v-slot:top>
 				<v-row class="px-4">
@@ -390,6 +391,7 @@ export default defineComponent({
 		};
 
 		return {
+			store,
 			linkify,
 			refresh,
 			headers,

diff --git a/frontend/store/index.ts b/frontend/store/index.ts
@@ -12,7 +12,8 @@ export const state = () => ({
 	settings: {
 		dark: false,
 		autoRefresh: '5', // in minutes
-		autoSync: '0' // in minutes
+		autoSync: '0', // in minutes
+		mobilelist: true
 	}
 });