initial

src/js/components/VoteTable/VoteTable.vue

@@ -21,7 +21,7 @@
   -->
 
 <template lang="html">
-	<div class="vote-table" :class="[tableMode ? 'desktop' : 'mobile', { expired: expired }]">
+	<div class="vote-table" :class="[viewMode, { expired: expired }]">
 		<div class="vote-table__users fixed">
 			<UserItem v-for="(participant) in participants"
 				:key="participant.userId"
@@ -41,7 +41,7 @@
 				:option="option"
 				:class="{ 'confirmed' : option.confirmed }"
 				:poll-type="poll.type"
-				:table-mode="tableMode" />
+				:view-mode="viewMode" />
 		</transition-group>
 
 		<transition-group v-if="poll.type === 'datePoll' && getCurrentUser() && settings.calendarPeek"
@@ -133,9 +133,9 @@ export default {
 	mixins: [confirmOption],
 
 	props: {
-		tableMode: {
-			type: Boolean,
-			default: false,
+		viewMode: {
+			type: String,
+			default: 'desktop',
 		},
 		ranked: {
 			type: Boolean,

src/js/components/VoteTable/VoteTableHeaderItem.vue

@@ -23,12 +23,12 @@
 <template>
 	<div class="vote-table-header-item"
 		:class=" { winner: isWinner }">
-		<OptionItem :option="option" :display="tableMode ? 'dateBox' : 'textBox'" />
+		<OptionItem :option="option" :display="optionStyle" />
 		<Confirmation v-if="isConfirmed" :option="option" />
 		<Counter v-else :show-maybe="Boolean(poll.allowMaybe)"
 			:option="option"
-			:counter-style="tableMode ? 'iconStyle' : 'barStyle'"
-			:show-no="!tableMode" />
+			:counter-style="counterStyle"
+			:show-no="showNo" />
 	</div>
 </template>
 
@@ -52,9 +52,9 @@ export default {
 			type: Object,
 			default: undefined,
 		},
-		tableMode: {
-			type: Boolean,
-			default: false,
+		viewMode: {
+			type: String,
+			default: 'desktop',
 		},
 	},
 
@@ -69,6 +69,23 @@ export default {
 			confirmedOptions: 'poll/options/confirmed',
 		}),
 
+		optionStyle() {
+			if (this.viewMode === 'desktop') {
+				return 'dateBox'
+			} else {
+				return 'textBox'
+			}
+		},
+		counterStyle() {
+			if (this.viewMode === 'desktop') {
+				return 'iconStyle'
+			} else {
+				return 'barStyle'
+			}
+		},
+		showNo() {
+			return (this.viewMode === 'desktop')
+		},
 		isWinner() {
 			// highlight best option until poll is expired and
 			// at least one option is confirmed

src/js/store/modules/settings.js

@@ -32,6 +32,10 @@ const defaultSettings = () => {
 			imageUrl: '',
 			glassyNavigation: false,
 			glassySidebar: false,
+			defaultView: {
+				textPoll: 'mobile',
+				datePoll: 'desktop',
+			},
 		},
 	}
 }

src/js/views/Vote.vue

@@ -67,8 +67,8 @@
 			<PersonalLink v-if="share.userId" />
 		</div>
 
-		<div class="area__main">
-			<VoteTable v-show="options.length" :table-mode="tableMode" :ranked="ranked" />
+		<div class="area__main" :class="viewMode">
+			<VoteTable v-show="options.length" :view-mode="viewMode" :ranked="ranked" />
 			<div v-if="!options.length" class="emptycontent">
 				<div class="icon-toggle-filelist" />
 				<button v-if="acl.allowEdit" @click="openOptions">
@@ -127,8 +127,9 @@ export default {
 			voteSaved: false,
 			delay: 50,
 			isLoading: true,
-			tableMode: (window.innerWidth > 480),
 			ranked: false,
+			manualViewDatePoll: false,
+			manualViewTextPoll: false,
 		}
 	},
 
@@ -138,12 +139,51 @@ export default {
 			acl: state => state.poll.acl,
 			options: state => state.poll.options.list,
 			share: state => state.poll.share,
+			settings: state => state.settings,
 		}),
 
 		...mapGetters({
 			isExpired: 'poll/expired',
 		}),
 
+		viewTextPoll() {
+			if (this.manualViewTextPoll) {
+				if (this.settings.user.defaultView.textPoll === 'desktop') {
+					return 'mobile'
+				} else {
+					return 'desktop'
+				}
+			} else {
+				return this.settings.user.defaultView.textPoll
+			}
+		},
+
+		viewDatePoll() {
+			if (this.manualViewDatePoll) {
+				if (this.settings.user.defaultView.datePoll === 'desktop') {
+					return 'mobile'
+				} else {
+					return 'desktop'
+				}
+			} else {
+				if (window.innerWidth < 481) {
+					return 'mobile'
+				} else {
+					return this.settings.user.defaultView.datePoll
+				}
+			}
+		},
+
+		viewMode() {
+			if (this.poll.type === 'datePoll') {
+				return this.viewDatePoll
+			} else if (this.poll.type === 'textPoll') {
+				return this.viewTextPoll
+			} else {
+				return 'desktop'
+			}
+		},
+
 		linkifyDescription() {
 			return linkifyStr(this.poll.description)
 		},
@@ -156,7 +196,7 @@ export default {
 			return moment.unix(this.poll.expire).format('LLLL')
 		},
 		viewCaption() {
-			if (this.tableMode) {
+			if (this.viewMode === 'desktop') {
 				return t('polls', 'Switch to mobile view')
 			} else {
 				return t('polls', 'Switch to desktop view')
@@ -195,7 +235,7 @@ export default {
 		},
 
 		toggleViewIcon() {
-			if (this.tableMode) {
+			if (this.viewMode === 'desktop') {
 				return 'icon-phone'
 			} else {
 				return 'icon-desktop'
@@ -245,19 +285,26 @@ export default {
 
 		toggleView() {
 			emit('transitions-off', { delay: 500 })
-			this.tableMode = !this.tableMode
+			if (this.poll.type === 'datePoll') {
+				this.manualViewDatePoll = !this.manualViewDatePoll
+			} else {
+				this.manualViewTextPoll = !this.manualViewTextPoll
+			}
 		},
 
 		loadPoll() {
 			this.isLoading = true
+			emit('transitions-off')
 			this.$store
 				.dispatch({ type: 'poll/get', pollId: this.$route.params.id, token: this.$route.params.token })
 				.then((response) => {
 					this.isLoading = false
+					emit('transitions-off', 500)
 					window.document.title = this.windowTitle
 				})
 				.catch(() => {
 					this.isLoading = false
+					emit('transitions-off', 500)
 					this.$router.replace({ name: 'notfound' })
 				})
 		},