From d95b05eee707887695a4f863a35c9e3c06eaf2cb Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Mon, 7 Sep 2020 12:56:18 +0200
Subject: [PATCH] update repeater options to use grid

---
 app/src/interfaces/repeater/options.vue | 42 ++++++++++++++++++-------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/app/src/interfaces/repeater/options.vue b/app/src/interfaces/repeater/options.vue
index ced45aab3f..37c90a9512 100644
--- a/app/src/interfaces/repeater/options.vue
+++ b/app/src/interfaces/repeater/options.vue
@@ -1,13 +1,23 @@
 <template>
 	<div>
-		<p class="type-label half">{{ $t('template') }}</p>
-		<v-input class="input" v-model="template" :placeholder="`{{ field }}`" />
-
-		<p class="type-label half">{{ $t('max-amount') }}</p>
-		<v-input class="input" type="number" v-model="limit" />
-
-		<p class="type-label">{{ $t('edit_fields') }}</p>
-		<repeater v-model="repeaterValue" :template="`{{ field }} — {{ interface }}`" :fields="repeaterFields" />
+		<div class="grid">
+			<div class="grid-element">
+				<p class="type-label">{{ $t('template') }}</p>
+				<v-input class="input" v-model="template" :placeholder="`{{ field }}`" />
+			</div>
+			<div class="grid-element">
+				<p class="type-label">{{ $t('max-amount') }}</p>
+				<v-input class="input" type="number" v-model="limit" />
+			</div>
+			<div class="grid-element full">
+				<p class="type-label">{{ $t('edit_fields') }}</p>
+				<repeater
+					v-model="repeaterValue"
+					:template="`{{ field }} — {{ interface }}`"
+					:fields="repeaterFields"
+				/>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -148,11 +158,19 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.grid {
+	display: grid;
+	grid-template-columns: [start] minmax(0, 1fr) [half] minmax(0, 1fr) [full];
+	gap: var(--form-vertical-gap) var(--form-horizontal-gap);
+
+	&-element {
+		&.full {
+			grid-column: start/full;
+		}
+	}
+}
+
 .type-label {
 	margin-bottom: 4px;
 }
-
-.input {
-	margin-bottom: 24px;
-}
 </style>