2 files changed, 28 insertions, 11 deletions

diff --git a/src/js/components/VoteTable/VoteTable.vue b/src/js/components/VoteTable/VoteTable.vue
index 73e0a565..d19cbc65 100644
--- a/src/js/components/VoteTable/VoteTable.vue
+++ b/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,
diff --git a/src/js/components/VoteTable/VoteTableHeaderItem.vue b/src/js/components/VoteTable/VoteTableHeaderItem.vue
index b6400f58..b914e1f0 100644
--- a/src/js/components/VoteTable/VoteTableHeaderItem.vue
+++ b/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