Skip to content
This repository was archived by the owner on Dec 1, 2020. It is now read-only.

(slightly better) mobile friendly styles/layout#245

Merged
tomwayson merged 3 commits intomasterfrom
mobile-friendly-site
Feb 19, 2016
Merged

(slightly better) mobile friendly styles/layout#245
tomwayson merged 3 commits intomasterfrom
mobile-friendly-site

Conversation

@tomwayson
Copy link
Copy Markdown
Member

  • 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)

Preview: http://tomwayson.github.io/angular-esri-map/

resolves #241

tomwayson and others added 2 commits February 17, 2016 22:20
- 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)
@jwasilgeo
Copy link
Copy Markdown
Contributor

@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 <body>. Since we haven't yet brought in new JS to support a collapsed menu, I threw in float overrides to keep the navbar from growing vertically.

<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.

tomwayson added a commit that referenced this pull request Feb 19, 2016
(slightly better) mobile friendly styles/layout
@tomwayson tomwayson merged commit 7973e44 into master Feb 19, 2016
@tomwayson tomwayson deleted the mobile-friendly-site branch February 19, 2016 06:43
@jwasilgeo
Copy link
Copy Markdown
Contributor

nice additional changes

btw, I don't mind applying the changes to v1.x branch as well

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update site to be more mobile friendly

2 participants