Created attachment 162969 [details] [review] Bug 36285: [PoC] Move ERM specific styling to all of koha Staff forms This is just a proof of concept 1) Before applying the patch, access some (or all) of the links below. 2) Apply patch 3) Run yarn css:build to rebuild scss 4) Refresh each of the pages and notice the changes Some form examples: <staff_url>/cgi-bin/koha/acqui/supplier.pl?op=enter <staff_url>/cgi-bin/koha/serials/serials-home.pl <staff_url>/cgi-bin/koha/serials/subscription-add.pl <staff_url>/cgi-bin/koha/erm/eholdings/local/titles/add <staff_url>/cgi-bin/koha/virtualshelves/shelves.pl?op=add_form&referer=list <staff_url>/cgi-bin/koha/suggestion/suggestion.pl?op=add_form&branchcode=CPL Side menu changes: /cgi-bin/koha/members/members-home.pl /cgi-bin/koha/serials/serials-search.pl # Press Search A problem arises for some inputs that have the size property e.g. size="4" on the new purchase suggestion form, and others. With this new change, these inputs lose their initial enforced "smaller" size. I think this should be iterated and made more streamlined and use a .input-small class of the size.
Hey all, I've submitted a PoC patch for discussion. Would be great to have others opinions on this to better make the judgement call if this is worth investing more time into or not.
I was looking at forms inside modals this afternoon and I'd love to see some consistency improvements there too ;)
Hi Pedro, thanks for taking the initiative! Working on this now might even be good timing with the CSRF changes also requiring testing a lot of the forms. I noticed some things, that we maybe could improve on: /cgi-bin/koha/acqui/supplier.pl?op=enter * The pull-downs for currencies and others have a lower height than the input fields. I think it would help readability and consistency if the heights of the fields matched. The select2 pull-downs don't appear to have this issue (edit item form for an example). * Not related to the new CSS... but maybe I can still bring it up for consideration: German labels are often a lot longer than English ones and that leads to quite a lot of display issues we have to counter with custom CSS. I see a lot of the labels already wrap on this form in English already ("Account number". Could we consider making the label area a bit more spacious/flexible in general? /cgi-bin/koha/suggestion/suggestion.pl?op=add_form&branchcode=CPL * Input field lengths appear longer in general - I quite like that in general. But wondering about fields with a set max-length like the copyright year in this form. It's still not the same length as the other input fields with the patch applied, but also not 'year-sized' anymore. Similar for zipcode in administration/libraries. /cgi-bin/koha/admin/categories.pl?op=add_form&categorycode=HB * In the messaging preferences table, the pull down for "days in advance" is now too small to fit the number. Without the patch the width is ok. Hope this helps!
Created attachment 175772 [details] [review] Bug 36285: Preparation: Move ERM specific styling to all of koha Staff forms This is just a proof of concept 1) Before applying the patch, access some (or all) of the links below. 2) Apply patch 3) Run yarn css:build to rebuild scss 4) Refresh each of the pages and notice the changes Some form examples: <staff_url>/cgi-bin/koha/acqui/supplier.pl?op=enter <staff_url>/cgi-bin/koha/serials/serials-home.pl <staff_url>/cgi-bin/koha/serials/subscription-add.pl <staff_url>/cgi-bin/koha/erm/eholdings/local/titles/add <staff_url>/cgi-bin/koha/virtualshelves/shelves.pl?op=add_form&referer=list <staff_url>/cgi-bin/koha/suggestion/suggestion.pl?op=add_form&branchcode=CPL Side menu changes: /cgi-bin/koha/members/members-home.pl /cgi-bin/koha/serials/serials-search.pl # Press Search A problem arises for some inputs that have the size property e.g. size="4" on the new purchase suggestion form, and others. With this new change, these inputs lose their initial enforced "smaller" size. I think this should be iterated and made more streamlined and use a .input-small class of the size.
Created attachment 175773 [details] [review] Bug 36285: (QA follow-up): Fix regular select elements height
Created attachment 175774 [details] [review] Bug 36285: (QA follow-up): Apply new style only to form elements inside fieldset->li Styling was being applied where it shouldn't. This is to address Katrin's comment: * In the messaging preferences table, the pull down for "days in advance" is now too small to fit the number. Without the patch the width is ok.
Created attachment 175775 [details] [review] Bug 36285: (QA follow-up): Use 30% as min-width, but if input has 'size' property, utilize that instead Addresing Katrin's comment: * Input field lengths appear longer in general - I quite like that in general. But wondering about fields with a set max-length like the copyright year in this form. It's still not the same length as the other input fields with the patch applied, but also not 'year-sized' anymore. Similar for zipcode in administration/libraries.
Created attachment 175776 [details] [review] Bug 36285: Clean-up: Remove WET code from Preservation/Main.vue
Hi all, I'm revisiting this. I really need to improve the style of the ILL forms on Staff UI, as customers complain the input fields are often too small. Personally I agree. "Why not utilize the already improved form styling from ERM? And have all inputs in Koha use that for consistency", this was my original thinking. At the time it looked like the scope was too big (it may very well still be the case) but I've given this another go at attempting to apply this uniform style to all Koha forms for better UI consistency across modules (and of course improvement to the ILL form also, but not limited to). This obviously needs extensive testing so any help here is very much appreciated!