ksux / ks-design-guide

Live pattern library for Kuali Student.
http://ksux.github.io/ks-design-guide/
9 stars 1 forks source link

Make modal vertical placement dependent on viewport dimensions #36

Open basham opened 10 years ago

basham commented 10 years ago

Instead of having a universal vertical placement for modals, it should be based on the viewport dimensions. rem and perhaps em fallbacks should be provided, in case vh units aren't supported.

Mockup: http://codepen.io/basham/full/GhpeF/


[7/18/14, 1:52:39 PM] Erik Rath: ... At first glance, I like the way the native bootstrap modal behaves (no bounce!), though am slightly ambivalent about the way it sticks all the way at the top of the browser window (Positive: doesn’t waste space; Negative: just seems different from most other modals I’ve seen. Probably fine, just strange). Will continue looking into it. Let me know if I missed any uses for them.


[7/18/14, 2:01:24 PM] Chris Basham: @ Erik ...

As for the vertical placement of modals, that could certainly be something that we could experiment with, as it should be a CSS property, not hard coded in JavaScript. Perhaps the vertical positioning is variable to the viewport height. For example, if there's a lot of vertical room, then it can be lower; if not, then it should be higher.


[7/18/14, 2:02:16 PM] Erik Rath: That would be ideal. Even just a little bit of room to reinforce that this is Kuali talking to me, not Chrome, could be helpful


[7/18/14, 3:14:38 PM] Chris Basham: @ Erik I mocked up an approach we could take for dynamic modal positioning based on viewport dimensions. http://codepen.io/basham/full/GhpeF/


[7/18/14, 3:20:45 PM] Erik Rath: That was fast :). [7/18/14, 3:20:51 PM] Erik Rath: That looks really good!