Kingsmai/pokopiawiki.tootaio.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(items): improve edit form layout with responsive grid rows

Browse Source 
Group related fields like name/price and category/usage.
Stack fields vertically on screens smaller than 720px.
This commit is contained in:
xiaomai
2026-05-05 09:05:53 +08:00
parent 9312156a3c
commit 839a24566b
1 changed files with 67 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
frontend/src/views/ItemEdit.vue
View File

@@ -316,15 +316,22 @@ onMounted(() => {
<StatusMessage v-if="message" variant="danger">{{ message }}</StatusMessage> <StatusMessage v-if="message" variant="danger">{{ message }}</StatusMessage>
<form v-if="!loading && options" id="item-edit-form" class="modal-edit-form" @submit.prevent="saveItem"> <form v-if="!loading && options" id="item-edit-form" class="modal-edit-form" @submit.prevent="saveItem">
<TranslationFields <div class="item-edit-row item-edit-row--name-price">
id-prefix="item-name" <TranslationFields
v-model:base-value="itemForm.name" id-prefix="item-name"
v-model:translations="itemForm.translations" v-model:base-value="itemForm.name"
field="name" v-model:translations="itemForm.translations"
:label="t('common.name')" field="name"
:languages="languages" :label="t('common.name')"
required :languages="languages"
/> required
/>
<div class="field">
<label for="item-base-price">{{ t('pages.items.basePrice') }}</label>
<input id="item-base-price" v-model="itemForm.basePrice" type="number" min="0" step="1" inputmode="numeric" />
</div>
</div>
<TranslationFields <TranslationFields
id-prefix="item-details" id-prefix="item-details"
@@ -352,34 +359,31 @@ onMounted(() => {
@error="message = $event" @error="message = $event"
/> />
<div class="field"> <div class="item-edit-row item-edit-row--category-usage">
<label for="item-base-price">{{ t('pages.items.basePrice') }}</label> <div class="field">
<input id="item-base-price" v-model="itemForm.basePrice" type="number" min="0" step="1" inputmode="numeric" /> <label for="item-category">{{ t('pages.items.category') }}</label>
</div> <TagsSelect
id="item-category"
v-model="itemForm.categoryId"
:options="options.itemCategories"
:multiple="false"
:placeholder="t('common.select')"
:search-placeholder="t('pages.items.searchCategory')"
/>
</div>
<div class="field"> <div class="field">
<label for="item-category">{{ t('pages.items.category') }}</label> <label for="item-usage">{{ t('pages.items.usage') }}</label>
<TagsSelect <TagsSelect
id="item-category" id="item-usage"
v-model="itemForm.categoryId" v-model="itemForm.usageId"
:options="options.itemCategories" :options="options.itemUsages"
:multiple="false" :multiple="false"
:placeholder="t('common.select')" clearable
:search-placeholder="t('pages.items.searchCategory')" :placeholder="t('common.none')"
/> :search-placeholder="t('pages.items.searchUsage')"
</div> />
</div>
<div class="field">
<label for="item-usage">{{ t('pages.items.usage') }}</label>
<TagsSelect
id="item-usage"
v-model="itemForm.usageId"
:options="options.itemUsages"
:multiple="false"
clearable
:placeholder="t('common.none')"
:search-placeholder="t('pages.items.searchUsage')"
/>
</div> </div>
<div class="check-row"> <div class="check-row">
@@ -436,3 +440,30 @@ onMounted(() => {
</template> </template>
</Modal> </Modal>
</template> </template>
<style scoped>
.item-edit-row {
display: grid;
gap: 12px;
align-items: start;
}
.item-edit-row--name-price {
grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
}
.item-edit-row--category-usage {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.item-edit-row > * {
min-width: 0;
}
@media (max-width: 720px) {
.item-edit-row--name-price,
.item-edit-row--category-usage {
grid-template-columns: 1fr;
}
}
</style>