Bug 35511 - Add visual indicators of patron edit form collapsible sections
Summary: Add visual indicators of patron edit form collapsible sections
Status: Passed QA
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on: 35510
Blocks:
  Show dependency treegraph
 
Reported: 2023-12-06 17:59 UTC by Owen Leonard
Modified: 2024-04-15 11:03 UTC (History)
4 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:


Attachments
Bug 35511: Add visual indicators of patron edit form collapsible sections (22.42 KB, patch)
2023-12-19 16:14 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 35511: Add visual indicators of patron edit form collapsible sections (22.47 KB, patch)
2023-12-19 22:36 UTC, David Nind
Details | Diff | Splinter Review
Bug 35511: Add visual indicators of patron edit form collapsible sections (22.51 KB, patch)
2024-04-12 15:11 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 35511: (follow-up) Tweaks to CSS, adding aria-hidden to icons (8.66 KB, patch)
2024-04-12 15:11 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 35511: Add visual indicators of patron edit form collapsible sections (22.56 KB, patch)
2024-04-15 11:03 UTC, Kyle M Hall
Details | Diff | Splinter Review
Bug 35511: (follow-up) Tweaks to CSS, adding aria-hidden to icons (8.71 KB, patch)
2024-04-15 11:03 UTC, Kyle M Hall
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-12-06 17:59:23 UTC
On the patron add/edit form there is no visible sign that the heading of each section is clickable other than the cursor change. I think adding some style there will help avoid accidentally clicking the heading unintentionally.
Comment 1 Owen Leonard 2023-12-19 16:14:14 UTC
Created attachment 160033 [details] [review]
Bug 35511: Add visual indicators of patron edit form collapsible sections

This patch updates CSS and markup in the patron add/edit form so that
there is better visual indication that sections can be collapsed by
clicking headings.

The JS function for showing and hiding sections has also been updated to
reduce verbosity.

Unrelated markup change for the sake of accessibility: A <label> has
been added to the "Show collapsed fields" checkbox which is seen when
CollapseFieldsPatronAddForm is active.

To test, apply the patch and go to Patrons -> New patron.

- Each section of the form should have an arrow indicator by the section
  heading indicating whether it is expanded or collapsed.
- Mousing over the heading should show a border to help show the
  clickable region.
- Clicking the header should collapse the section and the arrow
  indicator should change to reflect that the section is collapsed.
- Go to Administration -> Sytem preferences and search for
  CollapseFieldsPatronAddForm.
- Make some selections from the dropdown and save your changes.
- Return to the patron entry form and confirm that your selections are
  collapsed by default.
Comment 2 David Nind 2023-12-19 22:36:42 UTC
Created attachment 160087 [details] [review]
Bug 35511: Add visual indicators of patron edit form collapsible sections

This patch updates CSS and markup in the patron add/edit form so that
there is better visual indication that sections can be collapsed by
clicking headings.

The JS function for showing and hiding sections has also been updated to
reduce verbosity.

Unrelated markup change for the sake of accessibility: A <label> has
been added to the "Show collapsed fields" checkbox which is seen when
CollapseFieldsPatronAddForm is active.

To test, apply the patch and go to Patrons -> New patron.

- Each section of the form should have an arrow indicator by the section
  heading indicating whether it is expanded or collapsed.
- Mousing over the heading should show a border to help show the
  clickable region.
- Clicking the header should collapse the section and the arrow
  indicator should change to reflect that the section is collapsed.
- Go to Administration -> Sytem preferences and search for
  CollapseFieldsPatronAddForm.
- Make some selections from the dropdown and save your changes.
- Return to the patron entry form and confirm that your selections are
  collapsed by default.

Signed-off-by: David Nind <david@davidnind.com>
Comment 3 Kyle M Hall 2024-04-12 12:15:17 UTC
Getting "error: sha1 information is lacking or useless (koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt)." when I try to apply the patch.
Comment 4 Owen Leonard 2024-04-12 15:11:14 UTC
Created attachment 164852 [details] [review]
Bug 35511: Add visual indicators of patron edit form collapsible sections

This patch updates CSS and markup in the patron add/edit form so that
there is better visual indication that sections can be collapsed by
clicking headings.

The JS function for showing and hiding sections has also been updated to
reduce verbosity.

Unrelated markup change for the sake of accessibility: A <label> has
been added to the "Show collapsed fields" checkbox which is seen when
CollapseFieldsPatronAddForm is active.

To test, apply the patch and go to Patrons -> New patron.

- Each section of the form should have an arrow indicator by the section
  heading indicating whether it is expanded or collapsed.
- Mousing over the heading should show a border to help show the
  clickable region.
- Clicking the header should collapse the section and the arrow
  indicator should change to reflect that the section is collapsed.
- Go to Administration -> Sytem preferences and search for
  CollapseFieldsPatronAddForm.
- Make some selections from the dropdown and save your changes.
- Return to the patron entry form and confirm that your selections are
  collapsed by default.

Signed-off-by: David Nind <david@davidnind.com>
Comment 5 Owen Leonard 2024-04-12 15:11:16 UTC
Created attachment 164853 [details] [review]
Bug 35511: (follow-up) Tweaks to CSS, adding aria-hidden to icons
Comment 6 Kyle M Hall 2024-04-15 11:03:47 UTC
Created attachment 164873 [details] [review]
Bug 35511: Add visual indicators of patron edit form collapsible sections

This patch updates CSS and markup in the patron add/edit form so that
there is better visual indication that sections can be collapsed by
clicking headings.

The JS function for showing and hiding sections has also been updated to
reduce verbosity.

Unrelated markup change for the sake of accessibility: A <label> has
been added to the "Show collapsed fields" checkbox which is seen when
CollapseFieldsPatronAddForm is active.

To test, apply the patch and go to Patrons -> New patron.

- Each section of the form should have an arrow indicator by the section
  heading indicating whether it is expanded or collapsed.
- Mousing over the heading should show a border to help show the
  clickable region.
- Clicking the header should collapse the section and the arrow
  indicator should change to reflect that the section is collapsed.
- Go to Administration -> Sytem preferences and search for
  CollapseFieldsPatronAddForm.
- Make some selections from the dropdown and save your changes.
- Return to the patron entry form and confirm that your selections are
  collapsed by default.

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Comment 7 Kyle M Hall 2024-04-15 11:03:53 UTC
Created attachment 164874 [details] [review]
Bug 35511: (follow-up) Tweaks to CSS, adding aria-hidden to icons

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>