Topic on Project:Support desk/Flow

A recent twitter post pointed out that this template (and some of the templates it transcludes, e.g. this) currently renders poorly in phone screens (example):

1. menu tabs should stack vertically on narrow screens
2. all menu tabs should be collapsed by default in the mobile view (like a heading2 section)
3. div with article text should reflow underneath the infobox section
4. the infobox should also collapse like a heading_2 section

Any ideas on how to fix these (or a suggestion of who else I could pester) would be v. helpful. I'll start addressing point 1 this weekend, but I'm not certain how to implement the others.

If there's any magicword (equivalent of {{SERVERNAME}}) that could be used to detect whether the mobile version of the site is being viewed, I could at least use some if functions to display differently:

{{#ifeq:{{SERVERNAME}}|{{MOBILESERVERNAME}}|...}}

Thanks in advance!

Don't know of a magic word, but for hiding content from mobile view, you can use the nomobile class:

<div class="nomobile">
This text will not show in mobile format.
</div>

fantastic! Is there an opposite mobileonly?

To apply .CSS rules to work only on the mobile version of the site, set those rules in MediaWiki:Mobile.css.

@Evolution and evolvability Wow, i'm impressed you even got this far. Anyway. What you need is more flex box. Checkout this for instance: https://m.mediawiki.org/wiki/Wikimedia_Hackathon_2018

Unfortunately, it seems that wikiversity doesn't support TemplateStyles just yet, so you might have to put some extra rules in MediaWiki:Mobile.css indeed.

Thank you! your flexbox advice helped me fix point 1, and will probably help (I think) with point 3. Control over collapsing sections (points 2 and 4) are trickier.

Is there any way to book direct assistance time with a mediawiki expert?

I've managed to make some progress on points 2 and 4 using a hidden H2 level heading. This is invisible (height=0) on desktop, but the height seems to be overruled on mobile devices and so

<h2 style="line-height: 200%;
           margin:      -1px;
           padding:     0px;
           border:      0px; 
           height:      0px">{{{1|}}}</h2>

See in action at https://en.m.wikiversity.org/wiki/WikiJournal_of_Science/Radiocarbon_dating