HOWTO: Add a COVID-19 Dashboard Sidebar

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

Thanks for providing these instructions. Is it working for you with the recent updates to the plugins?

Yep although you should use the paviliondev forks as the custom html plugin was not working and I’ve fixed it on the team fork.

You mean GitHub - paviliondev/layouts-custom-html ?

I just switched to it and still do not see the custom HTML show up. The only difference from the settings you suggest in the OP is the following, that I believe is a recent addition to the layouts plugin:

You haven’t permissioned any Groups. If you want everyone to see it, add ‘everyone’.

1 Like

Ah, thanks!

I did not think the groups selector was referring to that. It works now!