search

SuperNETorg / Iguana-application

This repository is no longer maintained
7 stars 4 forks source link

Responsive modals #12

Closed pbca26 closed 7 years ago

pbca26 commented 8 years ago

Modal needs to be responsive all the time. When window width or height is changed it has to stay centred vertically and horizontally. If modal content is exceeding screen height then the scroll bar has to appear.

Don't use css translate it will blur the modal in Safari (a known bug). Instead use js for all resize/reposition calculations.

imboogieman commented 8 years ago

@ed888 @pbca26 `If modal content is exceeding screen height then the scroll bar has to appear.' It is better to make content fields resizable without scrolling, but limited by right and down borders not to make it overlapping the modal edges. So if content is exceeding screen height, then the field adopts to it sizes along with the whole modal if needed. It is a better UX.

pbca26 commented 8 years ago

@imboogieman what if your content is 500px height while your physical screen height is 300px? What to adopt here? You're basically short by almost 40% of screen space.

ed888 commented 8 years ago

@imboogieman @pbca26 which direction should I follow ?

ed888 commented 8 years ago

@pbca26

Which modal is preferable for you to use here? In my opinion it's better to have the same everywhere. http://i.prntscr.com/3d5171c8561d4474826037c8648afa3a.png

pbca26 commented 8 years ago

@ed888 i leave it up to you to decide if you opt for bootstrap then don't forget to rework all modals accordingly

which direction should I follow ?

boogieman's idea makes sense if there is enough space to squeeze elements so that there's no scrollbar needed i cannot disagree that scrollbars are the last resort measures unfortunately it's not possible to follow that practice in all cases so it would be good if calculations would account best of two worlds

ed888 commented 8 years ago

@pbca26

ok, thank you

imboogieman commented 8 years ago

We need those forms for passphrases only, so I bet even the worst 24-word PP would never be 500px height. 300 px is for mobile, presume, in that case it is better to stretch down the form out of the visible part, so a user can scroll the modal down not the content.

pbca26 commented 8 years ago

what about send/receive/add wallet (coin)? those are modals as well

when i say scroll i mean scrolling inside the modal not current page itself e.g. dashboard

imboogieman commented 8 years ago

There is a mobile version screens, pls, see