dyslexia and text size features added to clean and material

[StephDriver]

closes #755

[StephDriver]

Notes:
I have generalised the behaviour in OLH to the other themes by moving the javascript.

I did not place the controls in a sticky as in OLH because:

1. OLH has other items in that sticky, whereas these controls would be the only ones for Material/Clean without a fundamental change in layout.
2. Clean and Material have other sticky items, and adding this felt cluttered.
3. I did also try making the current display sticky, then having a dismiss option, but with a dismiss, one also needed to retrieve it, and ultimately this too seemed fussy and not in keeping with the themes.

I have used quieter buttons, because not all users need these controls, and those who do probably would be looking for them.

[ajrbyers]

The changes in this PR work well however:

1. The buttons feel really out of place, unlike on OLH where they're on a bar.
2. The dyslexia friendly button doesn't work as well on material, it appears to highlight the box.

[StephDriver]

Reading Option Buttons

I'm really not sure about this - I've made a bar version - which do you prefer?

I think on material, the original fits better, but the bar is looks better for clean.

Before changes 397d392 :

As a bar 2f97594:

[ajrbyers]

Can we take this one to a design meeting for ideas?

[StephDriver]

From design meeting,

• consistency with other buttons in theme
• check how this works on Mobile, especially in regards to longer 'abstract' headings. Make sure don't overlap, expect them to be 'over the top' of the heading.
• make sure buttons that are on/off are clearly on or off (e.g. dyslexia mode).

we are not sure other than that - we would like to continue this debate when the full team is around and pin down a solution.

[StephDriver]

Controls

I have had a rethink on the buttons. There are different constraints in material and clean as to how they handle mobile and desktop such that two different solutions were needed.

For Material, on desktop I have a card at the top of the sidepane which is sticky and stacks above the sticky table of contents when that is reached. On mobile, there is a separate card above the abstract, which remains sticky (as the table of contents is not shown on mobile, there is no need to stack there).

For clean, as the desktop/mobile change is handled by reflow, placing the text controls in teh sidebar automatically placed them at the end of hte article in mobile, which is far too late! So Instead I have placed them under the article banner image, but visually laid out on the far right hand side, as if at the top of the sidebar.

Javascript functions

I have completely rewritten the javascript so that it can handle the more complex nesting structure of Material. I tried several simpler approaches, but none were sufficient. This affected all three buttons - as none of them were reaching all the required elements.

The changes I've made make the resizing more repeatable (size down is now almost reversed by a size up without ending up losing the proportional relationship between elements, e.g. sizes of headings and paragraphs). The difficulty here is calculating floats, which are then applied as font sizes which truncates them, so over repeats these drift apart. I have placed limits on how small text or large text can become, which helps limit this drift. And removes the problem of loss of proportional relationship once the minimum is reached by some elements while others could continue reducing until all are the same. While my solution is not perfect, it seems unlikely many users will go up and down with enough repeats for the drift to be noticeable to the eye. A perfect numerical solution would require a base size for all values to be stored which seems disproportionate.

[StephDriver]

Material:

Clean

[ajrbyers]

For material can we pop them in the box below rather than have them in a box of their own? It feels odd.

[StephDriver]

For material can we pop them in the box below rather than have them in a box of their own? It feels odd.

I tried that first. But they then end up only sticky to the end of that enclosing box, once hte enclosure is off screen they are too. Just as how the table of contents is in its own box in order to stick.

I could do a really messy work around, where I put whitespace into the box, place the material buttons on top without the card border, then have a visually empty card above the toc box to later provide those borders once these buttons have stuck over the top - but it all feels very clunky not easy to maintain.

Is the aesthetic change worth that @ajrbyers ?

[StephDriver]

rebased

[StephDriver]

rebased