veelkoov / fuzzrake

The code behind getfursu.it
https://getfursu.it/info
GNU Affero General Public License v3.0
11 stars 3 forks source link

Update navigation bar #227

Closed TangerineFloof closed 2 months ago

TangerineFloof commented 2 months ago

I focused on a couple QoL improvements for the navigation bar:

Cleaned up links. I've simplified the names and icons for the navbar

I also reorganized the links. Following web design principles that expect left → right, I put the links that are relevant for all users on the left. Links that are less universal are on the right.

I also updated the icons to try and improve clarity/use more familiar iconography.

Removed "Maker IDs" link. There's a link to it from the about page. Having it in the navbar competed for user's attention. I also think future UI updates can better highlight Maker IDs within the app, so there wouldn't be a significant need for a dedicated page.

Made active page more visible. The label is bold to show you which page you're on

Unread events badge. If a new event has been created since you last visited the events page, it will display a badge on the icon. The badge goes away when you visit the page.

Screenshots

Before:

image

After:

image image
veelkoov commented 2 months ago

What I've done using Bootstrap was not a standard solution, and now that next item has been added, the second row appears on top on mobile (which is most of getfursu.it visitors last time I saw a report): image

TangerineFloof commented 2 months ago

Closing in favor of #235. That PR contains many of the changes found in this branch. It does not include the unread news badge. Following #235 being merged, I'll create a new branch that brings this code into the new system.