WordPress / wordcamp.org

WordCamps are casual, locally-organized conferences covering everything related to WordPress.
https://wordcamp.org
127 stars 69 forks source link

Printing the schedule prints no sessions #1015

Open ryelle opened 1 year ago

ryelle commented 1 year ago

When sessions are favorited, printing the schedule page shows just the favorited sessions. If no sessions have been favorited, the expectation is that the full schedule will print, but instead nothing shows up.

Schedule – WordCamp US 2023.pdf

To reproduce

  1. View a schedule with nothing favorited
  2. Print using the system commands (ex, File > Print)
  3. The schedule is empty

It might also be unexpected that only the favorited sessions print when using the system commands, but changing that might not be technically feasible.

courtneyr-dev commented 2 months ago

This happens in all sessions, not just when they are favorited. Schedule – WordCamp Europe 2024.pdf

Printing and PDF Creation Issue on WordCamp Schedule

Description

When attempting to print or create a PDF of the WordCamp schedule from the WordCamp Europe 2024 Schedule page, only the times are displayed. The session titles and descriptions are missing from the printed or PDF version. Turning off the display:none in the code creates a mobile view which is not ideal for printing.

Steps to Reproduce

  1. Navigate to the WordCamp Europe 2024 Schedule page.
  2. Use the browser’s print function or save the page as a PDF.
  3. Observe that the printed or PDF version only displays the times, without session titles and descriptions.

Expected Results

The printed or PDF version of the schedule should include the session times, titles, and descriptions.

Actual Results

The printed or PDF version only shows the session times, without titles and descriptions.

Additional Information

This issue impacts users who want to have a printed or PDF version of the WordCamp schedule for offline reference. Ensuring that the full schedule, including titles and descriptions, is displayed in print and PDF formats would enhance usability.

Proposed Solution

Investigate and update the CSS/HTML for the schedule page to ensure that all schedule details are included in the printed or PDF version.

Example CSS Fix via @kierahowe


@media print {
    .wordcamp-schedule__session {
        display: block;
    }
    .wordcamp-schedule__column-header {
        display: block;
    } 

    #wordcamp-schedule__day-2024-07-11-tracks-all {
        grid-template-columns: [times] auto [wordcamp-schedule-track-47-start] 1fr [wordcamp-schedule-track-47-end wordcamp-schedule-track-45-start] 1fr [wordcamp-schedule-track-45-end wordcamp-schedule-track-46-start] 1fr [wordcamp-schedule-track-46-end];
        grid-template-rows: [tracks] auto [time-110900] auto [time-110900] auto [time-111150] auto [time-111150] auto [time-111200] auto [time-111250] auto [time-111300] auto [time-111300] auto [time-111650] auto [time-111650] auto;
    }
    #wordcamp-schedule__day-2024-07-12-tracks-all {
        grid-template-columns: [times] auto [wordcamp-schedule-track-47-start] 1fr [wordcamp-schedule-track-47-end wordcamp-schedule-track-45-start] 1fr [wordcamp-schedule-track-45-end wordcamp-schedule-track-46-start] 1fr [wordcamp-schedule-track-46-end];
        grid-template-rows: [tracks] auto [time-120900] auto [time-120950] auto [time-121000] auto [time-121000] auto [time-121000] auto [time-121050] auto [time-121050] auto [time-121050] auto [time-121100] auto [time-121100] auto [time-121100] auto [time-121150] auto [time-121150] auto [time-121150] auto [time-121200] auto [time-121250] auto [time-121300] auto [time-121300] auto [time-121300] auto [time-121350] auto [time-121350] auto [time-121350] auto [time-121400] auto [time-121400] auto [time-121400] auto [time-121450] auto [time-121450] auto [time-121450] auto [time-121500] auto [time-121500] auto [time-121500] auto [time-121550] auto [time-121550] auto [time-121600] auto [time-121600] auto [time-121650] auto [time-121650] auto [time-121650] auto;
    }
    #wordcamp-schedule__day-2024-07-13-tracks-all {
        grid-template-columns: [times] auto [wordcamp-schedule-track-47-start] 1fr [wordcamp-schedule-track-47-end wordcamp-schedule-track-45-start] 1fr [wordcamp-schedule-track-45-end wordcamp-schedule-track-46-start] 1fr [wordcamp-schedule-track-46-end];
        grid-template-rows: [tracks] auto [time-130900] auto [time-130900] auto [time-130900] auto [time-130950] auto [time-130950] auto [time-130950] auto [time-131000] auto [time-131000] auto [time-131000] auto [time-131050] auto [time-131050] auto [time-131050] auto [time-131100] auto [time-131100] auto [time-131100] auto [time-131150] auto [time-131150] auto [time-131150] auto [time-131200] auto [time-131250] auto [time-131300] auto [time-131300] auto [time-131300] auto [time-131350] auto [time-131350] auto [time-131350] auto [time-131400] auto [time-131400] auto [time-131400] auto [time-131450] auto [time-131450] auto [time-131450] auto [time-131500] auto [time-131500] auto [time-131550] auto [time-131550] auto [time-131600] auto [time-131600] auto [time-131600] auto [time-131650] auto [time-131650] auto [time-131650] auto [time-131710] auto [time-131725] auto [time-131735] auto [time-131800] auto [time-131830] auto [time-132330] auto;
    }

    body:not(.block-editor-page) .wordcamp-schedule:not(.is-style-single-column-layout) .wordcamp-schedule__day {
        grid-gap: 1px;
        display: grid;
    }

    body:not(.block-editor-page) .wordcamp-schedule:not(.is-style-single-column-layout) .wordcamp-schedule__time-slot-header {
        background-color: initial;
        grid-column: times;
    }
    body:not(.block-editor-page) .wordcamp-schedule:not(.is-style-single-column-layout) .editor-styles-wrapper h3.wordcamp-schedule__time-slot-header,
    body:not(.block-editor-page) .wordcamp-schedule:not(.is-style-single-column-layout) .wordcamp-schedule__session,
    body:not(.block-editor-page) .wordcamp-schedule:not(.is-style-single-column-layout) .wordcamp-schedule__time-slot-header {
        border: none;
        box-shadow: 0 0 1px 1px #e0e5e9;
        margin-bottom: 0;
        position: relative;
        z-index: 5;
    }

}