Page MenuHomePhabricator

When not using MobileFrontend, Echo does not appear well on small screens, because it does not use responsive design
Open, LowPublic

Description

This was originally brought up on the Brickimedia Association's GitHub (https://github.com/Brickimedia/brickimedia/issues/432).

Echo does not display well on smaller screens. This isn't a problem on Wikimedia projects since they use MobileFrontend, but this does cause problems for other sites that do not. Here it is on Brickipedia, which uses the Refreshed skin (GitHub):

Screen Shot 2016-02-05 at 9.06.50 PM.png (1×800 px, 278 KB)

It breaks on resize too (gif):

resizebreak.gif (719×535 px, 2 MB)

Issues can be split into two parts: the buttons and the dropdown.

The switch to two buttons with icons means Echo takes up a good deal more screen real estate than it did before. This isn't much of an issue on larger screens, but as you can see on small screens like phones or tablets that extra space is much more valuable and would find better use elsewhere. It would be nice if the buttons consolidated into one beneath some window width. Also, this might belong in a separate task, but there could be a LocalSettings or user preference to toggle between one and two buttons as well.

Next the dropdown itself. As shown above, the notification text gets partially cut off on small screens, and it can disappear entirely when the window is resized. It would be nice if the notification items took up with the full width of the window once it gets small enough.

Event Timeline

MtMNC raised the priority of this task from to Needs Triage.
MtMNC updated the task description. (Show Details)
MtMNC added a project: Notifications.
MtMNC added subscribers: MtMNC, SamanthaNguyen.
Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald Transcript

Add @georgebarnick as a subscriber since he'd be interested also

For reference, Refreshed skin uses JavaScript and CSS hacks to make Echo work at all in the skin. Without those hacks, Echo is even less adapted for mobile display in skins that support mobile web without MobileFrontend.

Who are the main, active contributors to the MediaWiki Notifications (Echo) project? Maybe they should be subscribed to this thread

We're aware of it. It e.g. appears in our IRC channel (#wikimedia-collaboration on Freenode).

Mattflaschen-WMF renamed this task from Echo not responsive/mobile friendly to When not using MobileFrontend, Echo does not appear well on small screens, because it does not use responsive design.Feb 9 2016, 11:58 PM
Mattflaschen-WMF set Security to None.

Ah okay, thank you for letting me know :)

SamanthaNguyen added a project: Design.

Wrote an ugly hack to fix it, but surely's there another way to do this that's sane, right?

@media (max-width: 600px) {
	.oo-ui-popupWidget-popup {
		width: 340px !important;
		left: 120px !important;
	}
	
	.oo-ui-popupWidget-body {
		width: 100%;
	}
}
SamanthaNguyen moved this task from Backlog to Feedback on the Refreshed board.
SamanthaNguyen moved this task from Feedback to Bugs on the Refreshed board.
Mattflaschen-WMF lowered the priority of this task from High to Low.Dec 2 2016, 3:07 AM
Mattflaschen-WMF moved this task from Untriaged to Freezer on the Collaboration-Team-Triage board.
Mattflaschen-WMF unsubscribed.