Last modified: 2013-06-11 22:06:50 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T49932, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 47932 - Echo broken in conjunction with Modern skin
Echo broken in conjunction with Modern skin
Status: RESOLVED FIXED
Product: MediaWiki extensions
Classification: Unclassified
Echo (Other open bugs)
master
All All
: Normal critical with 1 vote (vote)
: ---
Assigned To: Nobody - You can work on this!
:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2013-05-01 14:34 UTC by Derk-Jan Hartman
Modified: 2013-06-11 22:06 UTC (History)
8 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments

Description Derk-Jan Hartman 2013-05-01 14:34:10 UTC
Echo is totally inaccessible from the Modern skin.

Primary cause is that modern sets p-personal to 'overflow:hidden', hiding the overlay which is outside of it's parent box. I'm not really sure WHY the skin has overflow hidden, it doesn't seem required on first look.

After fixing that, it is still shown partially outside of your screen, because p-personal is left aligned on modern (and cologne blue). The positioning of Echo does not account for this in any way (it uses left: -200px;). Additionally Modern sets an explicit height for <ul> elements (regardless of being direct descent dents) which makes the notifications area very small.
Comment 1 Derk-Jan Hartman 2013-05-01 14:35:12 UTC
Translated, please for now disable Echo for people with skins that aren't explicitly supported :D
Comment 2 Derk-Jan Hartman 2013-05-01 15:27:46 UTC
.skin-modern #p-personal {
  overflow: visible;
}

.skin-modern .mw-echo-overlay {
  left: -10px;
  top: 31px;
}

.skin-modern .mw-echo-overlay-pokey {
  left: 4px;
}

.skin-modern #pt-notifications ul,
.skin-modern #pt-notifications li {
  height: auto;
}

.skin-modern #p-personal #mw-echo-overlay-link {
  padding: 15px 15px 15px 60px;
}
.skin-modern #p-personal #mw-echo-overlay-pref-link {
  padding: 15px 15px 15px 35px;
}

.skin-modern #p-personal .mw-echo-overlay a {
  padding: 0;
  color:#003366;
}
.skin-modern #p-personal .mw-echo-overlay a:visited {
  padding: 0;
  color:#5a3696; 
}
.skin-modern #p-personal .mw-echo-overlay a:hover {
  padding: 0;
  text-decoration: inherit;
}
Comment 3 Derk-Jan Hartman 2013-05-01 16:03:33 UTC
Another issue, the preferences accessor on https://en.wikipedia.org/wiki/Special:Notifications?useskin=modern is broken because it is using H1 positioning, which is inconsistent.
Comment 4 Derk-Jan Hartman 2013-05-01 22:22:36 UTC
i'm choosing to deploy this as a local change at en.wp for now.
Comment 5 Ryan Kaldari 2013-05-01 23:03:37 UTC
Yeah, I don't think we should have those links in the h1 header, personally. This will also likely cause problems in future skins.
Comment 6 Derk-Jan Hartman 2013-05-02 09:34:39 UTC
@Ryan, and where you do, give sane and simple defaults, and then make skin specific 'fluffy' decorations, if need be.
Comment 7 Derk-Jan Hartman 2013-05-03 12:40:50 UTC
My changes don't work for IE users apparently, if someone could invest some time in that, would be awesome, because these users have a properly broken interface right now, with now way to switch back to the working Orang bar.

https://en.wikipedia.org/w/index.php?title=MediaWiki%3AModern.css&diff=553111284&oldid=523652236
Comment 8 Andre Klapper 2013-05-17 15:30:02 UTC
(In reply to comment #7)
> My changes don't work for IE users apparently

DJ: Could you provide a screenshot?

rkaldari: Is anybody working on this, or what's the priority of this bug?
Comment 9 Derk-Jan Hartman 2013-05-17 18:17:09 UTC
@Andre, no, i don't own Windows machines. You can just look at mediawiki.org using modern skin (which wouldn't use my en.wp specific changes) and you'd see the problem as well.
Comment 10 Bartosz Dziewoński 2013-05-19 20:57:03 UTC
(Yes another case where putting the notifications into the personal toolbar cause issues; see bug 47993.)
Comment 11 Derk-Jan Hartman 2013-05-20 12:56:05 UTC
Here a link, to make it dead easy to verify that Notifications is totally broken on Modern: https://www.mediawiki.org/wiki/MediaWiki?useskin=modern
Comment 12 Gerrit Notification Bot 2013-06-02 20:07:37 UTC
Related URL: https://gerrit.wikimedia.org/r/66367 (Gerrit Change I633a93a78f5a78d0642a3a059fa6f7208f99cec4)
Comment 13 Derk-Jan Hartman 2013-06-02 20:08:17 UTC
Now someone can actually take the code from git and improve it to run on IE10.
Comment 14 MZMcBride 2013-06-02 20:09:40 UTC
Bug summary: icw --> in conjunction with
Comment 15 Ryan Kaldari 2013-06-05 21:52:24 UTC
Finally had some time to work on the non-default skin support. Sorry it's taken so long.

@Derk-Jan: Thanks for your work on this. I've taken your patch as a starting point and expanded it. I've also refactored some of the logic for Special:Notifications so that it has sane defaults (as you suggested), and only overrides the styling specifically for monobook and vector. This also has the added benefit of making more of the interface work with Javascript turned off.

I don't have IE10, but I tested it in the various skins in IE8 and it seems to work fine.
Comment 16 Fabrice Florin 2013-06-11 22:06:50 UTC
Thanks to Kaldari's fine work, Modern skins can now get notifications, and the badge and flyout display as intended. 

Please let us know if it works for you. For now, I will mark that bug as resolved, as it seems to work for both Kaldari and I.

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links