Sign Up
Log In
Log In
or
Sign Up
Places
All Projects
Status Monitor
Collapse sidebar
home:Ledest:erlang:23
erlang
3724-docgen-Use-flexbox-instead-of-tables-for-t...
Overview
Repositories
Revisions
Requests
Users
Attributes
Meta
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
Locations
Projects
Search
Status Monitor
Help
OpenBuildService.org
Documentation
API Documentation
Code of Conduct
Contact
Support
@OBShq
Terms
openSUSE Build Service is sponsored by
The Open Build Service is an
openSUSE project
.
Sign Up
Log In
Places
Places
All Projects
Status Monitor
