Bug 35689 - Add id and classes to each MARC note in OPAC bibliographic details
Summary: Add id and classes to each MARC note in OPAC bibliographic details
Status: Pushed to oldstable
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement
Assignee: Owen Leonard
QA Contact: Kyle M Hall (khall)
URL:
Keywords:
Depends on: 14156
Blocks:
  Show dependency tree / graph
 
Reported: 2024-01-03 16:00 UTC by Owen Leonard
Modified: 2024-05-28 20:46 UTC (History)
3 users (show)

See Also:
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
Circulation function:

Attachments
Bug 35689: Add id and classes to each MARC note in OPAC bibliographic details (3.24 KB, patch)
2024-01-03 16:07 UTC, Owen Leonard 		Details | Diff | Splinter Review
Bug 35689: Add id and classes to each MARC note in OPAC bibliographic details (3.29 KB, patch)
2024-01-03 16:11 UTC, Lucas Gass (lukeg) 		Details | Diff | Splinter Review
Bug 35689: Add id and classes to each MARC note in OPAC bibliographic details (3.35 KB, patch)
2024-04-12 12:21 UTC, Kyle M Hall (khall) 		Details | Diff | Splinter Review
Show Obsolete (2) View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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 (lukeg) 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 (khall) 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 (lukeg) 2024-05-28 20:46:21 UTC 
Backported to 23.05.x for upcoming 23.05.12