Bugzilla – Attachment 188875 Details for
Bug 41151
Vue Additional Fields UX Improvements
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 41151: Improve additional fields display alignment and formatting
Bug-41151-Improve-additional-fields-display-alignm.patch (text/plain), 4.54 KB, created by
Martin Renvoize (ashimema)
on 2025-11-01 14:12:33 UTC
(
hide
)
Description:
Bug 41151: Improve additional fields display alignment and formatting
Filename:
MIME Type:
Creator:
Martin Renvoize (ashimema)
Created:
2025-11-01 14:12:33 UTC
Size:
4.54 KB
patch
obsolete
>From d9a695b1e6148ac2a6af5798d43fcf77e7c4245e Mon Sep 17 00:00:00 2001 >From: Martin Renvoize <martin.renvoize@openfifth.co.uk> >Date: Fri, 31 Oct 2025 11:35:43 +0000 >Subject: [PATCH] Bug 41151: Improve additional fields display alignment and > formatting > >This patch improves the display of additional fields by: > >- Removing the nested fieldset wrapper that caused alignment issues >- Converting the legend to a header list item for consistency >- Aligning additional field labels with main form field labels >- Displaying multi-value fields (comma-separated) on separate lines > without bullets or extra indentation, aligned with single values >- Using the same visual separator pattern as the entry form > >This creates perfect alignment between additional fields and regular >fields in the display view, with multi-value fields showing cleanly >stacked values in the same column as single values. > >Signed-off-by: David Nind <david@davidnind.com> >--- > .../components/AdditionalFieldsDisplay.vue | 96 +++++++++++++++---- > 1 file changed, 76 insertions(+), 20 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/AdditionalFieldsDisplay.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/AdditionalFieldsDisplay.vue >index 2895f6b3ce3..20b91dbe75a 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/AdditionalFieldsDisplay.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/AdditionalFieldsDisplay.vue >@@ -1,24 +1,32 @@ > <template> >- <fieldset >- v-if="additional_field_values.length" >- class="rows" >- id="additional_fields" >- > >- <legend>{{ $__("Additional fields") }}</legend> >- <ol> >- <li >- v-for="additional_field_value in additional_field_values" >- v-bind:key="additional_field_value.id" >- > >- <label >- :for="`additional_field_` + additional_field_value.field_id" >- > >- {{ additional_field_value.field_label }}: >- </label> >- <span> {{ additional_field_value.value_str }} </span> >- </li> >- </ol> >- </fieldset> >+ <template v-if="additional_field_values.length"> >+ <li class="additional-fields-header"> >+ <label></label> >+ <h3>{{ $__("Additional fields") }}</h3> >+ </li> >+ <li >+ v-for="additional_field_value in additional_field_values" >+ v-bind:key="additional_field_value.id" >+ > >+ <label :for="`additional_field_` + additional_field_value.field_id"> >+ {{ additional_field_value.field_label }}: >+ </label> >+ <template v-if="isMultipleValues(additional_field_value.value_str)"> >+ <div class="additional-field-values"> >+ <div >+ v-for="(value, index) in splitValues( >+ additional_field_value.value_str >+ )" >+ :key="index" >+ class="value-item" >+ > >+ {{ value }} >+ </div> >+ </div> >+ </template> >+ <span v-else> {{ additional_field_value.value_str }} </span> >+ </li> >+ </template> > </template> > > <script> >@@ -27,8 +35,22 @@ export default { > setup() { > const fields_to_display = ref([]); > >+ const isMultipleValues = value_str => { >+ return value_str && value_str.includes(","); >+ }; >+ >+ const splitValues = value_str => { >+ if (!value_str) return []; >+ return value_str >+ .split(",") >+ .map(v => v.trim()) >+ .filter(v => v); >+ }; >+ > return { > fields_to_display, >+ isMultipleValues, >+ splitValues, > }; > }, > name: "AdditionalFieldsDisplay", >@@ -38,3 +60,37 @@ export default { > }, > }; > </script> >+ >+<style scoped> >+/* Header for additional fields section */ >+.additional-fields-header { >+ border-top: 1px solid #ddd; >+ margin-top: 1em; >+ padding-top: 1em; >+} >+ >+.additional-fields-header h3 { >+ margin: 0; >+ font-size: 110%; >+ font-weight: bold; >+ color: #696969; >+} >+ >+.additional-fields-header label { >+ /* Empty label for alignment with other fields */ >+ width: 10rem; >+} >+ >+/* Multiple values display aligned with single values */ >+.additional-field-values { >+ display: inline-block; >+ margin: 0; >+ padding: 0; >+} >+ >+.value-item { >+ margin: 0; >+ padding: 0; >+ line-height: 1.5; >+} >+</style> >-- >2.51.1
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 41151
:
188814
|
188815
|
188816
|
188817
|
188818
|
188819
|
188820
|
188821
|
188822
|
188874
| 188875 |
188876
|
188877
|
188878
|
188879
|
188880