Wiki.python.org is not mobile-friendly

Hello :wave:

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.

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

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

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.

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

1 Like

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:

After:

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

3 Likes