docgen: Use flexbox instead of tables for titles

Flex blox allows for better control and is simpler than a table.

2 files changed, 91 insertions, 103 deletions

diff --git a/lib/erl_docgen/priv/css/otp_doc.css b/lib/erl_docgen/priv/css/otp_doc.css
index 915782ec8c..a0146b74d1 100644
--- a/lib/erl_docgen/priv/css/otp_doc.css
+++ b/lib/erl_docgen/priv/css/otp_doc.css
@@ -79,36 +79,33 @@ a:visited      { color: #1b6ec2; text-decoration: none }
 
 .bold_code   { font-family: mono, Courier, monospace; font-weight: bold }
 
-/* Invisible table for function specs,
- * just to get since-version out in right margin */
-.func-table, .func-tr, .func-td, .cfunc-td, .func-since-td {
-    width: 100%;
-    border: 0;
-    padding: 0;
-    margin: 0;
+.title-link {
+    display: flex;
 }
 
-.func-tr:nth-child(n) {
-    background: inherit  /* turn off zebra striped rows */
+.cref-head, .func-head, .data-type-name {
+    margin: 0 0 0 -4em;
+    padding-bottom: 0.2em;
+    padding-top: 0.2em;
 }
 
-.func-td {
-    width: 38em;
+.cref-head:hover, .func-head:hover, .data-type-name:hover {
+    background-color: #f5f5f5;
 }
 
-.cfunc-td {
-    width: 31em;
+/* This small trick is in order to make all but the first line of the function
+ * head indented by 7em. So that it looks like this:
+ * int enif_alloc_binary(
+ *              size_t size,
+ *              ErlNifBinary* bin)
+ */
+.cref-head .title-name {
     padding-left: 7em;
     text-indent: -7em;
 }
 
-.func-since-td {
-    width: auto;
-    padding-left: 1em;
-}
-
-.func-td:hover {
- background-color: #f5f5f5;
+.title-since {
+    margin-left: auto;
 }
 
 .code        {
@@ -299,7 +296,6 @@ th {
 }
 
 .ghlink-before {
-    margin-left: -4em;
     visibility: hidden;
 }
 
diff --git a/lib/erl_docgen/priv/xsl/db_html.xsl b/lib/erl_docgen/priv/xsl/db_html.xsl
index 655d1a61e8..54e6ba2acf 100644
--- a/lib/erl_docgen/priv/xsl/db_html.xsl
+++ b/lib/erl_docgen/priv/xsl/db_html.xsl
@@ -264,31 +264,29 @@
     <xsl:param name="since"/>
     <xsl:variable name="mfa" select="concat(concat(../../../name,'-'),../../../arity)"/>
     <xsl:variable name="id" select="concat(concat($mfa,'-'),generate-id(.))"/>
-    <table class="func-table">
-    <tr class="func-tr">
-    <td class="func-td">
-      <div class="bold_code func-head"
-           onMouseOver="document.getElementById('ghlink-{$id}').style.visibility = 'visible';"
-           onMouseOut="document.getElementById('ghlink-{$id}').style.visibility = 'hidden';">
-	<xsl:call-template name="ghlink">
+    <div class="bold_code title-link func-head"
+         onMouseOver="document.getElementById('ghlink-{$id}').style.visibility = 'visible';"
+         onMouseOut="document.getElementById('ghlink-{$id}').style.visibility = 'hidden';">
+      <div>
+        <xsl:call-template name="ghlink">
           <xsl:with-param name="mfa" select="$mfa"/>
           <xsl:with-param name="ghlink" select="$ghlink"/>
           <xsl:with-param name="id" select="$id"/>
-	</xsl:call-template>
-	<xsl:apply-templates mode="local_type">
+        </xsl:call-template>
+      </div>
+      <div class="title-name">
+        <xsl:apply-templates mode="local_type">
 	  <xsl:with-param name="local_types" select="$local_types"/>
 	  <xsl:with-param name="global_types" select="$global_types"/>
-	</xsl:apply-templates>
+        </xsl:apply-templates>
       </div>
-    </td>
-    <td class="func-since-td">
-      <xsl:if test="string-length($since) > 0">
-	<span class="since"><xsl:value-of select="$since"/>
-	</span>
-      </xsl:if>
-    </td>
-    </tr>
-    </table>
+      <div class="title-since">
+        <xsl:if test="string-length($since) > 0">
+	  <span class="since"><xsl:value-of select="$since"/>
+	  </span>
+        </xsl:if>
+      </div>
+    </div>
   </xsl:template>
 
   <!-- The *last* <name name="..." arity=".."/> -->
@@ -509,7 +507,7 @@
               <xsl:with-param name="by" select="$slash_encoded" />
             </xsl:call-template>
           </xsl:variable>
-          <div class="data-type-name"
+          <div class="title-link data-type-name"
                onMouseOver="document.getElementById('ghlink-{$id}').style.visibility = 'visible';"
                onMouseOut="document.getElementById('ghlink-{$id}').style.visibility = 'hidden';">
             <xsl:call-template name="ghlink">
@@ -2370,23 +2368,13 @@
 
     <xsl:choose>
       <xsl:when test="ancestor::cref">
-	<table class="func-table">
-	  <tr class="func-tr">
-	    <td class="cfunc-td">
-              <span class="bold_code bc-7">
-		<xsl:call-template name="title_link">
-		  <xsl:with-param name="link" select="substring-before(nametext, '(')"/>
-                  <xsl:with-param name="where" select="'before'"/>
-		</xsl:call-template>
-              </span>
-	    </td>
-	    <td class="func-since-td">
-	      <xsl:if test="string-length(@since) > 0">
-		<span class="since"><xsl:value-of select="@since"/></span>
-	      </xsl:if>
-	    </td>
-	  </tr>
-	</table>
+        <div class="cref-head bold_code bc-7">
+	  <xsl:call-template name="title_link">
+	    <xsl:with-param name="link" select="substring-before(nametext, '(')"/>
+            <xsl:with-param name="where" select="'before'"/>
+            <xsl:with-param name="since" select="@since"/>
+	  </xsl:call-template>
+        </div>
       </xsl:when>
       <xsl:when test="ancestor::erlref">
         <xsl:variable name="fname">
@@ -2418,26 +2406,16 @@
             </div>
 	  </xsl:when>
           <xsl:otherwise>
-	    <table class="func-table">
-	      <tr class="func-tr">
-	      <td class="func-td">
-		<div class="bold_code fun-type">
-		  <xsl:call-template name="title_link">
-                    <xsl:with-param name="link" select="concat(concat($fname,'-'),$arity)"/>
-                    <xsl:with-param name="where" select="'before'"/>
-                    <xsl:with-param name="title">
-                      <xsl:apply-templates/>
-                    </xsl:with-param>
-		  </xsl:call-template>
-		</div>
-	      </td>
-	      <td class="func-since-td">
-		<xsl:if test="string-length(@since) > 0">
-		  <span class="since"><xsl:value-of select="@since"/></span>
-		</xsl:if>
-	      </td>
-	      </tr>
-	    </table>
+	    <div class="bold_code func-head">
+	      <xsl:call-template name="title_link">
+                <xsl:with-param name="link" select="concat(concat($fname,'-'),$arity)"/>
+                <xsl:with-param name="where" select="'before'"/>
+                <xsl:with-param name="since" select="@since"/>
+                <xsl:with-param name="title">
+                  <xsl:apply-templates/>
+                </xsl:with-param>
+	      </xsl:call-template>
+	    </div>
           </xsl:otherwise>
 	</xsl:choose>
       </xsl:when>
@@ -2504,41 +2482,55 @@
     <xsl:param name="title" select="'APPLY'"/>
     <xsl:param name="link" select="erl:to-link(title)"/>
     <xsl:param name="where" select="'after'"/>
+    <xsl:param name="since"/>
     <xsl:param name="ghlink" select="ancestor-or-self::*[@ghlink][position() = 1]/@ghlink"/>
     <xsl:variable name="id" select="concat(concat($link,'-'), generate-id(.))"/>
-    <span onMouseOver="document.getElementById('ghlink-{$id}').style.visibility = 'visible';"
-          onMouseOut="document.getElementById('ghlink-{$id}').style.visibility = 'hidden';">
+    <div class="title-link"
+         onMouseOver="document.getElementById('ghlink-{$id}').style.visibility = 'visible';"
+         onMouseOut="document.getElementById('ghlink-{$id}').style.visibility = 'hidden';">
       <xsl:choose>
 	<xsl:when test="$where = 'before'">
-          <xsl:call-template name="ghlink">
-            <xsl:with-param name="mfa" select="$link"/>
-            <xsl:with-param name="id" select="$id"/>
-            <xsl:with-param name="ghlink" select="$ghlink"/>
-            <xsl:with-param name="where" select="$where"/>
-          </xsl:call-template>
+          <div>
+            <xsl:call-template name="ghlink">
+              <xsl:with-param name="mfa" select="$link"/>
+              <xsl:with-param name="id" select="$id"/>
+              <xsl:with-param name="ghlink" select="$ghlink"/>
+              <xsl:with-param name="where" select="$where"/>
+            </xsl:call-template>
+          </div>
         </xsl:when>
       </xsl:choose>
-      <a class="title_link" name="{$link}">
-        <xsl:choose>
-	  <xsl:when test="$title = 'APPLY'">
-	    <xsl:apply-templates/>   <!-- like <ret> and <nametext> -->
-	  </xsl:when>
-	  <xsl:otherwise>
-            <xsl:copy-of select="$title"/>
-	  </xsl:otherwise>
-        </xsl:choose>
-      </a>
+      <div class="title-name">
+        <a class="title_link" name="{$link}">
+          <xsl:choose>
+	    <xsl:when test="$title = 'APPLY'">
+	      <xsl:apply-templates/>   <!-- like <ret> and <nametext> -->
+	    </xsl:when>
+	    <xsl:otherwise>
+              <xsl:copy-of select="$title"/>
+	    </xsl:otherwise>
+          </xsl:choose>
+        </a>
+      </div>
       <xsl:choose>
 	<xsl:when test="$where = 'after'">
-          <xsl:call-template name="ghlink">
-            <xsl:with-param name="mfa" select="$link"/>
-            <xsl:with-param name="id" select="$id"/>
-            <xsl:with-param name="ghlink" select="$ghlink"/>
-            <xsl:with-param name="where" select="$where"/>
-          </xsl:call-template>
+          <div>
+            <xsl:call-template name="ghlink">
+              <xsl:with-param name="mfa" select="$link"/>
+              <xsl:with-param name="id" select="$id"/>
+              <xsl:with-param name="ghlink" select="$ghlink"/>
+              <xsl:with-param name="where" select="$where"/>
+            </xsl:call-template>
+          </div>
         </xsl:when>
       </xsl:choose>
-    </span>
+      <div class="title-since">
+        <xsl:if test="string-length($since) > 0">
+	  <span class="since"><xsl:value-of select="$since"/>
+	  </span>
+        </xsl:if>
+      </div>
+    </div>
   </xsl:template>
 
   <xsl:template name="ghlink">