Merge pull request #50 from questionlp/develop

Migrate from Pure CSS to Bootstrap

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "scss"]
+	path = scss
+	url = https://github.com/questionlp/wwdtm-theme.git

CHANGELOG.md

@@ -1,5 +1,80 @@
 # Changes
 
+## 3.0.0
+
+### Application Changes
+
+- Frontend code refactor due to switching from Pure CSS to Bootstrap
+  - Replacing Pure CSS frontend toolkit with Bootstrap
+  - Refactor the frontend structure to use Bootstrap frontend components and conventions
+  - Include the required IBM Plex web fonts with the application to remove use of Google Fonts
+- User interface changes
+  - Switch the design to match that of the [Wait Wait Stats Page](https://stats.wwdt.me) and the [Wait Wait Graphs Site](https://graphs.wwdt.me)
+  - Make use of Bootstrap's responsive design functionality for a more consistent experience across mobile and desktop
+  - Remove "Home" from all navigational breadcrumbs
+  - Clean up the home page to only provide a table of contents and only display report descriptions on the index page for each section
+  - Remove shading for table cells that do not contain data
+  - Add tooltips to certain columns in Panelist Bluff the Listener and Show Panel Gender Mix reports to provide additional information
+- Link to the corresponding location page on the Wait Wait Stats Page for each listed location in the "Locations: Average Scores" report
+- Updating report method names, report template filenames and URLs for consistency
+  - The following table lists the reports that have been renamed and/or had their URLs changed
+  - Add the necessary redirects and update sitemap generation
+  - Update test scripts to reflect new method names, routes and redirects
+
+#### Guests
+
+| Original Report Name | Original Report URL | New Report Name (if applicable) | New Report URL |
+|----------------------|---------------------|-----------------|----------------|
+| Best Of Not My Job Guests | `/guests/best-of-only` | N/A | `/guests/best-of-only-not-my-job-guests` |
+| Not My Job Scoring Exceptions | `/guests/scoring-exceptions` | N/A | `/guests/not-my-job-scoring-exceptions` |
+| Not My Job Three Pointers | `/guests/three-pointers` | N/A | `/guests/not-my-job-three-pointers` |
+
+#### Locations
+
+| Original Report Name | Original Report URL | New Report Name (if applicable) | New Report URL |
+|----------------------|---------------------|-----------------|----------------|
+| Average Score by Location | `/locations/average-scores` | Average Scores by Location | `/locations/average-scores-by-location` |
+
+#### Panelists
+
+| Original Report Name | Original Report URL | New Report Name (if applicable) | New Report URL |
+|----------------------|---------------------|-----------------|----------------|
+| Bluff the Listener Statistics | `/panelists/bluff-stats` | N/A | `/panelists/bluff-the-listener-statistics` |
+| Bluff the Listener Statistics by Year | `/panelists/bluff-stats-by-year` | N/A | `/panelists/bluff-the-listener-statistics-by-year` |
+| Debut by Year | `/panelists/debut-by-year` | Debuts by Year | `/panelists/debuts-by-year` |
+| Panelist vs Panelist | `/panelists/panelist-pvp` | N/A | `/panelists/panelist-vs-panelist` |
+| Panelist vs Panelist: All | `/panelists/panelist-pvp/all` | N/A | `/panelists/panelist-vs-panelist/all` |
+| Perfect Score Counts | `/panelists/perfect-scores` | N/A | `/panelists/perfect-score-counts` |
+| Statistics by Gender | `/panelists/gender-stats` | N/A | `/panelists/statistics-by-gender` |
+| Statistics Summary | `/panelists/stats-summary` | N/A | `/panelists/statistics-summary` |
+
+#### Scorekeepers
+
+| Original Report Name | Original Report URL | New Report Name (if applicable) | New Report URL |
+|----------------------|---------------------|-----------------|----------------|
+| Introductions | `/scorekeepers/introductions` | Scorekeeper Introductions | `/scorekeepers/scorekeeper-introductions` |
+
+#### Shows
+
+| Original Report Name | Original Report URL | New Report Name (if applicable) | New Report URL |
+|----------------------|---------------------|-----------------|----------------|
+| High Scoring Shows | `/shows/high-scoring` | N/A | `/shows/high-scoring-shows` |
+| Low Scoring Shows | `/shows/low-scoring` | N/A | `/shows/low-scoring-shows` |
+| Not My Job Guests vs Bluff the Listener Win Ratios | `/shows/not-my-job-vs-bluffs` | N/A | `/shows/not-my-job-guests-vs-bluff-the-listener-win-ratios` |
+| Search Shows by Multiple Panelists | `/shows/search-multiple-panelists` | N/A | `/shows/search-shows-by-multiple-panelists` |
+| Show Counts by Year | `/shows/counts-by-year` | N/A | `/shows/show-counts-by-year` |
+| Show Descriptions | `/shows/descriptions` | N/A | `/shows/show-descriptions` |
+| Show Notes | `/shows/notes` | N/A | `/shows/show-notes` |
+| Shows with a Guest Host | `/shows/guest-host` | N/A | `/shows/shows-with-guest-host` |
+| Shows with a Guest Scorekeeper | `/shows/guest-scorekeeper` | N/A | `/shows/shows-with-guest-scorekeeper` |
+| Shows with Perfect Panelist Scores | `/shows/perfect-panelist-scores` | N/A | `/shows/shows-with-perfect-panelist-scores` |
+
+### Component Changes
+
+- Replace Pure CSS 3.0.0 with Bootstrap 5.3.3
+  - Existing Pure CSS files will be preserved to prevent cached versions of the application from breaking
+  - Files related to Pure CSS will be removed in a future release
+
 ## 2.14.1
 
 ### Component Changes

INSTALLING.md

@@ -9,7 +9,7 @@ This document provides instructions on how to serve the application through [Gun
 Clone a copy of this repository to a location of your choosing by running:
 
 ```bash
-git clone https://github.com/questionlp/reports.wwdt.me_v2.git
+git clone --recurse-submodules https://github.com/questionlp/reports.wwdt.me_v2.git
 ```
 
 Within the new local copy of the repository, create a new virtual environment and install the required packages by running the following commands:
@@ -31,6 +31,22 @@ gunicorn reports:app --reload
 
 Once started, open a browser and browse to <http://127.0.0.1:8000/>. This should bring up the Reports web application.
 
+## Building and Updating Bootstrap Theme
+
+The Reports Site uses the Bootstrap frontend toolkit and a customized theme set that is referenced by the `scss` submodule. There should already be the necessary compiled CSS files stored under `app/static/css` as `app.css` and `app.min.css`.
+
+In order to compile new versions of the CSS files, you will need to have Node.js installed, an LTS version is preferred. To install the necessary dependencies, run:
+
+```bash
+npm install
+```
+
+Once all of the dependencies are installed, you can compile a new version of the `app.css` and `app.min.css` files by running:
+
+```bash
+npm run compile-all; npm run compile-all-mini
+```
+
 ## MySQL sql_mode Flags
 
 Earlier versions of the Reports Site application included SQL queries that were written to target MySQL 5.5 and MariaDB 10.x. Some of the queries may throw errors due to violation of the `sql_mode` flag `ONLY_FULL_GROUP_BY` on newer versions of MySQL. These SQL queries should already be updated to resolve such errors.

app/guests/redirects.py

@@ -19,24 +19,31 @@ def index() -> Response:
 
 
 @blueprint.route("/guest/best_of_only")
-def best_of_only() -> Response:
-    """View: Guests Best Of Only Report Redirect."""
-    return redirect_url(url_for("guests.best_of_only"), status_code=301)
+@blueprint.route("/guests/best-of-only")
+def best_of_only_not_my_job_guests() -> Response:
+    """View: Best Of Only Not My Job Guests Report Redirect."""
+    return redirect_url(
+        url_for("guests.best_of_only_not_my_job_guests"), status_code=301
+    )
 
 
 @blueprint.route("/guest/most_appearances")
 def most_appearances() -> Response:
-    """View: Guests Most Appearances Report."""
+    """View: Most Appearances Report."""
     return redirect_url(url_for("guests.most_appearances"), status_code=301)
 
 
 @blueprint.route("/guest/scoring_exceptions")
-def scoring_exceptions() -> Response:
-    """View: Guests Scoring Exceptions Report."""
-    return redirect_url(url_for("guests.scoring_exceptions"), status_code=301)
+@blueprint.route("/guests/scoring-exceptions")
+def not_my_job_scoring_exceptions() -> Response:
+    """View: Not My Job Scoring Exceptions Report."""
+    return redirect_url(
+        url_for("guests.not_my_job_scoring_exceptions"), status_code=301
+    )
 
 
 @blueprint.route("/guest/three_pointers")
-def three_pointers() -> Response:
-    """View: Guests Three Pointers Report."""
-    return redirect_url(url_for("guests.three_pointers"), status_code=301)
+@blueprint.route("/guests/three-pointers")
+def not_my_job_three_pointers() -> Response:
+    """View: Not My Job Three Pointers Report."""
+    return redirect_url(url_for("guests.not_my_job_three_pointers"), status_code=301)

app/guests/routes.py

@@ -20,41 +20,45 @@ def index() -> str:
     return render_template("guests/_index.html")
 
 
-@blueprint.route("/best-of-only")
-def best_of_only() -> str:
-    """View: Guests Best Of Only Report."""
+@blueprint.route("/best-of-only-not-my-job-guests")
+def best_of_only_not_my_job_guests() -> str:
+    """View: Best Of Only Not My Job Guests Report."""
     _database_connection = mysql.connector.connect(**current_app.config["database"])
     _guests = retrieve_best_of_only_guests(database_connection=_database_connection)
     _database_connection.close()
-    return render_template("guests/best-of-only.html", guests=_guests)
+    return render_template("guests/best-of-only-not-my-job-guests.html", guests=_guests)
 
 
 @blueprint.route("/most-appearances")
 def most_appearances() -> str:
-    """View: Guests Most Appearances Report."""
+    """View: Most Appearances Report."""
     _database_connection = mysql.connector.connect(**current_app.config["database"])
     _guests = guest_multiple_appearances(database_connection=_database_connection)
     _database_connection.close()
     return render_template("guests/most-appearances.html", guests=_guests)
 
 
-@blueprint.route("/scoring-exceptions")
-def scoring_exceptions() -> str:
-    """View: Guests Scoring Exceptions Report."""
+@blueprint.route("/not-my-job-scoring-exceptions")
+def not_my_job_scoring_exceptions() -> str:
+    """View: Not My Job Scoring Exceptions Report."""
     _database_connection = mysql.connector.connect(**current_app.config["database"])
     _exceptions = retrieve_all_scoring_exceptions(
         database_connection=_database_connection
     )
     _database_connection.close()
-    return render_template("guests/scoring-exceptions.html", exceptions=_exceptions)
+    return render_template(
+        "guests/not-my-job-scoring-exceptions.html", exceptions=_exceptions
+    )
 
 
-@blueprint.route("/three-pointers")
-def three_pointers() -> str:
-    """View: Guests Three Pointers Report."""
+@blueprint.route("/not-my-job-three-pointers")
+def not_my_job_three_pointers() -> str:
+    """View: Not My Job Three Pointers Report."""
     _database_connection = mysql.connector.connect(**current_app.config["database"])
     _three_pointers = retrieve_all_three_pointers(
         database_connection=_database_connection
     )
     _database_connection.close()
-    return render_template("guests/three-pointers.html", three_pointers=_three_pointers)
+    return render_template(
+        "guests/not-my-job-three-pointers.html", three_pointers=_three_pointers
+    )

app/guests/templates/guests/_index.html

@@ -1,19 +1,68 @@
 {% extends "base.html" %}
 {% block title %}Guests{% endblock %}
 
-{% block breadcrumb %}
-<div id="breadcrumb">
-    <ul>
-        <li><a href="{{ url_for('main.index') }}">Home</a></li>
-        <li>Guests</li>
-    </ul>
-</div>
-{% endblock breadcrumb %}
+{% block content %}
+<nav aria-label="breadcrumb" id="nav-breadcrumb">
+    <ol class="breadcrumb">
+        <li class="breadcrumb-item active" aria-current="page">Guests</li>
+    </ol>
+</nav>
 
-{% block synopsis %}
-<h2>Guests Reports</h2>
-{% endblock synopsis %}
+<h2>Guests</h2>
+
+<p>
+    The following are the list of available reports based on data collected for
+    Not My Job guests.
+</p>
+
+<div class="info">
+    <div class="container-fluid py-3">
+        <ul class="list-group report-list">
+            <li class="list-group-item">
+                <h3 class="title">
+                    <a href="{{ url_for('guests.best_of_only_not_my_job_guests') }}">Best Of Only Not My Job Guests</a>
+                </h3>
+                <div class="description">
+                    This report provides a list of Not My Job guests that have only appeared
+                    on Best Of shows and not on any regular show. These guests would have made
+                    their appearances on second live tapings when Wait Wait Don't Tell Me!
+                    travel to other cities.
+                </div>
+            </li>
+            <li class="list-group-item">
+                <h3 class="title">
+                    <a href="{{ url_for('guests.most_appearances') }}">Most Appearances</a>
+                </h3>
+                <div class="description">
+                    This report provides a list of Not My Job guests and the number of
+                    appearances that they have made across all shows and regular shows. The
+                    list is ordered based on the number of appearances for all shows in
+                    descending order.
+                </div>
+            </li>
+            <li class="list-group-item">
+                <h3 class="title">
+                    <a href="{{ url_for('guests.not_my_job_scoring_exceptions') }}">Not My Job Scoring Exceptions</a>
+                </h3>
+                <div class="description">
+                    This report provides a list of Not My Job guests that have a scoring exception
+                    that allowed them to win the prize for the listener contestant, even though they
+                    didn't score 2 or more points. An exception is also noted if the guest was
+                    awarded all 3 points no matter their actual score.
+                </div>
+            </li>
+            <li class="list-group-item">
+                <h3 class="title">
+                    <a href="{{ url_for('guests.not_my_job_three_pointers') }}">Not My Job Three Pointers</a>
+                </h3>
+                <div class="description">
+                    This report provides a list of all of the Not My Job guests who answered
+                    all three Not My Job questions correctly or were awarded all three points
+                    via a scoring exception.
+                </div>
+            </li>
+        </ul>
+    </div>
+</div>
 
-{% block content %}
-{% include "guests/_reports.html" %}
 {% endblock content %}