fix(ui): hide "Ways to help" section under a spoiler

selfdefined / web-app

Dictionary database with future API and bot integrations

https://www.selfdefined.app/

573 stars 172 forks source link

fix(ui): hide "Ways to help" section under a spoiler #400

Open embarq opened 3 years ago

embarq commented 3 years ago

Closes https://github.com/selfdefined/web-app/issues/325

embarq commented 3 years ago

It was made to hide the "Ways to help" content only on mobile. I found that for the parent section 800px breakpoint is used, so I took the same value into consideration.

Currently, the script will collapse the section on <800px screens, for desktop it will look as it was before.

However, the spoiler behaviour won't change on resize. For example if you open the homepage on mobile-like screen, and then resize it to let's say 810px - the spoiler will remain working(perhaps it should not). If you would like to have it adjusting to resize, let me know.

embarq commented 3 years ago

@ovlb Man, I can't express how grateful I am. Thanks for so many useful and interesting suggestions! I tried my best in an attempt to make the implementation better, would be awesome if you could check the result once again.

P.S. Thanks for being so helpful 👍 As you might notice, I have quite a limited knowledge of a11y and how to implement it in the right way. Looking forward to learning and practice more tho

ovlb commented 3 years ago

@embarq Thanks for your updates. I had quite a packed week, so please bear with me. I want to review it with the time it deserves. Aiming for Monday. Hope you have a nice weekend.