racingcow/you-R-here

you-R-here UI clean up

Closed this issue · 3 comments

toannguyen83 commented

clean up some UI issue

Once logged in, the center content isn't dynamically fit in the center, thus causing the scrollbar at the furthest right
Login screen shows header and footer at the top.

So now fixed so that the ListItem and DetailsView all fitted at the center screen
The top and bottom banner are fixed

Note, this changes is utilizing css calc() to correctly calculate the height value when resizing the browser. IE is not well compatible, partially support IE9, full support IE 10 and 11. All Firefox / Chrome supported
http://caniuse.com/calc

toannguyen83 commented

Fixed, not sure how to point it to a specific commit

ryoe commented

Thanks @toannguyen83!

Linking to the commit b10657b

toannguyen83 commented

Linked to new commit b526206

  • Previous fix only works on chrome
  • calc() apparently doesn't work in firefox ... tried -moz-calc() and same result, not working. Until later on I tried setting the container position to absolute, then calc() is working in firefox. You don't have to set container to absolute in chrome and IE and it works fine ...
  • Tested on Chrome 36, Firefox 31, IE 11, spectator, presenter, organizer.
  • Header fixed to top and footer fixed to bottom. Center content is scrollable now. Resizing browser will resize the center content properly and remain at center. The scrollbar is no longer going all the way past the footer.
  • Tweaked user list at the right side a bit so when show user list, it doesn't create the bottom horizontal scrollbar. (set the right position to 5px instead of 0px, this issue only happens in IE 11 ...)
  • Tweaked user list to have z index higher than the itemsDetail panel. Somehow the user list is underneath the itemDetails. It might relate to the change on setting panel position to absolute to support firefox.
  • .container needs to have height: 100%, otherwise firefox is putting the login box all the way to the top ...I don't know why ... there might be other way to tweak it but for now setting container to 100% is the least harmful way.
  • Overall, browser war is a pain lol.