Restructure the page headers and how they are tweaked so we don't

have the weird wrapping problems, unless the user has a weirdly
sized browser.

git-svn-id: https://svn.wxwidgets.org/svn/wx/wxPython/Phoenix/trunk@75774 c3d73ce0-8a6f-49c7-b76d-6d57e0e08775

docs/sphinx/_static/css/phoenix.css

@@ -91,12 +91,20 @@ body {
   background-color: rgb(230,230,230);
 }
 
+div.headerimage {
+	text-align: center;
+}
+
+div.headerimage-noshow {
+	display:none;
+}
+
 div.document { 
   background-color: rgb(230,230,230);
   position: relative;
   margin-left: 240px;
   z-index: 0;
-  top: 30px;
+  top: 50px;
 }
 
 div.sphinxsidebar {
@@ -110,16 +118,19 @@ div.sphinxsidebar {
     height: auto;
     z-index: 1;
     left: 0;
-    top: 33px;
+    top: 50px;
     bottom: 0;  
 }
 
 div.related {
+    background-image: url('../images/sphinxdocs/navigation.png');
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
     font-size: 1em;
     position: fixed;
-    line-height: 30px;
+    line-height: normal;
     position: fixed;
-    height: 30px;
+    height: auto;
     z-index: 1;
     left: 0;
     right: 0;
@@ -127,32 +138,47 @@ div.related {
 }
 
 div.related ul {
-    background-image: url('../images/sphinxdocs/navigation.png');
-    height: 2em;
-    border-top: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
     color: rgb(100, 100, 100);
 }
 
+div.related ul.row1 {
+    height: 30px;
+}
+
+div.related ul.row2 {
+    height: 20px;
+}
+
 div.related ul li {
     margin: 0;
+    margin-top: 7px;
     padding: 0;
-    height: 2em;
     float: left;
 }
 
 div.related ul li.right {
+    font-size: small;
     float: right;
     margin-right: 5px;
+    margin-top: 0;
 }
 
+div.related ul li#searchbox.right {
+    float: right;
+    margin-right: 5px;
+    margin-top:  7px;
+}
 div.related ul li a {
     margin: 0;
     padding: 0 5px 0 5px;
-    line-height: 1.75em;
+    line-height: normal;
     color: #EE9816;
 }
 
+div.related ul li.reltitle {
+    padding: 0 5px 0 5px;
+}
+
 div.related ul li a:hover {
     color: #3CA8E7;
 }
@@ -181,6 +207,12 @@ div.sphinxsidebar ul.want-points {
   list-style: disc;
 }
 
+div.footer {
+    padding: 80px 0 9px 0;
+    text-align: center;
+    font-size: 75%;
+}
+
 .field-list th {
   color: rgb(0,102,204);
 }

docs/sphinx/_templates/layout.html

@@ -1,9 +1,5 @@
 {% extends "!layout.html" %}
 
-{%- block relbaritems %}
-  <li>{{ title }}</li>
-{% endblock %}
-
 {%- set render_sidebar = (not embedded) and (not theme_nosidebar|tobool)
     and (sidebars != []) and (pagename != 'index') %}
 
@@ -24,32 +20,62 @@
 {% block sidebar1 %}{{ phoenixsidebar() }}{% endblock %}
 {% block sidebar2 %}{% endblock %}
 
+{% block relbar1 %}{{ myrelbar() }}{% endblock %}
 {% block relbar2 %}{% endblock %}
 
-{% block rootrellink %}
 
-        <li><img src="_static/images/sphinxdocs/phoenix_small.png" alt="" style="vertical-align: middle; margin-top: 7px"/></li>
+
+{%- macro myrelbar() %}
+    <div class="related">
+      <h3>{{ _('Navigation') }}</h3>
+      <ul class="row1">
+        <li><img src="_static/images/sphinxdocs/phoenix_small.png" alt=""/></li>
         <li><a href="index.html" style="color: rgb(238, 152, 22); hover: rgb(53, 95, 124);">Home</a> |&nbsp;</li>
-        <li><a href="gallery.html" style="color: rgb(238, 152, 22); hover: rgb(53, 95, 124);">Gallery</a> |&nbsp;</li>
+        <li><a href="gallery.html" style="color: rgb(238, 152, 22); hover: rgb(53, 95, 124);;">Gallery</a> |&nbsp;</li>
         <li><a href="main.html" style="color: rgb(238, 152, 22); hover: rgb(53, 95, 124);">Docs</a> &raquo; </li>
 
-{%- if pagename != 'search' %}
-<li id="searchbox" style="display: none; margin: 0 20px;" class="right">
-  <form class="search" action="{{ pathto('search') }}" method="get">
-    <span>{{ _('Search:') }}</span>
-    <input type="text" name="q" size="18" />
-    <input type="submit" value="{{ _('Go') }}" />
-    <input type="hidden" name="check_keywords" value="yes" />
-    <input type="hidden" name="area" value="default" />
-  </form>
-</li>
-<script type="text/javascript">$('#searchbox').show(0);</script>
-{%- endif %}
-{% endblock %}
+        {%- for parent in parents %}
+          <li><a href="{{ parent.link|e }}" {% if loop.last %}{{ accesskey("U") }}{% endif %}>{{ parent.title }}</a>{{ reldelim1 }}</li>
+        {%- endfor %}
+        <li class="reltitle"> {{ title }}</li>
+
+        {%- if pagename != 'search' %}
+        <li id="searchbox" style="display: none;" class="right">
+          <form class="search" action="{{ pathto('search') }}" method="get">
+            <span>{{ _('Search:') }}</span>
+            <input type="text" name="q" size="18" />
+            <input type="submit" value="{{ _('Go') }}" />
+            <input type="hidden" name="check_keywords" value="yes" />
+            <input type="hidden" name="area" value="default" />
+          </form>
+        </li>
+        <script type="text/javascript">$('#searchbox').show(0);</script>
+        {%- endif %}
+
+        </ul>
+        <ul class="row2">
+
+        {%- for rellink in rellinks %}
+        <li class="right" {% if loop.first %}style="margin-right: 10px"{% endif %}>
+          <a href="{{ pathto(rellink[0]) }}" title="{{ rellink[1]|striptags|e }}"
+             {{ accesskey(rellink[2]) }}>{{ rellink[3] }}</a>
+          {%- if not loop.first %}{{ reldelim2 }}{% endif %}</li>
+        {%- endfor %}
+        
+      </ul>
+    </div>
+{%- endmacro %}
+
+
+
 
 {% block document %}
   <div class="documentwrapper">
     <div class="body headerfix">
+      <div class="headerimage">
+      <img src="{{ pathto("_static/images/sphinxdocs/phoenix_top.png", 1) }}" alt="Phoenix Logo" />
+      </div>
+    
       {% block body %} {% endblock %}
       {%- if theme_disqus_comments|tobool %}
       <div id="disqus_thread"></div>
@@ -60,11 +86,6 @@
   </div>
 {%- endblock %}
 
-{% block header %}
-<div class="floatcenter" style="background-color: white; text-align: middle; align: middle; padding: 40px 10px 15px 15px">
-<img src="{{ pathto("_static/images/sphinxdocs/phoenix_top.png", 1) }}" alt="Phoenix Logo" align="middle" />
-</div>
-{% endblock %}
 
 set script_files = script_files + ['_static/sidebar.js']
 set script_files = script_files + ['_static/header.js']

sphinxtools/postprocess.py

@@ -622,11 +622,6 @@ def PostProcess(folder):
 
     fileNames = glob.glob(folder + "/*.html")
 
-    phoenix_image = '<div class="floatcenter" style="background-color: white; text-align: middle; align: middle; padding: 40px 10px 15px 15px">\n' \
-                    '<img src="_static/images/sphinxdocs/phoenix_top.png" alt="Phoenix Logo" align="middle" />\n' \
-                    '</div>'
-
-
     enum_files = glob.glob(folder + '/*.enumeration.html')
 
     enum_base = [os.path.split(os.path.splitext(enum)[0])[1] for enum in enum_files]
@@ -657,9 +652,8 @@ def PostProcess(folder):
         if split in ['index.html', 'main.html']:
             text = ChangeSVNRevision(text)
         else:
-            text = text.replace(phoenix_image, '')
+            text = text.replace('class="headerimage"', 'class="headerimage-noshow"')
         
-##        text = AddPrettyTable(text)
         text = text.replace('&#8211; <p>', '&#8211; ')
         text = text.replace('<p><img alt="overload"', '<br><p><img alt="overload"')
         text = text.replace('<strong>Overloaded Implementations</strong>', '<em><strong>Overloaded Implementations</strong></em>')
@@ -678,8 +672,6 @@ def PostProcess(folder):
             if '<div class="admonition-availability admonition' in line:
                 line = '<div class="admonition-availability admonition availability">'
                 
-##            line = ClassToFile(line)
-
             if index < len_split - 1:
 
                 if line.strip() == '<br><hr />' or line.strip() == '<dd><br><hr />':