Page MenuHomePhabricator

Site logo should be present on Vector's responsive design
Closed, ResolvedPublic

Description

Looks like the logo gets lost with Vector's responsive design. The top header looks... well, a bit empty with just the search bar. Ideally, the logo should be placed next to the search bar even when responsive design is enabled. Also I noticed that a part of the search bar overflows out of the screen on some widths. See screenshot below. (Note: I haven't checked on a mobile, this is a screenshot taken while on a desktop zoomed-in.)

vector rwd.png (873×1 px, 66 KB)

Event Timeline

Glaisher raised the priority of this task from to Needs Triage.
Glaisher updated the task description. (Show Details)
Glaisher added projects: Vector, Design.
Glaisher added subscribers: Glaisher, matmarex, Harej and 2 others.

Looks like this is intentional because "there's no space left for it." But I can see the logo on the original wikimediadc.org and there is space left for the logo. :-) Perhaps, instead of completely hiding the logo, it could be resized on smaller screens or maybe consider hiding the logo only on the most extreme cases (i.e., really small screens)?

I removed one rule from the original CSS since it used a separate logo file instead of the default Wiki.png, with dimensions differing from the standard Wiki.png ones. Ideally at least some version of the logo would be shown for mobile, and magic can be done with background-size: contain, as @Isarra's GreyStuff skin demonstrates, but in practise it's often hard to fit both the logo and the sitename on screen at the same time for mobile devices with a low screen resolution.

Any and all proposals and/or patches to resolve this are more than welcome. :-)

@Harej and I briefly discussed this today, and how the implementation on Wikimedia DC's wiki has a different logo. Maybe we can do something that is like a reverse of $wgLogoHD where we can specify a different logo for smaller resolution screens?

@Harej and I briefly discussed this today, and how the implementation on Wikimedia DC's wiki has a different logo. Maybe we can do something that is like a reverse of $wgLogoHD where we can specify a different logo for smaller resolution screens?

We could re-use $wgFavicon or $wgAppleTouchIcon. ;-)

We could re-use $wgFavicon or $wgAppleTouchIcon. ;-)

Don't those tend to be in kind of weird formats?

Jdlrobson added a subscriber: Jdlrobson.

Low given that Vector responsive is experimental at current time.