Echo extension is not responsive

[neoncitylights]

The echo extension isn't responsive, such as when viewed on mobile like an iPhone 5S. The messages and alert boxes' heights also get taller when scrolling down (screenshot of echo when scrolled to ~about the middle of the page)

[chriscook18]

I was going to screenshot the same message box size issue from Chrome/S3, although the content usually loads for me. Does a similar thing happen if you try and search @codynguyen1116 ?

[MtMNC]

The text might actually be there, just white. I'll try and take a look later today.

[neoncitylights]

Yep content loads for me too it's just the fact that the message box is covering the content. Also @chriscook18 there is a bug with the search issue where it gets overlapped by the hamburger icon (which should be separated into a new issue for organization) although I'll post a screenshot of it anyways. I'm thinking it could be fixed with a simple css property z-index fix.

[chriscook18]

Okay, so that issue is the same as my search issue - by content though, I meant the notification drop-down having content.

[neoncitylights]

Gotcha, moving the search issue to #433 . As far as the content it actually loads its just being pushed to the left so much that it can't be seen

[georgebarnick]

Echo needs to be repositioned and probably re-engineered for our mobile skin anyways. Since it updated with 2 separate icons it's gonna take up valuable space in the mobile skin.

[chriscook18]

Okay, so Chrome/S3 we have [Edit: Search image moved to #433]

[neoncitylights]

@chriscook18 Please move your comment to #433 since it's been created now, thanks ;) (although those are useful screenshots)

[MtMNC]

The version of Echo we have installed now is very different from what we had before. The problem is we probably need to support both....

For the old version we hid the icon on small, and instead a notifications item appeared in the user dropdown menu. There'd be a little red rectangle in the corner of the user's avatar to indicate there were new notifications. Would something similar to that be good for the new version do you think?

[neoncitylights]

I'm sketching out some ideas that we can put into code but I think instead of just a box there should be a bell icon so it makes more sense to users (and then with WikiFont we can just use CSS to make it red). Then a small number on the upper right of the bell in a small rectangle (this is apparently called a badge according to Google Material Design, I never knew there was a term for this :P)

[neoncitylights]

Actually haha sorry I misread your comment, I actually like your idea better than mine since it's better use of space :) should still be noticeable too

[neoncitylights]

@MtMNC @georgebarnick

We can also give feedback on the splits on

• https://www.mediawiki.org/wiki/Topic:Sw196pvf5vwt6pku
• https://phabricator.wikimedia.org/T123018.

The links to the extension are at

• https://www.mediawiki.org/wiki/Echo_(Notifications)
• https://www.mediawiki.org/wiki/Extension:Echo

(Not entirely related but since we're a wiki farm this is something we would be interested in: https://www.mediawiki.org/wiki/Help:Notifications/Cross-wiki)

[neoncitylights]

Adding another reference @MtMNC @georgebarnick https://phabricator.wikimedia.org/T108190 - Cross wiki / global notifications

[MtMNC]

Put this on Phabricator: https://phabricator.wikimedia.org/T126106

[neoncitylights]

Closing since moved upstream