CSS for mobile - declension and other tables

Fragment of a discussion from User talk:Rua

Interesting, thank you. Latin and Dutch seem to display just fine on mobile. I also realized that the problem is not with Hungarian conjugation tables, which seem to have no width defined; this is limited to Hungarian declension tables (for both nouns and adjectives), which hard-code the width at 40%.

Is there a particular reason for limiting the width of collapsible divs? I note that {{der-top}}, for instance, implements a collapsible div with no defined width, as at (sakura, cherry tree; cherry blossom). Likewise for the collapsible conjugation table on Hungarian entries like lát (to see). If there is a concern about such divs displaying all the way across widescreen monitors, and the div content becoming unnecessarily stretched out, perhaps we could use max-width and a pixel count, instead of width and a percentage? Poking around in my browser's "inspect" mode on the látás (sight, vision) entry, I find that changing width: 40%; to max-width: 400px; does the trick quite well -- the table does not stretch across the whole width of my widescreen monitor, and if I shrink the window down to emulate mobile as close as I can, the table displays in a more usable fashion.

... And I just realized what you might have meant -- the table at verdedigen is probably a good example? The table at verb specio, for instance, doesn't have any length limitation at all, but verdedigen has some fun show / hide behavior. That would be preferable for Hungarian, over the current hard limit. Though I find that the show / hide behavior only works on a PC -- on mobile, everything is always showing, which makes it a bit confusing as to why the top portion of the header shows the infinitive twice.

Anyway, thank you for looking into this.

‑‑ Eiríkr Útlendi │Tala við mig19:15, 27 April 2016

It's strange that it shows both parts of the table at all times. I would appreciate it if you could report this at the Grease Pit with any information on which tables it happens with. Currently, at least Dutch verbs and adjectives, Finnish nominals and verbs, Veps nominals and verbs, Northern Sami nominals and verbs, Proto-Indo-European nominals and verbs, Latin verbs, Proto-Italic verbs use the new system. There may be more I forgot about.

In case you're good with JavaScript, the file MediaWiki:Gadget-legacy.js, line 645 onwards.

CodeCat19:34, 27 April 2016
 

Oh, and provide screenshots too if you can!

CodeCat19:47, 27 April 2016

Done and posted to Wiktionary:Grease_pit/2016/April#Problems_with_mobile_site_when_rendering_tables_with_show.2Fhide_functionality. I had a quick look at the JS file, but it seems like JS isn't even being loaded in the mobile version of the site...

‑‑ Eiríkr Útlendi │Tala við mig21:06, 28 April 2016