fine tuning round 1

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

4 files changed, 85 insertions, 48 deletions

diff --git a/src/js/components/Options/OptionItem.vue b/src/js/components/Options/OptionItem.vue
index d741039c..08451340 100644
--- a/src/js/components/Options/OptionItem.vue
+++ b/src/js/components/Options/OptionItem.vue
@@ -42,6 +42,12 @@
 					<div class="dow">
 						{{ event.from.dow }}
 					</div>
+					<div v-if="!event.dayLong" class="time">
+						{{ event.from.time }}
+						<span v-if="!event.dayLong && option.duration && event.to.sameDay">
+							- {{ event.to.time }}
+						</span>
+					</div>
 				</div>
 				<div v-if="option.duration && !event.to.sameDay" class="devider">
 					-
@@ -56,17 +62,20 @@
 					<div class="dow">
 						{{ event.to.dow }}
 					</div>
+					<div v-if=" !event.dayLong" class="time">
+						{{ event.to.time }}
+					</div>
 				</div>
 			</div>
 
-			<div class="event-time">
-				<div v-if="!event.dayLong" class="time-from">
+			<!-- <div class="event-time">
+				<div v-if="!event.dayLong" class="time">
 					{{ event.from.time }}
 				</div>
-				<div v-if="option.duration && !event.dayLong" class="time-to">
+				<div v-if="option.duration && !event.dayLong" class="time">
 					{{ event.to.time }}
 				</div>
-			</div>
+			</div> -->
 		</div>
 
 		<slot name="actions" />
@@ -200,6 +209,8 @@ export default {
 </script>
 
 <style lang="scss">
+
+
 	.option-item {
 		display: flex;
 		align-items: center;
@@ -212,36 +223,68 @@ export default {
 		}
 	}
 
-	[class*='event'] {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-
+	// [class*='event'] {
+	// 	display: flex;
+	// 	flex-direction: column;
+	// 	align-items: center;
+	// }
+	//
 	.devider {
 		align-self: center;
 		color: var(--color-text-lighter);
 	}
 
+	.option-item__option--datebox {
+		display: flex;
+		// flex-direction: column;
+		// padding: 0 2px;
+		align-items: stretch;
+		justify-content: flex-start;
+		text-align: center;
+		hyphens: auto;
+	}
+
 	.event-date {
-		flex-direction: row !important;
-		align-items: stretch !important;
+		display: flex;
+		flex: 1;
+		flex-direction: row;
+		align-items: stretch;
 		justify-content: center;
-		.event-from {
-			padding-bottom: 8px;
-			flex: 0;
-		}
-		.event-to {
-			flex: 0;
-			font-size: 0.8em;
-			justify-content: flex-end;
+		background-color: var(--color-primary-light);
+
+		.event-from, .event-to {
+			display: flex;
+			flex-direction: column;
+			align-items: stretch;
+			flex: 1;
+			// flex-direction: column;
+			// align-items: center;
+			// padding-bottom: 8px;
+			// flex: 0;
+
+			.month, .dow, .time {
+				white-space: pre;
+				font-size: 1.1em;
+				padding: 0 4px;
+				color: var(--color-text-lighter);
+			}
 			.day {
-				margin: 0;
+				font-size: 1.4em;
+				margin: 5px 0 5px 0;
+				padding: 0 4px;
+			}
+
+			.time {
+				font-size: 0.8em;
+				padding: 0 4px;
 			}
 		}
 	}
 
 	.event-time {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
 		margin-top: 8px;
 		.time-to {
 			font-size: 0.8em;
@@ -252,7 +295,7 @@ export default {
 		flex: 1;
 		opacity: 1;
 		white-space: normal;
-		padding-right: 4px;
+		// padding-right: 4px;
 	}
 
 	.option-item__option--text {
@@ -286,24 +329,4 @@ export default {
 		margin-right: 8px;
 	}
 
-	.option-item__option--datebox {
-		display: flex;
-		flex-direction: column;
-		padding: 0 2px;
-		align-items: stretch;
-		justify-content: flex-start;
-		text-align: center;
-		hyphens: auto;
-
-		.month, .dow, .time {
-			white-space: pre;
-			font-size: 1.1em;
-			color: var(--color-text-lighter);
-		}
-		.day {
-			font-size: 1.4em;
-			margin: 5px 0 5px 0;
-		}
-	}
-
 </style>
diff --git a/src/js/components/Options/OptionProposals.vue b/src/js/components/Options/OptionProposals.vue
index fc0d1fb7..6a1296aa 100644
--- a/src/js/components/Options/OptionProposals.vue
+++ b/src/js/components/Options/OptionProposals.vue
@@ -23,9 +23,9 @@
 <template>
 	<div class="option-proposals">
 		<div class="option-proposals__header">
-			<div v-if="proposalsOpen">
+			<!-- <div v-if="proposalsOpen">
 				{{ t('polls', 'You are asked to propose more options for this poll.') }}
-			</div>
+			</div> -->
 			<!-- <div v-if="proposalsExpirySet && !proposalsExpired">
 				{{ t('polls', 'Adding proposals ends {timeRelative}.', {timeRelative: proposalsExpireRelative}) }}
 			</div> -->
@@ -34,8 +34,8 @@
 			</div>
 		</div>
 		<div v-if="proposalsOpen" class="option-proposals__add-proposal">
-			<OptionsDateAdd v-if="pollType === 'datePoll'" />
-			<OptionsTextAdd v-if="pollType === 'textPoll'" />
+			<OptionsDateAdd v-if="pollType === 'datePoll'" caption="Propose a new date" />
+			<OptionsTextAdd v-if="pollType === 'textPoll'" placeholder="Propose a new vote option" />
 		</div>
 	</div>
 </template>
diff --git a/src/js/components/Options/OptionsDateAdd.vue b/src/js/components/Options/OptionsDateAdd.vue
index c13d2238..0abd44b8 100644
--- a/src/js/components/Options/OptionsDateAdd.vue
+++ b/src/js/components/Options/OptionsDateAdd.vue
@@ -28,7 +28,7 @@
 		@change="changedDate"
 		@pick="pickedDate">
 		<template #input>
-			<ButtonDiv :title="t('polls', 'Add option')" />
+			<ButtonDiv :title="caption" />
 		</template>
 
 		<template #header>
@@ -84,6 +84,13 @@ export default {
 		Spacer,
 	},
 
+	props: {
+		caption: {
+			type: String,
+			default: t('polls', 'Add date'),
+		},
+	},
+
 	data() {
 		return {
 			pickerSelection: null,
diff --git a/src/js/components/Options/OptionsTextAdd.vue b/src/js/components/Options/OptionsTextAdd.vue
index 2476cf73..5125131e 100644
--- a/src/js/components/Options/OptionsTextAdd.vue
+++ b/src/js/components/Options/OptionsTextAdd.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<InputDiv v-model="newPollText"
-		:placeholder="t('polls', 'Add option')"
+		:placeholder="placeholder"
 		@submit="addOption()" />
 </template>
 
@@ -37,6 +37,13 @@ export default {
 		InputDiv,
 	},
 
+	props: {
+		placeholder: {
+			type: String,
+			default: t('polls', 'Add option'),
+		},
+	},
+
 	data() {
 		return {
 			newPollText: '',