Merge remote-tracking branch 'origin/mb-pages'

Author: jfirebaugh

docs/README.md

@@ -18,14 +18,15 @@ Examples are written as Jekyll posts in `docs/_posts/examples`. The Jekyll front
 
 * `layout`: `example`
 * `category`: `example`
-* `title`: A short title for the example, in **sentence case**
+* `title`: A short title for the example in **sentence case** as a **verb phrase**
 * `description`: A one sentence description of the example
 
 In the post body, write the HTML and JavaScript constituting the example.
 
 * Use **4 space indentation**. Exception: do not add an initial level of indentation to code within `<script>` tags (it should start flush left).
 * Do **not** include an access token in the example code. The access token will be inserted automatically by the template, using the current logged in user's default public token, or a placeholder `<insert token here>` string if the user is not logged in.
 * Do **not** use custom styles from your personal account. Use only the default `mapbox` account styles.
+* When embedding literal JSON (GeoJSON or GL style snippets) into script code, double-quote property names and string values. Elsewhere, use single-quoted strings.
 
 ## Generating Documentation
 

docs/_layouts/default.html

@@ -180,39 +180,152 @@
 
 <div class='page-content'>
 
-{% if page.title == 'Mapbox Studio' %}
-  <div class='fill-cyan dark pad1y pad8x small center hide-mobile' id='classic-download'>
-    <div class='pad0y'>
-      <span class='icon info quiet'></span>Mapbox Studio for desktop is now Mapbox Studio Classic. <a href='/mapbox-studio-classic'>Looking to upgrade Mapbox Studio Classic?</a>
-      <a class='fr' onclick="document.getElementById('classic-download').style.display='none'; return false" href=''><span class='icon close'></span></a>
-    </div>
-  </div>
-
-{% endif %}
-
 {% if page.app %}
 {{content}}
 {% else %}
+<div class="main-subnav fill-midnight splash pin-top dark clearfix">
+  <div class="prose dark keyline-top pad4y hover-area clearfix">
+  <div class="limiter clearfix">
+    <div class="subnav-products clearfix">
+      <div class="col6 clearfix">
+        <h3><a href="/products/" class="rcon next">Our products</a></h3>
+        <div class="col5">
+       <a class="block pad1y icon map" href="/maps">Maps</a>
+       <a class="block pad1y icon studio" href="/mapbox-studio">Mapbox Studio</a>
+       <a class="block pad1y icon compass" href="/directions/">Directions</a>
+       <a class="block pad1y icon marker" href="/geocoding/">Geocoding</a>
+       </div>
+      <div class="col6">
+       <a class="block pad1y icon bolt" href="/analysis/">Analysis</a>
+       <a class="block pad1y icon mobile" href="/mobile/">Mobile</a>
+       <a class="block pad1y icon satellite" href="/satellite/">Satellite</a>
+       <a class="block pad1y icon globe" href="/atlas/">Atlas Server</a>
+      </div>
+      </div>
+      <div class="col5 margin1r">
+        <h3>Our platform</h3>
+
+       <a class="block pad1y icon building" href="/platform/">Scalable infrastructure</a>
+       <a class="block pad1y icon lock" href="/platform/security/">Security</a>
+       <a class="block pad1y icon data" href="/data-platform/">Curated Data</a>
+
+      </div>
+    </div>
+
+    <div class="subnav-use-cases clearfix">
+      <div class="col7 clearfix">
+       <h3><a href="/industries/" class="rcon next">Industries</a></h3>
+        <div class="col4">
+         <a class="block pad0y" href="/industries/social">Web &amp; Social</a>
+         <a class="block pad0y" href="/industries/logistics">Logistics</a>
+         <a class="block pad0y" href="/industries/outdoors">Fitness &amp; Outdoors</a>
+         <a class="block pad0y" href="/industries/naturalresources">Natural Resources</a>
+         <a class="block pad0y" href="/industries/agriculture">Agriculture</a>
+         </div>
+        <div class="col4">
+         <a class="block pad0y" href="/industries/transportation">Transportation</a>
+         <a class="block pad0y" href="/industries/realestate">Real Estate</a>
+         <a class="block pad0y" href="/industries/insurance">Insurance</a>
+         <a class="block pad0y" href="/industries/security">Security</a>
+         <a class="block pad0y" href="/industries/finance">Finance</a>
+        </div>
+        <div class="col4">
+         <a class="block pad0y" href="/industries/drones">Drones</a>
+         <a class="block pad0y" href="/industries/government">Government</a>
+         <a class="block pad0y" href="/industries/health">Health</a>
+         <a class="block pad0y" href="/industries/media">Media</a>
+        </div>
+     </div>
+    <div class="col4 margin1">
+       <h3>Examples</h3>
+        <a class="block pad0y" href="/gallery/">Map Gallery</a>
+        <a class="block pad0y" href="/showcase/">Customer Showcase</a>
+    </div>
+
+    </div>
+
+
+    <div class="subnav-documentation clearfix">
+      <div class="col8 clearfix subnavcol">
+        <h3><a href="/developers/" class="rcon next">Developer tools</a></h3>
+      <div class="col4">
+       <a class="block pad1y icon gl" href="/mapbox-gl-js/api/">Mapbox GL JS</a>
+       <a class="block pad1y icon apple" href="/ios-sdk/">Mapbox iOS SDK</a>
+       <a class="block pad1y icon android" href="/android-sdk/">Mapbox Android SDK</a>
+       <a class="block pad1y icon globe" href="/mapbox.js/api/">Mapbox.js</a>
+     </div>
+      <div class="col4">
+       <a class="block pad1y icon marker" href="/developers/api/geocoding/">Geocoding API</a>
+       <a class="block pad1y icon paint" href="/developers/api/styles/">Styles API</a>
+       <a class="block pad1y icon up" href="/developers/api/uploads/">Uploads API</a>
+       <a class="block pad1y icon inspect" href="/developers/api/surface/">Surface API</a>
+       </div>
+      <div class="col4">
+       <a class="block pad1y icon compass" href="/developers/api/directions/">Directions API</a>
+       <a class="block pad1y icon point-line" href="/developers/api/distance/">Distance API</a>
+       <a class="block pad1y icon picture" href="/developers/api/static/">Static API</a>
+       <a class="block pad1y icon data" href="/developers/api/maps/">Tiles API</a>
+       </div>
+      </div>
+
+      <div class="col3 margin1r subnavcol">
+      <h3>References</h3>
+       <a class="block pad1y" href="/tos">TOS</a>
+       <a class="block pad1y" href="/privacy/">Privacy</a>
+       <a class="block pad1y" href="/about/open/">Open source tools</a>
+       <a class="block pad1y" href="/telemetry/">Telemetry</a>
+      </div>
+
+    </div>
+
+    <div class="subnav-help clearfix">
+    <div class="col3">
+      <h3><a href="/help/" class="rcon next">Help</a></h3>
+       <a class="block pad1y icon search" href="/help/">Search</a>
+       <a class="block pad1y icon mapbox" href="/help/how-mapbox-works/">How Mapbox works</a>
+       <a class="block pad1y icon book" href="/help/glossary/">Glossary</a>
+    </div>
+
+     <div class="col8 margin1 clearfix">
+      <h3>I would like to</h3>
+        <div class="col6">
+       <a class="block pad1y icon paint" href="/help/#design-a-map">Design a map</a>
+       <a class="block pad1y icon mobile" href="/help/#build-a-mobile-app">Build a mobile app</a>
+       <a class="block pad1y icon globe" href="/help/#build-a-web-app">Build a web app</a>
+       <a class="block pad1y icon bolt" href="help/#extend-my-app-with-web-services">Extend my app with web services</a>
+       </div>
+      <div class="col6">
+       <a class="block pad1y icon satellite"  href="/help/#work-with-data-and-imagery">Work with data &amp; Imagery</a>
+       <a class="block pad1y icon data" href="/help/#analyze-data">Analyze Data</a>
+       <a class="block pad1y icon lock" href="/help/#learn-about-mapbox-privacy-and-policies">Learn about privacy and policies</a>
+       <a class="block pad1y icon account" href="/help/#make-changes-to-my-account">Make changes to my account</a>
+      </div>
+      </div>
+
+    </div>
+
+  </div>
+</div>
+</div>
 <div class='masthead col12 clearfix {% unless page.options contains 'bleed' %}fill-blue{% endunless %} {% unless page.options contains 'light' %}dark{% endunless %} {% if page.title == 'Mapbox' %}home-nav{% endif %} {% if page.url contains '/gallery' %}gallery-page{% endif %}' data-swiftype-index='false'>
   <div class='limiter clearfix'>
     <nav class='col12 text-right pad2y contain animate clearfix noprint'>
       <a class='fl mb-logo' href='/'></a>
       <h4 class='logo-enterpriseaddon pin-topleft text-aqua block-in-enterprise'>Enterprise</h4>
 
       <!-- Desktop nav -->
-      <div class='text-right z10 strong small pad0y primary hide-mobile'>
+      <div class='text-right z10 strong small primary hide-mobile'>
         <div class='inline align-top'>
-          <a href='/products/'      class='primary-nav-button fl pad1x pad0y round {% if page.url contains '/products' %}active{% endif %}'>Products</a>
-          <a href='/data-platform/' class='primary-nav-button fl pad1x pad0y round {% if page.url contains '/data-platform' %}active{% endif %}'>Data</a>
-          <a href='/gallery'     class='primary-nav-button fl pad1x pad0y round {% if page.url contains '/gallery' %}active{% endif %}'>Gallery</a>
-          <a href='/industries'     class='primary-nav-button fl pad1x pad0y round {% if page.url contains '/industries' %}active{% endif %}'>Industries</a>
-          <a href='/plans/'         class='primary-nav-button fl pad1x pad0y round {% if page.url contains '/plans' %}active{% endif %}'>Pricing</a>
-          <a href='/help/'          class='primary-nav-button fl pad1x pad0y round quiet {% if page.url contains '/help' %}active{% endif %}'>Help</a>
-          <a href='/developers/'    class='primary-nav-button fl pad1x pad0y round quiet {% if page.url contains '/developers' %}active{% endif %}'>Developers</a>
-          <a href='/blog/'          class='primary-nav-button fl pad1x pad0y round quiet {% if page.url contains '/blog' %}active{% endif %}'>Blog</a>
+         <div class="dropdown inline pad1y fl contain"  id="menu-products"> <a href='/products/'     class='contain primary-nav-button fl pad1x pad0y round '>Products</a></div>
+          <div class="dropdown inline pad1y fl contain"  id="menu-use-cases"> <a href='/industries/'  class='contain primary-nav-button fl pad1x pad0y round'>Industries</a></div>
+         <div class="dropdown inline pad1y fl contain"  id="menu-documentation">  <a href='/developers/'  class='contain primary-nav-button fl pad1x pad0y round '>Developers</a></div>
+         <div class="dropdown inline pad1y fl contain"  id="menu-help">  <a href='/help/'  class='contain primary-nav-button fl pad1x pad0y round {% if page.url contains '/help' %}active{% endif %}'>Help &amp; Guides</a></div>
+          <div class="inline pad1y fl"> <a href='/plans/'  class='primary-nav-button fl pad1x pad0y round quiet {% if page.url contains '/plans' %}active{% endif %}'>Pricing</a></div>
+
+          <div class="inline pad1y fl"> <a href='/blog/'   class='primary-nav-button fl pad1x pad0y round quiet {% if page.url contains '/blog' %}active{% endif %}'>Blog</a></div>
         </div>
         <!-- Hardcoded width so content doesn't jump -->
-        <div style='width:130px' class='unfloat inline align-top' id='nav'>
+        <div style='width:130px' class='unfloat inline align-top pad1y' id='nav'>
         </div>
       </div>
 
@@ -233,8 +346,8 @@ <h4 class='logo-enterpriseaddon pin-topleft text-aqua block-in-enterprise'>Enter
             <a class="pad1 block strong col6" href="/pricing/">Pricing</a>
           </div>
           <div id="mobile-nav" class="pad2y clearfix mobile-cols">
-              <a class="pad1 block strong col6 signin" href="#signin">Log in</a>
-              <a class="pad1 block strong col6" href="/signup/">Sign up</a>
+              <a class="pad1 block strong col6 signin" href="/studio/">Log in</a>
+              <a class="pad1 block strong col6" href="/studio/signup/">Sign up</a>
             </div>
           </div>
           <div class='clearfix  small'>
@@ -353,7 +466,7 @@ <h3 class='space-bottom1'>Sign up for our newsletter</h3>
 </div>
 {% endunless %}
 
-{% if page.url contains '/hello/directions' or  page.url contains '/welcome' %}
+{% if page.url contains '/hello/directions' %}
 
 <div class='footer-in-docs terms-in-docs col12 center footer-copyright small pad4 noprint fill-light contain' data-swiftype-index='false'>
     <a href='{{site.url}}/tos'>Terms</a> +
@@ -368,5 +481,81 @@ <h3 class='space-bottom1'>Sign up for our newsletter</h3>
 
 <div id='modal-content' class='animate modal modal-content'></div>
 </div>
+
+<script type="text/javascript">
+
+  $( ".dropdown" ).hover(
+    function() {
+    setContent($(this).attr("id"));
+      $(".main-subnav").addClass("show");
+      $($(this)).addClass("show");
+    }
+  );
+
+$('.hover-area').mouseover(
+    function(){
+        $(this).addClass('hovered');
+        return false;
+    } )
+    .mouseout(
+        function(){
+        $(this).removeClass('hovered');
+    });
+
+
+  $(".dropdown").mouseleave(function(){
+    window.setTimeout(function(){
+      if(!$(".hover-area").hasClass('hovered') && $(".dropdown:hover").length == 0){
+        $(".main-subnav").removeClass("show");
+        $(".dropdown").removeClass("show");
+      }
+
+    }, 300);
+
+  })
+
+  $( ".hover-area" ).mouseleave(function() {
+    window.setTimeout(function(){
+       if($(".dropdown:hover").length == 0){
+             $(".main-subnav").removeClass("show");
+             $(".dropdown").removeClass("show");
+       }
+    }, 300);
+  });
+
+
+
+function setContent (activeCategory){
+    $(".dropdown").removeClass("show");
+switch(activeCategory) {
+    case 'menu-products':
+      $(".subnav-products").addClass("show");
+      $(".subnav-use-cases").removeClass("show");
+      $(".subnav-documentation").removeClass("show");
+      $(".subnav-help").removeClass("show");
+        break;
+    case 'menu-use-cases':
+      $(".subnav-use-cases").addClass("show");
+      $(".subnav-products").removeClass("show");
+      $(".subnav-documentation").removeClass("show");
+      $(".subnav-help").removeClass("show");
+        break;
+    case 'menu-documentation':
+      $(".subnav-documentation").addClass("show");
+      $(".subnav-products").removeClass("show");
+      $(".subnav-use-cases").removeClass("show");
+      $(".subnav-help").removeClass("show");
+        break;
+    case 'menu-help':
+      $(".subnav-help").addClass("show");
+      $(".subnav-products").removeClass("show");
+      $(".subnav-use-cases").removeClass("show");
+      $(".subnav-documentation").removeClass("show");
+        break;
+  }
+}
+
+</script>
+
 </body>
-</html>
+</html>

docs/_layouts/docs.html

@@ -1,62 +1,9 @@
 ---
-layout: default
+layout: pages
 class: fill-light
 options: full
 ---
 
-<link href='{{site.url}}/css/docs.css' rel='stylesheet' />
-<link href='{{site.baseurl}}/site.css' rel='stylesheet' />
-<script src='{{site.baseurl}}/js/site.js'></script>
-
-<!--Fixed sidebar navigation-->
-<div class='docnav hide-mobile'>
-  <div class='limiter'>
-    <div class='col3 contain'>
-      <nav class='scroll-styled quiet-scroll small'>
-        {% if page.url contains 'example' %}
-          <div class='space-bottom'>
-            <a class='block quiet active strong small truncate' href='{{site.baseurl}}/examples/'>Examples</a>
-          </div>
-          {% for eg in site.categories.example reversed %}
-            <a href='{{site.baseurl}}{{eg.url}}/' class='block small truncate {% if eg.title == page.title %} active{% endif %}'>{{eg.title}}</a>
-          {% endfor %}
-        {% else %}
-          <div class='space-bottom1'>
-            <span class='block truncate strong'>API</span>
-          </div>
-            {% for navitem in page.navigation %}
-              <div class='space-bottom1'>
-                <a class='block truncate strong quiet' href='{{site.baseurl}}{{navitem.url}}/#{{navitem.id}}'>{{navitem.title}}</a>
-                {% for subitem in navitem.subnav %}
-                <a class='block truncate' href='{{site.baseurl}}{{subitem.url}}/#{{subitem.id}}'>{{subitem.title}}</a>
-                {% endfor %}
-              </div>
-            {% endfor %}
-        {% endif %}
-      </nav>
-    </div>
-  </div>
-</div>
-
-<div class='limiter clearfix'>
-  <div class='pad2y'>
-    <nav class='contain z10 margin3 col9 fill-gradient space-bottom round small'>
-      <div class='col3 dark round-left keyline-right pad1 center truncate'>
-        <div class='pad0y'>
-          <span class='icon gl fill-lighten0 dot inline pad0'></span> Mapbox GL JS
-        </div>
-      </div>
-      <div class='col9 dark tabs mobile-cols pad1'><!--
-        --><a href='{{site.baseurl}}/api' class='col4 {% if page.category == "api" %}active{% endif %}'>API</a><!--
-        --><a href='{{site.url}}/mapbox-gl-style-spec' class='col4'>Style Reference</a><!--
-        --><a href='{{site.baseurl}}/examples' class='col4 {% if page.category == "example" %}active{% endif %}'>Examples</a>
-      </div>
-    </nav>
-  </div>
-
-  <div class='contain margin3 col9'>
-    <div class='round doc clip fill-white keyline-all'>
-      {{ content }}
-    </div>
-  </div>
+<div class='round doc clip fill-white keyline-all'>
+  {{ content }}
 </div>