Bug 35689

Summary: Add id and classes to each MARC note in OPAC bibliographic details
Product: Koha Reporter: Owen Leonard <oleonard>
Component: OPACAssignee: Owen Leonard <oleonard>
Status: Pushed to oldstable --- QA Contact: Kyle M Hall <kyle>
Severity: enhancement    
Priority: P5 - low CC: fridolin.somers, kyle, lucas
Version: Main   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Trivial patch
Documentation contact: Documentation submission:
Text to go in the release notes:
This enhancement adds id and class attributes to each MARC note in the description tab for the OPAC bibliographic detail page. It adds a unique id for each note (for unique styling of each repeated tag), and a general and unique class for each tag (for consistent styling across the same tag number). An example of the HTML output: ``` <p id="marcnote-500-2" class="marcnote marcnote-500">...</p> ``` Styles can be defined for notes and individual tags in the `OPACUserCSS` system preference - see the test plan for an example.
Version(s) released in:
24.05.00,23.11.06,23.05.12
Bug Depends on: 14156    
Bug Blocks:    
Attachments: Bug 35689: Add id and classes to each MARC note in OPAC bibliographic details
Bug 35689: Add id and classes to each MARC note in OPAC bibliographic details
Bug 35689: Add id and classes to each MARC note in OPAC bibliographic details

Description Owen Leonard 2024-01-03 16:00:45 UTC
Same as Bug 14156 but in the OPAC. Add an id and class attributes to each note in the title notes tab.

Replacing this HTML:

<div id="marcnotes">
    <p> Antonio Chavarrias</p>
    <p>Tristan Ulloa, Unax Ugalde</p>
    <p>The great virtue in this film is the persistent sense that something pretty bad is on it's way.</p>
</div>


With this:


<div id="marcnotes">
    <p id="marcnote-508-1" class="marcnote marcnote-508"> Antonio Chavarrias</p>
    <p id="marcnote-511-1" class="marcnote marcnote-511">Tristan Ulloa, Unax Ugalde</p>
    <p id="marcnote-520-1" class="marcnote marcnote-520">The great virtue in this film is the persistent sense that something pretty bad is on it's way.</p>
</div>
Comment 1 Owen Leonard 2024-01-03 16:07:06 UTC
Created attachment 160474 [details] [review]
Bug 35689: Add id and classes to each MARC note in OPAC bibliographic details

Building on Bug 14156, this patch updates the OPAC bibliographic
detail page's display of MARC notes to add the tag number in both a
class (for consistent styling across the same tag number) and id (for
unique styling for each repeated tag).

To test:

- As a quick test for custom CSS, go to Administration -> System
  preferences and locate the OPACUserCSS preference.
  - Add this testing CSS:

   .marcnote { font-size:140%; font-family: serif; }
   .marcnote-500 { background-color: #66FFCC; }
   .marcnote-511 { background-color: #99FFFF; }
   .marcnote-520 { background-color: #CCFF00; }
   .marcnote-521 { background-color: #CCFFFF; }
   .marcnote-538 { background-color: #FFCCCC; }
   .marcnote-546 { background-color: #FFFFCC; }

- Locate a record with multiple notes fields. In the sample data, record
  46, "Viridiana" is a good example which works well with the above CSS.
- On the bibliographic detail page for the record, click the
  "Descriptions" tab.
  - Each MARC note should be colored according to the tag it comes from.
  - Inspect the HTML to confirm that each paragraph also has its own
    unique ID.
Comment 2 Lucas Gass 2024-01-03 16:11:41 UTC
Created attachment 160475 [details] [review]
Bug 35689: Add id and classes to each MARC note in OPAC bibliographic details

Building on Bug 14156, this patch updates the OPAC bibliographic
detail page's display of MARC notes to add the tag number in both a
class (for consistent styling across the same tag number) and id (for
unique styling for each repeated tag).

To test:

- As a quick test for custom CSS, go to Administration -> System
  preferences and locate the OPACUserCSS preference.
  - Add this testing CSS:

   .marcnote { font-size:140%; font-family: serif; }
   .marcnote-500 { background-color: #66FFCC; }
   .marcnote-511 { background-color: #99FFFF; }
   .marcnote-520 { background-color: #CCFF00; }
   .marcnote-521 { background-color: #CCFFFF; }
   .marcnote-538 { background-color: #FFCCCC; }
   .marcnote-546 { background-color: #FFFFCC; }

- Locate a record with multiple notes fields. In the sample data, record
  46, "Viridiana" is a good example which works well with the above CSS.
- On the bibliographic detail page for the record, click the
  "Descriptions" tab.
  - Each MARC note should be colored according to the tag it comes from.
  - Inspect the HTML to confirm that each paragraph also has its own
    unique ID.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 3 Kyle M Hall 2024-04-12 12:21:55 UTC
Created attachment 164843 [details] [review]
Bug 35689: Add id and classes to each MARC note in OPAC bibliographic details

Building on Bug 14156, this patch updates the OPAC bibliographic
detail page's display of MARC notes to add the tag number in both a
class (for consistent styling across the same tag number) and id (for
unique styling for each repeated tag).

To test:

- As a quick test for custom CSS, go to Administration -> System
  preferences and locate the OPACUserCSS preference.
  - Add this testing CSS:

   .marcnote { font-size:140%; font-family: serif; }
   .marcnote-500 { background-color: #66FFCC; }
   .marcnote-511 { background-color: #99FFFF; }
   .marcnote-520 { background-color: #CCFF00; }
   .marcnote-521 { background-color: #CCFFFF; }
   .marcnote-538 { background-color: #FFCCCC; }
   .marcnote-546 { background-color: #FFFFCC; }

- Locate a record with multiple notes fields. In the sample data, record
  46, "Viridiana" is a good example which works well with the above CSS.
- On the bibliographic detail page for the record, click the
  "Descriptions" tab.
  - Each MARC note should be colored according to the tag it comes from.
  - Inspect the HTML to confirm that each paragraph also has its own
    unique ID.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Comment 4 Katrin Fischer 2024-04-29 07:38:17 UTC
Pushed for 24.05!

Well done everyone, thank you!
Comment 5 Fridolin Somers 2024-05-24 09:32:30 UTC
Nice small enhancement, I backport

Pushed to 23.11.x for 23.11.06
Comment 6 Lucas Gass 2024-05-28 20:46:21 UTC
Backported to 23.05.x for upcoming 23.05.12