improve left panel section info and menu

3 files changed, 36 insertions, 21 deletions

diff --git a/lib/erl_docgen/priv/css/otp_doc.css b/lib/erl_docgen/priv/css/otp_doc.css
index 1ff9bcade2..cbeb1037a9 100644
--- a/lib/erl_docgen/priv/css/otp_doc.css
+++ b/lib/erl_docgen/priv/css/otp_doc.css
@@ -204,3 +204,16 @@ th {
  background-color: #777;
  color: #fefefe;
 }
+
+.section-title, .section-subtitle, .section-version{
+ text-align: center;
+ margin: 0;
+}
+
+.section-title{
+ font-weight: bold;
+}
+
+.section-version{
+ font-size: small;
+}
diff --git a/lib/erl_docgen/priv/xsl/db_html.xsl b/lib/erl_docgen/priv/xsl/db_html.xsl
index 529d28e88f..9f49fc31d5 100644
--- a/lib/erl_docgen/priv/xsl/db_html.xsl
+++ b/lib/erl_docgen/priv/xsl/db_html.xsl
@@ -809,7 +809,7 @@
         </div>
       </xsl:otherwise>
     </xsl:choose>
-    <br/>
+
     <ul class="panel-sections">
       <xsl:if test="boolean(/book/parts/part)">
           <li><a href="users_guide.html">User's Guide</a></li>
@@ -845,7 +845,6 @@
         </xsl:when>
       </xsl:choose>
     </small -->
-    <br/>
 
     <ul class="expand-collapse-items">
         <li><a href="javascript:openAllFlips()">Expand All</a></li>
@@ -1252,12 +1251,12 @@
     <div id="leftnav">
       <div class="innertube">
 
-        <xsl:call-template name="menu_top"/>
-
         <p class="section-title"><xsl:value-of select="/book/header/title"/></p>
         <p class="section-subtitle">User's Guide</p>
         <p class="section-version">Version <xsl:value-of select="$appver"/></p>
 
+        <xsl:call-template name="menu_top"/>
+
         <xsl:call-template name="menu_middle"/>
 
         <h3>Chapters</h3>
@@ -1411,12 +1410,12 @@
     <div id="leftnav">
       <div class="innertube">
 
-        <xsl:call-template name="menu_top"/>
-
         <p class="section-title"><xsl:value-of select="/book/header/title"/></p>
         <p class="section-subtitle">Reference Manual</p>
         <p class="section-version">Version <xsl:value-of select="$appver"/></p>
 
+        <xsl:call-template name="menu_top"/>
+
         <xsl:call-template name="menu_middle"/>
 
         <h3>Table of Contents</h3>
@@ -2252,12 +2251,12 @@
     <div id="leftnav">
       <div class="innertube">
 
-        <xsl:call-template name="menu_top"/>
-
         <p class="section-title"><xsl:value-of select="/book/header/title"/></p>
         <p class="section-subtitle">Release Notes</p>
         <p class="section-version">Version <xsl:value-of select="$appver"/></p>
 
+        <xsl:call-template name="menu_top"/>
+
         <xsl:call-template name="menu_middle"/>
 
         <h3>Chapters</h3>
diff --git a/system/doc/top/templates/index.html.src b/system/doc/top/templates/index.html.src
index bfc0ba9f51..b7fff0993d 100644
--- a/system/doc/top/templates/index.html.src
+++ b/system/doc/top/templates/index.html.src
@@ -34,19 +34,19 @@ limitations under the License.
 <div id="container">
 <div id="leftnav">
 <div class="innertube">
-    <div class="erlang-logo-wrapper">
-        <img alt="Erlang Logo" src="erlang-logo.png" class="erlang-logo"/ >
-    </div>
+<div class="erlang-logo-wrapper">
+ <img alt="Erlang logo" src="erlang-logo.png" class="erlang-logo"/ >
+</div>
 
-    <ul>
-        <li><a href="applications.html">Applications</a></li>
-        <li><a href="man_index.html">Modules</a></li>
-    </ul>
+<ul class="section-links">
+ <li><a href="applications.html">Applications</a></li>
+ <li><a href="man_index.html" class="modules">Modules</a></li>
+</ul>
 
-    <ul class="expand-collapse-items">
-        <li><a href="javascript:openAllFlips()">Expand All</a></li>
-        <li><a href="javascript:closeAllFlips()">Contract All</a></li>
-    </ul>
+<ul class="expand-collapse-items">
+ <li><a href="javascript:openAllFlips()">Expand All</a></li>
+ <li><a href="javascript:closeAllFlips()">Contract All</a></li>
+</ul>
 
 <ul class="flipMenu">
 <li>System Documentation
@@ -64,6 +64,7 @@ limitations under the License.
 </ul>
 </li>
 </ul>
+
 <h3>Application Groups</h3>
 
 <ul class="flipMenu">
@@ -77,8 +78,10 @@ limitations under the License.
 <div id="content">
 <div class="innertube">
     <h1 class="main-title">Erlang/OTP #otp_base_vsn#</h1>
-    <p class="main-description">Welcome to Erlang/OTP, a complete development environment for concurrent programming.</p>
- 
+    <p class="main-description">
+    Welcome to Erlang/OTP, a complete development environment for concurrent programming.
+    </p>
+
     <h2>Some hints that may get you started faster</h2>
 
 <ul>