From d9621e6a90b60a28ae70a5accc6bbe07fd582464 Mon Sep 17 00:00:00 2001
From: Tilman Behrend <behrend@medienflieger.de>
Date: Thu, 18 Sep 2025 09:13:08 +0200
Subject: [PATCH] edit page: change order of elements

---
 frontend/src/pages/EditPage.vue | 132 ++++++++++++++++----------------
 1 file changed, 66 insertions(+), 66 deletions(-)

diff --git a/frontend/src/pages/EditPage.vue b/frontend/src/pages/EditPage.vue
index b6d1289..fa18b7e 100644
--- a/frontend/src/pages/EditPage.vue
+++ b/frontend/src/pages/EditPage.vue
@@ -16,7 +16,7 @@
                 
                 <!-- Tab 1: Basics - Only Image and Emotional Level -->
                 <q-tab-panel name="basics" class="q-pa-none">
-                  <div class="q-gutter-md q-mt-md">
+                  <div class="q-gutter-md ">
 
                     <!-- Emotional Level -->
                     <div class="q-mb-md">
@@ -104,80 +104,80 @@
 
                 <!-- Tab 2: Content - Title, Headline, Date/Time, Description -->
                 <q-tab-panel name="content" class="q-pa-none">
-                  <div class="q-gutter-md q-mt-md">
-                    
-                    <!-- Title (formerly Subheadline) - Now mandatory -->
-                    <q-input
-                      v-model="form.subheadline"
-                      label="Title *"
-                      filled
-                      :rules="[val => !!val || 'Title is required']"
-                    />
+                  <div class="q-gutter-md ">
 
-                    <!-- Headline - Now optional -->
+                  <!-- Date and Time -->
+                  <div class="row q-gutter-md q-mb-md">
+                    <div class="col">
                     <q-input
-                      v-model="form.headline"
-                      label="Headline"
+                      v-model="form.date"
+                      label="Date *"
                       filled
-                    />
-
-                    <!-- Date and Time -->
-                    <div class="row q-gutter-md q-mb-md">
-                      <div class="col">
-                        <q-input
-                          v-model="form.date"
-                          label="Date *"
-                          filled
-                          type="date"
-                          :rules="[val => !!val || 'Date is required']"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon name="event" />
-                          </template>
-                        </q-input>
-                      </div>
-                      <div class="col">
-                        <q-input
-                          v-model="form.time"
-                          label="Time"
-                          filled
-                          type="time"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon name="access_time" />
-                          </template>
-                        </q-input>
-                      </div>
+                      type="date"
+                      :rules="[val => !!val || 'Date is required']"
+                    >
+                      <template v-slot:prepend>
+                      <q-icon name="event" />
+                      </template>
+                    </q-input>
                     </div>
-
-                    <!-- Description (formerly Text) -->
+                    <div class="col">
                     <q-input
-                      v-model="form.text"
-                      label="Description"
+                      v-model="form.time"
+                      label="Time"
                       filled
-                      type="textarea"
-                      rows="4"
-                    />
+                      type="time"
+                    >
+                      <template v-slot:prepend>
+                      <q-icon name="access_time" />
+                      </template>
+                    </q-input>
+                    </div>
+                  </div>
+
+                  <!-- Title (formerly Subheadline) - Now mandatory -->
+                  <q-input
+                    v-model="form.subheadline"
+                    label="Title *"
+                    filled
+                    :rules="[val => !!val || 'Title is required']"
+                  />
+
+                  <!-- Headline - Now optional -->
+                  <q-input
+                    v-model="form.headline"
+                    label="Headline"
+                    filled
+                  />
+
+                  <!-- Description (formerly Text) -->
+                  <q-input
+                    v-model="form.text"
+                    label="Description"
+                    filled
+                    type="textarea"
+                    rows="4"
+                  />
 
                   </div>
 
                   <!-- Tab Navigation for Content -->
                   <div class="row q-gutter-md q-mt-lg justify-between">
-                    <q-btn
-                      label="Back"
-                      icon="arrow_back"
-                      color="grey"
-                      flat
-                      @click="goToPreviousTab"
-                      class="col-auto"
-                    />
-                    <q-btn
-                      label="Continue"
-                      icon-right="arrow_forward"
-                      color="primary"
-                      @click="goToNextTab"
-                      class="col-auto"
-                    />
+                  <q-btn
+                    label="Back"
+                    icon="arrow_back"
+                    color="grey"
+                    flat
+                    @click="goToPreviousTab"
+                    class="col-auto"
+                  />
+                  <q-btn
+                    label="Continue"
+                    icon-right="arrow_forward"
+                    color="primary"
+                    @click="goToNextTab"
+                    class="col-auto"
+                  />
                   </div>
                 </q-tab-panel>
 
@@ -388,7 +388,7 @@
 
                     <!-- Category Selection -->
                     <div class="q-mb-md">
-                      <q-separator class="q-mt-lg q-mb-lg" />
+                      <q-separator class="q-mb-md" />
                       <q-label class="text-subtitle2 q-mb-sm">Category</q-label>
                       
                       <!-- Main Category Selection with vue-select -->
@@ -441,7 +441,7 @@
 
                     <!-- Delete Entry Section -->
                     <div class="q-mb-md q-mt-lg">
-                      <q-separator class="q-mt-lg q-mb-lg" />
+                      <q-separator class="q-mb-md" />
                       <q-label class="text-subtitle2 q-mb-sm text-negative">Danger Zone</q-label>
                       <p class="text-caption text-grey q-mb-md">
                         Once you delete this entry, it cannot be recovered. Please be certain.