Chameleon skin update TODO

[guoyunhe]

Feel free to tell me ANYTHING you want to change about Chameleon skin.

• [x] Check overflow problem of pre and table elements again.
• [ ] gutigen: It's monolithic - there is no distinction between page elements which forces user to specifically look for what they need in a wall of text instead of finding what they need or may need through natural flow of the page browsing.
• [x] Patryk Zera: "position: relative;" for #user-menu-button looks completly useless, can it be removed?
• [ ] Fonts cannot be loaded because they use http in https page. Should update LocalSettings.php to use https://xx.opensuse.org/ as site URL.
• [x] <dt> and <dd> should have indention, because it is used for talk page.
• [x] Possibility to style a link to button with wiki code.
• [x] Avoid using JavaScript for style override
• [ ] Be able to access sidebar on mobile devices

[hellcp]

Whoops, I was gonna comment

Is there really no better option for us to fix stuff than assign different classes with JS? I can see that being kinda problematic ;)

[guoyunhe]

for most cases, we can use css override to do it better. Using JavaScript to add classes is just a lazy solution...

Here are some cases where we have to use JavaScript to change DOM structure, because Mediawiki doesn't let us to change how it dump HTML.

[cboltz]

I noticed lots of edits similar to http://en.opensuse.org/index.php?title=Portal:Leap&diff=126254&oldid=126250 to fix the column width on portal pages. Is there a way to fix this in the CSS instead of editing all portal pages in all languages? ;-)

[hellcp]

Oh, that's a weird edit? That clearly should have been done with col in bootstrap and not by assigning width percentage :/ While previous theme used grid_X to represent this stuff (as 1-16), bootstrap provides col-YY-X (where YY is @media dependent column structure, which will be useful here, as well as X being 1-12), it shouldn't be hard to reassign those properly.

IMO we should write guide on this stuff and get some volunteers to go around the wikis and do this stuff with us, because it will get worse the longer we will neglect this. At the same time such a team could serve as QA for Wiki to check out stuff that maybe is way past its date and no longer useful or even harmful. As much as this stuff should work in "self-repair" kinda way, some topics just get overlooked by a lot of people, so maybe it's time to step in and fix those imperfections properly together ;)

Fixing it with JS means that we are cutting off community of people that care a lot about their online security by disabling all and every trace of JS in their browser too.

First things first though, we should fix templates, they won't fix themselves, and aren't that hard to fix ;)

[guoyunhe]

Use Bootstrap grid is good because it support different screen sizes.

We should write a layout/style guide for wiki contributors and give some well crafted pages as examples.

[guoyunhe]

I edited https://en.opensuse.org/Portal:Leap to use Bootstrap grid and card. Template:Portal has been updated, too.

We can gradually improve all portals.

One strange thing I noticed: when you load a page with list, the list pading/margin will change before and after CSS/JS loading finish. Since MediaWiki bundled all CSS together, I cannot find the rules that cause this result.