Page MenuHomePhabricator

Overlap of word mark and icons
Open, Needs TriagePublic

Description

Screenshot_2021-01-22-18-01-02.png (2×1 px, 283 KB)

Something broke this Thursday. I think someone mentioned this on Discord but I wasn't experiencing it at the time.

That said, below the width where these elements would run together it might be nice to have a standalone W (+- other wikis), or perhaps the standard wiki icon, just at the appropriate size for the other icons in the row, instead of the full word mark. That would give back some "above the fold space" when browsing on smaller devices, where the word mark would otherwise display below the row of icons.

This is Firefox (current) for Android.

Event Timeline

Izno updated the task description. (Show Details)

Why are there even so many icons? We could reduce them to three...

This comment was removed by Izno.

Put two of them with the search... wait, that's a different skin. Though really, why can't this do that too?

But seriously yeah this needs... sorting out.

Why are there even so many icons? We could reduce them to three...

Minerva munges the two notifications indicators together, an approach I'm not a fan of TBH. It's an annoyance/confusion when I see big red numbers only to see someone was thanking me.

Put two of them with the search... wait, that's a different skin. Though really, why can't this do that too?

Interesting idea. Not sure I'm a fan of that from a UI perspective (which of the icons go with the search bar?).

Also I think it would be less pretty. :)

Minerva munges the two notifications indicators together, an approach I'm not a fan of TBH. It's an annoyance/confusion when I see big red numbers only to see someone was thanking me.

The original design was for it to only turn red for new alerts, blue for new notices, and grey for nothing new... but honestly I was kinda thinking we just be lazy by default and hide the notices on mobile. Because how important are they really? >.>

Minerva munges the two notifications indicators together, an approach I'm not a fan of TBH. It's an annoyance/confusion when I see big red numbers only to see someone was thanking me.

The original design was for it to only turn red for new alerts, blue for new notices, and grey for nothing new... but honestly I was kinda thinking we just be lazy by default and hide the notices on mobile. Because how important are they really? >.>

Hiding the "notice" icon would be interesting too. Not a fan of hiding the red indicator icon.

You could put it in the user drop down?

I'm like 50 50 for doing the same thing for the inbox icon, but that one would need to light up then (maybe?) and Good Luck With That.

image.png (192×720 px, 17 KB)
I wouldn't call it an elegant solution by any means, but simply moving the element over seems to be efficient enough to fix the problem. Moving the user menu, notices, and alerts icons to the right whilst moving the logo to the left slightly would do the trick — but, it does still look a little silly. Perhaps if all of the element were the same size and the hamburger menu was made a bit smaller it would do the trick.

I don't see why all of the icons are different sizes? And why is there such a big gap between the alerts and notices icon?

@media screen and (max-width: 850px) {
  #user-tools h2, .sidebar-chunk h2 {
    /* width: 30px; */
    /* height: 30px; */
    width: 29px;
    height: 28px;
  }
  #site-tools h2 {
    /* right: 4.95em; */
    right: 4.2em;
  }
  #p-logo-text {
    /* left: 4.45em; */
    left: 3.5em;
  }
}

@media screen and (max-width: 850px) {
  #personal-extra {
    /* right: 7.5em; */
    right: 5.5em;
  }
}

Are changes for a quick fix, from what I can see, or at least, what would produce a workable solution in the interim based on the image above — or at least, those work for a mobile screen with a width >=350px, anything below, and it just seems a bit silly to keep working with the Wikipedia logo, and swapping it out for the 'W' seems amicable enough.