Wiki.python.org is not mobile-friendly

[benjaoming (Benjamin Balder Bach)]

Hello

I maintain django-wiki - it’s based on Django and uses Bootstrap so it’s also mobile friendly. Since it’s Django, it’s possible to override both templates and CSS (in order to align it with python.org website). There’s a demo available.

It has a plugin system. I won’t have time to organize new plugins for the scope of wiki.python.org, but since it’s all Django-based, I could be optimistic that with the help of community, onboarding a big wiki like this one, would help mature the project if there’s a fundamental interest in having a Django-based wiki.

I’ll be happy to answer any questions from the Documentation WG if there’s an interest.

[malemburg (Marc-André Lemburg)]

I believe volunteer time is better spent on creating an updated theme for the moin wiki (which is written in Python as well), rather than ditching the complete tech stack

I’m sure we can get better responsiveness by just tweaking the existing CSS a bit.

[malemburg (Marc-André Lemburg)]

The theme is a derivative of the moin default theme, so will have to be GPLed as well.

Radomir’s main website seems to have been replaced with something non-Python related. I’ll ping him. Perhaps he can make the theme available on his Github account at deshipu (Radomir Dopieralski) · GitHub

Alternatively, I could upload the actual version used by wiki.python.org to my Github account and we could take it from there. I’m not sure whether this was tweaked compared to Radomir’s original version at some point.

[malemburg (Marc-André Lemburg)]

I’ve been in contact with Radomir and forked his hg repo here: GitHub - malemburg/moin-europython-theme

This is in sync with the theme code running on wiki.python.org, but not directly tied to this (i.e. updates won’t update wiki.python.org). However, we can use this repo for adding responsiveness and later also get this under the Github python org.

Happy contributing

[simonw (Simon Willison)]

Here’s the smallest snippet of CSS I could come up with that made things more readable on small (mobile) screens:

@media only screen and (max-width: 600px) {
  div#content {
    padding: 12px 12px 12px 12px;
  }
  div#sidebar {
    float: none;
    width: 80%;
    clear: both;
  }
}

Before:

[simonw (Simon Willison)]

After:

There’s plenty more that could be done, but I think this is a good starting point.

[malemburg (Marc-André Lemburg)]

Could you submit this as a PR to the theme repo: GitHub - malemburg/moin-europython-theme: EuroPython Theme for moin

I can then apply this to the wiki installation.

Thanks.

[CAM-Gerlach]

FWIW, as this repo is apparently the canonical source for a piece of for Python web infrastructure, it might be worth considering promoting it to the python organization per the repository policy. to avoid bus factor, make it easy to find and ease contributions from other core team members.

[hugovk (Hugo van Kemenade)]

Here’s a PR: Add mobile-friendly CSS by hugovk · Pull Request #1 · malemburg/moin-europython-theme · GitHub

[malemburg (Marc-André Lemburg)]

Thanks, @hugovk . I have installed this today. Just have to wait to see whether the change persists, since the VM is managed by SaltStack.

[hugovk (Hugo van Kemenade)]

That’s already made a huge difference, thanks!

[ernstki (Kevin Ernst)]

A few more tweaks to save some space by compressing the navigation. Also hides the logo text below a certain threshold, to leave more room for the search box.

In the animation, I stopped at slightly smaller than the width of an iPhone 12, according to Firefox’s Responsive Design Mode.

I’ll be preparing a PR for this momentarily.

[ernstki (Kevin Ernst)]

More touch-ups for small screens; add installation instructions to the README