Make the default page desktop compatible.

[dadiorchen]

The /wallets/[wallet name] page now is working correctly on the mobile device, now need to make it compatible with the desktop screen size, the design:

[dadiorchen]

Basically, we will use the same route/URL and components/pages for both devices, I guess this issue requires some advanced features of MatieralUI, like the Grid with xs/ms/... parameter, and some condition rendering according to the screen size.

Or any other ideas/suggestions are welcome, feel free to discuss them here.

[VWRoli]

Is there a specific reason why the tab component have a different style on desktop? Or is it just an accident in the design? @dadiorchen

[dadiorchen]

Sorry for the confusion, the tab with a green background, is the correct version, this underscore-line style is wrong.

[dadiorchen]

@VWRoli will you take this one? If true, what's your idea on it?

[VWRoli]

@VWRoli will you take this one? If true, what's your idea on it?

Yes, I will give it a try. I was thinking I use a state variable to check the screen width. Change the drawers anchor from bottom to left. Make the drawer "sticky" (not swipable), as we will have enough map space for the user. - If it's possible, not sure about this one yet.

EDIT: Or, as making a the drawer not swipeable proves to be too difficult, if even possible. I was thinking about something like this: https://www.figma.com/file/uw2R8fNWR533DOMSGogi3L/Untitled?node-id=0%3A1

Let me know what you think.

[dadiorchen]

My main focus is how to implement these two versions, I mean both mobile and desktop, there are two choices:

• A suite of components compatible with both.
• Tow suite of components implement them separately. What's your preference? How about arranging a quick meeting? Or you can catch me when I'm online at any time, my timetable is pretty flexible.

[dadiorchen]

When I say implement them separately, mainly, I guess it's about the page frame, we still are able to reuse common/small components in it.

[TheYass1n]

@VWRoli I didn't know you are working on this issue until I added a PL, sorry for that bro

[dadiorchen]

@YassinHussein please hold on, let's discuss and think it over, we make some big decision on how to implement it, the desktop design is in progress, we might be considering making the desktop version totally different with mobile one, because we can utilize bigger space on desktop to display more stuff, like this:

[VWRoli]

@YassinHussein please hold on, let's discuss and think it over, we make some big decision on how to implement it, the desktop design is in progress, we might be considering making the desktop version totally different with mobile one, because we can utilize bigger space on desktop to display more stuff, like this:

If that's the case than I would go for a different page frame. This is much more complex than the mobile version, so using one suit of components would be difficult and inconvenient.

[TheYass1n]

@YassinHussein please hold on, let's discuss and think it over, we make some big decision on how to implement it, the desktop design is in progress, we might be considering making the desktop version totally different with mobile one, because we can utilize bigger space on desktop to display more stuff, like this:

Ok, that is great

[TheYass1n]

@YassinHussein please hold on, let's discuss and think it over, we make some big decision on how to implement it, the desktop design is in progress, we might be considering making the desktop version totally different with mobile one, because we can utilize bigger space on desktop to display more stuff, like this:

If that's the case than I would go for a different page frame. This is much more complex than the mobile version, so using one suit of components would be difficult and inconvenient.

I agree with you