[App Drawer] Fixing The App Drawer

[peth-yursick]

As promised, time to expand on the issues mentioned for the app drawer!

Here's a few:

• The drawer itself should be at least 30% thinner. Looks too big now + shows the noise the parts that are pasted from figma.

• The apps in the bar itself should be centered, currently aligned top
  

• The drawn out part should be smaller than the drawer on all sides, currently just on top left
  

• The drawer should be transparent blur like the cards in the profile & NFT gallery

• The font should be IBM Plex Sans (I think currently its just IBM Plex)

• There should be no underscore when hovering buttons

• The apps in the drawer should have equal spacing on all sides, like in the original design
  
  - There should be no blue frame around the logo

• There should be no blue frame around the buttons
  

• When the app drawer is open, the shortcuts from the navigation bar should move from the bar to the drawer itself.
  
  - Different version of the logo should be used
  

• Most importantly, the apps should be opening in a window like the NFT gallery, not in new pages.

[TheLoneRonin]

Perfect! Thanks for providing all of this info @peth-yursick, there are actually refactors we need to do to the source too. So being able to resolve all this is important.

Please let me get the ball moving on metamaps first then we can move forward on the drawer.

Cheers!

[peth-yursick]

Perfect! Thanks for providing all of this info @peth-yursick, there are actually refactors we need to do to the source too. So being able to resolve all this is important.

Please let me get the ball moving on metamaps first then we can move forward on the drawer.

Cheers!

Tbh I think the app drawer in its current state is still way more important than metamaps.
It was slapped together super swiftly for the launch, which I appreciate, but its kind of embarrassing to keep it in this state for more than a few weeks for newcomers to see.. 😂
Plus, it makes sense to have the fully working version first to be able to integrate metamaps properly into it.

If you want to keep working on metamaps, hopefully @pakokrew or someone else will be able to push this forward meanwhile.

That said, I've been thinking about metamaps a lot yesterday. I was setting up the Notion space & integrated the navigation board, but its super clunky & kind of useless. It got me thinking how awesome will it be to have a proper tool that dynamically generates maps based on eg. kanban boards 🤯
Kanban itself isn't bad, but its too zoomed into specific tasks & fails to give you the bigger picture overview of how it all fits together & it doesn't give enough context into how the specific raid is going + just isn't as nice to look at.

Happy new year dude! 2021 will be 🔥🐙

[TheLoneRonin]

@peth-yursick, no worries! Let me shift focus to that today.

Even though metamaps is functional, it's still a fair bit of work before an actual merge.

Don't get me wrong, totally feel you about the app drawer.
Let's ensure we are at a consensus about the quality and then move forward from there back to metamaps!

Cheers!

[youngkidwarrior]

@peth-yursick I took a look at this for a hot minute. It's doable, but going to need a lot of reworking from what it is now, since it was done so quickly. I'd probably prioritize it getting done right. It's a bit of a hack job right now (no offense to the dev, knowing it was last minute)

[TheLoneRonin]

@youngkidwarrior, no offense taken. What feedback do you have? Always open to criticism.

[youngkidwarrior]

It's been a few days since I looked, but generally I think the biggest flaw was flexbox could have been used a lot more elegantly to solve spacing problems.

Also I've always been a big fan of using % for spacing over rem. Especially with all the absolute positioning thats being used. It avoids a lot of the weird spacing quirks.

[TheLoneRonin]

@youngkidwarrior, that makes a lot of sense.

Do you think there is a way to not use absolute positioning? Because, if there is an effective way to convert this to a grid, it would probably solve a lot of these issues.

If we do end up coming up with a good solution with grid instead of flexbox. It would probably involve changing the structure of the rest of the header.

[youngkidwarrior]

@TheLoneRonin We should divide and conquer this to get work done faster.
css grid could work. Problem with grid is its bad at being animated. I'm not sure what the animation requirements are here. They don't seem too demanding, so could go that route. I'd also change nav menu to grid while your at it.

[TheLoneRonin]

@youngkidwarrior, I'm certain the app drawer menu can and should be done in a grid.

Also, another big issue we need to tackle is effectively getting the backdrop-filter to work across browsers.
The actual app drawer background is super non-ideal as a .png right now and should be a linear-gradient with a backdrop-filter and blur.

This is a much broader issue that impacts the rest of the app. Since this is actually a W3C issue. And a lot of the designs use backdrop-filter.

Either way, don't fret to roast anything here. Always happy to hear how it can be done better.

[youngkidwarrior]

Yes I agree, the drawer can be made a grid.

I saw that. backdrop-filter is supported by edge and can be toggled on in Firefox. I'd say it's safe to use. https://caniuse.com/css-backdrop-filter

Whenever using images your gonna have to use position absolute. If we can't get it to work in css, an svg would be better.

[TheLoneRonin]

@youngkidwarrior, okay, let's confirm changes that we would want.

Ideally @HammadJ and @pakokrew can sign off these changes for the next PR.

---

1. Remove rem where possible and use %.

• The app drawer heading size should be % based. (needs discussion)

• The app drawer heading items should be positioned with flex and %.

2. Improve formatting of flexbox for both the footer and header.

3. Update the app drawer to grid on both footer and header.

4. Remove the background .png on the app drawer and use linear-gradient and backdrop-filter. If there is no support, set the opacity to 1 (needs discussion).

5. Update the motion.div animation to have display: none; at the last frame.

6. Update visual issues as mentioned by @peth-yursick.

[alalonde]

I saw that. backdrop-filter is supported by edge and can be toggled on in Firefox. I'd say it's safe to use. https://caniuse.com/css-backdrop-filter

I would not call it "safe to use" as it doesn't "just work" in FF evergreen. But I'm partial to FF as it is my default browser by choice, and also highly value consistency and universal support.

In my other PR I just added a transparent background as a fallback. So if we do use backdrop-filter I think we need to have a reasonably good-looking fallback.

[peth-yursick]

5. Update visual issues as mentioned by @peth-yursick.

One that wasn't mentioned was the size difference in icons:
EDIT: Maybe its not a difference in sizes but just the margins between the buttons?

And noticed you changed the app drawer font to be the same as on navigation bar..
If they can't be different, I think the sans one that's in the app drawer design would be better.

[pacoccino]

Lot of things here, maybe we could create a new issue or create a post here that we update with all the TODO for this task, instead of having everything lost in the discution.

@peth-yursick

Most importantly, the apps should be opening in a window like the NFT gallery, not in new pages.

We'll do that on a separate task. Please create an issue specially specing this.

I didn't put back my head in the code yet, but from I wrote before on #249 and #245 :

• Refactor the code so we don't write the same code twice. Componentize things, and ideally share the same code for mobile and desktop
• Edit the icons images so they are all square and same pixel size. (I think I have a bunch of Apple emojis in PNG)
• Better use of CSS for responsiveness. I'm bad at this, but I know that using absolute positioning is bad practice. Use gradient instead of images whenever you can. Use dynamic sizes.
• use Next's Image component everywhere on the app drawer

[alalonde]

This really requires a refactor, but I'll do this piecemeal and keep a branch up to date for other folks to work off of if I get pulled away. Starting on improving the images (pulling in @pakokrew's emoji PNGs from discord)

Branch is here.

[alalonde]

Issues remaining at this point are:

• drawer is way too big on tablets (probably should just switch to the footer drawer like on mobile)
• margins between buttons are still too large
• apps should be opening in a window like the NFT gallery, not in new pages
• icons should move from the toolbar to the drawer when opened

I actually don't agree with the latter two; neither are common UX in modern web apps.

[dysbulic]

Chromium 87.0 on Ubuntu 20.04:

[alalonde]

Chromium 87.0 on Ubuntu 20.04:

Those look like the old icons. Do a few refreshes or force refresh and I think it will render fine.

[dysbulic]

Those look like the old icons. Do a few refreshes or force refresh and I think it will render fine.

I cleared all the application data in the developer toolbox then hit Ctrl+Shift+R to no avail.

I checked it out in Firefox and Chrome, and both look fine.

[alalonde]

Issues remaining at this point are:

* drawer is way too big on tablets (probably should just switch to the footer drawer like on mobile)

* margins between buttons are still too large

I fixed the first issue in #300. Margins between rows are actually computed such that the rows fill the space evenly.

Those look like the old icons. Do a few refreshes or force refresh and I think it will render fine.

I cleared all the application data in the developer toolbox then hit Ctrl+Shift+R to no avail.

I checked it out in Firefox and Chrome, and both look fine.

OK, looks like something in our CSS is not rendered the same in Chromium for some reason. @dysbulic Would you be able to take a look at this? I imagine it's a pretty straightforward fix.

[dysbulic]

@alalonde, @HammadJ suggested in another pull request that this is related to the use of absolute units.

I can look at it, but I'm currently trying to get MetaMaps to the point other's can easily contribute, and it may be a couple days.

[alalonde]

@alalonde, @HammadJ suggested in another pull request that this is related to the use of absolute units.

I can look at it, but I'm currently trying to get MetaMaps to the point other's can easily contribute, and it may be a couple days.

OK, no worries. I only asked because you are likely the only Chromium user working on this.

[peth-yursick]

I actually don't agree with the latter two; neither are common UX in modern web apps.

Only because its not common?
It was criticized already, but its kind of crucial to building a unified UI because MetaGame is on many different places.
Not sure there is another way to make this real: https://www.notion.so/MetaOS-b2d2f40a81424cb38009d9872da6b920
Long term, it should be a native app

[dysbulic]

• When the app drawer is open, the shortcuts from the navigation bar should move from the bar to the drawer itself.

What is the motivation for moving the buttons in the navigation bar? From a UX perspective, moving elements around increases how hard a user has to work to use an interface. I should only have to learn how to access the Raid Map once, not have it disappear when the drawer is open.

Additionally, the drawer is already pretty full and putting the four menu items into it only serves to make it more so.

Also the XP and Seeds links at the top do not fit with the visual metaphor of the rest of the buttons. It's not immediately apparent they're navigation options.

I think the navigation menu items should stay where they are.

[pacoccino]

I think the navigation menu items should stay where they are.

Yes

[peth-yursick]

I should only have to learn how to access the Raid Map once

You do. Then when you want to open raids, you click raids, you don't open the whole drawer when the raids button is already there. If you don't need raids, then it doesn't matter if it disappeared 🤷‍♂️

Its the same on mobile OSes, you open it and the buttons disappear, but I think the main reason I made it so back when I originally made the design is because there are few buttons. If the buttons don't move, the app drawer looked short & fat vs taller & thinner when there are more buttons..

But I don't think we will have this problem of "not enough apps" in the future, so I don't really care about it.
Make it however you want to make it :)

Also the XP and Seeds links at the top do not fit with the visual metaphor of the rest of the buttons. It's not immediately apparent they're navigation options.

They're not navigation options, they're supposed to be numbers like on the phone where you have the clock & battery percentage. Maybe we don't need them since all that info will be displayed on the dashboard, though it might still be cool to have it accessible so people don't have to navigate back to the dashboard to see? Idk.

[dysbulic]

They're not navigation options, they're supposed to be numbers like on the phone where you have the clock & battery percentage. Maybe we don't need them since all that info will be displayed on the dashboard, though it might still be cool to have it accessible so people don't have to navigate back to the dashboard to see? Idk.

That makes alot more sense. I agree that would be useful to display.

[dysbulic]

#234 covered all the issues here, and if there's something unanswered buried in these myriad pages, it should be reentered as a new issue.