| • bmansurov | |
| Dec 5 2016, 9:46 PM |
| F5365805: Screen Shot 2017-01-26 at 2.58.44 PM.png | |
| Jan 26 2017, 10:59 PM |
| F5365797: Screen Shot 2017-01-26 at 2.57.48 PM.png | |
| Jan 26 2017, 10:59 PM |
| F5350344: Screen Shot 2017-01-24 at 1.10.13 PM.png | |
| Jan 24 2017, 6:11 PM |
| F5346425: Screen Shot 2017-01-24 at 12.30.10 PM.png | |
| Jan 24 2017, 11:32 AM |
| F5313307: notifff.png | |
| Jan 19 2017, 5:45 PM |
| F4995627: Header - Signed - New Notification.png | |
| Dec 6 2016, 10:18 PM |
| F4984729: Screen Shot 2016-12-05 at 4.45.28 PM.png | |
| Dec 5 2016, 9:46 PM |
| F4945909: Header - Signed - New Notification.png | |
| Dec 5 2016, 9:46 PM |
Currently the notification count looks like this (notice the "1" in the top right corner):
Change it to be displayed like so:
https://zpl.io/2ckgFh
or see all mocks tagged by this phab card
https://app.zeplin.io/project.html#pid=57a120dbaa97eeab3c8805ae&dashboard&tags=branding
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | Jdlrobson | T148514 [EPIC] Improve site branding on Mobile website | |||
| Resolved | • Nirzar | T152457 Change how the notification count is displayed |
Which code base is this about (and could it be associated to this task)? MobileFrontend? Notifications?
@Nirzar - do we have three states for notifications? Red - unread and unopened, blue - unread but opened, bell - read? On https://wikimedia.invisionapp.com/share/6Z9KIX3AD#/screens/209393219 there's three states, but not here.
Change 330382 had a related patch set uploaded (by Jdlrobson):
Notifications icon simplified to circle from bell
Change 330382 abandoned by Jdlrobson:
WIP: Notifications icon simplified to circle from bell
Reason:
Feel free to pick up this work!
Change 332901 had a related patch set uploaded (by Bmansurov):
Change display of notifications count
@Nirzar, how should the circle look when we have 99+ notifications? With the current dimensions this label doesn't fit into the circle. Can you create a mock for that? Thanks.
you can change the width the circle so it's kind of a pill shape. will that work in your opinion?
This is ready for sign off in the branding branch which is currently checked out @
http://reading-web-staging.wmflabs.org/
this needs work. i wanted to post actual fixes but just keeping this comment so it doesn't go forward
There's no pixelation. but here are visual fixes that are needed, i'm just listing down overall fixes for header work based on what i'm seeing at staging
box-shadow: inset 0px -1px 3px rgba(0,0,0,0.08) Very imp: the border-bottom transparent shouldn't be there but i don't know why it's there so let's talk about removing it *
@Nirzar, some of the points don't belong to this task. Can you add those to the parent task? I'll take care of the notification related ones.
Change 333994 had a related patch set uploaded (by Bmansurov):
Notification count UI fixes
FYI be careful when testing developments in feature branch due to the open bug about template partials not invalidating the master template. I was running memcached so was not seeing what I should be seeing. Be sure to restart memcached before testing anything in the branding branch.
@Nirzar: I've updated the staging server. You should be able to test these changes here: http://reading-web-staging.wmflabs.org/w/index.php?title=Main_Page&action=toggle_view_mobile.
Change 334442 had a related patch set uploaded (by Bmansurov):
Make notification circle rounder
@Jdlrobson yes but i thought if i ask for it, people will throw stuff at me :( actually the circle should be a circle even for 2 digits. if you look at the mocks. there's space
@bmansurov that is for 3 characters, i wanted to have pill for 3 characters and circle for 2
Change 334427 had a related patch set uploaded (by Jdlrobson):
Update notification and search icons
