From 4d562ffffa9ad932930f5fa30dd4f19fc2b8ab19 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 23 Apr 2020 14:14:25 +0200
Subject: [PATCH 01/20] Remove emptycontent for no questions as the add button
 is enough, ref #296

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/views/Create.vue | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/views/Create.vue b/src/views/Create.vue
index 8999935..809e59b 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -91,17 +91,6 @@
 				</Actions>
 			</div>
 
-			<!-- No questions -->
-			<EmptyContent v-if="hasQuestions">
-				{{ t('forms', 'This form does not have any questions') }}
-				<template #desc>
-					<button class="empty-content__button primary" @click="openQuestionMenu">
-						<span class="icon-add-white" />
-						{{ t('forms', 'Add a new one') }}
-					</button>
-				</template>
-			</EmptyContent>
-
 			<!-- Questions list -->
 			<Draggable v-model="form.questions"
 				:animation="200"

From b1e1c39cf04d777043ddd36023e7ace3f39f4fd2 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 23 Apr 2020 14:22:20 +0200
Subject: [PATCH 02/20] Remove apostrophes from loading screen

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/views/Create.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Create.vue b/src/views/Create.vue
index 809e59b..25817c1 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -29,7 +29,7 @@
 <template>
 	<AppContent v-if="isLoadingForm">
 		<EmptyContent icon="icon-loading">
-			{{ t('forms', 'Loading form “{title}”', { title: form.title }) }}
+			{{ t('forms', 'Loading form {title} …', { title: form.title }) }}
 		</EmptyContent>
 	</AppContent>
 

From 54abd7c03b868d349d995510ccf3b299fc9c7d51 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 23 Apr 2020 14:22:58 +0200
Subject: [PATCH 03/20] Remove primary class from 'Show results' button as it
 clashes with 'Add question' button

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

diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 0176139..83859cf 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -51,7 +51,7 @@ $top-bar-height: 60px;
 
 	button {
 		cursor: pointer;
-		&:not(.primary) {
+		&:not(:first-child) {
 			width: 44px;
 			height: 44px;
 			border: none;
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 25817c1..c1e8364 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -36,8 +36,8 @@
 	<AppContent v-else>
 		<!-- Show results & sidebar button -->
 		<TopBar>
-			<button class="primary" @click="showResults">
-				<span class="icon-forms-white" role="img" />
+			<button @click="showResults">
+				<span class="icon-forms" role="img" />
 				{{ t('forms', 'Show results') }}
 			</button>
 			<button v-tooltip="t('forms', 'Toggle settings')"

From 66a617921cec838d3ba9ef9a757393768257fe5c Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 23 Apr 2020 14:34:20 +0200
Subject: [PATCH 04/20] Use sidebar icon as in Talk and Viewer

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/views/Create.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Create.vue b/src/views/Create.vue
index c1e8364..68e36a6 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -43,7 +43,7 @@
 			<button v-tooltip="t('forms', 'Toggle settings')"
 				:aria-label="t('forms', 'Toggle settings')"
 				@click="toggleSidebar">
-				<span class="icon-settings" role="img" />
+				<span class="icon-menu-sidebar" role="img" />
 			</button>
 		</TopBar>
 

From 9197be2bf4922d21e709a764cbc213f34174eeba Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 23 Apr 2020 14:38:21 +0200
Subject: [PATCH 05/20] Fix emptycontent wording

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/Forms.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Forms.vue b/src/Forms.vue
index d02ac3d..f377593 100644
--- a/src/Forms.vue
+++ b/src/Forms.vue
@@ -37,10 +37,10 @@
 				{{ t('forms', 'Loading forms …') }}
 			</EmptyContent>
 			<EmptyContent v-else-if="noForms">
-				{{ t('forms', 'No forms in here') }}
+				{{ t('forms', 'No forms created yet') }}
 				<template #desc>
 					<button class="primary" @click="onNewForm">
-						{{ t('forms', 'Create a new one') }}
+						{{ t('forms', 'Create a form') }}
 					</button>
 				</template>
 			</EmptyContent>

From f3eb0ecf356092c9cb6335be4e85684a80a25f45 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 23 Apr 2020 14:38:32 +0200
Subject: [PATCH 06/20] Fix 'Copy share link' wording

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/components/AppNavigationForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AppNavigationForm.vue b/src/components/AppNavigationForm.vue
index 988993f..b6507d1 100644
--- a/src/components/AppNavigationForm.vue
+++ b/src/components/AppNavigationForm.vue
@@ -131,7 +131,7 @@ export default {
 					? t('forms', 'Form link copied')
 					: t('forms', 'Cannot copy, please copy the link manually')
 			}
-			return t('forms', 'Copy to clipboard')
+			return t('forms', 'Copy share link')
 		},
 	},
 

From e6c99f1e937c98edd5624c6f92800c7c1f61422f Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 23 Apr 2020 14:43:08 +0200
Subject: [PATCH 07/20] Move 'Add question' button to left

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/components/Questions/Question.vue | 2 --
 src/views/Create.vue                  | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
index b188195..7200d4b 100644
--- a/src/components/Questions/Question.vue
+++ b/src/components/Questions/Question.vue
@@ -155,8 +155,6 @@ export default {
 	justify-content: stretch;
 	margin-bottom: 22px;
 	padding-left: 44px;
-	// room for the new question menu
-	padding-right: 44px;
 	user-select: none;
 	background-color: var(--color-main-background);
 
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 68e36a6..4935a93 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -423,7 +423,7 @@ export default {
 			top: var(--header-height);
 			display: flex;
 			align-items: center;
-			align-self: flex-end;
+			align-self: flex-start;
 			width: 44px;
 			height: var(--top-bar-height);
 			// make sure this doesn't take any space and appear floating

From deb90aa820f63acd57d64dbab1ecc978917df91f Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 23 Apr 2020 14:50:44 +0200
Subject: [PATCH 08/20] Fix drag handle opacity

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/components/Questions/Question.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
index 7200d4b..eb19b45 100644
--- a/src/components/Questions/Question.vue
+++ b/src/components/Questions/Question.vue
@@ -167,7 +167,15 @@ export default {
 		left: 0;
 		width: 44px;
 		height: 100%;
+		opacity: .5;
+
+		&:hover,
+		&:focus {
+			opacity: 1;
+		}
+
 		cursor: grab;
+
 		&:active {
 			cursor: grabbing;
 		}

From 2b9a028f4bfeae6d8edb53222a09bde2e4f79af4 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 23 Apr 2020 14:58:02 +0200
Subject: [PATCH 09/20] Better spacing and relatedness of questions and
 answers, also fixes mobile space usage

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/components/Questions/Question.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
index eb19b45..892961d 100644
--- a/src/components/Questions/Question.vue
+++ b/src/components/Questions/Question.vue
@@ -185,7 +185,7 @@ export default {
 	&__content {
 		flex: 1 1 100%;
 		max-width: 100%;
-		margin: 20px;
+		margin-bottom: 20px;
 		padding: 0;
 	}
 
@@ -195,8 +195,7 @@ export default {
 		flex: 1 1 100%;
 		justify-content: space-between;
 		width: auto;
-		margin: 20px;
-		margin-bottom: 0;
+		margin-top: 20px;
 
 		// Using type to have a higher order than the input styling of server
 		&-title,

From ea460e9612ecba84797a9104a2ded0da01bdcb6a Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 23 Apr 2020 14:59:07 +0200
Subject: [PATCH 10/20] Reduce max width as everything was a bit wide and the
 3-dot menu too far away

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/views/Create.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Create.vue b/src/views/Create.vue
index 4935a93..68e9782 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -371,7 +371,7 @@ export default {
 	header,
 	section {
 		width: 100%;
-		max-width: 900px;
+		max-width: 750px;
 	}
 
 	// Title & description header

From d4e2d51ede6cfe610c03483ab3f7260453efec5c Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 23 Apr 2020 15:06:04 +0200
Subject: [PATCH 11/20] Fix results heading design

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/views/Results.vue | 46 +++++++++++++++++++++----------------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/views/Results.vue b/src/views/Results.vue
index 2941f87..ab4666e 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -24,31 +24,31 @@
 
 <template>
 	<AppContent>
-		<div>
+		<div class="section">
+			<h2>{{ t('forms', 'Results of {title}', { title: form.title }) }}</h2>
 			<button class="button btn primary" @click="download">
-				<span>{{ "Export to CSV" }}</span>
+				{{ t('forms', 'Export to CSV') }}
 			</button>
-		</div>
-		<h1>{{ "Statistics" }}</h1>
-		<div v-for="sum in stats" :key="sum">
-			{{ sum }}
-		</div>
-		<div id="app-content" :class="{'icon-loading': loading}">
-			<transition-group
-				name="list"
-				tag="div"
-				class="table">
-				<ResultItem
-					key="0"
-					:header="true" />
-				<li
-					is="resultItem"
-					v-for="(answer, index) in answers"
-					:key="answer.id"
-					:answer="answer"
-					@viewResults="viewFormResults(index, form.form, 'results')" />
-			</transition-group>
-			<modal-dialog />
+			<div v-for="sum in stats" :key="sum">
+				{{ sum }}
+			</div>
+			<div id="app-content" :class="{'icon-loading': loading}">
+				<transition-group
+					name="list"
+					tag="div"
+					class="table">
+					<ResultItem
+						key="0"
+						:header="true" />
+					<li
+						is="resultItem"
+						v-for="(answer, index) in answers"
+						:key="answer.id"
+						:answer="answer"
+						@viewResults="viewFormResults(index, form.form, 'results')" />
+				</transition-group>
+				<modal-dialog />
+			</div>
 		</div>
 	</AppContent>
 </template>

From 54c277e687b83ca0663efc2a4bb4ecb2caba3307 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 24 Apr 2020 14:46:49 +0200
Subject: [PATCH 12/20] Fix wording and add create button on opening view

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/Forms.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/Forms.vue b/src/Forms.vue
index f377593..13f2036 100644
--- a/src/Forms.vue
+++ b/src/Forms.vue
@@ -46,7 +46,12 @@
 			</EmptyContent>
 
 			<EmptyContent v-else>
-				{{ t('forms', 'Please select a form') }}
+				{{ t('forms', 'Select a form or create a new one') }}
+				<template #desc>
+					<button class="primary" @click="onNewForm">
+						{{ t('forms', 'Create new form') }}
+					</button>
+				</template>
 			</EmptyContent>
 		</AppContent>
 

From 865b44bb4de4df14163a35f90d988d4467596414 Mon Sep 17 00:00:00 2001
From: Jonas <47433654+jotoeri@users.noreply.github.com>
Date: Fri, 24 Apr 2020 15:37:46 +0200
Subject: [PATCH 13/20] Results TopBar

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
---
 src/views/Results.vue | 149 ++++++++++++++++++++++++------------------
 1 file changed, 87 insertions(+), 62 deletions(-)

diff --git a/src/views/Results.vue b/src/views/Results.vue
index ab4666e..503874b 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -23,59 +23,85 @@
   -->
 
 <template>
-	<AppContent>
-		<div class="section">
-			<h2>{{ t('forms', 'Results of {title}', { title: form.title }) }}</h2>
-			<button class="button btn primary" @click="download">
-				{{ t('forms', 'Export to CSV') }}
+	<AppContent v-if="loadingResults">
+		<EmptyContent icon="icon-loading">
+			{{ t('forms', 'Loading results') }}
+		</EmptyContent>
+	</AppContent>
+
+	<AppContent v-else>
+		<TopBar>
+			<button @click="showEdit">
+				<span class="icon-forms" role="img" />
+				{{ t('forms', 'Back to form') }}
 			</button>
+		</TopBar>
+
+		<header v-if="!noSubmissions">
+			<h2>{{ t('forms', 'Results of {title}', { title: form.title }) }}</h2>
 			<div v-for="sum in stats" :key="sum">
 				{{ sum }}
 			</div>
-			<div id="app-content" :class="{'icon-loading': loading}">
-				<transition-group
-					name="list"
-					tag="div"
-					class="table">
-					<ResultItem
-						key="0"
-						:header="true" />
-					<li
-						is="resultItem"
-						v-for="(answer, index) in answers"
-						:key="answer.id"
-						:answer="answer"
-						@viewResults="viewFormResults(index, form.form, 'results')" />
-				</transition-group>
-				<modal-dialog />
-			</div>
-		</div>
+		</header>
+
+		<!-- No submissions -->
+		<section v-if="noSubmissions">
+			<EmptyContent>
+				{{ t('forms', 'There are no submissions to this form.') }}
+				<!-- Button to copy Share-Link? -->
+			</EmptyContent>
+		</section>
+
+		<section v-else>
+			<button id="exportButton" class="primary" @click="download">
+				<span class="icon-download-white" role="img" />
+				{{ t('forms', 'Export to CSV') }}
+			</button>
+			<transition-group
+				name="list"
+				tag="div"
+				class="table">
+				<ResultItem
+					key="0"
+					:header="true" />
+				<ResultItem
+					v-for="answer in answers"
+					:key="answer.id"
+					:answer="answer" />
+			</transition-group>
+		</section>
 	</AppContent>
 </template>
 
 <script>
+import { generateUrl } from '@nextcloud/router'
+import { showError } from '@nextcloud/dialogs'
+import AppContent from '@nextcloud/vue/dist/Components/AppContent'
+import axios from '@nextcloud/axios'
+
+import EmptyContent from '../components/EmptyContent'
+import TopBar from '../components/TopBar'
+import ViewsMixin from '../mixins/ViewsMixin'
+
 import ResultItem from '../components/resultItem'
 import json2csvParser from 'json2csv'
-import axios from '@nextcloud/axios'
-import ViewsMixin from '../mixins/ViewsMixin'
-import { generateUrl } from '@nextcloud/router'
 
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 export default {
 	name: 'Results',
 
 	components: {
 		AppContent,
+		EmptyContent,
 		ResultItem,
+		TopBar,
 	},
 
 	mixins: [ViewsMixin],
 
 	data() {
 		return {
-			loading: true,
+			loadingResults: true,
 			answers: [],
-
 		}
 	},
 
@@ -111,41 +137,46 @@ export default {
 
 			return sums.sort()
 		},
+
+		noSubmissions() {
+			return this.answers && this.answers.length === 0
+		},
 	},
 
-	created() {
-		this.indexPage = OC.generateUrl('apps/forms/')
-		this.loadForms()
+	beforeMount() {
+		this.loadFormResults()
 	},
 
 	methods: {
-		loadForms() {
-			this.loading = true
-			axios.get(generateUrl('apps/forms/api/v1/submissions/{hash}', { hash: this.$route.params.hash }))
-				.then((response) => {
-					if (response.data == null) {
-						this.answers = null
-						OC.Notification.showTemporary('Access Denied')
-					} else {
-						this.answers = response.data
-					}
-					this.loading = false
-				}, (error) => {
-					/* eslint-disable-next-line no-console */
-					console.log(error.response)
-					this.loading = false
-				})
-		},
-		viewFormResults(index, form, name) {
+
+		showEdit() {
 			this.$router.push({
-				name: name,
+				name: 'edit',
 				params: {
-					hash: form.id,
+					hash: this.form.hash,
 				},
 			})
 		},
-		download() {
 
+		async loadFormResults() {
+			this.loadingResults = true
+			console.debug('Loading Results')
+
+			try {
+				const response = await axios.get(generateUrl('/apps/forms/api/v1/submissions/{hash}', {
+					hash: this.form.hash,
+				}))
+				this.answers = response.data
+				console.debug(this.answers)
+			} catch (error) {
+				console.error(error)
+				showError(t('forms', 'There was an error while loading results'))
+			} finally {
+				this.loadingResults = false
+			}
+		},
+
+		download() {
 			this.loading = true
 			axios.get(OC.generateUrl('apps/forms/get/form/' + this.$route.params.hash))
 				.then((response) => {
@@ -178,8 +209,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
-
+<style lang="scss" scoped>
 .table {
 	width: 100%;
 	margin-top: 45px;
@@ -189,12 +219,7 @@ export default {
 	flex-wrap: nowrap;
 }
 
-#emptycontent {
-	.icon-forms {
-		background-color: black;
-		-webkit-mask: url('./img/app.svg') no-repeat 50% 50%;
-		mask: url('./img/app.svg') no-repeat 50% 50%;
-	}
+#exportButton {
+	width: max-content;
 }
-
 </style>

From 8f2a66af025818032e441718b2053f6a3994eb92 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 24 Apr 2020 16:51:47 +0200
Subject: [PATCH 14/20] Fix horizontal scrollbar and title+description
 alignment and ellipsis

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/views/Create.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/views/Create.vue b/src/views/Create.vue
index 68e9782..96741ea 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -383,19 +383,21 @@ export default {
 		#form-title,
 		#form-desc {
 			width: 100%;
-			margin: 10px; // aerate the header
-			padding: 0; // makes alignment and desc height calc easier
+			margin: 16px 0; // aerate the header
+			padding: 0 16px;
 			border: none;
 		}
 		#form-title {
 			font-size: 2em;
+			padding-left: 14px; // align with description (compensate font size diff)
+			overflow-x: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
 		}
 		#form-desc {
-			// make sure height calculations are correct
-			box-sizing: content-box !important;
 			min-height: 60px;
 			max-height: 200px;
-			padding-left: 2px; // align with title (compensate font size diff)
+			margin-top: 0;
 			resize: none;
 		}
 	}

From d2b44a1f959dbbb819de4b7c8103d515b691943e Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 24 Apr 2020 17:00:00 +0200
Subject: [PATCH 15/20] Bold form title and questions for better structure and
 separation

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/components/Questions/Question.vue | 1 +
 src/views/Create.vue                  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
index 892961d..67caa8c 100644
--- a/src/components/Questions/Question.vue
+++ b/src/components/Questions/Question.vue
@@ -210,6 +210,7 @@ export default {
 			border-bottom: 1px dotted transparent;
 			border-radius: 0;
 			font-size: 16px;
+			font-weight: bold;
 			line-height: 22px;
 		}
 
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 96741ea..0a8e1ba 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -389,6 +389,7 @@ export default {
 		}
 		#form-title {
 			font-size: 2em;
+			font-weight: bold;
 			padding-left: 14px; // align with description (compensate font size diff)
 			overflow-x: hidden;
 			text-overflow: ellipsis;

From f000d7419afc4ea78942984b262e65d2e3a78a3b Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 24 Apr 2020 18:41:01 +0200
Subject: [PATCH 16/20] Fix drag&drop preventing text selection or clicking
 inside of text, fix #299

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/views/Create.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/Create.vue b/src/views/Create.vue
index 0a8e1ba..bd7efb8 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -95,6 +95,7 @@
 			<Draggable v-model="form.questions"
 				:animation="200"
 				tag="ul"
+				handle=".question__drag-handle"
 				@change="onQuestionOrderChange"
 				@start="isDragging = true"
 				@end="isDragging = false">

From a16f7c671d243d61a4e9353fd23ac530f87e58e2 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Sat, 25 Apr 2020 00:21:27 +0200
Subject: [PATCH 17/20] Simplify form loading message

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/views/Create.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Create.vue b/src/views/Create.vue
index bd7efb8..253cb50 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -29,7 +29,7 @@
 <template>
 	<AppContent v-if="isLoadingForm">
 		<EmptyContent icon="icon-loading">
-			{{ t('forms', 'Loading form {title} …', { title: form.title }) }}
+			{{ t('forms', 'Loading {title} …', { title: form.title }) }}
 		</EmptyContent>
 	</AppContent>
 

From ab3fff47c21329cb1e6e512adba76e568ac505fa Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Sat, 25 Apr 2020 00:26:25 +0200
Subject: [PATCH 18/20] Do not open sidebar by default, too much going on

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/views/Sidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Sidebar.vue b/src/views/Sidebar.vue
index a206f4a..8f32e5e 100644
--- a/src/views/Sidebar.vue
+++ b/src/views/Sidebar.vue
@@ -132,7 +132,7 @@ export default {
 
 	data() {
 		return {
-			opened: true,
+			opened: false,
 			lang: '',
 			locale: '',
 			longDateFormat: '',

From 502809ddad3085f9f116e93c7c6271a2efbe20f7 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Sat, 25 Apr 2020 00:31:03 +0200
Subject: [PATCH 19/20] Rename 'Results' and 'Submissions' to consistent
 'Responses' including icon

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/components/AppNavigationForm.vue |  4 ++--
 src/views/Create.vue                 |  4 ++--
 src/views/Results.vue                | 11 +++++++----
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/AppNavigationForm.vue b/src/components/AppNavigationForm.vue
index b6507d1..4396ef3 100644
--- a/src/components/AppNavigationForm.vue
+++ b/src/components/AppNavigationForm.vue
@@ -38,9 +38,9 @@
 			</ActionLink>
 			<ActionRouter :close-after-click="true"
 				:exact="true"
-				icon="icon-forms"
+				icon="icon-comment"
 				:to="{ name: 'results', params: { hash: form.hash } }">
-				{{ t('forms', 'Show results') }}
+				{{ t('forms', 'Responses') }}
 			</ActionRouter>
 			<!-- <ActionRouter :close-after-click="true"
 				:exact="true"
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 253cb50..12d6524 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -37,8 +37,8 @@
 		<!-- Show results & sidebar button -->
 		<TopBar>
 			<button @click="showResults">
-				<span class="icon-forms" role="img" />
-				{{ t('forms', 'Show results') }}
+				<span class="icon-comment" role="img" />
+				{{ t('forms', 'Responses') }}
 			</button>
 			<button v-tooltip="t('forms', 'Toggle settings')"
 				:aria-label="t('forms', 'Toggle settings')"
diff --git a/src/views/Results.vue b/src/views/Results.vue
index 503874b..528a1cf 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -25,7 +25,7 @@
 <template>
 	<AppContent v-if="loadingResults">
 		<EmptyContent icon="icon-loading">
-			{{ t('forms', 'Loading results') }}
+			{{ t('forms', 'Loading responses …') }}
 		</EmptyContent>
 	</AppContent>
 
@@ -38,7 +38,7 @@
 		</TopBar>
 
 		<header v-if="!noSubmissions">
-			<h2>{{ t('forms', 'Results of {title}', { title: form.title }) }}</h2>
+			<h2>{{ t('forms', 'Responses for {title}', { title: form.title }) }}</h2>
 			<div v-for="sum in stats" :key="sum">
 				{{ sum }}
 			</div>
@@ -46,8 +46,11 @@
 
 		<!-- No submissions -->
 		<section v-if="noSubmissions">
-			<EmptyContent>
-				{{ t('forms', 'There are no submissions to this form.') }}
+			<EmptyContent icon="icon-comment">
+				{{ t('forms', 'No responses yet') }}
+				<template #desc>
+					{{ t('forms', 'Results of submitted forms will show up here') }}
+				</template>
 				<!-- Button to copy Share-Link? -->
 			</EmptyContent>
 		</section>

From 0b5a473d0a63b067f96e42884b17845c4b1fa9ee Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Sat, 25 Apr 2020 01:20:22 +0200
Subject: [PATCH 20/20] Fix settings sidebar design

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/components/shareDiv.vue |  10 +-
 src/views/Sidebar.vue       | 202 ++++++++++++++++++------------------
 2 files changed, 109 insertions(+), 103 deletions(-)

diff --git a/src/components/shareDiv.vue b/src/components/shareDiv.vue
index 5c67d65..7578e9c 100644
--- a/src/components/shareDiv.vue
+++ b/src/components/shareDiv.vue
@@ -21,9 +21,7 @@
   -->
 
 <template>
-	<div>
-		<h2> {{ t('forms', 'Share with') }}</h2>
-
+	<div class="sharing">
 		<Multiselect id="ajax"
 			v-model="shares"
 			:options="users"
@@ -151,7 +149,11 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+	.sharing {
+		margin: 8px 8px 8px 36px;
+	}
+
 	.shared-list {
 		display: flex;
 		flex-wrap: wrap;
diff --git a/src/views/Sidebar.vue b/src/views/Sidebar.vue
index 8f32e5e..7c27e0b 100644
--- a/src/views/Sidebar.vue
+++ b/src/views/Sidebar.vue
@@ -22,92 +22,94 @@
 
 <template>
 	<AppSidebar v-show="opened" :title="form.title" @close="onClose">
-		<div class="configBox ">
-			<label class="title icon-settings">
-				{{ t('forms', 'Form configurations') }}
-			</label>
+		<h3>{{ t('forms', 'Settings') }}</h3>
+		<ul>
+			<li>
+				<input id="isAnonymous"
+					v-model="form.isAnonymous"
 
-			<input id="isAnonymous"
-				v-model="form.isAnonymous"
+					type="checkbox"
+					class="checkbox"
+					@change="onAnonChange">
+				<label for="isAnonymous">
+					{{ t('forms', 'Anonymous responses') }}
+				</label>
+			</li>
+			<li>
+				<input id="submitOnce"
+					v-model="form.submitOnce"
+					:disabled="form.access.type === 'public' || form.isAnonymous"
+					type="checkbox"
+					class="checkbox"
+					@change="onSubmOnceChange">
+				<label for="submitOnce">
+					{{ t('forms', 'Only allow one response per user') }}
+				</label>
+			</li>
+			<li>
+				<input id="expires"
+					v-model="formExpires"
+					type="checkbox"
+					class="checkbox">
+				<label for="expires">
+					{{ t('forms', 'Set expiration date') }}
+				</label>
+				<DatetimePicker v-show="formExpires"
+					id="expiresDatetimePicker"
+					v-model="form.expires"
+					v-bind="expirationDatePicker"
+					@change="onExpiresChange" />
+			</li>
+		</ul>
 
-				type="checkbox"
-				class="checkbox"
-				@change="onAnonChange">
-			<label for="isAnonymous" class="title">
-				{{ t('forms', 'Anonymous form') }}
-			</label>
-
-			<input id="submitOnce"
-				v-model="form.submitOnce"
-				:disabled="form.access.type === 'public' || form.isAnonymous"
-				type="checkbox"
-				class="checkbox"
-				@change="onSubmOnceChange">
-			<label for="submitOnce" class="title">
-				<span>{{ t('forms', 'Only allow one submission per user') }}</span>
-			</label>
-
-			<input id="expires"
-				v-model="formExpires"
-
-				type="checkbox"
-				class="checkbox">
-			<label class="title" for="expires">
-				{{ t('forms', 'Expires') }}
-			</label>
-
-			<DatetimePicker v-show="formExpires"
-				id="expiresDatetimePicker"
-				v-model="form.expires"
-				v-bind="expirationDatePicker"
-				@change="onExpiresChange" />
-		</div>
-
-		<div class="configBox">
-			<label class="title icon-user">
-				{{ t('forms', 'Access') }}
-			</label>
-
-			<input id="registered"
-				v-model="form.access.type"
-				type="radio"
-				value="registered"
-				class="radio"
-				@change="onAccessChange">
-			<label for="registered" class="title">
-				<div class="title icon-group" />
-				<span>{{ t('forms', 'Registered users only') }}</span>
-			</label>
-
-			<input id="public"
-				v-model="form.access.type"
-				type="radio"
-				value="public"
-				class="radio"
-				@change="onAccessChange">
-			<label for="public" class="title">
-				<div class="title icon-link" />
-				<span>{{ t('forms', 'Public access') }}</span>
-			</label>
-
-			<input id="selected"
-				v-model="form.access.type"
-				type="radio"
-				value="selected"
-				class="radio"
-				@change="onAccessChange">
-			<label for="selected" class="title">
-				<div class="title icon-shared" />
-				<span>{{ t('forms', 'Only shared') }}</span>
-			</label>
-		</div>
-
-		<ShareDiv v-show="form.access.type === 'selected'"
-			:active-shares="form.shares"
-			:placeholder="t('forms', 'Name of user or group')"
-			:hide-names="true"
-			@update-shares="updateShares"
-			@remove-share="removeShare" />
+		<h3>{{ t('forms', 'Sharing') }}</h3>
+		<ul>
+			<li>
+				<input id="registered"
+					v-model="form.access.type"
+					type="radio"
+					value="registered"
+					class="radio"
+					@change="onAccessChange">
+				<label for="registered">
+					<span class="icon-group">
+						{{ t('forms', 'Show to all users of this instance') }}
+					</span>
+				</label>
+			</li>
+			<li>
+				<input id="public"
+					v-model="form.access.type"
+					type="radio"
+					value="public"
+					class="radio"
+					@change="onAccessChange">
+				<label for="public">
+					<span class="icon-link">
+						{{ t('forms', 'Share link') }}
+					</span>
+				</label>
+			</li>
+			<li>
+				<input id="selected"
+					v-model="form.access.type"
+					type="radio"
+					value="selected"
+					class="radio"
+					@change="onAccessChange">
+				<label for="selected">
+					<span class="icon-shared">
+						{{ t('forms', 'Choose users to share with') }}
+					</span>
+				</label>
+				<ShareDiv v-show="form.access.type === 'selected'"
+					:active-shares="form.shares"
+					:placeholder="t('forms', 'Name of user or group')"
+					:hide-names="true"
+					@update-shares="updateShares"
+					@remove-share="removeShare" />
+			</li>
+		</ul>
 	</AppSidebar>
 </template>
 
@@ -247,21 +249,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+h3 {
+	margin-left: 8px;
+	margin-bottom: 8px;
+}
 
-.configBox {
-	display: flex;
-	flex-direction: column;
-	padding: 8px;
-	& > * {
-		padding-left: 21px;
-	}
-	& > .title {
-		display: flex;
-		background-position: 0 2px;
-		padding-left: 24px;
-		margin-bottom: 4px;
-		& > span {
-			padding-left: 4px;
+ul {
+	margin-bottom: 24px;
+
+	label {
+		padding: 8px;
+		display: block;
+
+		span[class^="icon-"],
+		span[class*=" icon-"] {
+			background-position: 4px;
+			padding-left: 24px;
 		}
 	}
 }
@@ -275,6 +278,7 @@ textarea {
 }
 
 #expiresDatetimePicker {
-	width: 170px;
+	left: 36px;
+	width: calc(100% - 44px);
 }
 </style>