Adding a COVID-19 Dashboard Sidebar

Adding a COVID-19 Dashboard Sidebar
0

Here’s how:

(Yes, it’s a little more involved than a single Theme Component, but you will be able to re-use this setup for other purposes.)

Plugins

Install Custom Layouts & Custom HTML widget:

Add these to your app.yml

- git clone https://github.com/angusmcleod/discourse-layouts
- git clone https://github.com/angusmcleod/layouts-custom-html

Optionally, if you are using Topic List Previews, use my special branch to facilitate sidebars*:

- git clone https://github.com/merefield/discourse-topic-previews -b "replace_masonry_with_CSS_grid"

rebuild as usual:

./launcher rebuild app

Setup

You will first need to find an appropriate dashboard.

I’ve found three options:

  • Global:
    • John Hopkins University : https://www.arcgis.com/apps/opsdashboard/index.html#/85320e2ea5424dfaaa75ae62e5c06e61
    • Avi Schiffmann’s popular site https://ncov2019.live/data
  • UK:
    • Public Health England https://www.arcgis.com/apps/opsdashboard/index.html#/ae5dda8f86814ae99dde905d2a9070ae

Happy to add other suitable suggestions to this post if you Reply with them below.

Put something similar to the following HTML in your custom HTML widget setting, using URL you have chosen:

<div class="corona-dashboard" style="text-align: center"><h5>COVID-19 Dashboard</h5></div><div style="height: 600px; overflow: hidden"><iframe src="https://www.arcgis.com/apps/opsdashboard/index.html#/ae5dda8f86814ae99dde905d2a9070ae" height="600px" class="corona-dash"></iframe></div>

Add the views in setup:

Configure the width:

Make sure this is off:

You can use the left bar with a similar approach.

Customise to taste.

*(note there’s a a slight sacrifice here, this will currently introduce a limit of how far you can scroll in Chrome based browsers as there is a non-functional limitation affecting CSS Grid which is currently being worked on by the browser dev team).

4 Likes