Revamp print media formatting

questionlp · May 21, 2023 · 357666b · 357666b
1 parent a1cd325
commit 357666b
Show file tree

Hide file tree

Showing 13 changed files with 70 additions and 37 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Changes
 
+## 5.3.1
+
+### Application Changes
+
+- Revamping of the formatting and styles when printing pages from the site to reduce wasted whitespace and other tweaks, including:
+  - Adding site title at the top of the document
+  - Update the guest, host, location, panelist, scorekeeper and show info blocks to mimic a two-column layout
+  - Change the `main` block to not cause the footer to be pushed to a new page
+  - Render the collection lists in a more compact manner
+  - Correct a few `color` values for a few types of links
+
 ## 5.3.0
 
 ### Application Changes

diff --git a/app/guests/templates/guests/details.html b/app/guests/templates/guests/details.html
@@ -10,15 +10,15 @@ <h2><a href="{{ url_for('guests.details',
     </div>
 </div>
 <div class="row">
-    <div class="col s12 l6">
+    <div class="col s12 l6 guest-appearance-info">
         <div class="label">Appearances</div>
         {% if guest.appearances.count %}
         {{ guest.appearances.count.regular_shows }}
         {% else %}
         <span class="data-na">N/A</span>
         {% endif %}
     </div>
-    <div class="col s12 l6">
+    <div class="col s12 l6 guest-appearance-info">
         <div class="label">Appearances including Best Of and Repeats</div>
         {% if guest.appearances.count %}
         {{ guest.appearances.count.all_shows }}

diff --git a/app/hosts/templates/hosts/details.html b/app/hosts/templates/hosts/details.html
@@ -1,5 +1,6 @@
 {% for host in hosts %}
-{% if host and not host.slug == "tbd" %}{# {# Sanity Check in case of a None and Skip TBD Host #}
+{# Sanity Check in case of a None and Skip TBD Host #}
+{% if host and not host.slug == "tbd" %}
 <h2><a href="{{ url_for('hosts.details',
                          host_slug=host.slug) }}">{{ host.name }}</a></h2>
 
@@ -10,15 +11,15 @@ <h2><a href="{{ url_for('hosts.details',
     </div>
 </div>
 <div class="row">
-    <div class="col s12 l6">
+    <div class="col s12 l6 host-appearance-info">
         <div class="label">Appearances</div>
         {% if host.appearances.count %}
         {{ host.appearances.count.regular_shows }}
         {% else %}
         <span class="data-na">N/A</span>
         {% endif %}
     </div>
-    <div class="col s12 l6">
+    <div class="col s12 l6 host-appearance-info">
         <div class="label">Appearances including Best Of and Repeats</div>
         {% if host.appearances.count %}
         {{ host.appearances.count.all_shows }}

diff --git a/app/locations/templates/locations/details.html b/app/locations/templates/locations/details.html
@@ -12,15 +12,15 @@ <h2><a href="{{ url_for('locations.details',
 </div>
 
 <div class="row">
-    <div class="col s12 l6">
+    <div class="col s12 l6 location-recording-info">
         <div class="label">Recordings</div>
         {% if location.recordings.count %}
         {{ location.recordings.count.regular_shows }}
         {% else %}
         <span class="data-na">N/A</span>
         {% endif %}
     </div>
-    <div class="col s12 l6">
+    <div class="col s12 l6 location-recording-info">
         <div class="label">Recordings including Best Of and Repeats</div>
         {% if location.recordings.count %}
         {{ location.recordings.count.all_shows }}

diff --git a/app/panelists/templates/panelists/details.html b/app/panelists/templates/panelists/details.html
@@ -11,7 +11,7 @@ <h2><a href="{{ url_for('panelists.details',
 </div>
 
 <div class="row">
-    <div class="col s12 l6">
+    <div class="col s12 l6 panelist-appearance-info">
         <div class="label">Appearances</div>
         {% if panelist.appearances.count %}
         <ul class="panelist-stats">
@@ -39,7 +39,7 @@ <h2><a href="{{ url_for('panelists.details',
         <span class="data-na">N/A</span>
         {% endif %}
     </div>
-    <div class="col s12 l6">
+    <div class="col s12 l6 panelist-scoring-info">
         <div class="label">Scoring</div>
             {% if panelist.statistics %}
             <ul class="panelist-stats">
@@ -57,7 +57,7 @@ <h2><a href="{{ url_for('panelists.details',
 </div>
 
 <div class="row">
-    <div class="col s12 l6">
+    <div class="col s12 l6 panelist-ranking-info">
         <div class="label">Rankings</div>
             {% if panelist.statistics %}
             <ul class="panelist-stats">
@@ -81,7 +81,7 @@ <h2><a href="{{ url_for('panelists.details',
                 <span class="data-na">N/A</span>
             {% endif %}
     </div>
-    <div class="col s12 l6">
+    <div class="col s12 l6 panelist-bluff-info">
         <div class="label">Bluff (Data available for January 2000 to present)</div>
         <ul class="panelist-stats">
             <li>Chosen: {{ panelist.bluffs.chosen }}</li>
@@ -94,12 +94,12 @@ <h2><a href="{{ url_for('panelists.details',
     <div class="col s12">
         <div class="label">Available Graphs</div>
     </div>
-    <div class="col s12 m6">
+    <div class="col s12 m6 panelist-graph-breakdown">
         <a href="{{ graphs_url }}/panelists/score-breakdown/{{ panelist.slug }}">
             Score Breakdown
         </a>
     </div>
-    <div class="col s12 m6">
+    <div class="col s12 m6 panelist-graph-appearance">
         <a href="{{ graphs_url }}/panelists/scores-by-appearance/{{ panelist.slug }}">
             Scores by Appearance
         </a>

diff --git a/app/scorekeepers/templates/scorekeepers/details.html b/app/scorekeepers/templates/scorekeepers/details.html
@@ -15,15 +15,15 @@ <h2><a href="{{ url_for('scorekeepers.details',
 </div>
 
 <div class="row">
-    <div class="col s12 l6">
+    <div class="col s12 l6 scorekeeper-appearance-info">
         <div class="label">Appearances</div>
         {% if scorekeeper.appearances.count %}
         {{ scorekeeper.appearances.count.regular_shows }}
         {% else %}
         <span class="data-na">N/A</span>
         {% endif %}
     </div>
-    <div class="col s12 l6">
+    <div class="col s12 l6 scorekeeper-appearance-info">
         <div class="label">Appearances including Best Of and Repeats</div>
         {% if scorekeeper.appearances.count %}
         {{ scorekeeper.appearances.count.all_shows }}

diff --git a/app/shows/templates/shows/all.html b/app/shows/templates/shows/all.html
@@ -18,7 +18,7 @@
 
 <h1>All Show Details</h1>
 
-<p>
+<p class="show-all-intro">
     Below is a list of available show years that you can click/tap on to jump
     down to that year's section on this page.
 </p>

diff --git a/app/shows/templates/shows/all_details.html b/app/shows/templates/shows/all_details.html
@@ -1,5 +1,5 @@
 {% for show_year in shows %}
-<h1 id="show-{{ show_year }}">{{ show_year }}</h1>
+<h1 id="show-{{ show_year }}" class="show-all-year-header">{{ show_year }}</h1>
 
 {% for show in shows[show_year] %}
 {% if show %}{# Sanity Check in case of a None #}
@@ -40,7 +40,7 @@ <h2><a href="{{ url_for('shows.year_month_day',
 </div>
 
 <div class="row">
-    <div class="col s12 m6">
+    <div class="col s12 m6 show-host-info">
         <div class="label">Host</div>
         {% if show.host.slug != "tbd" %}
             {% if show.host.guest %}
@@ -52,7 +52,7 @@ <h2><a href="{{ url_for('shows.year_month_day',
             <span class="data-tbd">TBD</span>
         {% endif %}
     </div>
-    <div class="col s12 m6">
+    <div class="col s12 m6 show-scorekeeper-info ">
         <div class="label">Scorekeeper</div>
         {% if show.scorekeeper.slug != "tbd" %}
             {% if show.scorekeeper.description %}
@@ -72,7 +72,7 @@ <h2><a href="{{ url_for('shows.year_month_day',
 </div>
 
 <div class="row">
-    <div class="col s12 m6">
+    <div class="col s12 m6 show-panelist-info">
         <div class="label">Panelists</div>
         {% if show.panelists %}
             <ul class="panelist-list">
@@ -101,7 +101,7 @@ <h2><a href="{{ url_for('shows.year_month_day',
         {% endif %}
     </div>
 
-    <div class="col s12 m6">
+    <div class="col s12 m6 show-guest-info">
         <div class="label">Guests</div>
         {% if show.guests %}
             <ul class="guest-list">
@@ -130,7 +130,7 @@ <h2><a href="{{ url_for('shows.year_month_day',
     <div class="col s12">
         <div class="label">Bluff</div>
     </div>
-    <div class="col s12 m6">
+    <div class="col s12 m6 show-bluff-chosen">
         Chosen:
         {% if show.bluff.chosen_panelist %}
             <a href="{{ url_for('panelists.details',
@@ -139,7 +139,7 @@ <h2><a href="{{ url_for('shows.year_month_day',
             <span class="data-na">N/A</span>
         {% endif %}
     </div>
-    <div class="col s12 m6">
+    <div class="col s12 m6 show-bluff-correct">
         Correct:
         {% if show.bluff.correct_panelist %}
             <a href="{{ url_for('panelists.details',

diff --git a/app/shows/templates/shows/details.html b/app/shows/templates/shows/details.html
@@ -37,7 +37,7 @@ <h2><a href="{{ url_for('shows.year_month_day',
 </div>
 
 <div class="row">
-    <div class="col s12 m6">
+    <div class="col s12 m6 show-host-info">
         <div class="label">Host</div>
         {% if show.host.slug != "tbd" %}
             {% if show.host.guest %}
@@ -49,7 +49,7 @@ <h2><a href="{{ url_for('shows.year_month_day',
             <span class="data-tbd">TBD</span>
         {% endif %}
     </div>
-    <div class="col s12 m6">
+    <div class="col s12 m6 show-scorekeeper-info">
         <div class="label">Scorekeeper</div>
         {% if show.scorekeeper.slug != "tbd" %}
             {% if show.scorekeeper.description %}
@@ -69,7 +69,7 @@ <h2><a href="{{ url_for('shows.year_month_day',
 </div>
 
 <div class="row">
-    <div class="col s12 m6">
+    <div class="col s12 m6 show-panelist-info">
         <div class="label">Panelists</div>
         {% if show.panelists %}
             <ul class="panelist-list">
@@ -98,7 +98,7 @@ <h2><a href="{{ url_for('shows.year_month_day',
         {% endif %}
     </div>
 
-    <div class="col s12 m6">
+    <div class="col s12 m6 show-guest-info">
         <div class="label">Guests</div>
         {% if show.guests %}
             <ul class="guest-list">
@@ -127,7 +127,7 @@ <h2><a href="{{ url_for('shows.year_month_day',
     <div class="col s12">
         <div class="label">Bluff</div>
     </div>
-    <div class="col s12 m6">
+    <div class="col s12 m6 show-bluff-chosen">
         Chosen:
         {% if show.bluff.chosen_panelist %}
             <a href="{{ url_for('panelists.details',
@@ -136,7 +136,7 @@ <h2><a href="{{ url_for('shows.year_month_day',
             <span class="data-na">N/A</span>
         {% endif %}
     </div>
-    <div class="col s12 m6">
+    <div class="col s12 m6 show-bluff-correct">
         Correct:
         {% if show.bluff.correct_panelist %}
             <a href="{{ url_for('panelists.details',

diff --git a/app/static/css/style.css b/app/static/css/style.css
@@ -17,6 +17,7 @@
     footer { margin-top: 2rem; }
     footer a { border-bottom: 1px dotted; color: rgba(255,255,255,0.9); }
     h1 { font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 1.5rem 0; }
+    h1.print-only { display: none; visibility: hidden; }
     h2 { font-size: 1.25rem; font-weight: 600; margin: 1.25rem 0 1.25rem 0; }
     .collection .collection-item { padding: 1.1rem; }
     .collection-item>a { border-bottom: 1px dotted !important; font-size: 1.1rem; }
@@ -110,12 +111,31 @@
 }
 
 @media only print {
-    *, html { background-color: initial; color: black !important; margin: 1rem; }
-    a:link { border-bottom: none; }
-    nav, div.sidenav, .show-nprlink, .page-breadcrumb, .footer-nav-links { display: none; visibility: hidden; }
-    div.label, div.show-block { border: none; }
+    html { background-color: initial !important; color: black !important; margin: 0.5rem; }
+    main { flex: initial; }
+    footer { margin-top: 1rem; }
+    a:link, a:visited { border-bottom: none; }
+    ul.collection { list-style: none; padding: 0 0.25rem; }
+    .collection .collection-item { padding: initial; margin: 0.75rem 0; }
+    .footer-copyright a:link, .footer-copyright a:visited { color: #3060c0 !important; }
+    nav, div.sidenav, .show-nprlink, .database-id, .page-breadcrumb, .show-all-intro, .show-all-years, .footer-nav { display: none; visibility: hidden; }
+    div.container h1.print-only { display: initial !important; margin-bottom: 1rem; visibility: initial !important; }
+    div.container h1.show-all-year-header { margin: 0.75rem 0; }
+    div.label, div.host-block, div.guest-block, div.location-block, div.panelist-block, div.scorekeeper-block, div.show-block { border: none; }
     div.show-block { margin-left: 0; }
     div.row.show-badges { margin-bottom: 1rem; }
-    .database-id, .show-bestof, .show-repeat { background-color: initial; color: initial; padding: initial; }
-    .database-id>a, .show-bestof>a, .show-repeat>a { color: black; }
+    .show-bestof, .show-repeat { background-color: initial; color: initial; font-style: italic; font-size: 110%; line-height: 1.5; padding: initial; }
+    .show-bestof>a, .show-repeat>a { color: black; }
+
+    div.guest-block div.row, div.host-block div.row,
+    div.location-block div.row, div.panelist-block div.row,
+    div.scorekeeper-block div.row, div.show-block div.row { margin: .75rem 0; }
+
+    ul.panelist-list, ul.guest-list { margin: 0 0 0.5rem 0; }
+    div.guest-appearance-info, div.host-appearance-info, div.location-recording-info,
+    div.panelist-appearance-info, div.panelist-bluff-info,
+    div.panelist-graph-appearance, div.panelist-graph-breakdown,
+    div.panelist-ranking-info, div.panelist-scoring-info, div.scorekeeper-appearance-info,
+    div.show-bluff-chosen, div.show-bluff-correct, div.show-host-info,
+    div.show-guest-info, div.show-panelist-info, div.show-scorekeeper-info { display: inline-block; vertical-align: top; width: 48%; }
 }
diff --git a/app/templates/base.html b/app/templates/base.html
@@ -20,6 +20,7 @@
 
 <main>
     <div class="container">
+    <h1 class="print-only">Wait Wait... Don't Tell Me! Stats Page</h1>
     {% block content %}{% endblock %}
     </div>
 </main>

diff --git a/app/templates/core/footer.html b/app/templates/core/footer.html
@@ -1,5 +1,5 @@
 <footer class="page-footer blue darken-4">
-    <div class="container">
+    <div class="container footer-nav">
         <div class="row">
             <div class="col s12">
                 <ul class="right footer-nav-links">

diff --git a/app/version.py b/app/version.py
@@ -4,4 +4,4 @@
 # Copyright (c) 2018-2023 Linh Pham
 # stats.wwdt.me is released under the terms of the Apache License 2.0
 """Application Version for Wait Wait Stats Page"""
-APP_VERSION = "5.3.0"
+APP_VERSION = "5.3.1"
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,7 @@ @@
     <main>
         <div class="container">
+        <h1 class="print-only">Wait Wait... Don't Tell Me! Stats Page</h1>
         {% block content %}{% endblock %}
         </div>
     </main>
@@ Expand Down @@