From 8e5f57e401faf6d00d2c2c11a0bafde675e97ce9 Mon Sep 17 00:00:00 2001
From: Jonas Rittershofer <jotoeri@users.noreply.github.com>
Date: Sun, 24 May 2020 19:14:34 +0200
Subject: [PATCH 1/3] Adjust cut descenders on formtitle

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
---
 src/views/Create.vue | 8 ++++++--
 src/views/Submit.vue | 9 ++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/views/Create.vue b/src/views/Create.vue
index 20ca96b..c64c678 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -49,6 +49,7 @@
 				id="form-title"
 				ref="title"
 				v-model="form.title"
+				class="form-title"
 				:minlength="0"
 				:maxlength="maxStringLengths.formTitle"
 				:placeholder="t('forms', 'Form title')"
@@ -417,15 +418,17 @@ export default {
 		margin-top: 44px;
 		margin-bottom: 24px;
 
-		#form-title,
+		.form-title,
 		.form-desc {
 			width: 100%;
 			padding: 0 16px;
 			border: none;
 		}
-		#form-title {
+		.form-title {
 			font-size: 2em;
 			font-weight: bold;
+			color: var(--color-main-text);
+			min-height: 36px;
 			margin: 32px 0;
 			padding-left: 14px; // align with description (compensate font size diff)
 			overflow: hidden;
@@ -433,6 +436,7 @@ export default {
 			white-space: nowrap;
 		}
 		.form-desc {
+			font-size: 100%;
 			padding-bottom: 20px;
 			resize: none;
 		}
diff --git a/src/views/Submit.vue b/src/views/Submit.vue
index 177e85e..f7ce322 100644
--- a/src/views/Submit.vue
+++ b/src/views/Submit.vue
@@ -25,7 +25,7 @@
 		<AppContent>
 			<!-- Forms title & description-->
 			<header>
-				<h2 id="form-title">
+				<h2 class="form-title">
 					{{ formTitle }}
 				</h2>
 				<p v-if="!loading && !success" class="form-desc">
@@ -202,15 +202,17 @@ export default {
 		margin-top: 44px;
 		margin-bottom: 24px;
 
-		#form-title,
+		.form-title,
 		.form-desc {
 			width: 100%;
 			padding: 0 16px;
 			border: none;
 		}
-		#form-title {
+		.form-title {
 			font-size: 2em;
 			font-weight: bold;
+			color: var(--color-main-text);
+			min-height: 36px;
 			margin: 32px 0;
 			padding-left: 14px; // align with description (compensate font size diff)
 			overflow: hidden;
@@ -218,6 +220,7 @@ export default {
 			white-space: nowrap;
 		}
 		.form-desc {
+			font-size: 100%;
 			padding-bottom: 20px;
 			resize: none;
 		}

From 529205385af06e9b142245a38fecbba28bfc660d Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Sun, 24 May 2020 21:05:30 +0200
Subject: [PATCH 2/3] Align form-title in Create and Submit view

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 c64c678..5540794 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -431,6 +431,7 @@ export default {
 			min-height: 36px;
 			margin: 32px 0;
 			padding-left: 14px; // align with description (compensate font size diff)
+			padding-bottom: 6px; // align with h2 of .form-title on submit page
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;

From fe27a630c4abbac390d91cb86ab28ea1ada3a28e Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Sun, 24 May 2020 21:06:01 +0200
Subject: [PATCH 3/3] Use semantically correct h2 in Create view as well

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/views/Create.vue | 36 +++++++++++++++++++++---------------
 src/views/Submit.vue |  2 +-
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/views/Create.vue b/src/views/Create.vue
index 5540794..e445d2f 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -44,20 +44,22 @@
 
 		<!-- Forms title & description-->
 		<header>
-			<label class="hidden-visually" for="form-title">{{ t('forms', 'Form title') }}</label>
-			<input
-				id="form-title"
-				ref="title"
-				v-model="form.title"
-				class="form-title"
-				:minlength="0"
-				:maxlength="maxStringLengths.formTitle"
-				:placeholder="t('forms', 'Form title')"
-				:required="true"
-				autofocus
-				type="text"
-				@click="selectIfUnchanged"
-				@keyup="onTitleChange">
+			<h2>
+				<label class="hidden-visually" for="form-title">{{ t('forms', 'Form title') }}</label>
+				<input
+					id="form-title"
+					ref="title"
+					v-model="form.title"
+					class="form-title"
+					:minlength="0"
+					:maxlength="maxStringLengths.formTitle"
+					:placeholder="t('forms', 'Form title')"
+					:required="true"
+					autofocus
+					type="text"
+					@click="selectIfUnchanged"
+					@keyup="onTitleChange">
+			</h2>
 			<label class="hidden-visually" for="form-desc">{{ t('forms', 'Description') }}</label>
 			<textarea
 				ref="description"
@@ -418,6 +420,10 @@ export default {
 		margin-top: 44px;
 		margin-bottom: 24px;
 
+		h2 {
+			margin-bottom: 0; // because the input field has enough padding
+		}
+
 		.form-title,
 		.form-desc {
 			width: 100%;
@@ -425,7 +431,7 @@ export default {
 			border: none;
 		}
 		.form-title {
-			font-size: 2em;
+			font-size: 28px;
 			font-weight: bold;
 			color: var(--color-main-text);
 			min-height: 36px;
diff --git a/src/views/Submit.vue b/src/views/Submit.vue
index f7ce322..659528b 100644
--- a/src/views/Submit.vue
+++ b/src/views/Submit.vue
@@ -209,7 +209,7 @@ export default {
 			border: none;
 		}
 		.form-title {
-			font-size: 2em;
+			font-size: 28px;
 			font-weight: bold;
 			color: var(--color-main-text);
 			min-height: 36px;