hypothesis / hypothesis/checkmate
Improve the pages that're shown when a site is blocked
- Dominant language
- Python
- Stars
- 8
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
Depends on:
* [Serve block warning pages from Checkmate ](https://github.com/hypothesis/checkmate/issues/15) (done)
The pages that Via shows when sites are blocked aren't very good, either in visual design or in wording. **Re-design and re-write them to be better**.
### The block pages are implemented in Checkmate
The code for these block pages can be found in Checkmate:
* https://github.com/hypothesis/checkmate/blob/main/checkmate/views/ui/present_block.py
* https://github.com/hypothesis/checkmate/blob/main/checkmate/templates/blocked_page.html.jinja2
* https://github.com/hypothesis/checkmate/blob/main/checkmate/templates/wrapper.html.jinja2
* https://github.com/hypothesis/checkmate/blob/main/checkmate/static/static/img/warning.svg
* https://github.com/hypothesis/checkmate/blob/main/checkmate/static/static/css/wrapper-style.css
See below for screenshots and example links for the different block pages.
### Checkmate's block pages are used by Via, Via 3 and Via HTML
All three Via's redirect to these Checkmate-hosted block pages when a page is blocked, so any changes made to the block pages in Checkmate apply to all three Via's. In particular, **changes apply to both public Via and LMS's Via**.
### The design should be consistent with other pages in Via 3
The visual design should match the design of existing error pages in Via 3 so that the combined Via / Via 3 / Via HTML UI can be consistent. Via 3's existing error pages also match the design used in the LMS app, so that the combined LMS / Via experience is consistent.
The code for Via 3's error pages is here:
* https://github.com/hypothesis/via3/blob/6904743792449014a83a6a99ea864843b5d3e118/via/views/exceptions.py#L72-L99
* https://github.com/hypothesis/via3/blob/master/via/templates/exception.html.jinja2
* https://github.com/hypothesis/via3/blob/master/via/static/css/img/icons.svg
Here's what a Via 3 error page looks like:
* https://via3.hypothes.is/foo
* Local version: http://localhost:9083/foo

### The design should work in the LMS context
**We can't tell LMS users to install the browser extension**. You can't log in to your LMS account in the browser extension, so this instruction doesn't make sense in the LMS context.
The Via 3 error page above features a white box floating on a grey background. The grey background is needed in the LMS context to distinguish our iframe from the surrounding LMS. If the background is white then the user can't see where Canvas ends and Hypothesis begins and can't tell whether the error message is coming from Hypothesis or Canvas.
The horizontal **and vertical** centering of the dialog is also important for this reason.
Here's what the Via 3 error dialog looks like in the LMS context:

### Current pages
#### Current page when the domain is not on our allow-list
* https://checkmate.hypothes.is/ui/block?url=http%3A%2F%2Fanvils.co.uk&reason=not-explicitly-allowed&v=1&sec=cb039cfd146bb50adcfe718ff424b5ab6e3b0a7a09830859dae8fb9ba6920b31
* Local version: http://localhost:9099/ui/block?url=http%3A%2F%2Fwabblewabble.com%2Fpath%3Fa%3D2&reason=not-explicitly-allowed&v=1&sec=bbb39e8f8f600a3c200feab3fc753afaa98f00ac4be4de2155f34beb330dd4c8

#### Current page when the domain is marked as malicious on our blocklist
* http://checkmate.hypothes.is/ui/block?url=http%3A%2F%2Fbad.web.app&reason=malicious&v=1&sec=db7a996cbf463383a12622174c1404217e3bf12a4fb2a68dea90fd61a03dc7a8
* Local version: http://localhost:9099/ui/block?url=http%3A%2F%2Fbad.web.app&reason=malicious&v=1&sec=c13e01c72eaa510e28c35efec05eb608805f8ad27bf93730e77e07f2e125d483

#### Current page when a publisher has requested that we block their site
* http://checkmate.hypothes.is/ui/block?url=http%3A%2F%2Fnautil.us&reason=publisher-blocked&v=1&sec=8532955901545063e508c2f69468abfd670997a21a1e5492d938428de064c7d1
* Local version: http://localhost:9099/ui/block?url=http%3A%2F%2Fnautil.us&reason=publisher-blocked&v=1&sec=bdcefa4c2325326289d69d0844a7ac60b27a8603dd87d6c2dcede71e0c0e643c

#### Current page when a domain is an our blocklist for any other reason
E.g. when we block sites like YouTube.
* http://checkmate.hypothes.is/ui/block?url=http%3A%2F%2Fwww.youtube.com&reason=other&v=1&sec=d33b88cad2bbcc13573b5fce92585311114606ae0e2291e59d99a44be71606a3
* Local version: http://localhost:9099/ui/block?url=http%3A%2F%2Fwww.youtube.com&reason=other&v=1&sec=142d0a1c44d84ac346ab2ee328f654958ec16a0bd5e85bea73f2d4ad3062a306

Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.