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

Commit

Permalink
Merge pull request #245 from Esri/mobile-friendly-site
Browse files Browse the repository at this point in the history 
(slightly better) mobile friendly styles/layout
  • Loading branch information
@tomwayson
tomwayson committed Feb 19, 2016
2 parents 2584d60 + fba8eb7 commit 7973e44
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 58 deletions.
85 changes: 46 additions & 39 deletions site/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,29 +20,56 @@
</head>

<body>
<div class="container">
<!-- page header -->
<div class="page-header">
<ul class="nav nav-pills pull-right" role="tablist" ng-controller="NavCtrl">
<li role="presentation" ng-class="{ active: page === 'home' }"><a ng-href="#/home">Home</a>
</li>
<li role="presentation" ng-class="{ active: page === 'examples' }"><a ng-href="#/examples">Examples</a>
</li>
<li role="presentation" ng-class="{ active: page === 'patterns' }"><a ng-href="#/patterns">Patterns</a>
</li>
<li role="presentation"><a href="./docs">API</a>
</li>
<li role="presentation"><a href="https://arcgis.github.io/angular-esri-map-site-v1/">Previous Version (v1)</a>
<li role="presentation"><a href="//github.com/esri/angular-esri-map">GitHub</a>
</li>

<!-- top nav -->
<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>
<h3 class="text-muted">angular-esri-map</h3>
</div>
</nav>

<div class="container">
<!-- shared left nav controller for examples and patterns; also modifies styling of snippets and footer -->
<div ng-controller="LeftNavCtrl">
<div class="row">
<!-- apply a column size depending on if a left nav is visible -->
<div ng-class="{
'col-sm-9 col-sm-push-3': (examplesLeftNavShow || patternsLeftNavShow),
'col-xs-12': !(examplesLeftNavShow || patternsLeftNavShow)
}">

<!-- page content for ngRoute -->
<div ng-view="" autoscroll></div>

<!-- source code snippets -->
<div ng-controller="SnippetsCtrl" style="display:none;" ng-style="{display: (examplesLeftNavStyle || patternsLeftNavStyle)}">
<ul ng-show="tabs" class="nav nav-tabs" ng-select ng-model="currentTab" select-class="{'active': $optSelected}">
<li ng-repeat="tab in tabs" ng-select-option="tab">
<a href="" title="{{ tab }}">{{ tab.substr(tab.lastIndexOf('.') + 1).toUpperCase() }}</a>
</li>
</ul>
<div class="tab-container">
<div ng-repeat="tab in tabs">
<div ng-show="tab === currentTab">
<div hljs="" include="currentTab"></div>
<div class="snippet-file-name">{{ tab }}</div>
</div>
</div>
</div>
</div>
</div>

<!-- left nav list group for example toc page and individual example pages -->
<div class="col-sm-3" ng-if="examplesLeftNavShow" style="display:none;" ng-style="{display: examplesLeftNavStyle}">
<div class="col-sm-3 col-sm-pull-9" ng-if="examplesLeftNavShow" style="display:none;" ng-style="{display: examplesLeftNavStyle}">
<div ng-repeat="(categoryKeyName, examplesArray) in examplePageCategories">
<h4 class="page-header list-group-category">{{categoryKeyName}}</h4>
<div class="list-group">
Expand All @@ -57,7 +84,7 @@ <h4 class="page-header list-group-category">{{categoryKeyName}}</h4>
</div>

<!-- left nav list group for patterns pages -->
<div class="col-sm-3" ng-if="patternsLeftNavShow" style="display:none;" ng-style="{display: patternsLeftNavStyle}">
<div class="col-sm-3 col-sm-pull-9" ng-if="patternsLeftNavShow" style="display:none;" ng-style="{display: patternsLeftNavStyle}">
<h4 class="page-header list-group-category">Patterns</h4>
<div class="list-group">
<a ng-href="{{'#' + page.path}}"
Expand All @@ -68,27 +95,7 @@ <h4 class="page-header list-group-category">Patterns</h4>
</a>
</div>
</div>

<!-- page content for ngRoute; apply a column size if the examples left nav is visible -->
<div ng-view="" autoscroll ng-class="{'col-sm-9': (examplesLeftNavShow || patternsLeftNavShow)}"></div>

<!-- source code snippets -->
<div>
<div class="col-sm-3"></div>
<div ng-controller="SnippetsCtrl" class="col-sm-9" style="display:none;" ng-style="{display: (examplesLeftNavStyle || patternsLeftNavStyle)}">
<ul ng-show="tabs" class="nav nav-tabs" ng-select ng-model="currentTab" select-class="{'active': $optSelected}">
<li ng-repeat="tab in tabs" ng-select-option="tab">
<a href="">{{ tab }}</a>
</li>
</ul>
<div class="tab-container">
<div ng-repeat="tab in tabs">
<div ng-show="tab === currentTab" hljs="" include="currentTab"></div>
</div>
</div>
</div>
</div>

</div>
<!-- page footer -->
<div class="footer" ng-class="{'col-xs-12': (examplesLeftNavShow || patternsLeftNavShow)}">
<p><span class="glyphicon glyphicon-heart"></span> from Esri</p>
Expand Down
47 changes: 28 additions & 19 deletions site/styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,6 @@
margin-bottom: 28px;
}

.page-header.list-group-category {
margin: 0 0 10px 0;
}

.web-gl-warning {
color: #b52e31;
font-weight: bold;
}

/* Esri JSAPI */
.esri-view {
height: 400px;
Expand All @@ -45,14 +36,39 @@
font-size: 13px;
background-color: inherit; /* only use if syntax highlighting background is light gray or near white */
}
.tab-container pre {
margin-bottom: 0;
border-top: 0;
}
.snippet-file-name {
margin-bottom: 12px;
}

/* tables */
.table {
font-size: 0.95em;
}
.table td {
white-space: nowrap;
}

/*warning for non-webgl browsers*/
.web-gl-warning {
color: #b52e31;
font-weight: bold;
}

/*dismissable alert to warn about docs version*/
.version-alert {
position: fixed;
bottom: -24px;
width: 80%;
left: calc(50% - 40%);
text-align: center;
font-size: small;
z-index: 100;
}

/* angular color overrides calcite-bootstrap (red highlight, white background, black font/header) */
body {
background-color: #ffffff;
Expand All @@ -68,6 +84,9 @@ a:focus,
a:hover {
color: #b52e31;
}
.navbar-nav>li>a:focus, .navbar-nav>li>a:hover {
background-image: linear-gradient(to top,transparent 92%,#b52e31 93%,#b52e31 100%);
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
Expand Down Expand Up @@ -110,13 +129,3 @@ button.btn-default:active, button.btn-default[disabled]:active {
background-color: #b52e31!important;
border-color: #b52e31 !important;
}

.version-alert {
position: fixed;
bottom: -24px;
width: 80%;
left: calc(50% - 40%);
text-align: center;
font-size: small;
z-index: 100;
}

0 comments on commit 7973e44

Please sign in to comment.