Improve new result view

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
Co-authored-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

src/components/Results/Answer.vue

@@ -21,14 +21,12 @@
   -->
 
 <template>
-	<tr class="answer">
-		<td class="question-text">
+	<div class="answer">
+		<h4 class="question-text">
 			{{ question.text }}
-		</td>
-		<td id="text">
-			{{ answer.text }}
-		</td>
-	</tr>
+		</h4>
+		<p>{{ answer.text }}</p>
+	</div>
 </template>
 
 <script>
@@ -50,12 +48,11 @@ export default {
 
 <style lang="scss" scoped>
 .answer {
-	white-space: initial;
+	margin-bottom: 4px;
+	width: 100%;
 
 	.question-text {
-		min-width: 20%;
-		max-width: 40%;
-		padding-right: 15px;
+		font-weight: bold;
 	}
 }
 

src/components/Results/Submission.vue

@@ -21,27 +21,26 @@
   -->
 
 <template>
-	<div class="table submission section">
+	<div class="section submission">
 		<div class="submission-head">
-			<h3 class="submission-title">
-				Response by {{ userDisplayName }}
+			<h3>
+				{{ t('forms', 'Response by {userDisplayName}', { userDisplayName }) }}
 			</h3>
 			<Actions class="submission-menu" :force-menu="true">
 				<ActionButton icon="icon-delete" @click="onDelete">
-					{{ t('forms', 'Delete submission') }}
+					{{ t('forms', 'Delete this response') }}
 				</ActionButton>
 			</Actions>
 		</div>
 		<p class="submission-date">
 			{{ submissionDateTime }}
 		</p>
-		<table class="answer">
-			<Answer
-				v-for="answer in submission.answers"
-				:key="answer.id"
-				:answer="answer"
-				:question="questionToAnswer(answer.questionId)" />
-		</table>
+
+		<Answer
+			v-for="answer in squashedAnswers"
+			:key="answer.questionId"
+			:answer="answer"
+			:question="questionToAnswer(answer.questionId)" />
 	</div>
 </template>
 
@@ -79,6 +78,20 @@ export default {
 		submissionDateTime() {
 			return moment(this.submission.timestamp, 'X').format('LLLL')
 		},
+		squashedAnswers() {
+			const squashedArray = []
+
+			this.submission.answers.forEach(answer => {
+				const index = squashedArray.findIndex(ansSq => ansSq.questionId === answer.questionId)
+				if (index > -1) {
+					squashedArray[index].text = squashedArray[index].text.concat('; ' + answer.text)
+				} else {
+					squashedArray.push(answer)
+				}
+			})
+
+			return squashedArray
+		},
 	},
 
 	methods: {
@@ -94,21 +107,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.section {
+.submission {
 	padding-left: 16px;
 	padding-right: 16px;
 
-	h3 {
-		font-weight: bold;
+	&-head {
+		display: flex;
+		align-items: flex-end;
+
+		h3 {
+			font-weight: bold;
+		}
+
+		&-menu {
+			display: inline-block;
+		}
 	}
 
-	.submission-date {
+	&-date {
 		color: var(--color-text-lighter);
 		margin-bottom: 12px;
 	}
-
-	.answer {
-		width: 100%;
-	}
 }
 </style>

src/components/TopBar.vue

@@ -51,7 +51,10 @@ $top-bar-height: 60px;
 
 	button {
 		cursor: pointer;
-		&:not(:first-child) {
+		min-height: 44px;
+		margin: 8px;
+
+		&.button-small {
 			width: 44px;
 			height: 44px;
 			border: none;

src/views/Create.vue

@@ -38,6 +38,7 @@
 			</button>
 			<button v-tooltip="t('forms', 'Toggle settings')"
 				:aria-label="t('forms', 'Toggle settings')"
+				class="button-small"
 				@click="toggleSidebar">
 				<span class="icon-menu-sidebar" role="img" />
 			</button>

src/views/Results.vue

@@ -39,14 +39,19 @@
 
 		<header v-if="!noSubmissions">
 			<h2>{{ t('forms', 'Responses for {title}', { title: form.title }) }}</h2>
-			<Actions class="submission-menu" :force-menu="true">
-				<ActionButton icon="icon-download" @click="download">
+			<div>
+				<button id="exportButton" @click="download">
+					<span class="icon-download" role="img" />
 					{{ t('forms', 'Export to CSV') }}
-				</ActionButton>
-				<ActionButton icon="icon-delete" @click="deleteAllSubmissions">
-					{{ t('forms', 'Delete all Submissions') }}
-				</ActionButton>
-			</Actions>
+				</button>
+				<Actions class="results-menu"
+					:aria-label="t('forms', 'Options')"
+					:force-menu="true">
+					<ActionButton icon="icon-delete" @click="deleteAllSubmissions">
+						{{ t('forms', 'Delete all responses') }}
+					</ActionButton>
+				</Actions>
+			</div>
 		</header>
 
 		<!-- No submissions -->
@@ -217,3 +222,21 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+h2 {
+	font-size: 2em;
+	font-weight: bold;
+	margin-top: 32px;
+	padding-left: 14px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+#exportButton {
+	width: max-content;
+	padding: 13px 16px;
+	margin-left: 16px;
+}
+</style>