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!

view on iOS

view on Safari:

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.

In T247702#5971152, @Bawolff wrote:

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

I can't figure out how like anything in Phab but thanks @Niedzielski & @Bawolff

Yes! thank you so much!

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?

In T247702#5972986, @Tnegrin wrote:

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.

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

Okay so we can use that also...

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')

In T247702#5974336, @Volker_E wrote:

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…

In T247702#5974391, @Volker_E wrote:

@Bawolff Thanks, will do. Is there any specific reason to have the outdated handheld in @media screen, handheld? Anything hidden from plain sight?

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:

• On iOS the title row is not sticky on Portrait (only Landscape)
• The title row for references is currently two rows high, which blocks actual reference information while scrolling.
• The outline of the template box is viewable behind the table (this appears on the iPhone X as in the middle of the Deaths column)
• The countries and territories column is too wide to be useful

Proposals:
Light weight

• Create a max width for the countries and territories column to facilitate with fitting all of the content in the screen without needing L/R scrolling.
• Same as above, but consider trimming the country flags for even more space.

Medium weight

• Create a dynamic max width for all columns based on screen size to reduce L/R scrolling.

Heavy weight, large change

• When the user taps on the table to expand, open to a new screen and force Landscape so that all content fits.

Change 580350 had a related patch set uploaded (by Joewalsh; owner: Joewalsh):
[mediawiki/services/mobileapps@master] Fix collapsed table overflow

https://gerrit.wikimedia.org/r/580350

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:

In T247702#5973612, @Bawolff wrote:

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

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

https://gerrit.wikimedia.org/r/580350

@Bawolff Thanks, updated and removed handheld.

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.

https://gerrit.wikimedia.org/r/580350 (for mobileapps) has been deployed.

In T247702#5976811, @Bawolff wrote:

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

https://gerrit.wikimedia.org/r/580408

In T247702#5975769, @bearND wrote:

In T247702#5973612, @Bawolff wrote:

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

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)

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.

@Johan Would you share the link?

Of course. Link.

Change 580408 merged by jenkins-bot:
[mediawiki/services/mobileapps@master] Fixes for collapsed table display

https://gerrit.wikimedia.org/r/580408

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.

T247910

@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:

• hide the V • T • E element (since it's not useful on mobile)
• remove the margin: 0 4em; on the table header
• left-align the table header

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.

Proposed changes got added to the template styles!