search

mezerotm / cmv

CMV is a citySDK based map visualizatoin tool
5 stars 5 forks source link

sidebar responsive design #7

Closed mezerotm closed 8 years ago

mezerotm commented 8 years ago

We currently have the 'bootstrap' setup in a way that only works well in full screen mode. We need to redesign code to be more responsive. keyword here is bootstrap, from what i can tell this issue is most heavy in the way we have setup our index.html bootstrap code and the CSS is not as big of a contributing factor.

ravenusmc commented 8 years ago

I think that this problem will not be that hard at all to fix in bootstrap. To start, we need to wrap everything in a <div class="container"> to help make it more responsive. That class, I believe, is bootstraps way of helping to make the page responsive.

mezerotm commented 8 years ago

So i've done some work on it, and drawn out a solution.

  1. make row B1* dynamic so that when the navbar closes it takes the rest of the area *Reference Image - B1 on the maps (left side)
  2. set the navbar css position:fixed on small screens (& make sure positions are all set to 0) but set position:relative on large screens
  3. As for what mike suggested he is right we do need to surround the area in a container, i've decided we specifically need <div class=container-fluid"> this will allow everything to touch the edges of the screen.

I have not yet implemented these changes (with exception to the container) since I still need to make my own branch (i think i will make a UI specific branch) -> i also need to refresh my memory on how to set specific css dependent on screen sized.

ravenusmc commented 8 years ago

Carlos, You don't need to set the specific CSS selectors with bootstrap. The container class does that for you! However, if you want more control then yeah you can go ahead and do it! I did it for a project in the fall that I was working on since Bootstrap was not giving me exactly what I wanted!