visual fixes

Signed-off-by: dartcafe <github@dartcafe.de>

4 files changed, 31 insertions, 3 deletions

diff --git a/src/js/assets/scss/theming.scss b/src/js/assets/scss/theming.scss
index 42ffe518..55d18d95 100644
--- a/src/js/assets/scss/theming.scss
+++ b/src/js/assets/scss/theming.scss
@@ -54,7 +54,8 @@
 }

 

 @mixin flatAppHeader {

-	.area__header_vote {

+	.area__header {

+		padding-left: 40px;

 		box-shadow: none;

 		backdrop-filter: none !important;

 		border: none;

@@ -67,6 +68,7 @@
 	// fixes the app header, when page is scrolled horizontally

 	[class*=" area__header"],

 	[class^="area__header"] {

+		padding-left: 40px;

 		background-color: var(--color-main-background);

 		backdrop-filter: initial;

 		box-shadow: 6px 6px 6px var(--color-box-shadow);

diff --git a/src/js/components/VoteTable/VoteColumn.vue b/src/js/components/VoteTable/VoteColumn.vue
index 82f1bd30..ab920823 100644
--- a/src/js/components/VoteTable/VoteColumn.vue
+++ b/src/js/components/VoteTable/VoteColumn.vue
@@ -21,7 +21,7 @@
   -->
 
 <template lang="html">
-	<div :class="['vote-column', { 'confirmed' : option.confirmed && closed }]">
+	<div :class="componentClass">
 		<VoteTableHeaderItem :option="option" :view-mode="viewMode" />
 
 		<Counter v-if="acl.allowSeeResults"
@@ -94,14 +94,36 @@ export default {
 			acl: (state) => state.poll.acl,
 			poll: (state) => state.poll,
 			settings: (state) => state.settings.user,
+			currentUser: (state) => state.poll.acl.userId,
 		}),
 
 		...mapGetters({
 			closed: 'poll/isClosed',
 			participants: 'poll/safeParticipants',
 			proposalsExist: 'options/proposalsExist',
+			getVote: 'votes/getVote',
 		}),
 
+		componentClass() {
+			const classList = ['vote-column']
+			const ownAnswer = this.getVote({
+				userId: this.currentUser,
+				option: this.option,
+			})
+
+			if (this.option.computed.isBookedUp && !this.closed) {
+				classList.push('locked')
+			}
+
+			if (this.option.confirmed && this.closed) {
+				classList.push('confirmed')
+			}
+
+			classList.push(ownAnswer)
+
+			return classList.join(' ')
+		},
+
 		showCalendarPeek() {
 			return this.poll.type === 'datePoll' && this.getCurrentUser() && this.settings.calendarPeek
 		},
diff --git a/src/js/components/VoteTable/VoteTable.vue b/src/js/components/VoteTable/VoteTable.vue
index 4982a5b5..4a709cde 100644
--- a/src/js/components/VoteTable/VoteTable.vue
+++ b/src/js/components/VoteTable/VoteTable.vue
@@ -246,6 +246,10 @@ export default {
 			border-top: solid 1px var(--color-border);
 			border-left: none;
 			padding: 0;
+
+			&.locked {
+				background-color: var(--color-polls-background-no);
+			}
 		}
 
 		.participant {
diff --git a/src/js/views/Vote.vue b/src/js/views/Vote.vue
index d7b6af4c..f4b8af88 100644
--- a/src/js/views/Vote.vue
+++ b/src/js/views/Vote.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<AppContent :class="[{ closed: closed }, poll.type]">
-		<HeaderBar class="area__header_vote">
+		<HeaderBar class="area__header">
 			<template #title>
 				{{ poll.title }}
 			</template>