fixing design bugs

5 files changed, 120 insertions, 133 deletions

diff --git a/src/js/components/Base/UserItem.vue b/src/js/components/Base/UserItem.vue
index cf636362..511560e9 100644
--- a/src/js/components/Base/UserItem.vue
+++ b/src/js/components/Base/UserItem.vue
@@ -176,9 +176,4 @@ export default {
 	text-overflow: ellipsis;
 }
 
-@media (max-width: 576px) {
-	.user-item__name {
-		display: none;
-	}
-}
 </style>
diff --git a/src/js/components/SideBar/SideBarTabConfiguration.vue b/src/js/components/SideBar/SideBarTabConfiguration.vue
index 7cd7d766..5dc4f1e7 100644
--- a/src/js/components/SideBar/SideBarTabConfiguration.vue
+++ b/src/js/components/SideBar/SideBarTabConfiguration.vue
@@ -322,7 +322,7 @@ export default {
 			} else {
 				this.$store.dispatch('poll/update')
 					.then((response) => {
-						showSuccess(t('polls', '"{pollTitle}" successfully saved', 1, { pollTitle: response.data.title }))
+						showSuccess(t('polls', '"{pollTitle}" successfully saved', { pollTitle: response.data.title }))
 						emit('update-polls')
 					})
 					.catch(() => {
diff --git a/src/js/components/VoteTable/VoteTable.vue b/src/js/components/VoteTable/VoteTable.vue
index 6ece1213..6f13c9c2 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'">
+	<div class="vote-table" :class="[tableMode ? 'desktop' : 'mobile', { expired: expired }]">
 		<div class="vote-table__users fixed">
 			<UserItem v-for="(participant) in participants"
 				:key="participant.userId"
@@ -39,17 +39,22 @@
 			<VoteTableHeaderItem v-for="(option) in rankedOptions"
 				:key="option.id"
 				:option="option"
+				:class="{ 'confirmed' : option.confirmed }"
 				:poll-type="poll.type"
 				:table-mode="tableMode" />
 		</transition-group>
 
-		<div v-if="poll.type === 'datePoll' && getCurrentUser() && settings.calendarPeek" class="vote-table__calendar">
+		<transition-group v-if="poll.type === 'datePoll' && getCurrentUser() && settings.calendarPeek"
+			name="list"
+			tag="div"
+			class="vote-table__calendar">
 			<CalendarPeek
 				v-for="(option) in rankedOptions"
 				:key="option.id"
+				:class="{ 'confirmed' : option.confirmed }"
 				:option="option"
 				:open="false" />
-		</div>
+		</transition-group>
 
 		<div class="vote-table__votes">
 			<transition-group v-for="(participant) in participants"
@@ -60,14 +65,20 @@
 				class="vote-table__vote-row">
 				<VoteTableVoteItem v-for="(option) in rankedOptions"
 					:key="option.id"
+					:class="{ 'confirmed' : option.confirmed }"
 					:user-id="participant.userId"
 					:option="option"
 					:is-active="acl.userId === participant.userId && acl.allowVote" />
 			</transition-group>
 		</div>
 
-		<div v-if="expired" class="vote-table__footer">
-			<div v-for="(option) in rankedOptions" :key="option.id" :class="{ 'confirmed' : option.confirmed }">
+		<transition-group v-if="expired"
+			name="list"
+			tag="div"
+			class="vote-table__footer">
+			<div v-for="(option) in rankedOptions"
+				:key="option.id" class="vote-table-footer-item"
+				:class="{ 'confirmed' : option.confirmed }">
 				<Actions v-if="acl.allowEdit"
 					class="action">
 					<ActionButton v-if="expired" :icon="option.confirmed ? 'icon-polls-confirmed' : 'icon-polls-unconfirmed'"
@@ -76,7 +87,7 @@
 					</ActionButton>
 				</Actions>
 			</div>
-		</div>
+		</transition-group>
 
 		<div class="vote-table__footer-blind fixed" />
 
@@ -196,23 +207,27 @@ export default {
 		display: flex;
 	}
 
+	.vote-table-header-item,
+	.calendar-peek,
+	.vote-table-vote-item,
+	.vote-table-footer-item {
+		order: 2;
+	}
+
 	//set default style for confirmed options
-	.vote-table__header,
-	.vote-table__calendar,
-	.vote-table__vote-row,
-	.vote-table__footer {
-		> div {
-			flex: 1;
+	&.expired .confirmed {
+		&.vote-table-header-item,
+		&.calendar-peek,
+		&.vote-table-vote-item,
+		&.vote-table-footer-item {
 			order: 1;
-			&.confirmed {
-				order: 0;
-				border-radius: 10px;
-				border: 1px solid var(--color-polls-foreground-yes) !important;
-				border-top: 1px solid var(--color-polls-foreground-yes) !important;
-				border-bottom: 1px solid var(--color-polls-foreground-yes) !important;
-				background-color: var(--color-polls-background-yes) !important;
-				padding: 8px 2px;
-			}
+			flex: 1;
+			border-radius: 10px;
+			border: 1px solid var(--color-polls-foreground-yes) !important;
+			border-top: 1px solid var(--color-polls-foreground-yes) !important;
+			border-bottom: 1px solid var(--color-polls-foreground-yes) !important;
+			background-color: var(--color-polls-background-yes) !important;
+			padding: 8px 2px;
 		}
 	}
 }
@@ -227,12 +242,6 @@ export default {
 	.vote-table__header {
 		grid-area: header;
 		flex-direction: column;
-
-		> div.confirmed {
-			border-left: none !important;
-			border-bottom-left-radius: 0;
-			border-top-left-radius: 0;
-		}
 	}
 
 	.vote-table__votes {
@@ -245,18 +254,11 @@ export default {
 	.vote-table__calendar {
 		grid-area: calendar;
 		flex-direction: column;
-
-		> div {
-			flex-direction: row;
-			flex: 1;
-			align-items: center;
-
-			&.confirmed {
-				border-bottom: none !important;
-				border-bottom-left-radius: 0;
-				border-bottom-right-radius: 0;
-			}
-		}
+	}
+	.calendar-peek {
+		flex-direction: row;
+		flex: 1;
+		align-items: center;
 	}
 
 	.vote-table__header-blind,
@@ -267,32 +269,39 @@ export default {
 		display: none;
 	}
 
-	.vote-table__header,
-	.vote-table__calendar,
-	.vote-table__vote-row {
-		> div {
-			padding-left: 12px;
-			padding-right: 12px;
-			border-bottom: 1px solid var(--color-border-dark);
-			min-height: 3em;
-			height: 3em;
-			&.confirmed {
-				margin-top: 8px;
-				margin-bottom: 8px;
-				font-weight: bold;
-			}
-		}
+	.vote-table-header-item,
+	.calendar-peek,
+	.vote-table-vote-item {
+		padding-left: 12px;
+		padding-right: 12px;
+		border-bottom: 1px solid var(--color-border-dark);
+		min-height: 3em;
+		height: 3em;
 	}
 
-	.vote-table__vote-row,
-	.vote-table__calendar {
-		> div.confirmed {
+	&.expired .confirmed {
+		margin-top: 8px;
+		margin-bottom: 8px;
+		font-weight: bold;
+
+		&.vote-table-vote-item {
 			border-right: none !important;
-			border-top-right-radius: 0;
 			border-bottom-right-radius: 0;
+			border-top-right-radius: 0;
+		}
+
+		&.calendar-peek{
+			border-left: none !important;
+			border-right: none !important;
+			border-radius: 0;
 		}
-	}
 
+		&.vote-table-header-item {
+			border-left: none !important;
+			border-bottom-left-radius: 0;
+			border-top-left-radius: 0;
+		}
+	}
 }
 
 .vote-table.desktop {
@@ -310,16 +319,10 @@ export default {
 		grid-area: options;
 		flex-direction: row;
 
-		> div {
+		.vote-table-header-item {
 			flex-direction: column;
 			flex: 1;
 			align-items: center;
-
-			&.confirmed {
-				border-bottom: none !important;
-				border-bottom-left-radius: 0;
-				border-bottom-right-radius: 0;
-			}
 		}
 	}
 
@@ -327,16 +330,10 @@ export default {
 		grid-area: calendar;
 		flex-direction: row;
 
-		> div {
+		.calendar-peek {
 			flex-direction: column;
 			flex: 1;
 			align-items: center;
-
-			&.confirmed {
-				border-bottom: none !important;
-				border-bottom-left-radius: 0;
-				border-bottom-right-radius: 0;
-			}
 		}
 	}
 
@@ -355,6 +352,16 @@ export default {
 	.vote-table__votes {
 		grid-area: vote;
 		flex-direction: column;
+
+		.vote-table__vote-row {
+			flex-direction: row;
+			order: 1;
+			flex: 1;
+
+			&.currentuser {
+				order: 0;
+			}
+		}
 	}
 
 	.vote-table__users {
@@ -372,56 +379,14 @@ export default {
 		grid-area: footer;
 		flex-direction: row;
 
-		> div {
+		.vote-table-footer-item {
 			display: flex;
+			flex: 1;
 			align-items: center;
 			justify-content: center;
-
-			&.confirmed {
-				border-top: none !important;
-				border-top-left-radius: 0;
-				border-top-right-radius: 0;
-			}
-		}
-	}
-
-	.vote-table__header,
-	.vote-table__vote-row,
-	.vote-table__calendar,
-	.vote-table__footer {
-		> div {
-			// max-width: 230px;
-
-			&.confirmed {
-				margin-left: 8px;
-				margin-right: 8px;
-				font-weight: bold;
-			}
-		}
-	}
-
-	// limit width of columns
-	.vote-table__vote-row,
-	.vote-table__calendar {
-		flex-direction: row;
-		order: 1;
-		flex: 1;
-
-		&.currentuser {
-			order: 0;
-		}
-
-		> div.confirmed {
-			border-top: none !important;
-			border-bottom: none !important;
-			border-radius: 0;
 		}
 	}
 
-	.vote-table-vote-item {
-		width: 84px;
-	}
-
 	// fixed column
 	.fixed {
 		background-color: var(--color-main-background);
@@ -437,8 +402,6 @@ export default {
 		border-bottom: 1px solid var(--color-border-dark);
 	}
 
-	// divergent styles for confirmed optins in table layout
-
 	.option-item {
 		.option-item__option--text {
 			hyphens: auto;
@@ -450,14 +413,47 @@ export default {
 		}
 	}
 
+	&.expired .confirmed {
+		margin-left: 8px;
+		margin-right: 8px;
+		font-weight: bold;
+
+		&.vote-table-header-item {
+			border-bottom: none !important;
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+
+		&.calendar-peek {
+			border-bottom: none !important;
+			border-top: none !important;
+			border-radius: 0;
+		}
+
+		&.vote-table-vote-item {
+			border-top: none !important;
+			border-bottom: none !important;
+			border-radius: 0;
+		}
+
+		&.vote-table-footer-item {
+			border-top: none !important;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+		}
+	}
+
 	// some little hacks
 	.user-item {
 		max-width: 280px;
 	}
 
-	.user-item__name {
-		width: unset;
+	@media (max-width: 576px) {
+		.vote-table.desktop .user-item__name {
+			display: none;
+		}
 	}
+
 }
 
 </style>
diff --git a/src/js/components/VoteTable/VoteTableHeaderItem.vue b/src/js/components/VoteTable/VoteTableHeaderItem.vue
index 5ce234c7..b6400f58 100644
--- a/src/js/components/VoteTable/VoteTableHeaderItem.vue
+++ b/src/js/components/VoteTable/VoteTableHeaderItem.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div class="vote-table-header-item"
-		:class=" { winner: isWinner, confirmed: isConfirmed }">
+		:class=" { winner: isWinner }">
 		<OptionItem :option="option" :display="tableMode ? 'dateBox' : 'textBox'" />
 		<Confirmation v-if="isConfirmed" :option="option" />
 		<Counter v-else :show-maybe="Boolean(poll.allowMaybe)"
diff --git a/src/js/components/VoteTable/VoteTableVoteItem.vue b/src/js/components/VoteTable/VoteTableVoteItem.vue
index 62e2af7f..ee6f2933 100644
--- a/src/js/components/VoteTable/VoteTableVoteItem.vue
+++ b/src/js/components/VoteTable/VoteTableVoteItem.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div class="vote-table-vote-item" :class="[answer, { active: isActive && isValidUser &&!expired, confirmed: isConfirmed }]">
+	<div class="vote-table-vote-item" :class="[answer, { active: isActive && isValidUser &&!expired }]">
 		<div v-if="isActive" class="icon" @click="setVote()" />
 		<div v-else class="icon" />
 	</div>
@@ -77,10 +77,6 @@ export default {
 			return (this.userId !== '' && this.userId !== null)
 		},
 
-		isConfirmed() {
-			return this.option.confirmed && this.expired
-		},
-
 	},
 
 	methods: {