From @Doc_James
We have this massive table on the page https://en.wikipedia.org/wiki/2019%E2%80%9320_coronavirus_pandemic#Epidemiology
There does not appear to be any good way to format it nicely on mobile, the app, and desktop.
• Tnegrin | |
Mar 15 2020, 4:31 PM |
F31690033: image.png | |
Mar 18 2020, 6:05 PM |
F31690032: image.png | |
Mar 18 2020, 6:05 PM |
F31690026: image.png | |
Mar 18 2020, 6:05 PM |
F31689899: image.png | |
Mar 18 2020, 5:53 PM |
F31689895: image.png | |
Mar 18 2020, 5:53 PM |
F31689980: image.png | |
Mar 18 2020, 5:53 PM |
F31689901: image.png | |
Mar 18 2020, 5:53 PM |
F31689994: image.png | |
Mar 18 2020, 5:53 PM |
From @Doc_James
We have this massive table on the page https://en.wikipedia.org/wiki/2019%E2%80%9320_coronavirus_pandemic#Epidemiology
There does not appear to be any good way to format it nicely on mobile, the app, and desktop.
Project | Branch | Lines +/- | Subject | |
---|---|---|---|---|
mediawiki/services/mobileapps | master | +25 -62 | Fixes for collapsed table display | |
mediawiki/services/mobileapps | master | +17 -8 | Fix collapsed table overflow |
Status | Subtype | Assigned | Task | ||
---|---|---|---|---|---|
Resolved | Volker_E | T247702 Format table in coronavirus article | |||
Resolved | JoeWalsh | T247724 PageContentService pcs-collapsed infobox will often display reference group names in the summary line | |||
Resolved | None | T247910 MediaWiki should allow setting tabindex="0" on elements in wikitext |
How is "nicely" being defined here? It's unclear to me what's being asked for when it comes to MediaWiki core code. For example, having to scroll is due to https://en.wikipedia.org/wiki/Template:2019%E2%80%9320_coronavirus_pandemic_data explicitly defining width:457px - such issues would be on-wiki topics.
Is this a subtask of T247701: Make sure COVID19 page to be readable on all form factors? If so, then please set Edit Related Tasks... → Edit Parent Tasks. Thanks!
So discussion on Wikipedia is here https://en.wikipedia.org/wiki/Template_talk:2019%E2%80%9320_coronavirus_pandemic_data#Implementing_a_collapsible_view_option
One of the remaining issues is that the scrolling feature does not support "print" very well or screen readers from what I understand.
I'm not sure this is really on-topic for phab.... [Edit: I mean, its filed as a bug in mediawiki-general, but its not a general bug in mediawiki, or even a mediawiki bug]
But anyways, I made a version in my sandbox that should print fine. Has anyone tried it in a screen-reader? Unless someone has tried it, i don't see why it wouldn't work in a screen reader. At most, maybe it would be annoying without having some sort of link to skip the entire super long table.
Looks like we have a solution, a [show all] button which I hope addresses that issue.
It however does not format very well within our app. The table is collapse, which is fine but it says
"More information: Countries and territories[lower-alpha 1], Cases[lower-alpha 2]..."
Is it possible to fix that?
Thanks Bawolff agree you have solved a bunch of the problems :-) I guess the formating in the app is really the only one left.
"More information: Countries and territories[lower-alpha 1], Cases[lower-alpha 2]..."
yeah, that is an odd one. I'm not sure what circumstance you would ever want the literal ref group name to actually be output. It doesn't even show up that way in the mobile api https://en.wikipedia.org/api/rest_v1/page/mobile-html/Template:2019%E2%80%9320_coronavirus_pandemic_data
Anyways, filed a separate task for why are refs being shown like that: T247724
The extreme hacky solution would be the following CSS (to Template:2019–20_coronavirus_pandemic_data/style.css ):
section[data-mw-section-id="1"] style + span + div.pcs-collapse-table-container .pcs-collapse-table-collapse-text { display:none} section[data-mw-section-id="1"] style + span + div.pcs-collapse-table-container .pcs-table-other::after { display:inline; content: ": Coronavirus by country and territory"; font-weight:normal; }
Which would work, but depends on the table being in the first section, and being preceeded immeidately by templatestyles and an empty span.
Ok, i decided to try that [1]. Does feel a bit evil. I also did @Niedzielski suggestion at T247723#5971140
Screenshots from Android in Light theme below. Rendering and usability is better in the Alpha (with Mobile HTML), also in Sepia, Dark and Black theme.
CC: @Charlotte @JoeWalsh @Dbrant
Samsung Galaxy Tab S5e (Tablet)
Production 2.7.50309-r-2020-01-08 | Alpha 2.7.50309-alpha-2020-03-13 | |
Google Pixel 3 (Smartphone)
Production 2.7.50309-r-2020-01-08 | Alpha 2.7.50309-alpha-2020-03-13 | |
Thanks for checking @schoenbaechler - I'm looking forward to sticking a fork in mobile-html for just this reason. Hopefully this week.
From DocJames: With the "show all" button now created I think the printing issue is solved. All people need to do is hit "show all" before they print.
I think this is now working on the web. Do we need to do more stuff for the apps?
Note there is a print stylesheet for printing that forces the table expanded. The show all button has no effect/doesnt exist when printing.
You can test with the print preview button in your browser
Rendering and usability is better in the Alpha (with Mobile HTML),
Is there an api endpoint for production app we can use for quick testing what it looks like there? Mobile-html with its rest endpoint makes for much easier testing
Just updated the stylesheet with one minor change, to fulfill the color contrast ratio of the legend provided by content in alignment with Web Content Accessibility Guidelines 2.0 level AA.
https://en.wikipedia.org/w/index.php?title=Template%3A2019%E2%80%9320_coronavirus_pandemic_data%2Fstyle.css&type=revision&diff=945921582&oldid=945799938 (wasn't logged in until I pressed 'submit')
Just fyi, that was copied from mobileapp css, so it should probably be changed there too
@Bawolff Thanks, will do. Is there any specific reason to have the outdated handheld in @media screen, handheld? Anything hidden from plain sight?
I need support by someone with “extended confirmed users and administrator” privileges on enwiki – asked before on other channels…
The font-size for “Show All” is too small from an a11y guidelines perspective, but I can't fix them myself right now…
I guess not. Honestly its just a reflection of my css knowledge being really out of date.
From talking with @schoenbaechler today here are some potential ideas and noted issues:
Noted issues:
Proposals:
Light weight
Medium weight
Heavy weight, large change
Change 580350 had a related patch set uploaded (by Joewalsh; owner: Joewalsh):
[mediawiki/services/mobileapps@master] Fix collapsed table overflow
mobile-html fix in https://gerrit.wikimedia.org/r/580350 made while consulting with @schoenbaechler in the patch above. It's not 100% ideal, but the table now scrolls sideways within the box and doesn't overflow onto the page.
Before:
After:
If you are talking about the mobile-sections endpoint used in the Android prod app right now, I made a little demo app which stitches the sections of that together: https://mobile-sections-demo.netlify.com/en/2019%E2%80%9320_coronavirus_pandemic#Epidemiology. Note this doesn't do any of the client-side transformations the app makes. (source code)
Change 580350 merged by jenkins-bot:
[mediawiki/services/mobileapps@master] Fix collapsed table overflow
I am still seeing a few issues with the breakpoints here:
The table appears to want to be collapsible on mobile web (show all in the top right) but that doesn't work because of T111565. We might want to prioritise fixing that in the software.
doesn't work because of T111565
I dont think that bug is related. The show-all just gets rid of the scrollbar (maybe that's misleading? People wanted a button to turn it back into a normal non-scrolling table). It seems to work on both desktop and mobile web.
Ah okay. That was a little misleading since I see a lot of tables with [show/hide] in that corner to mean collapse/expand. I was seeing no change in mobile after clicking it before. Now when I do click it it on mobile expands (although wasn't obvious on a small screen device) and doesn't seem reversible?
Change 580408 had a related patch set uploaded (by Joewalsh; owner: Joewalsh):
[mediawiki/services/mobileapps@master] Fix colors and contrast on collapsed tables
Which code corresponds to the prod version of the mobile app?
The issue is, some of the onwiki css that's targeting the collapsible tables in the app doesn't seem to be applying, but the app has no "view source" button to see what the DOM really looks like and I'm not sure what version of the code base corresponds to the "production" version of the app, to see what's happening.
Which code corresponds to the prod version of the mobile app?
The prod version of the app has bundled CSS on iOS and legacy upstream CSS on Android. There's no easy way to change either of those at the moment. This problem is solved in the next releases of the app with Mobile HTML (mentioned above) as all of the CSS moves into a service.
the app has no "view source" button to see what the DOM really looks like
There are dev tools for remotely viewing source while devices are attached on Android with Chrome and iOS with Safari (needs to be enabled on a connected iOS device in Settings > Safari > Advanced > Web Inspector).
some of the onwiki css that's targeting the collapsible tables
If you're talking about setting the content: through CSS, this is not supported and prone to break. Is there another way the template can provide the title for the apps to read moving forward?
Edit: I moved the other PCS workarounds that were in the template CSS upstream with this patch. You can view it live here: https://apps.wmflabs.org/en.wikipedia.org/v1/page/mobile-html/2019–20_coronavirus_pandemic
In the meanwhile, per @cmadeo, I've recommended the community to set a max width for the countries and territories column on the article talk page, pointing out that article content is not the area of the Foundation, but that this had been reported as a technical problem and here's a step towards a solution.
Change 580408 merged by jenkins-bot:
[mediawiki/services/mobileapps@master] Fixes for collapsed table display
The prod version of the app has bundled CSS on iOS and legacy upstream CSS on Android.
Sure, but it would still be good to know where/what that css/js is, so we can guess at how changing the template will affect the view on mobile app. Right now we have to blindly change things and see what happens on the phone, which is unideal.
If you're talking about setting the content: through CSS, this is not supported and prone to break
I agree, we just seem to lack better options.
Is there another way the template can provide the title for the apps to read moving forward?
Lots of ways. Its just a matter of what the android app supports. For example, right now there is an aria-label attribute or the contents of the first <th> element.
So one issue here, is that MediaWiki bans the tabindex attribute, which for accessibility reasons is reccomended on scrollable elements.
However, firefox seems to allow focusing on the div anyways.
@Jdlrobson @Volker_E looking at this table on mobile web (iOS/Safari & Chrome, Android/Chrome) and wanted to suggest the following possible changes:
#1 – The most impactful thing I think we could do is:
The result of these changes would be that the table almost fits entirely within a 375px viewport, since we'd no longer be forcing extra width (only the Ref. column would be out of view)
current | after change |
This causes some awkwardness in the header, but overall would be an improvement. If we wanted to further clean up the header we could:
remove the float: right on the [show all] element | absolutely position the [show all] element so it appears below the table heading |
#2 – remove padding-right: 18px; on .mw-parser-output #covid19-container
Not entirely sure what padding is there for (it doesn't seem needed on desktop). It's creating a clipped right-edge of the table on mobile.
current | after change |
#3 – align text in first column to left side
current | after change |
#4 – add margin-top: 8px to .mw-parser-output #covid19-container (since the hatnote only has 1px of padding below it)
current | after change |
I believe (if I did all my CSS correct) if we went for all of the change the result would be:
I tried to work out the CSS and have proposed some additional mobile styles here: https://en.wikipedia.org/wiki/Template_talk:2019%E2%80%9320_coronavirus_pandemic_data/styles.css#Cleaning_up_the_table_for_mobile_web
@alexhollender fyi: Just pinged on the main template talk again in order to get broader attention.