Bug 37222 - Standardize markup for sidebar menus
Summary: Standardize markup for sidebar menus
Status: Needs Signoff
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:
Blocks: 37250
  Show dependency treegraph
 
Reported: 2024-06-28 17:46 UTC by Owen Leonard
Modified: 2024-07-08 15:31 UTC (History)
1 user (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 37222: Standardize markup for sidebar menus (68.57 KB, patch)
2024-06-28 17:56 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (91.84 KB, patch)
2024-07-05 16:37 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (91.93 KB, patch)
2024-07-05 18:05 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (97.33 KB, patch)
2024-07-08 15:31 UTC, Owen Leonard
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2024-06-28 17:46:03 UTC
We've got a couple of different ways we're marking up sidebar menus, and we're limiting ourselves by tying the style to an ID. There are a few cases where we want to include more than one menu in the sidebar and we shouldn't have to update CSS just to make them consistent.

I'm proposing: 

    <div id="circ-menu" class="sidebar_menu">
       <ul>
          ...
       </ul>
    </div>
Comment 1 Owen Leonard 2024-06-28 17:56:33 UTC
Created attachment 168285 [details] [review]
Bug 37222: Standardize markup for sidebar menus

This patch updates sidebar menu markup so that it's consistent, with a
common class (".sidebar_menu") and a unique ID. The style is tied to the
class rather than the ID, simplifying the CSS.

Note: This patch contains indentation changes so ignore whitespace when
viewing the diff.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)

Check pages which contain each modified menu:

- Circulation -> Check out to a patron
- Catalog -> View a bibliographic record
- Administration -> View system preferences
- Acquisitions -> Acquisitions home
- Cataloging -> Stock rotation -> Manage stages and manage items for a
  rotation
- Cataloging -> Stage MARC records for import
- Reports -> Acquisitions statistics
- Reports -> View dictionary
- Point of sale
- E-resource management
- Preservation
- Serials
- Tools -> Patron lists

Sponsored-by: Athens County Public Libraries
Comment 2 David Nind 2024-07-04 00:45:57 UTC
From my testing, the sidebar menu items are not highlighted when you are on the respective page, or a page related to that menu area.

Here are my initial notes for each area I checked:

- Circulation > Check out to a patron: is a bullet pointed list without styling

- Catalog > View a bibliographic record: OK

- Administration > View system preferences: selected group does not have a light background for sections

- Acquisitions > Acquisitions home: Acquisitions home not highlighted

- Cataloging > Stock rotation > Manage stages and manage items for a rotation: 
  . Stock rotation sidebar menu item not highlighted
  . When on other pages (Manage stages, Manage items), those are highlighted as expected at the top of the sidebar menu, but stock rotation further down the sidebar isn't (it is highlighted before the patch)

- Cataloging > Stage MARC records for import: Stage records for import sidebar menu item not highlighted (same for Managed staged records sidebar menu item)

- Reports > Acquisitions statistics: sidebar menu item not highlighted, and not highlighted on the report results page (same for other reports)

- Reports > View dictionary: sidebar menu item not highlighted

- Point of sale: sidebar menu items not highlighted

- E-resource management: tree of sub menu items not indented

- Preservation: seems OK, but I didn't add any data

- Serials: seems OK

- Tools > Patron lists: sidebar menu items not highlighted

Happy to add some screenshots if that would make it easy to understand my notes.

Testing notes (using KTD):
1. Rebuild the CSS and JS: yarn build
2. Enable these system preferences (and add appropriate data):
   - StockRotation: add a rota and items to the rota
   - ERMModule 
   - PreservationModule
   - EnablePointOfSale
   - UseCashRegisters (and add a cash register)
Comment 3 Owen Leonard 2024-07-05 16:37:47 UTC
Created attachment 168560 [details] [review]
Bug 37222: Standardize markup for sidebar menus

This patch updates sidebar menu markup so that it's consistent, with a
common class (".sidebar_menu") and a unique ID. The style is tied to the
class rather than the ID, simplifying the CSS.

Note: This patch contains indentation changes so ignore whitespace when
viewing the diff.

The updated patch contains corrections to JavaScript which needed
selectors to be changed to match the new markup.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)

Check pages which contain each modified menu:

- Circulation -> Check out to a patron
- Catalog -> View a bibliographic record
- Administration -> View system preferences
- Acquisitions -> Acquisitions home
- Cataloging -> Stock rotation -> Manage stages and manage items for a
  rotation
- Cataloging -> Stage MARC records for import
- Reports -> Acquisitions statistics
- Reports -> View dictionary
- Point of sale
- E-resource management
- Preservation
- Serials
- Tools -> Patron lists

Sponsored-by: Athens County Public Libraries
Comment 4 Owen Leonard 2024-07-05 18:05:50 UTC
Created attachment 168562 [details] [review]
Bug 37222: Standardize markup for sidebar menus

This patch updates sidebar menu markup so that it's consistent, with a
common class (".sidebar_menu") and a unique ID. The style is tied to the
class rather than the ID, simplifying the CSS.

Note: This patch contains indentation changes so ignore whitespace when
viewing the diff.

The updated patch contains corrections to JavaScript which needed
selectors to be changed to match the new markup.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)

Check pages which contain each modified menu:

- Circulation -> Check out to a patron
- Catalog -> View a bibliographic record
- Administration -> View system preferences
- Acquisitions -> Acquisitions home
- Cataloging -> Stock rotation -> Manage stages and manage items for a
  rotation
- Cataloging -> Stage MARC records for import
- Reports -> Acquisitions statistics
- Reports -> View dictionary
- Point of sale
- E-resource management
- Preservation
- Serials
- Tools -> Patron lists

Sponsored-by: Athens County Public Libraries
Comment 5 David Nind 2024-07-07 03:39:22 UTC
Thanks Owen!

I've had another go at testing. 

These items remain:

1. Circulation > Check out to a patron: I went to Circulation from the home page, then "Check out" from the circulation page. The sidebar menu is still a bulleted list without styling - this is the same for all other areas of Circulation where the sidebar menu is displayed:
  . In the patch, I can't match the before markup (<div id="menu">) with what is on the actual page HTML before the patch is applied
  . In the patch, the updated markup is: <div id="circ-menu" class="sidebar_menu">
  . On the page after the patch is applied, the markup is: <div id="circ-menu"> (both for Firefox and Chromium)

2. Administration > View system preferences: no change from previous testing - the section you are on (such as Administration) does not have a light background for the sub sidebar menu options for that section (for example - CAS authentication to Share anonymous usage statistics has the normal gray background, not the light gray background). (As an aside, I think I preferred the way it was before the theme update - with the submenus aligned to the right and the same text size as the group heading.)

3. Cataloging > Stock rotation > Manage stages and manage items for a rotation:  
  . When on other pages (Manage stages, Manage items), those are highlighted as expected at the top of the sidebar menu, but stock rotation further down the sidebar isn't (it was highlighted before the patch).


Other areas - either fixed or the same behavour as before the patch
===================================================================

- Catalog > View a bibliographic record: OK

- Acquisitions > Acquisitions home: OK and improvements (when on vendor page, highlights appropriate vendor sidebar menu items - didn't before) (fixed - Acquisitions home not highlighted):
  . Note that while the behavour remains the same for the vendor sidebar menu, it is a little inconsistent, but outside the scope of this bug I think:
    . Baskets: displays vendor sidebar menu + the full sidebar menu
    . Basket groups: displays vendor sidebar menu + the full sidebar menu
    . Contracts: vendor sidebar menu disappears, and displays the full sidebar menu
    . Vendor issues: only shows the vendor sidebar menu 
    . Invoices: vendor sidebar menu disappears, and displays the search filters and the full sidebar menu with Invoices highlighted
    . Uncertain prices: only shows the vendor sidebar menu 

- Cataloging > Stage MARC records for import: OK (fixed - Stage records for import sidebar menu item not highlighted (same for Managed staged records sidebar menu item))

- Reports > Acquisitions statistics: OK (fixed - sidebar menu item not highlighted, and not highlighted on the report results page (same for other reports))

- Reports > View dictionary: OK (fixed - sidebar menu item not highlighted)

- Point of sale: OK (fixed - sidebar menu items not highlighted)

- E-resource management: OK (fixed - tree of sub menu items not indented)

- Preservation: seems OK, but I didn't add any data

- Serials: OK

- Tools > Patron lists: OK (fixed - sidebar menu items not highlighted)
Comment 6 Owen Leonard 2024-07-08 15:31:34 UTC
Created attachment 168595 [details] [review]
Bug 37222: Standardize markup for sidebar menus

This patch updates sidebar menu markup so that it's consistent, with a
common class (".sidebar_menu") and a unique ID. The style is tied to the
class rather than the ID, simplifying the CSS.

Note: This patch contains indentation changes so ignore whitespace when
viewing the diff.

The updated patch contains corrections to JavaScript which needed
selectors to be changed to match the new markup.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)

Check pages which contain each modified menu:

- Circulation -> Check out to a patron
- Catalog -> View a bibliographic record
- Administration -> View system preferences
- Acquisitions -> Acquisitions home
- Cataloging -> Stock rotation -> Manage stages and manage items for a
  rotation
- Cataloging -> Stage MARC records for import
- Reports -> Acquisitions statistics
- Reports -> View dictionary
- Point of sale
- E-resource management
- Preservation
- Serials
- Tools -> Patron lists

Sponsored-by: Athens County Public Libraries