Wiki talk:Mobile view
Why this page was created: I couldn't find a place to address topics of the mobile view (UI for handhelds) of the wiki. --Chris2map (talk) 16:53, 29 April 2022 (UTC)
A list of topics that could be addressed:
- Main menu – differs from desktop view
- Styles – add all used style sheets, e.g. for infoboxes
- Colors – adjust with OSM
Colors
There is currently one color that I don't think fits the OSM style at all:
.last-modified-bar.active — background-color:#00af89
This bar is displayed at the bottom of each page in mobile view.
I can well imagine replacing the color with the darker green of OSM: #7ebc6f
I haven't figured out where to put the color yet. I guess the parameter needs to be added in MediaWiki:Mobile.css.
What do you think about it? --Chris2map (talk) 16:53, 29 April 2022 (UTC)
.last-modified-bar.active { background-color:#7ebc6f; }works on custom User:.../common.css so it will work on MediaWiki:Mobile.css. --Chris2map (talk) 11:53, 14 January 2023 (UTC)
Flex tabs for mobile view
Currently many pages have non-responsive tabs such as the Get help page which can be quite critical for new users.
This can prevent some users to go deeper into the wiki in a general way.
I propose to adopt the standard flexbox which are responsive.
As the Mozilla documentation presents it :
« For a long time, the only reliable cross-browser compatible tools available for creating CSS layouts were features like floats and positioning. These work, but in some ways they're also limiting and frustrating.
The following simple layout designs are either difficult or impossible to achieve with such tools in any kind of convenient, flexible way:
- Vertically centering a block of content inside its parent.
- Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
- Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.
As you'll see in subsequent sections, flexbox makes a lot of layout tasks much easier. »
Here is an example of code with flexbox
<div style="display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; align-items: flex-start;">
<div style="flex-basis: 12em; flex-grow: 1;">
{{Colored bar
| title = Mobile view
| title-color =
| title-color-background =
| icon =
| link = Wiki:Mobile view
}}
</div>
<div style="flex-basis: 12em; flex-grow: 1;">
{{Colored bar
| title = Mobile view Talk
| title-color =
| title-color-background =
| icon =
| link = Wiki_talk:Mobile_view
}}
</div>
<div style="flex-basis: 12em; flex-grow: 1;">
{{Colored bar
| title = Labels
| title-color =
| title-color-background =
| icon =
| link = Wiki_organisation#Labels
}}
</div>
</div>
With this render (move the size of your window of try to see this page with mobile) :