Develop print.css for printing work show pages, others

[raybrarian]

Descriptive summary

Users who want to print from a work show page should get a clean, well-formatted representation of the page contents, including:

• Work title
• What is currently showing in the viewer (image, thumbnail, etc.)
• All metadata (even if collapsed in online view)
• The citation
• The license information
• The page URL

Emphasis is on work show page to get this complex page rendered in print correctly first as it is likely to be the page type printed most often.

Expected behavior

Pages print with all of the information in an easy to read format. Other pages printed from the site print in a similar way (no styling for the work show page should break or disrupt print styles for other pages)

Related work

612

Accessibility Concerns

Ensure print formatting has readable text sizes for most end users (should be nothing smaller than ~12-14 point type)

QA

Test printed page for work show page, home page, collection page against css.

[kmthorn]

Azle is waiting for the green light to start this work from Corey

[CGillen]

@azle will work on after finalized wireframes are finished

[straleyb]

Associated with wireframes.

[azle]

@CGillen here is the css code let me know if it works or if I need to send you a file. Adding it here to keep track of what I have sent so I don't send you duplicates.

/* display none: global */
.masthead, #skip-nav, .breadcrumb, #user-login-modal, .site-footer {display: none;}

/* print style for workshow page: https://staging.oregondigital.org/concern/generics/df70sk17p?locale=en */
/ * display none: workshow page */
hr, .show-actions, .modal-header, #collection-list-container, #collection-create-container, .pull-right .social-buttons, .pull-right .copy-button, .social-media .pull-right, #work-show-tablist, #contact_us .form-tab-content, #data_sources .form-tab-content, .contained-in { display: none; }

WorkShowPage.pdf

[azle]

@CGillen here is the css code for collection landing page. Let me know if you have questions. The grid of thumbnails caused issues when elements were removed so had to add some css style to them to get them to print correctly.

/* print style for collection homepage: https://staging.oregondigital.org/collections/dan-powell?locale=en */

/* space between title and description text */
.hyc-title, .hyc-desc { padding: 10px 0;}

/* display none: collection homepage */
.btn-link, .metadata-expand, .institution-footer, .social-links, .flex-container, .text-center .collection-search-header, .advanced-search-form, .flex-container,  {display: none;}

/* grid images: need this css style to print thumbnails correctly */

.hyc-bl-collection, #thumbnails, {clear: both;}

.masonry .collection .document {
  position: relative;
  float: left;
  padding: 15px;
}

CollectionHomepage.pdf

[azle]

@CGillen here is the css code for the search collection. I didn't have any issue with the ordering of the thumbnail images.

* print style for search results collection: https://staging.oregondigital.org/catalog?locale=en&f[non_user_collections_ssim][]=ohba */

/* display none: search result */

.widget-wrapper, #sortAndPerPage, #collection-list-container, #collection-create-container, #select-and-deselect, #facets, .pagination { display: none;}

SearchResults.pdf

[azle]

@CGillen ATTEMPT 3 FOR COLLECTION LANDING PAGE.

NOTE: Explore collection masonry view may also have the same layout as the collection landing page. I am running into the same overlapping issue as collection landing page.

/* institution logo top and bottom padding */

.institution-header {
  padding: 30px 0px;
}

/* display none: collection landing */

.metadata-expand, .institution-footer, .social-links, .lime-green-hr, .collection-landing-button, .collection-search-header, .advanced-search-form, .collection-landing-button { display: none; }

CollectionLandingV3.pdf

[azle]

@CGillen, explore collection list page.

/* explore collection list view: https://staging.oregondigital.org/collections/all?locale=en&view=table */

tbody { text-align: left; }

[azle]

@CGillen, homepage

/* homepage view: https://staging.oregondigital.org/?locale=en */

/* display none: homepage */
.background-container, .homepage-nav,  { display: none;}

[azle]

@CGillen, so I was experimenting for the masonry view. If we remove the left and top from each of the items and replace position: absolute with position: static. I was able to get the natural order of the thumbnail images.

Code should look like this:

Here is the print pdf: ExploreCollectionGrid_test.pdf

NOTE: This also works for the collection landing page. I also tried it without having to delete top and left and it also worked. it just needs absolute to be replaced with static.

[azle]

Pages that have print css applied and ready to test:

Not logged user: Homepage (pass: Mac: firefox, chrome, safari PC: chrome, firefox and edge) All About pages (pass: Mac: firefox, chrome, safari PC: chrome, firefox and edge) Explore Collections Collection Landing (pass: Mac: firefox, chrome, safari PC: chrome, firefox and edge) Work show page

[jsimic]

@azle

Chrome on PC Home page: See attached (matches Mac) About pages: All QA pass except Privacy Policy, which is throwing an error on prod Explore Collections: See attached, grid view have very large thumbs! (matches Mac) Collection Landing: QA pass (matches Mac) Work Show page: See attached image cut off (matches Mac)

Firefox on PC Home page: See attached (matches Mac) About pages: All QA pass except Privacy Policy, which is throwing an error on prod Explore Collections:See attached, grid view have very large thumbs! (matches Mac) Collection Landing: QA pass (matches Mac) Work Show page: See attached image cut off (matches Mac)

Edge on PC Home page: See attached (matches Mac) About pages: All QA pass except Privacy Policy, which is throwing an error on prod Explore Collections: See attached, grid view have very large thumbs! (matches Mac) Collection Landing: QA pass (matches Mac) Work Show page: See attached image cut off (matches Mac)

Firefox_Search Results Uo Explore Collections Oregon Digital (Beta).pdf Chrome__Home_Oregon Digital (Beta).pdf Chrome_PH014_b037018 Gertrude Bass Warner photographs Oregon Digital (Beta).pdf ChromeSearch Results All Explore Collections _ Oregon Digital (Beta).pdf Edge_Homepage_Oregon Digital (Beta).pdf Edge_PH014_b037018 Gertrude Bass Warner photographs Oregon Digital (Beta).pdf EdgeSearch Results Uo Explore Collections _ Oregon Digital (Beta).pdf Firefox_Homepage_Oregon Digital (Beta).pdf Firefox_PH014_b037_018 Gertrude Bass Warner photographs Oregon Digital (Beta).pdf

[jsimic]

QA pass for Privacy Policy page

[jsimic]

QA pass for Explore Collections-grid view on PC and Mac

[azle]

@CGillen below are the items that @jsimic and I found for the print css. Otherwise it looks good and both PC and MAC

1. Homepage image thumbnails need to be smaller like how they appear on the grid view pages of search results and on the collection landing page.
2. The single work page the universal viewer is not printing the initial image only printing the caption or alt tag for the image. Here is the example page I tried to print: https://oregondigital.org/concern/images/mg74qm08d?locale=en