search

syvita / daoos

A group of tools for anyone to be able to create their own decentralised organisation on Bitcoin. 🟩
https://syvita.org/projects/daoos
MIT License
27 stars 10 forks source link

Members list UI #61

Closed JMKJR closed 2 years ago

JMKJR commented 3 years ago

Summary of changes:

Please test responsiveness and provide design feedback/suggestions.

314159265359879 commented 3 years ago

@SyAsteria can you fix the cloudflare pages deployment, that was very helpful on #56 too, It really helps me test this on multiple platforms fast.

cloudflare-workers-and-pages[bot] commented 3 years ago

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: ebce749
Status: âœ…  Deploy successful!
Preview URL: https://d966bf1b.daoos.pages.dev

View logs

314159265359879 commented 3 years ago

noticed something strange after all. When I load the page the first time (click members) I see a shadow dropped under the button, after a reload (F5) there is no longer a shadow that drops (Windows:Edge/Firefox/Brave/Chrome). This does not happen on iOS, Safari ++. Firefox/iOS it looks like the css is not applied right away showing text (title/members/button) in another font for a brief moment (maybe just the staging area). Shadow remains in iOS though.

314159265359879 commented 3 years ago

In this flow on mobile: a. I click the hamburger menu b. Menu opens c. I click Members Menu is still covering the screen, want to collapse it with (c.)?

JMKJR commented 3 years ago

@314159265359879 A+ testing as always, thanks so much!

I think the shadow under the button is no improvement. Because of the sharp corners at the top it looks like one part with the grey square. It may look better to elevate the whole square (Voting members and non-voting members).

I'll try elevating both and you can sample that. Maybe we don't need any elevation at all? My initial thinking was to try to get the button to have more of a contrast from the rest of the List component so it looks more like a clickable button than if it were just blended into the list. Maybe the solution is not elevation, but changing something with the button border? We can test different approaches until we get it right :)

A minor when scrolling and pulling the up when there is nothing left the shadow has a sharp edge (1):

Yeah this is observant. I could try adding some margin to the bottom so there is more white space and a smoother transition on page overscroll.

I still think the title "Voting Members" should stand out more. Larger font perhaps, and/or a line (1-3 px) under, or dark (hamburger menu or purple maybe) background the size of the purple button at the bottom are some options in my view.

What if we just try some purple text here?

noticed something strange after all. When I load the page the first time (click members) I see a shadow dropped under the button, after a reload (F5) there is no longer a shadow that drops (Windows:Edge/Firefox/Brave/Chrome). This does not happen on iOS, Safari ++. Firefox/iOS it looks like the css is not applied right away showing text (title/members/button) in another font for a brief moment (maybe just the staging area). Shadow remains in iOS though.

Another astute observation! I just investigated this and it looks like it's an issue with the boxShadow css class I'm using from material-ui. If I just use the box-shadow css property instead to accomplish the same thing, then the shadow remains intact on refresh. As for the temporary flash of default fonts, it looks like this only happens very briefly on initial render or refresh while the browser is loading those fonts. It seems there's nothing I can do about that as the alternatives and mitigation strategies are less preferable.

In this flow on mobile: a. I click the hamburger menu b. Menu opens c. I click Members Menu is still covering the screen, want to collapse it with (c.)?

Yes! good catch.

314159265359879 commented 3 years ago

I'll try elevating both and you can sample that. Maybe we don't need any elevation at all? My initial thinking was to try to get the button to have more of a contrast from the rest of the List component so it looks more like a clickable button than if it were just blended into the list. Maybe the solution is not elevation, but changing something with the button border? We can test different approaches until we get it right :)

A minor when scrolling and pulling the up when there is nothing left the shadow has a sharp edge (1):

Yeah this is observant. I could try adding some margin to the bottom so there is more white space and a smoother transition on page overscroll.

Perhaps no shadow would also be just fine. solves this problem too and I think it may be clear enough that it is a button and what it does because of the location and the text "show more"? I guess it is good to get some more input on this from the others. Want to show them without shadow, see what they think?

What if we just try some purple text here?

Yes lets do that, bold too?

JMKJR commented 3 years ago

@314159265359879 summary of latest commit:

314159265359879 commented 3 years ago

Looks awesome now! Looking forward to the next one 😀