gitmedia/thats-me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

edit page: change order of elements

Browse source
This commit is contained in:
Tilman Behrend 2025-09-18 09:13:08 +02:00
parent fd5bc7faea
commit d9621e6a90
1 changed files with 66 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

132
frontend/src/pages/EditPage.vue
View file

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