View Topic

When I posted the image of how good the recruitment page looked on mobile, I realized just how shitty the header looked. If you recall, the header took up at least a third of the page! Since then, I've been working in improvements to make it work better and look better, especially on mobile. So what exactly has changed?

Navigation Bar Style Updates
Technically, we switched from using floats to position the menus to using flexboxes. Less technically, we switched from an old way of coding the navigation bar to a new way that will make it less likely the navigation bar will stretch or look like shit on any resolution. While we were at it, we made the menu options slightly smaller and less bulky.

A Consolidated Mobile Menu
Now when you're viewing a page that has a lower resolution, the menu options will merge into one with everything on it, saving space and further preventing the navigation bar from taking up more of the screen.

And of course, Code Improvements
Similar to the recruitment page, I went through and updated code. Not that this was anywhere as long and tedious as with the recruitment system, but every little bit helps. =]

Mobile Screen Before

Mobile Screen After

Ah, much better, if I say so myself! If you do not see these updates, try force-refreshing your cache before reporting the issue. You can do this in Chrome with Ctrl+F5.

Fun Fact: Chanku's Header
Did you know that @Chanku still uses the older 2014/2015 header? At his request, I kept the old code and made it so that he would continue seeing that one instead of any newer ones. In fact, I call it "Chanku's Header" in the code comments. xD I wouldn't recommend using that one on mobile, but this is what it looks like on a computer monitor:

Chanku's Header (2014/2015 Era Header)

Cool!

FYI the placement of the logo in the new navigation bar looks rather odd on smaller laptop screens:

Spoiler

I've been noticing some issues with the notifications bar:

(The first one was that it was going behind the forums, but that was fixed pretty quickly.)

When you clear an unread notification, the icon stays unread until you reload the page, unlike before (IIRC it would change to the read icon).

On mobile, you can't close the notification menu besides reloading the page (IIRC the previous functionality that was that tapping the icon would close it).

(Also, this isn't really an issue, but the header text color seems a bit bright, and menus are a lot smaller... which is particularly odd since the former height of the menus was roughly the same as that of the header, but now that the menus are smaller, the header is still the same size. It's also a bit jarring because hovering over Members shows a larger and greyer menu more akin to the old ones. And the position of the menus is also more smushed upward instead of being under the header... It's not really an issue though, I just think it used to look prettier.)

I've been noticing some issues with the notifications bar:

(The first one was that it was going behind the forums, but that was fixed pretty quickly.)

When you clear an unread notification, the icon stays unread until you reload the page, unlike before (IIRC it would change to the read icon).

On mobile, you can't close the notification menu besides reloading the page (IIRC the previous functionality that was that tapping the icon would close it).

(Also, this isn't really an issue, but the header text color seems a bit bright, and menus are a lot smaller... which is particularly odd since the former height of the menus was roughly the same as that of the header, but now that the menus are smaller, the header is still the same size. It's also a bit jarring because hovering over Members shows a larger and greyer menu more akin to the old ones. And the position of the menus is also more smushed upward instead of being under the header... It's not really an issue though, I just think it used to look prettier.)

I believe I've fixed the issues that you identified...Ctrl+F5 and let me know if you still have an issue.

Some of it's just a matter of preference though, I suppose...personally, I like that the menus pop up right under the link now, and the smaller link boxes look better, especially in the longer combined menu. I did slightly expand them, though not to their previous size.

I've been noticing some issues with the notifications bar:

(The first one was that it was going behind the forums, but that was fixed pretty quickly.)

When you clear an unread notification, the icon stays unread until you reload the page, unlike before (IIRC it would change to the read icon).

On mobile, you can't close the notification menu besides reloading the page (IIRC the previous functionality that was that tapping the icon would close it).

(Also, this isn't really an issue, but the header text color seems a bit bright, and menus are a lot smaller... which is particularly odd since the former height of the menus was roughly the same as that of the header, but now that the menus are smaller, the header is still the same size. It's also a bit jarring because hovering over Members shows a larger and greyer menu more akin to the old ones. And the position of the menus is also more smushed upward instead of being under the header... It's not really an issue though, I just think it used to look prettier.)

I believe I've fixed the issues that you identified...Ctrl+F5 and let me know if you still have an issue.

Some of it's just a matter of preference though, I suppose...personally, I like that the menus pop up right under the link now, and the smaller link boxes look better, especially in the longer combined menu. I did slightly expand them, though not to their previous size.

Thanks, it works a lot better now!

Also, if I'm not mistaken, is the notification audio missing? It doesn't seem to play anymore for me...

Also, if I'm not mistaken, is the notification audio missing? It doesn't seem to play anymore for me...

It's not missing, but Chrome no longer automatically plays sound on websites. See more here.

Also, if I'm not mistaken, is the notification audio missing? It doesn't seem to play anymore for me...

It's not missing, but Chrome no longer automatically plays sound on websites. See more here.

Ah, didn't realize that this applies not just to videos.

Hmm, I'm hearing the sound again. Though perhaps that's the tracked interaction that the article refers to.

Hmm, I'm hearing the sound again. Though perhaps that's the tracked interaction that the article refers to.

It's possible...unfortunately, I don't know that there's anything I can do on our end. It's up to Google to determine how it handles sound on Chrome.