File 3724-docgen-Use-flexbox-instead-of-tables-for-titles.patch of Package erlang
From 1bd910b250900091db3cf0884ecc7bcb7658ea27 Mon Sep 17 00:00:00 2001
From: Lukas Larsson <lukas@erlang.org>
Date: Mon, 13 Sep 2021 11:51:27 +0200
Subject: [PATCH 04/12] docgen: Use flexbox instead of tables for titles
Flex blox allows for better control and is simpler than a table.
---
lib/erl_docgen/priv/css/otp_doc.css | 38 +++----
lib/erl_docgen/priv/xsl/db_html.xsl | 156 +++++++++++++---------------
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">
--
2.31.1
