Bug 33701 - Catalogue detail page no longer shows all tab data when printing
Summary: Catalogue detail page no longer shows all tab data when printing
Status: Failed QA
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: Main
Hardware: All All
: P5 - low minor
Assignee: David Cook
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2023-05-09 02:17 UTC by David Cook
Modified: 2023-05-11 02:58 UTC (History)
1 user (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments
Bug 33701: Display all tab content when printing staff cat detail page (1.17 KB, patch)
2023-05-09 02:47 UTC, David Cook
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description David Cook 2023-05-09 02:17:49 UTC
Before the staff interface styling change, the data for the tabs "Holdings", "Descriptions", "Acquisition details", "Images", etc would be printed out vertically when printing the detail page.

Now, when printing the detail page in the staff interface, it just shows the tab headings and the content/data for the active tab.
Comment 1 David Cook 2023-05-09 02:46:55 UTC
I'm attaching a patch which will work but there's more print CSS work to do on this page, and we might want to consider an alternative approach across the board.
Comment 2 David Cook 2023-05-09 02:47:16 UTC
Created attachment 150819 [details] [review]
Bug 33701: Display all tab content when printing staff cat detail page

This change adds some print CSS to display all tab content when printing
the catalogue detail page on the staff interface.

Test plan:
1. Apply patch
2. Go to http://localhost:8081/cgi-bin/koha/catalogue/detail.pl?biblionumber=29
3. Click "Print" on the toolbar
4. Note that the "Descriptions" and "Acquisition details" also appear on the
printed page
Comment 3 Katrin Fischer 2023-05-09 20:57:22 UTC
It looks like the print layout was much better in the old design, something that slipped through unnoticed so far. For example navigation items and sidebar should be hidden. 

But this really feels like it should be fixed globally for printing tabs instead of only for the staff detail view.

Another example is printing the patron account details/checkouts pages, holds awaiting pick-up etc.

Is there a way the headings could be displayed above each content section? (asking, not blocker)
Comment 4 David Cook 2023-05-09 23:30:26 UTC
(In reply to Katrin Fischer from comment #3)
> It looks like the print layout was much better in the old design, something
> that slipped through unnoticed so far. For example navigation items and
> sidebar should be hidden. 

Yeah I was thinking the same thing. The old print layout was quite nice really. 

I can see why it slipped past though. I don't know why people print webpages...

> But this really feels like it should be fixed globally for printing tabs
> instead of only for the staff detail view.

Agreed. I'm not familiar enough with the whole design to know how to do it. But happy to help someone who does.

> Another example is printing the patron account details/checkouts pages,
> holds awaiting pick-up etc.

I think we might need to define a class like "print-visible" and then apply it to each tab panel on each page individually. I think the same classes are used for all the tabs at the moment, which makes it tough to isolate certain parts of the page.

But hopefully a person more focused on the frontend UI can weigh in on that one..

> Is there a way the headings could be displayed above each content section?
> (asking, not blocker)

Not that I know of since the HTML for the tab headings and tab contents are in different spots, but someone else might have an idea for that.
Comment 5 David Cook 2023-05-11 02:58:40 UTC
For now, I'm just going to work around this using the syspref IntranetUserCSS:

@media print {
  /* print-visible */
  #bibliodetails .tab-pane {
      display: block !important;
      height: auto !important;
      visibility: visible !important;
      overflow: visible !important;
  }
}