Merge pull request #309 from nextcloud/design/further-fixes

src/components/AppNavigationForm.vue

@@ -58,7 +58,7 @@
 
 <script>
 import { generateUrl } from '@nextcloud/router'
-import { showError, showSuccess } from '@nextcloud/dialogs'
+import { showError } from '@nextcloud/dialogs'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
 import ActionRouter from '@nextcloud/vue/dist/Components/ActionRouter'
@@ -146,7 +146,6 @@ export default {
 			try {
 				await axios.delete(generateUrl('/apps/forms/api/v1/form/{id}', { id: this.form.id }))
 				this.$emit('delete', this.form.id)
-				showSuccess(t('forms', 'Deleted form “{title}”', { title: this.form.title }))
 			} catch (error) {
 				showError(t('forms', 'Error while deleting form “{title}”', { title: this.form.title }))
 				console.error(error.response)

src/components/Questions/Question.vue

@@ -36,7 +36,7 @@
 		<div class="question__header">
 			<input v-if="edit"
 				:placeholder="t('forms', 'Enter a title for this question')"
-				:aria-label="t('forms', 'The title of the question number {index}', {index})"
+				:aria-label="t('forms', 'Title of question number {index}', {index})"
 				:value="text"
 				class="question__header-title"
 				type="text"
@@ -162,7 +162,7 @@ export default {
 	align-items: stretch;
 	flex-direction: column;
 	justify-content: stretch;
-	margin-bottom: 22px;
+	margin: 80px 0;
 	padding-left: 44px;
 	user-select: none;
 	background-color: var(--color-main-background);
@@ -194,7 +194,6 @@ export default {
 	&__content {
 		flex: 1 1 100%;
 		max-width: 100%;
-		margin-bottom: 20px;
 		padding: 0;
 	}
 
@@ -204,7 +203,6 @@ export default {
 		flex: 1 1 100%;
 		justify-content: space-between;
 		width: auto;
-		margin-top: 20px;
 
 		// Using type to have a higher order than the input styling of server
 		&-title,

src/components/Questions/QuestionLong.vue

@@ -31,7 +31,7 @@
 			<!-- TODO: properly choose max length -->
 			<textarea ref="textarea"
 				:aria-label="t('forms', 'A long answer for the question “{text}”', { text })"
-				:placeholder="t('forms', 'Long answer text')"
+				:placeholder="t('forms', 'People can enter a long answer')"
 				:required="true /* TODO: implement required option */"
 				:value="values[0]"
 				class="question__text"

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;
 		}

src/components/Questions/QuestionShort.vue

@@ -31,7 +31,7 @@
 			<!-- TODO: properly choose max length -->
 			<input ref="input"
 				:aria-label="t('forms', 'A short answer for the question “{text}”', { text })"
-				:placeholder="t('forms', 'Short answer text')"
+				:placeholder="t('forms', 'People can enter a short answer')"
 				:required="true /* TODO: implement required option */"
 				:value="values[0]"
 				class="question__input"

src/views/Create.vue

@@ -49,12 +49,12 @@
 
 		<!-- Forms title & description-->
 		<header>
-			<label class="hidden-visually" for="form-title">{{ t('forms', 'Title') }}</label>
+			<label class="hidden-visually" for="form-title">{{ t('forms', 'Form title') }}</label>
 			<input
 				id="form-title"
 				v-model="form.title"
 				:minlength="0"
-				:placeholder="t('forms', 'Title')"
+				:placeholder="t('forms', 'Form title')"
 				:required="true"
 				autofocus
 				type="text"
@@ -338,11 +338,11 @@ export default {
 		},
 
 		/**
-		 * Select the text in the input if it is still set to 'New form'
+		 * Select the text in the input if it is still set to 'Form title'
 		 * @param {Event} e the click event
 		 */
 		selectIfUnchanged(e) {
-			if (e.target && e.target.value === t('forms', 'New form')) {
+			if (e.target && e.target.value === t('forms', 'Form title')) {
 				e.target.select()
 			}
 		},
@@ -384,22 +384,20 @@ export default {
 		#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-x: hidden;
+			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 		}
 		#form-desc {
 			min-height: 60px;
-			max-height: 200px;
-			margin-top: 0;
 			resize: none;
 		}
 	}
@@ -429,9 +427,9 @@ export default {
 			align-items: center;
 			align-self: flex-start;
 			width: 44px;
+			// To not overlap navigation toggle
+			margin-left: 44px;
 			height: var(--top-bar-height);
-			// make sure this doesn't take any space and appear floating
-			margin-top: -44px;
 
 			.icon-add-white {
 				opacity: 1;

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;
 		}
 	}