- re-merge doc_nav. We've removed the whole idea of a "fixed top", and moved the

"fixed" thing entirely to the left side.  The content now regains full vertical real estate, such
that there's no workarounds needed for anchors, they work directly again.
we had to reorganize the whole layout to accommodate this however.

5 files changed, 158 insertions, 122 deletions

diff --git a/doc/build/index.rst b/doc/build/index.rst
index 22b530720..b65755d43 100644
--- a/doc/build/index.rst
+++ b/doc/build/index.rst
@@ -11,7 +11,7 @@ Getting Started
 
 A high level view and getting set up.
 
-:ref:`Overview <overview>` |
+:doc:`Overview <intro>` |
 :ref:`Installation Guide <installation>` |
 :doc:`Frequently Asked Questions <faq>` |
 :doc:`Migration from 0.9 <changelog/migration_10>` |
diff --git a/doc/build/intro.rst b/doc/build/intro.rst
index 3fc46ba02..5ac28a7c4 100644
--- a/doc/build/intro.rst
+++ b/doc/build/intro.rst
@@ -1,11 +1,7 @@
 .. _overview_toplevel:
-
-========
-Overview
-========
-
 .. _overview:
 
+========
 Overview
 ========
 
diff --git a/doc/build/static/docs.css b/doc/build/static/docs.css
index 99858b429..14aa86bab 100644
--- a/doc/build/static/docs.css
+++ b/doc/build/static/docs.css
@@ -86,8 +86,9 @@ a.headerlink:hover {
   position: relative;
 }
 
-#docs-top-navigation,
-#docs-bottom-navigation {
+#docs-sidebar-popout,
+#docs-bottom-navigation,
+#index-nav {
   font-family: Verdana, sans-serif;
   background-color: #FBFBEE;
   border: solid 1px #CCC;
@@ -95,12 +96,20 @@ a.headerlink:hover {
   font-size:.8em;
 }
 
-#docs-top-navigation {
-  margin:10px 0px;
-  line-height:1.2em;
-  position: relative;
+#docs-sidebar-popout {
+  font-size:.75em;
+}
+
+#docs-sidebar-popout p,
+#docs-sidebar-popout form {
+  margin:5px 0 5px 0px;
+}
+
+#docs-sidebar-popout h3 {
+  margin:0 0 10px 0;
 }
 
+
 #docs-version-header {
   position: absolute;
   right: 0;
@@ -162,7 +171,8 @@ a.headerlink:hover {
 }
 
 #docs-body,
-#docs-sidebar
+#docs-sidebar,
+#index-nav
  {
   /*font-family: helvetica, arial, sans-serif;
   font-size:.9em;*/
@@ -181,46 +191,71 @@ a.headerlink:hover {
   font-size:.85em;
 }
 
-#docs-sidebar {
+#fixed-sidebar {
+  position: relative;
+}
 
-  width:210px;
-  padding: 0px 0 0 15px;
+#fixed-sidebar.withsidebar {
+  float: left;
+  width:224px;
+}
+
+#fixed-sidebar.preautomated {
+    position: fixed;
+    float: none;
+    top:0;
+    bottom: 0;
+}
+
+#fixed-sidebar.automated {
+    position: fixed;
+    float: none;
+    top: 120px;
+    min-height: 0;
+}
+
+
+#docs-sidebar {
   font-size:.85em;
 
   border: solid 1px #CCC;
 
   z-index: 3;
   background-color: #EFEFEF;
+}
 
-  float: left;
-  top: 120px;
+#index-nav {
+  margin-top:10px;
+  padding:0 10px;
+}
+
+#index-nav form {
+  float:right;
+  padding-top:10px;
+}
+
+#docs-sidebar {
+  padding: 0px 0 0 15px;
+
+  top: 140px;
   bottom: 0;
   min-height: 0;
   overflow-y: auto;
+  margin-top:10px;
 }
 
-
-#docs-top-navigation-container {
+#docs-sidebar-popout {
+  height:120px;
+  max-height: 120px;
 }
 
-#docs-top-navigation-container.automated {
-    position:fixed;
-    top:0;
-    z-index:100;
-    width:100%;
-}
 
-/* http://css-tricks.com/hash-tag-links-padding/ */
-#docs-container.preautomated div.section:before {
-    content: " ";
-    display: block;
-    height:120px;
-    margin-top: -120px;
-    visibility: hidden;
+#fixed-sidebar.preautomated #docs-sidebar,
+#fixed-sidebar.preautomated #docs-sidebar-popout {
+  position:absolute;
 }
 
-
-#docs-sidebar.preautomated:after {
+#fixed-sidebar.preautomated #docs-sidebar:after {
   content: " ";
   display:block;
   height: 150px;
@@ -251,6 +286,10 @@ a.headerlink:hover {
     /*width:210px;*/
 }
 
+#docs-sidebar h3:first-child {
+  margin-top: 0px;
+}
+
 #docs-sidebar h3 a, #docs-sidebar h4 a {
   color: #222222;
 }
@@ -268,18 +307,22 @@ a.headerlink:hover {
     margin-left: 20px;
 }
 
+
+
+
 #docs-body {
   background-color:#FFFFFF;
   padding:1px 10px 10px 10px;
 
   border: solid 1px #CCC;
-
+  margin-top:10px;
 }
 
 #docs-body.withsidebar {
-  margin: 0 0 0 230px;
+  margin-left: 230px;
 }
 
+
 #docs-body h1,
 #docs-body h2,
 #docs-body h3,
@@ -287,12 +330,13 @@ a.headerlink:hover {
   font-family:Helvetica, Arial, sans-serif;
 }
 
-#docs-body h1 {
+#docs-body #sqlalchemy-documentation h1 {
   /* hide the <h1> for each content section. */
   display:none;
   font-size:2.0em;
 }
 
+
 #docs-body h2 {
   font-size:1.8em;
   border-top:1px solid;
@@ -410,7 +454,6 @@ div.admonition, div.topic, .deprecated, .versionadded, .versionchanged {
     box-shadow: 2px 2px 3px #DFDFDF;
 }
 
-
 div.sidebar {
     background-color: #FFFFEE;
     border: 1px solid #DDDDBB;
@@ -466,11 +509,12 @@ dl.method > dt,
 dl.class > dt,
 dl.exception > dt
 {
-    background-color:#F0F0F0;
+    background-color: #EFEFEF;
     margin:25px -10px 10px 10px;
     padding: 0px 10px;
 }
 
+
 dl.glossary > dt {
   font-weight:bold;
   font-size:1.1em;
diff --git a/doc/build/static/init.js b/doc/build/static/init.js
index 2be395a1f..4bcb4411d 100644
--- a/doc/build/static/init.js
+++ b/doc/build/static/init.js
@@ -11,58 +11,33 @@ var automatedBreakpoint = -1;
 
 function initFloatyThings() {
 
-    automatedBreakpoint = $("#docs-container").position().top;
+    automatedBreakpoint = $("#docs-container").position().top + $("#docs-top-navigation-container").height();
 
-    parentOffset = $("#docs-container").parent().position().top - $("#docs-container").position().top;
+    $("#fixed-sidebar.withsidebar").addClass("preautomated");
 
-    // safari doesn't give us 120px for this CSS even though
-    // it's in docs.css as that
-    sidebarTop = "120px"; //$("#docs-sidebar").css("top");
-
-    $("#docs-top-navigation-container").addClass("preautomated");
-    $("#docs-sidebar").addClass("preautomated");
-    $("#docs-container").addClass("preautomated");
-
-    function setNavSize() {
-        $("#docs-top-navigation-container").css("width", $("#docs-container").width());
-    }
 
     function setScroll() {
 
         var scrolltop = $(window).scrollTop();
         if (scrolltop >= automatedBreakpoint) {
-            setNavSize();
-            $("#docs-top-navigation-container").addClass("automated");
-            $("#docs-sidebar").addClass("automated");
-
-            // note this height is dependent on docs-top-navigation-container
-            // being position:fixed or absolute, otherwise it might get
-            // a little squashed
-            containerHeight = $("#docs-top-navigation-container").height();
-            $("#docs-body").css("margin-top", containerHeight - parentOffset + 1);
-            $("#docs-sidebar").css("top", sidebarTop);
+            $("#fixed-sidebar.withsidebar").css("top", 5);
         }
         else {
-            $("#docs-sidebar").removeClass("automated");
-            $("#docs-top-navigation-container").removeClass("automated");
-            $("#docs-body").css("margin-top", "");
-            // safari/chrome allow negative scroll positions
-            $("#docs-sidebar").css("top", $("#docs-body").offset().top - Math.max(scrolltop, 0));
+            $("#fixed-sidebar.withsidebar").css(
+                "top", $("#docs-body").offset().top - Math.max(scrolltop, 0));
         }
 
 
     }
     $(window).scroll(setScroll)
 
-    $(window).resize(setNavSize());
     setScroll();
 }
 
 
 $(document).ready(function() {
     initSQLPopups();
-    // disable for now, still can't get anchors to work in all cases
-    if (0) { //!$.browser.mobile) {
+    if (!$.browser.mobile) {
         initFloatyThings();
     }
 });
diff --git a/doc/build/templates/layout.mako b/doc/build/templates/layout.mako
index b4659ce98..d86ecf074 100644
--- a/doc/build/templates/layout.mako
+++ b/doc/build/templates/layout.mako
@@ -42,6 +42,7 @@ withsidebar = bool(toc) and current_page_name != 'index'
     ${docstitle|h}
 </%block>
 
+
 <div id="docs-container">
 
 
@@ -100,30 +101,82 @@ withsidebar = bool(toc) and current_page_name != 'index'
     <h1>${docstitle|h}</h1>
 
 </div>
-<div id="docs-top-navigation">
-    <div id="docs-top-page-control" class="docs-navigation-links">
-        % if prevtopic:
-            <a href="${prevtopic['link']|h}" title="${prevtopic['title']}">Prev</a> |
-        % endif
-        % if nexttopic:
-            <a href="${nexttopic['link']|h}" title="${nexttopic['title']}">Next</a> |
-        % endif
+</div>
+
+<div id="docs-body-container">
+
+    <div id="fixed-sidebar" class="${'withsidebar' if withsidebar else ''}">
+
+    % if not withsidebar:
+        <div id="index-nav">
+            <form class="search" action="${pathto('search')}" method="get">
+              <input type="text" name="q" size="12" /> <input type="submit" value="${_('Search')}" />
+              <input type="hidden" name="check_keywords" value="yes" />
+              <input type="hidden" name="area" value="default" />
+            </form>
+
+            <p>
+            <a href="${pathto('index')}">Contents</a> |
+            <a href="${pathto('genindex')}">Index</a>
+            % if pdf_url:
+            | <a href="${pdf_url}">Download as PDF</a>
+            % endif
+            </p>
+
+        </div>
+    % endif
 
-        <a href="${pathto('index')}">Contents</a> |
-        <a href="${pathto('genindex')}">Index</a>
-        % if pdf_url:
-        | <a href="${pdf_url}">PDF</a>
+    % if withsidebar:
+        <div id="docs-sidebar-popout">
+            <h3><a href="${pathto('index')}">${docstitle|h}</a></h3>
+
+            <p>
+            % if prevtopic:
+                <a href="${prevtopic['link']|h}" title="${prevtopic['title']}">Prev</a> |
+            % endif
+            % if nexttopic:
+                <a href="${nexttopic['link']|h}" title="${nexttopic['title']}">Next</a>
+            % endif
+            </p>
+
+            <p>
+            <a href="${pathto('index')}">Contents</a> |
+            <a href="${pathto('genindex')}">Index</a>
+            % if pdf_url:
+            | <a href="${pdf_url}">PDF</a>
+            % endif
+            </p>
+
+            <form class="search" action="${pathto('search')}" method="get">
+              <input type="text" name="q" size="12" /> <input type="submit" value="${_('Search')}" />
+              <input type="hidden" name="check_keywords" value="yes" />
+              <input type="hidden" name="area" value="default" />
+            </form>
+        </div>
+
+        <div id="docs-sidebar">
+
+        <h3><a href="#">\
+            <%block name="show_title">
+                ${title}
+            </%block>
+        </a></h3>
+        ${toc}
+
+        % if rtd:
+        <h4>Project Versions</h4>
+        <ul class="version-listing">
+        </ul>
         % endif
 
-        | <form class="search" action="${pathto('search')}" method="get">
-          <input type="text" name="q" size="12" /> <input type="submit" value="${_('Search')}" />
-          <input type="hidden" name="check_keywords" value="yes" />
-          <input type="hidden" name="area" value="default" />
-        </form>
+
+        </div>
+    % endif
 
     </div>
 
-    <div id="docs-navigation-banner">
+    <%doc>
+    <div id="docs-top-navigation">
         <a href="${pathto('index')}">${docstitle|h}</a>
         % if parents:
             % for parent in parents:
@@ -139,41 +192,9 @@ withsidebar = bool(toc) and current_page_name != 'index'
                 ${title}
             </%block>
         </h2>
-    </div>
-
-</div>
-</div>
-
-<div id="docs-body-container">
-
-% if withsidebar:
-    <div id="docs-sidebar">
-
-    <h3><a href="${pathto('index')}">Table of Contents</a></h3>
-    ${toc}
-
-    % if prevtopic:
-    <h4>Previous Topic</h4>
-    <p>
-    <a href="${prevtopic['link']|h}" title="${_('previous chapter')}">${prevtopic['title']}</a>
-    </p>
-    % endif
-    % if nexttopic:
-    <h4>Next Topic</h4>
-    <p>
-    <a href="${nexttopic['link']|h}" title="${_('next chapter')}">${nexttopic['title']}</a>
-    </p>
-    % endif
-
-    % if rtd:
-    <h4>Project Versions</h4>
-    <ul class="version-listing">
-    </ul>
-    % endif
-
 
     </div>
-% endif
+    </%doc>
 
     <div id="docs-body" class="${'withsidebar' if withsidebar else ''}" >
         ${next.body()}