From ee65ef7d2d3ce3c679919e5326e8224468e04e3e Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Wed, 29 Apr 2020 03:41:02 +0200
Subject: [PATCH] Design fixes for the submission view

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/components/Questions/QuestionMultiple.vue |  2 ++
 src/views/Create.vue                          |  2 +-
 src/views/Submit.vue                          | 29 ++++++++++++++-----
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index 837115d..b6e80ad 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -284,6 +284,8 @@ export default {
 
 	.question__label {
 		flex: 1 1 100%;
+		// Overwrite guest page core styles
+		text-align: left !important;
 		&::before {
 			margin: 14px !important;
 		}
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 79ca730..c1cc72f 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -392,7 +392,7 @@ export default {
 			font-weight: bold;
 			margin: 32px 0;
 			padding-left: 14px; // align with description (compensate font size diff)
-			overflow-x: hidden;
+			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 		}
diff --git a/src/views/Submit.vue b/src/views/Submit.vue
index 7b81cef..0301e40 100644
--- a/src/views/Submit.vue
+++ b/src/views/Submit.vue
@@ -25,9 +25,9 @@
 		<AppContent>
 			<!-- Forms title & description-->
 			<header>
-				<h3 id="form-title">
+				<h2 id="form-title">
 					{{ form.title }}
-				</h3>
+				</h2>
 				<p v-if="!loading && !success" id="form-desc">
 					{{ form.description }}
 				</p>
@@ -59,7 +59,7 @@
 			</EmptyContent>
 
 			<EmptyContent v-else-if="success" icon="icon-checkmark">
-				{{ t('forms', 'Thank you for completing the survey!') }}
+				{{ t('forms', 'Thank you for completing the form!') }}
 			</EmptyContent>
 		</AppContent>
 	</Content>
@@ -153,6 +153,11 @@ export default {
 	align-items: center;
 	flex-direction: column;
 
+	// Force hide navigation toggle as there is no navigation
+	::v-deep #app-navigation-toggle {
+		display: none !important;
+	}
+
 	header,
 	form {
 		width: 100%;
@@ -163,18 +168,18 @@ export default {
 
 	// Title & description header
 	header {
-		margin: 44px;
+		margin-top: 44px;
 
 		#form-title,
 		#form-desc {
 			width: 100%;
-			margin: 16px 0; // aerate the header
 			padding: 0 16px;
 			border: none;
 		}
 		#form-title {
 			font-size: 2em;
 			font-weight: bold;
+			margin: 32px 0;
 			padding-left: 14px; // align with description (compensate font size diff)
 			overflow: hidden;
 			text-overflow: ellipsis;
@@ -182,16 +187,26 @@ export default {
 		}
 		#form-desc {
 			min-height: 60px;
-			max-height: 200px;
-			margin-top: 0;
 			resize: none;
 		}
 	}
 
 	form {
+		.question {
+			// Less padding needed as submit view does not have drag handles
+			padding-left: 16px;
+			::v-deep &__content {
+				// Left-align multiple choice and checkboxes with question text
+				// Only in submit view
+				// TODO: use variables
+				margin-left: -14px;
+			}
+		}
+
 		input[type=submit] {
 			align-self: flex-end;
 			margin: 5px;
+			margin-bottom: 160px;
 			padding: 10px 20px;
 		}
 	}