(slightly better) mobile friendly styles/layout #245
Conversation
- push left nav below example views on mobile - snippet tabs show HTML/JS w/ filenames below snippet - quick fix for top nav sizing on mobile (navbar would have required ui-bootstrap)
(it needed additional padding/centering on my mobile device)
|
@tomwayson great work on this one! I found that on my mobile device the home page did not have ideal padding and centering of its contents, so I pushed a commit that applies the widest bootstrap column class when on the home page route. I spent a little time experimenting with a potential navbar (no new JS!) instead of the current pills we have and had some pretty nice results (either fixed or static) with the placement of the main title link over, rather than under, the nav pills. If you want to try it out on your own fork and mobile device, you can put this at the top of <nav class="navbar navbar-inverse navbar-static-top" style="margin-bottom: 20px;">
<div class="container">
<div class="navbar-header" style="float:left;">
<a class="navbar-brand" style="font-size: 25px; font-weight: 200;" ng-href="#/home">angular-esri-map</a>
</div>
<ul class="nav navbar-nav navbar-right" style="float: right;">
<li style="float: left;" ng-class="{ active: page === 'examples' }"><a ng-href="#/examples">Examples</a></li>
<li style="float: left;" ng-class="{ active: page === 'patterns' }"><a ng-href="#/patterns">Patterns</a></li>
<li style="float: left;"><a href="./docs">API</a></li>
<li style="float: left;"><a href="https://arcgis.github.io/angular-esri-map-site-v1/">v1 <span class="hidden-xs">Docs</span></a></li>
<li style="float: left;"><a href="//github.com/esri/angular-esri-map">GitHub</a></li>
</ul>
</div>
</nav>Feel free to give that a spin, or we can table this for a rainy day and revisit. |
(slightly better) mobile friendly styles/layout
|
nice additional changes btw, I don't mind applying the changes to v1.x branch as well |
ui-bootstrap)
Preview: http://tomwayson.github.io/angular-esri-map/
resolves #241