Bug 32605 - Restore some form styling from before the redesign
Summary: Restore some form styling from before the redesign
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: Main
Hardware: All All
: P5 - low normal (vote)
Assignee: Owen Leonard
QA Contact: Martin Renvoize
URL:
Keywords:
Depends on: 30952
Blocks:
  Show dependency treegraph
 
Reported: 2023-01-10 16:54 UTC by Owen Leonard
Modified: 2023-08-30 10:01 UTC (History)
5 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
23.05.00,22.11.03


Attachments
Bug 32605: Restore some form styling from before the redesign (8.77 KB, patch)
2023-01-10 18:59 UTC, Owen Leonard
Details | Diff | Splinter Review
Screenshot - patron card layout form (88.65 KB, image/png)
2023-01-31 21:50 UTC, David Nind
Details
Bug 32605: Restore some form styling from before the redesign (8.77 KB, patch)
2023-02-07 17:36 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 32605: (follow-up) Additional fixes (14.87 KB, patch)
2023-02-07 17:36 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 32605: Restore some form styling from before the redesign (8.82 KB, patch)
2023-02-07 21:15 UTC, David Nind
Details | Diff | Splinter Review
Bug 32605: (follow-up) Additional fixes (14.92 KB, patch)
2023-02-07 21:16 UTC, David Nind
Details | Diff | Splinter Review
Bug 32605: Restore some form styling from before the redesign (8.88 KB, patch)
2023-02-10 16:41 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 32605: (follow-up) Additional fixes (14.99 KB, patch)
2023-02-10 16:41 UTC, Martin Renvoize
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2023-01-10 16:54:37 UTC
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.
Comment 1 Owen Leonard 2023-01-10 18:59:11 UTC
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
Comment 2 Jonathan Druart 2023-01-11 08:06:21 UTC
I don't see any differences on the patron edit form. Where am I supposed to look at?
Comment 3 Owen Leonard 2023-01-12 15:35:41 UTC
Most forms should look the same. Others, referenced in the outstanding bugs listed above, should look better.
Comment 4 Marie-Luce Laflamme 2023-01-12 17:56:55 UTC
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
Comment 5 Owen Leonard 2023-01-13 15:21:13 UTC
(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.
Comment 6 David Nind 2023-01-31 21:50:14 UTC
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
Comment 7 Owen Leonard 2023-02-07 17:36:36 UTC
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
Comment 8 Owen Leonard 2023-02-07 17:36:39 UTC
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
Comment 9 Owen Leonard 2023-02-07 17:56:47 UTC
(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.
Comment 10 David Nind 2023-02-07 21:15:58 UTC
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>
Comment 11 David Nind 2023-02-07 21:16:01 UTC
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>
Comment 12 David Nind 2023-02-07 21:18:21 UTC
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.
Comment 13 Martin Renvoize 2023-02-10 16:41:47 UTC
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>
Comment 14 Martin Renvoize 2023-02-10 16:41:50 UTC
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>
Comment 15 Martin Renvoize 2023-02-10 16:42:26 UTC
All looks good to me.. Passing QA
Comment 16 Tomás Cohen Arazi 2023-02-15 12:34:38 UTC
Pushed to master for 23.05.

Nice work everyone, thanks!
Comment 17 Pedro Amorim 2023-02-16 10:35:05 UTC
Nice work everyone!

Pushed to 22.11.x for next release
Comment 18 Lucas Gass 2023-03-01 13:56:43 UTC
Missing dependencies for 22.05.x, no backport.
Comment 19 Martin Renvoize 2023-07-18 16:51:43 UTC
We think this might be the culprit causing the regression in the screenshots added to the end of bug 32022 earlier.
Comment 20 Owen Leonard 2023-07-18 18:14:27 UTC
 Bug 34072 is the cause.