From e7c3e62a5e407865a68fda8f3ee11a535097e62b Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Sat, 28 Aug 2021 21:52:08 +0200
Subject: [PATCH] [editor] clearer separation between sections

---
 components/ButtonList.vue |  2 +-
 routes/profileEditor.vue  | 59 +++++++++++++++++++++------------------
 2 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/components/ButtonList.vue b/components/ButtonList.vue
index cf2ec12b9..b0e83d42b 100644
--- a/components/ButtonList.vue
+++ b/components/ButtonList.vue
@@ -14,7 +14,7 @@
             </li>
         </draggable>
         <div class="input-group py-1">
-            <input v-model="search" class="form-control form-control-sm" :placeholder="$t('crud.search')"/>
+            <input v-model="search" class="form-control" :placeholder="$t('crud.search')"/>
             <button v-if="search" type="button" class="btn btn-light btn-sm border text-danger" @click.prevent="search = ''">
                 <Icon v="times"/>
             </button>
diff --git a/routes/profileEditor.vue b/routes/profileEditor.vue
index 448cc93ba..88967ae4c 100644
--- a/routes/profileEditor.vue
+++ b/routes/profileEditor.vue
@@ -56,15 +56,15 @@
                 <OpinionLegend/>
             </section>
 
-            <div class="form-group">
+            <section class="form-group">
                 <h3 class="h4">
                     <Icon v="signature"/>
                     <T>profile.names</T>
                 </h3>
                 <OpinionListInput v-model="names"/>
-            </div>
+            </section>
 
-            <div class="form-group">
+            <section class="form-group">
                 <h3 class="h4">
                     <Icon v="link"/>
                     <T>profile.pronouns</T>
@@ -74,17 +74,17 @@
                 </p>
                 <OpinionListInput v-model="pronouns" :validation="validatePronoun"/>
                 <Answer question="custom-pronouns" small/>
-            </div>
+            </section>
 
-            <div class="form-group">
+            <section class="form-group">
                 <h3 class="h4">
                     <Icon v="comment-edit"/>
                     <T>profile.description</T>
                 </h3>
                 <textarea class="form-control form-control-sm" v-model="description" maxlength="256" rows="4"/>
-            </div>
+            </section>
 
-            <div class="form-group">
+            <section class="form-group">
                 <h3 class="h4">
                     <Icon v="flag"/>
                     <T>profile.flags</T>
@@ -95,20 +95,20 @@
                 <ButtonList v-model="flags" :options="allFlags" v-slot="s">
                     <Flag :name="s.desc.split('|')[0]" :alt="s.desc.split('|')[1]" :img="`/flags/${s.v}.png`"/>
                 </ButtonList>
-            </div>
 
-            <details class="form-group border rounded" :open="Object.keys(customFlags).length > 0">
-                <summary class="px-3 py-2">
-                    <T>profile.flagsCustom</T>
-                </summary>
-                <div class="border-top">
-                    <ImageWidgetRich v-model="customFlags" sizes="flag"/>
-                </div>
-            </details>
+                <details class="form-group border rounded" :open="Object.keys(customFlags).length > 0">
+                    <summary class="px-3 py-2">
+                        <T>profile.flagsCustom</T>
+                    </summary>
+                    <div class="border-top">
+                        <ImageWidgetRich v-model="customFlags" sizes="flag"/>
+                    </div>
+                </details>
 
-            <Answer question="flags" small/>
+                <Answer question="flags" small/>
+            </section>
 
-            <div class="form-group">
+            <section class="form-group">
                 <h3 class="h4">
                     <Icon v="link"/>
                     <T>profile.links</T>
@@ -125,9 +125,9 @@
                     </a>
                     😉
                 </p>
-            </div>
+            </section>
 
-            <div class="form-group">
+            <section class="form-group">
                 <h3 class="h4">
                     <Icon v="birthday-cake"/>
                     <T>profile.birthday</T>
@@ -141,9 +141,9 @@
                         <Icon v="times"/>
                     </button>
                 </div>
-            </div>
+            </section>
 
-            <div class="form-group">
+            <section class="form-group">
                 <h3 class="h4">
                     <Icon v="scroll-old"/>
                     <T>profile.words</T>
@@ -154,12 +154,14 @@
                     </h4>
                     <OpinionListInput v-model="words[i]" group="words"/>
                 </template>
-            </div>
+            </section>
 
-            <button class="btn btn-primary w-100" type="submit">
-                <Icon v="save"/>
-                <T>profile.editor.save</T>
-            </button>
+            <section>
+                <button class="btn btn-primary w-100" type="submit">
+                    <Icon v="save"/>
+                    <T>profile.editor.save</T>
+                </button>
+            </section>
         </form>
     </div>
 </template>
@@ -355,4 +357,7 @@
     .saving {
         opacity: .5;
     }
+    section.form-group {
+        margin-bottom: 5rem;
+    }
 </style>