Page MenuHomePhabricator

Wrap Vector in a fixed size container
Closed, DuplicatePublic

Description

For me, the most disturbing thing about MediaWiki is the fact that it spreads all over my 1920x1080px screen. Being forced to read 1920px content is not the most pleasant thing.

I know UI things require research and stuff, but I propose the following thing: let's wrap the MediaWiki in a centered container.

Having something like:

.container {
    display: block;
    width: 1080px;
    margin: 0 auto;
    padding: 0;
}

We have clear examples of websites which adopted this model, like: Google Design, Facebook (for the News Feed), and tipically every highly accessed website (AFAIK) because things become easier to read, you don't have to tilt your head for every row you read back and forth.

This can also be adapted to different media queries in the CSS and will also have the advantage of developers knowing what layout to expect when they write an extension, a special page or something like that.


See also:

Event Timeline

I don't know whether this was discussed in the past... anyway I agree with you @Victorbarbu .
I think the current behavior, not having a maximum width and spreading the text over the screen width, is not a good behavior, as it decreases readability. Particularly because the font size doesn't stretch to the screen width.
In fact, I think having a maximum width may not be optimal either. I'd rather think the entire UI should stretch to the screen width, but I believe this is very hard in our situation (so many sizes are defined absolutely, in pixels).

matmarex subscribed.

I assume you want this for the default skin, Vector. Other skins implement this already, e.g. Timeless.

A change similar to what you're proposing was a part of https://www.mediawiki.org/wiki/Extension:VectorBeta at one time and it was met with widespread disapproval. The implementation/design there was kind of poor though (it just limited the width of content without adjusting the design in any way).

I agree with you that this is not a easy thing, but it can certainly be
achieved.

I started working on this. Vector seems to have a lot of problems and seems to be really hacky. ALmost all the styles must be refactored, IMO.

The first thing I want to ask about is: According to caniuse.com, flex is supported in 97.12% of browsers globally, should we move on to flex? It makes things much much easier!

Probably not. The core page viewing and editing experience must still be available on the remaining 2.88% of browsers. It may be somewhat degraded, but it must still be possible to view or edit a page using IE 6, without too many visual glitches. See https://www.mediawiki.org/wiki/Compatibility#Browsers.

I will see what I can do about that and I will come up with a patch soon.

I made some refactorings of the code and then I came up with this

Screenshot from 2016-11-10 18-06-34.png (1×1 px, 357 KB)

The width of the page is adjustable based on a LESS variable and I would really like some feedback on this.

  1. Should it be responsive? Meaning more fixed sizes depending on the viewport width?
  2. Is there any way of adding a setting on the User Preferences page to adjust their page width?
  3. Should we enable flexible logo size? So it has fixed width and flexbile height? (but I think this is another topic)

I want to work with this issue can anyone give me more information of this issue?

Volker_E renamed this task from Wrap MediaWiki in a fixed size container to Wrap Vector in a fixed size container.Oct 9 2019, 9:48 PM