We've already fixed a dozen or so form layout problems since the redesign was implemented, and there are more popping up. I think it's time to restore the CSS used to style forms from before the redesign. The general pattern of layouts will remain the same, but a wider variety of form markup will be supported.
Created attachment 145201 [details] [review] Bug 32605: Restore some form styling from before the redesign This patch pulls styles from pre-22.11 staff-global.scss related to the styling of fieldset.rows and contents. The old CSS is more verbose but it has been better proven to hold up in a variety of situations. The patch makes only one template change, a minor correction to the basket groups form. To test, apply the patch and rebuild the staff interface SCSS. Test as many forms as possible to confirm that everything is still correct. Forms affected are ones shown in the main body of the page, not in sidebars. Some good examples: Editing patrons, subscriptions, patron categories, notices, item types. This patch should help outstanding bugs 32513, 32543, and 32591
I don't see any differences on the patron edit form. Where am I supposed to look at?
Most forms should look the same. Others, referenced in the outstanding bugs listed above, should look better.
It works well in the form "label-edit-layout.pl" (bug=32513 ), since terms «list fields» are back on the left-hand side. However, the other mentioned forms are still buggy. Examples: (bug=32591) in the "Batch patron deletion and anonymization" form on the cleanborrowers.pl page --> There is no significant change with or without the patch. (bug=32543) in "New patron category" form on the page categories.pl?op=add_form --> the "Until date" field is still misaligned and you can notice a bigger calendar box on the page after the applying the patch. see https://staff-m2linlibro.sandbox.bywatersolutions.com
(In reply to Marie-Luce Laflamme from comment #4) > (bug=32591) in the "Batch patron deletion and anonymization" form on > (bug=32543) in "New patron category" form I think both these issues are a side-effect of Bug 31943 and would be fixed by the patch on Bug 32606.
Created attachment 145916 [details] Screenshot - patron card layout form Things I noted: 1. Very large date input fields are fixed by bug 32606 (I applied that patch, and for the ones I tried this was fixed) 2. Radio button selectors: for some of the forms I tested, the label is indented and aligns with other fields' input boxes (for example: Import patrons > Patron attributes) 3. Radio button selectors: for several forms I tested, there is no space between the radio button and the text that comes after (for example: Edit patron card layout) 4. Hint text larger: I personally don't mind this (for example: patron edit form > date of birth) 5. Label alignment when wrapped: previously input fields were centered on the label, now aligned to the top of the label (for example: patron edit form > Library setup > expiry date ....; patron category edit form) Specific forms ============== Patron edit form: - date of birth + other date fields: input field "huge" - can confirm this is fixed by bug 32606 - primary phone, secondary phone, secondary email fields, ZIP/Postal code: these labels are wrapped now, previously they were on one line - label alignment when wrapped: previously input fields were centered on the label, now aligned to the top of the label - "Allow auto-renewal of items": label indented - starts where other input fields are - Patron identity: raido buttons start where otehr input fields are Patron category: - Enrolment period: "Choose one" text very large (this was the case before the patch), date field huge (fixed with bug 32606), text size of hints/help the same size (or larger?) than labels Edit patron card layout (screenshot attched): - All msialigned and indented: fieldsets all indented - general settings, then field 1, 2 and 3 and further indented; text input fields are aligned to the left with the start of all labels Import patrons: - Hide default value fields: drop down lists previously had a grey background (for example, Home library and Patron category) - this seems to only be this form, other ones I looked at were okay (for example: patron categories); date fields huge (fixed with bug 32606) - Hide preserve value fields: introductory text was aligned left with the start of the labels, but is now aligned after the label and in line with the start of the check boxes/input fields - If matching record is already in the borrowers table: radio buttons are all indented, and there is no space between the input field and the label that comes after it - Patron attributes: same as "If matching record is already in the borrowers table" Notices and slips: - Not related to this, but just noting that the input field where the notice is put goes over the the right hand edge - even at a reasonable width Item types: looks OK Edit items: looks OK
Created attachment 146348 [details] [review] Bug 32605: Restore some form styling from before the redesign This patch pulls styles from pre-22.11 staff-global.scss related to the styling of fieldset.rows and contents. The old CSS is more verbose but it has been better proven to hold up in a variety of situations. The patch makes only one template change, a minor correction to the basket groups form. To test, apply the patch and rebuild the staff interface SCSS. Test as many forms as possible to confirm that everything is still correct. Forms affected are ones shown in the main body of the page, not in sidebars. Some good examples: Editing patrons, subscriptions, patron categories, notices, item types. This patch should help outstanding bugs 32513, 32543, and 32591
Created attachment 146349 [details] [review] Bug 32605: (follow-up) Additional fixes This patch makes some further changes to form CSS in order to improve consistency. Some templates have also been modified to improve layout. - Acquisitions -> New vendor - Staff interface home -> Patrons requesting modifications - Reports -> Saved SQL reports - Serials -> New subscription - Tools -> Import patrons
(In reply to David Nind from comment #6) > 5. Label alignment when wrapped: previously input fields were centered on > the label, now aligned to the top of the label This is intentional. > - primary phone, secondary phone, secondary email fields, ZIP/Postal code: > these labels are wrapped now, previously they were on one line This is to be expected. > - "Allow auto-renewal of items": label indented - starts where other input > fields are > - Patron identity: raido buttons start where otehr input fields are This is the intended layout. > Patron category: > Edit patron card layout > Import patrons These pages should be improved.
Created attachment 146359 [details] [review] Bug 32605: Restore some form styling from before the redesign This patch pulls styles from pre-22.11 staff-global.scss related to the styling of fieldset.rows and contents. The old CSS is more verbose but it has been better proven to hold up in a variety of situations. The patch makes only one template change, a minor correction to the basket groups form. To test, apply the patch and rebuild the staff interface SCSS. Test as many forms as possible to confirm that everything is still correct. Forms affected are ones shown in the main body of the page, not in sidebars. Some good examples: Editing patrons, subscriptions, patron categories, notices, item types. This patch should help outstanding bugs 32513, 32543, and 32591 Signed-off-by: David Nind <david@davidnind.com>
Created attachment 146360 [details] [review] Bug 32605: (follow-up) Additional fixes This patch makes some further changes to form CSS in order to improve consistency. Some templates have also been modified to improve layout. - Acquisitions -> New vendor - Staff interface home -> Patrons requesting modifications - Reports -> Saved SQL reports - Serials -> New subscription - Tools -> Import patrons Signed-off-by: David Nind <david@davidnind.com>
Thanks Owen for the additional information and fixing the issues identified. I've signed off, even though I haven't checked every form. I'm making a big assumption that follow-up bugs will be created for any identified issues once this passes QA and gets pushed.
Created attachment 146495 [details] [review] Bug 32605: Restore some form styling from before the redesign This patch pulls styles from pre-22.11 staff-global.scss related to the styling of fieldset.rows and contents. The old CSS is more verbose but it has been better proven to hold up in a variety of situations. The patch makes only one template change, a minor correction to the basket groups form. To test, apply the patch and rebuild the staff interface SCSS. Test as many forms as possible to confirm that everything is still correct. Forms affected are ones shown in the main body of the page, not in sidebars. Some good examples: Editing patrons, subscriptions, patron categories, notices, item types. This patch should help outstanding bugs 32513, 32543, and 32591 Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Created attachment 146496 [details] [review] Bug 32605: (follow-up) Additional fixes This patch makes some further changes to form CSS in order to improve consistency. Some templates have also been modified to improve layout. - Acquisitions -> New vendor - Staff interface home -> Patrons requesting modifications - Reports -> Saved SQL reports - Serials -> New subscription - Tools -> Import patrons Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
All looks good to me.. Passing QA
Pushed to master for 23.05. Nice work everyone, thanks!
Nice work everyone! Pushed to 22.11.x for next release
Missing dependencies for 22.05.x, no backport.
We think this might be the culprit causing the regression in the screenshots added to the end of bug 32022 earlier.
Bug 34072 is the cause.