[yelp-xsl/wip/html5: 4/4] Flexboxing commong 'About' footer
- From: Shaun McCance <shaunm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [yelp-xsl/wip/html5: 4/4] Flexboxing commong 'About' footer
- Date: Mon, 26 Oct 2015 20:40:52 +0000 (UTC)
commit c62d3c3891a67d499556d5b00c62845d1cfcd07a
Author: Shaun McCance <shaunm redhat com>
Date: Mon Oct 26 16:39:12 2015 -0400
Flexboxing commong 'About' footer
Cleaned up some metadata handling across Mallard DocBook, and DITA
in the process
xslt/common/html.xsl | 36 +++---
xslt/dita/html/dita2html-topic.xsl | 118 ++++++++------------
xslt/docbook/common/db-selectors.mod | 21 ++++
xslt/docbook/html/db2html-division.xsl | 154 ++++++++++----------------
xslt/mallard/html/mal2html-page.xsl | 188 ++++++++++++-------------------
5 files changed, 217 insertions(+), 300 deletions(-)
---
diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl
index 9b7eb8e..461f8cd 100644
--- a/xslt/common/html.xsl
+++ b/xslt/common/html.xsl
@@ -862,34 +862,29 @@ div.about > div.inner > div.hgroup > h2 {
div.about.ui-expander > div.inner > div.hgroup span.title:before {
content: "";
}
-div.about > div.inner > div.region > div.contents {
- display: flex;
- flex-flow: row wrap;
- align-items: stretch;
- justify-content: flex-start;
- vertical-align: top;
-}
div.copyrights {
+ max-width: 700px;
text-align: center;
- flex: 1 1 100%;
padding: 10px;
+ margin: 0 auto;
}
-div.copyright {
- margin: 0;
+div.copyright { margin: 0; }
+div.credits {
+ display: flex;
+ flex-flow: row wrap;
+ align-items: stretch;
+ justify-content: flex-start;
+ max-width: 720px;
+ margin: 0 auto;
}
-div.aboutblurb {
+div.credits > * {
vertical-align: top;
text-align: left;
- flex: 0 1 300px;
+ flex: 1 0 220px;
margin: 0;
padding: 10px;
}
- media (max-width: 974px) {
- div.aboutblurb { flex: 1 1 300px; }
-}
- media (max-width: 640px) {
- div.aboutblurb { flex: 1 0 100%; }
-}
+div.credits > *:empty { padding: 0 10px; height: 0; }
ul.credits, ul.credits li {
margin: 0; padding: 0;
list-style-type: none;
@@ -898,6 +893,11 @@ ul.credits li {
margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
text-indent: -1em;
}
+div.license {
+ max-width: 700px;
+ margin: 0 auto;
+ padding: 10px;
+}
table {
border-collapse: collapse;
diff --git a/xslt/dita/html/dita2html-topic.xsl b/xslt/dita/html/dita2html-topic.xsl
index be1edfe..34aee49 100644
--- a/xslt/dita/html/dita2html-topic.xsl
+++ b/xslt/dita/html/dita2html-topic.xsl
@@ -216,76 +216,28 @@ REMARK: Describe this module
</xsl:for-each>
</div>
</xsl:if>
- <xsl:if test="$authors">
- <div class="aboutblurb authors">
- <div class="title">
- <span class="title">
- <xsl:call-template name="l10n.gettext">
- <xsl:with-param name="msgid" select="'Written By'"/>
- </xsl:call-template>
- </span>
- </div>
- <ul class="credits">
- <xsl:for-each select="$authors">
- <li>
- <xsl:apply-templates mode="dita2html.topic.mode"/>
- </li>
- </xsl:for-each>
- </ul>
- </div>
- </xsl:if>
- <xsl:if test="$translators">
- <div class="aboutblurb translators">
- <div class="title">
- <span class="title">
- <xsl:call-template name="l10n.gettext">
- <xsl:with-param name="msgid" select="'Translated By'"/>
- </xsl:call-template>
- </span>
- </div>
- <ul class="credits">
- <xsl:for-each select="$translators">
- <li>
- <xsl:apply-templates mode="dita2html.topic.mode"/>
- </li>
- </xsl:for-each>
- </ul>
- </div>
- </xsl:if>
- <xsl:if test="$publishers">
- <div class="aboutblurb publishers">
- <div class="title">
- <span class="title">
- <xsl:call-template name="l10n.gettext">
- <xsl:with-param name="msgid" select="'Published By'"/>
- </xsl:call-template>
- </span>
- </div>
- <ul class="credits">
- <xsl:for-each select="$publishers">
- <li>
- <xsl:apply-templates mode="dita2html.topic.mode"/>
- </li>
- </xsl:for-each>
- </ul>
- </div>
- </xsl:if>
- <xsl:if test="$others">
- <div class="aboutblurb othercredits">
- <div class="title">
- <span class="title">
- <xsl:call-template name="l10n.gettext">
- <xsl:with-param name="msgid" select="'Other Credits'"/>
- </xsl:call-template>
- </span>
- </div>
- <ul class="credits">
- <xsl:for-each select="$others">
- <li>
- <xsl:apply-templates mode="dita2html.topic.mode"/>
- </li>
- </xsl:for-each>
- </ul>
+ <xsl:if test="$authors or $translators or $publishers or $others">
+ <div class="credits">
+ <xsl:call-template name="_dita2html.topic.about.credits">
+ <xsl:with-param name="class" select="'credits-authors'"/>
+ <xsl:with-param name="title" select="'Written By'"/>
+ <xsl:with-param name="credits" select="$authors"/>
+ </xsl:call-template>
+ <xsl:call-template name="_dita2html.topic.about.credits">
+ <xsl:with-param name="class" select="'credits-translators'"/>
+ <xsl:with-param name="title" select="'Translated By'"/>
+ <xsl:with-param name="credits" select="$translators"/>
+ </xsl:call-template>
+ <xsl:call-template name="_dita2html.topic.about.credits">
+ <xsl:with-param name="class" select="'credits-publishers'"/>
+ <xsl:with-param name="title" select="'Published By'"/>
+ <xsl:with-param name="credits" select="$publishers"/>
+ </xsl:call-template>
+ <xsl:call-template name="_dita2html.topic.about.credits">
+ <xsl:with-param name="class" select="'credits-others'"/>
+ <xsl:with-param name="title" select="'Other Credits'"/>
+ <xsl:with-param name="credits" select="$others"/>
+ </xsl:call-template>
</div>
</xsl:if>
</div>
@@ -295,6 +247,32 @@ REMARK: Describe this module
</xsl:if>
</xsl:template>
+<!--#* _dita2html.topic.about.credits -->
+<xsl:template name="_dita2html.topic.about.credits">
+ <xsl:param name="class"/>
+ <xsl:param name="title"/>
+ <xsl:param name="credits"/>
+ <xsl:if test="$credits">
+ <div class="{$class}">
+ <div class="title">
+ <span class="title">
+ <xsl:call-template name="l10n.gettext">
+ <xsl:with-param name="msgid" select="$title"/>
+ </xsl:call-template>
+ </span>
+ </div>
+ <ul class="credits">
+ <xsl:for-each select="$credits">
+ <li>
+ <xsl:apply-templates mode="dita2html.topic.mode"/>
+ </li>
+ </xsl:for-each>
+ </ul>
+ </div>
+ </xsl:if>
+</xsl:template>
+
+
<xsl:template mode="l10n.format.mode" match="msg:copyright.years">
<xsl:param name="node"/>
<xsl:value-of select="$node/&topic_copyryear;/@year"/>
diff --git a/xslt/docbook/common/db-selectors.mod b/xslt/docbook/common/db-selectors.mod
index 76f3272..c32e1eb 100644
--- a/xslt/docbook/common/db-selectors.mod
+++ b/xslt/docbook/common/db-selectors.mod
@@ -51,3 +51,24 @@ local-name(.) = 'setindex' or
local-name(.) = 'simplesect' or
local-name(.) = 'toc'
]">
+<!ENTITY db_infos "*[
+self::db:info or
+self::appendixinfo or
+self::articleinfo or
+self::bibliographyinfo or
+self::bookinfo or
+self::chapterinfo or
+self::glossaryinfo or
+self::indexinfo or
+self::partinfo or
+self::prefaceinfo or
+self::refentryinfo or
+self::referenceinfo or
+self::sect1info or
+self::sect2info or
+self::sect3info or
+self::sect4info or
+self::sect5info or
+self::sectioninfo or
+self::setindexinfo or
+]">
diff --git a/xslt/docbook/html/db2html-division.xsl b/xslt/docbook/html/db2html-division.xsl
index dab0fed..912de89 100644
--- a/xslt/docbook/html/db2html-division.xsl
+++ b/xslt/docbook/html/db2html-division.xsl
@@ -345,13 +345,7 @@ the division. By default it is called by the %{html.footer.mode} implementation.
-->
<xsl:template name="db2html.division.about">
<xsl:param name="node" select="."/>
- <xsl:param name="info" select="
- $node/appendixinfo | $node/articleinfo | $node/bibliographyinfo | $node/bookinfo |
- $node/chapterinfo | $node/glossaryinfo | $node/indexinfo | $node/partinfo |
- $node/prefaceinfo | $node/refentryinfo | $node/referenceinfo | $node/refsect1info |
- $node/refsect2info | $node/refsect3info | $node/refsectioninfo | $node/sect1info |
- $node/sect2info | $node/sect3info | $node/sect4info | $node/sect5info |
- $node/sectioninfo | $node/setindexinfo | $node/db:info "/>
+ <xsl:param name="info" select="$node/ancestor-or-self::*/&db_infos;"/>
<xsl:variable name="copyrights" select="$info/copyright | $info/db:copyright"/>
<xsl:variable name="authors" select="
$info/author | $info/authorgroup/author |
@@ -375,7 +369,8 @@ the division. By default it is called by the %{html.footer.mode} implementation.
$info/db:othercredit | $info/db:authorgroup/db:othercredit,
($authors | $editors | $translators))"/>
<xsl:variable name="legal" select="$info/legalnotice | $info/db:legalnotice"/>
- <xsl:if test="$copyrights or $authors or $editors or $translators or $publishers or $othercredits or
$legal">
+ <xsl:if test="$copyrights or $authors or $editors or $translators or
+ $publishers or $othercredits or $legal">
<div class="sect about ui-expander" role="contentinfo">
<div class="yelp-data yelp-data-ui-expander" data-yelp-expanded="false"/>
<div class="inner">
@@ -399,98 +394,37 @@ the division. By default it is called by the %{html.footer.mode} implementation.
</xsl:for-each>
</div>
</xsl:if>
- <xsl:if test="$authors">
- <div class="aboutblurb authors">
- <div class="title">
- <span class="title">
- <xsl:call-template name="l10n.gettext">
- <xsl:with-param name="msgid" select="'Written By'"/>
- </xsl:call-template>
- </span>
- </div>
- <ul class="credits">
- <xsl:for-each select="$authors">
- <li>
- <xsl:apply-templates select="."/>
- </li>
- </xsl:for-each>
- </ul>
- </div>
- </xsl:if>
- <xsl:if test="$editors">
- <div class="aboutblurb editors">
- <div class="title">
- <span class="title">
- <xsl:call-template name="l10n.gettext">
- <xsl:with-param name="msgid" select="'Edited By'"/>
- </xsl:call-template>
- </span>
- </div>
- <ul class="credits">
- <xsl:for-each select="$editors">
- <li>
- <xsl:apply-templates select="."/>
- </li>
- </xsl:for-each>
- </ul>
- </div>
- </xsl:if>
- <xsl:if test="$translators">
- <div class="aboutblurb translators">
- <div class="title">
- <span class="title">
- <xsl:call-template name="l10n.gettext">
- <xsl:with-param name="msgid" select="'Translated By'"/>
- </xsl:call-template>
- </span>
- </div>
- <ul class="credits">
- <xsl:for-each select="$translators">
- <li>
- <xsl:apply-templates select="."/>
- </li>
- </xsl:for-each>
- </ul>
- </div>
- </xsl:if>
- <xsl:if test="$publishers">
- <div class="aboutblurb publishers">
- <div class="title">
- <span class="title">
- <xsl:call-template name="l10n.gettext">
- <xsl:with-param name="msgid" select="'Published By'"/>
- </xsl:call-template>
- </span>
- </div>
- <ul class="credits">
- <xsl:for-each select="$publishers">
- <li>
- <xsl:apply-templates select="."/>
- </li>
- </xsl:for-each>
- </ul>
- </div>
- </xsl:if>
- <xsl:if test="$othercredits">
- <div class="aboutblurb othercredits">
- <div class="title">
- <span class="title">
- <xsl:call-template name="l10n.gettext">
- <xsl:with-param name="msgid" select="'Other Credits'"/>
- </xsl:call-template>
- </span>
- </div>
- <ul class="credits">
- <xsl:for-each select="$othercredits">
- <li>
- <xsl:apply-templates select="."/>
- </li>
- </xsl:for-each>
- </ul>
+ <xsl:if test="$authors or $editors or $translators or $publishers or $othercredits">
+ <div class="credits">
+ <xsl:call-template name="_db2html.division.about.credits">
+ <xsl:with-param name="class" select="'credits-authors'"/>
+ <xsl:with-param name="title" select="'Written By'"/>
+ <xsl:with-param name="credits" select="$authors"/>
+ </xsl:call-template>
+ <xsl:call-template name="_db2html.division.about.credits">
+ <xsl:with-param name="class" select="'credits-editors'"/>
+ <xsl:with-param name="title" select="'Edited By'"/>
+ <xsl:with-param name="credits" select="$editors"/>
+ </xsl:call-template>
+ <xsl:call-template name="_db2html.division.about.credits">
+ <xsl:with-param name="class" select="'credits-translators'"/>
+ <xsl:with-param name="title" select="'Translated By'"/>
+ <xsl:with-param name="credits" select="$translators"/>
+ </xsl:call-template>
+ <xsl:call-template name="_db2html.division.about.credits">
+ <xsl:with-param name="class" select="'credits-publishers'"/>
+ <xsl:with-param name="title" select="'Published By'"/>
+ <xsl:with-param name="credits" select="$publishers"/>
+ </xsl:call-template>
+ <xsl:call-template name="_db2html.division.about.credits">
+ <xsl:with-param name="class" select="'credits-others'"/>
+ <xsl:with-param name="title" select="'Other Credits'"/>
+ <xsl:with-param name="credits" select="$othercredits"/>
+ </xsl:call-template>
</div>
</xsl:if>
<xsl:for-each select="$legal">
- <div class="aboutblurb license">
+ <div class="license">
<div class="title">
<span class="title">
<xsl:choose>
@@ -518,6 +452,32 @@ the division. By default it is called by the %{html.footer.mode} implementation.
</xsl:if>
</xsl:template>
+<!--#* _db2html.division.about.credits -->
+<xsl:template name="_db2html.division.about.credits">
+ <xsl:param name="class"/>
+ <xsl:param name="title"/>
+ <xsl:param name="credits"/>
+ <xsl:if test="$credits">
+ <div class="{$class}">
+ <div class="title">
+ <span class="title">
+ <xsl:call-template name="l10n.gettext">
+ <xsl:with-param name="msgid" select="$title"/>
+ </xsl:call-template>
+ </span>
+ </div>
+ <ul class="credits">
+ <xsl:for-each select="$credits">
+ <li>
+ <xsl:apply-templates select="."/>
+ </li>
+ </xsl:for-each>
+ </ul>
+ </div>
+ </xsl:if>
+</xsl:template>
+
+
<!-- == Matched Templates == -->
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index ebaa362..02a971f 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -76,8 +76,10 @@ the #{page} element. Information is extracted from the #{info} element of ${node
</div>
<div class="region">
<div class="contents">
+ <xsl:variable name="credits" select="$node/mal:info/mal:credit"/>
<xsl:variable name="copyrights"
- select="$node/mal:info/mal:credit[contains(concat(' ', @type, ' '), ' copyright
')][mal:years]"/>
+ select="$credits[contains(concat(' ', @type, ' '), ' copyright ')]
+ [mal:years]"/>
<xsl:if test="$copyrights">
<div class="copyrights">
<xsl:for-each select="$copyrights">
@@ -92,128 +94,59 @@ the #{page} element. Information is extracted from the #{info} element of ${node
</div>
</xsl:if>
<xsl:variable name="authors"
- select="$node/mal:info/mal:credit[contains(concat(' ', @type, ' '), ' author ')]"/>
- <xsl:if test="$authors">
- <div class="aboutblurb authors">
- <div class="title">
- <span class="title">
- <xsl:call-template name="l10n.gettext">
- <xsl:with-param name="msgid" select="'Written By'"/>
- </xsl:call-template>
- </span>
- </div>
- <ul class="credits">
- <xsl:for-each select="$authors">
- <li>
- <xsl:apply-templates mode="mal2html.inline.mode" select="mal:name/node()"/>
- </li>
- </xsl:for-each>
- </ul>
- </div>
- </xsl:if>
+ select="$credits[contains(concat(' ', @type, ' '), ' author ')]"/>
<xsl:variable name="editors"
- select="$node/mal:info/mal:credit[contains(concat(' ', @type, ' '), ' editor ')]"/>
- <xsl:if test="$editors">
- <div class="aboutblurb editors">
- <div class="title">
- <span class="title">
- <xsl:call-template name="l10n.gettext">
- <xsl:with-param name="msgid" select="'Edited By'"/>
- </xsl:call-template>
- </span>
- </div>
- <ul class="credits">
- <xsl:for-each select="$editors">
- <li>
- <xsl:apply-templates mode="mal2html.inline.mode" select="mal:name/node()"/>
- </li>
- </xsl:for-each>
- </ul>
- </div>
- </xsl:if>
+ select="$credits[contains(concat(' ', @type, ' '), ' editor ')]"/>
<xsl:variable name="maintainers"
- select="$node/mal:info/mal:credit[contains(concat(' ', @type, ' '), ' maintainer ')]"/>
- <xsl:if test="$maintainers">
- <div class="aboutblurb maintainers">
- <div class="title">
- <span class="title">
- <xsl:call-template name="l10n.gettext">
- <xsl:with-param name="msgid" select="'Maintained By'"/>
- </xsl:call-template>
- </span>
- </div>
- <ul class="credits">
- <xsl:for-each select="$maintainers">
- <li>
- <xsl:apply-templates mode="mal2html.inline.mode" select="mal:name/node()"/>
- </li>
- </xsl:for-each>
- </ul>
- </div>
- </xsl:if>
+ select="$credits[contains(concat(' ', @type, ' '), ' maintainer ')]"/>
<xsl:variable name="translators"
- select="$node/mal:info/mal:credit[contains(concat(' ', @type, ' '), ' translator ')]"/>
- <xsl:if test="$translators">
- <div class="aboutblurb translators">
- <div class="title">
- <span class="title">
- <xsl:call-template name="l10n.gettext">
- <xsl:with-param name="msgid" select="'Translated By'"/>
- </xsl:call-template>
- </span>
- </div>
- <ul class="credits">
- <xsl:for-each select="$translators">
- <li>
- <xsl:apply-templates mode="mal2html.inline.mode" select="mal:name/node()"/>
- </li>
- </xsl:for-each>
- </ul>
- </div>
- </xsl:if>
+ select="$credits[contains(concat(' ', @type, ' '), ' translator ')]"/>
<xsl:variable name="publishers"
- select="$node/mal:info/mal:credit[contains(concat(' ', @type, ' '), ' publisher ')]"/>
- <xsl:if test="$publishers">
- <div class="aboutblurb publishers">
- <div class="title">
- <span class="title">
- <xsl:call-template name="l10n.gettext">
- <xsl:with-param name="msgid" select="'Published By'"/>
- </xsl:call-template>
- </span>
- </div>
- <ul class="credits">
- <xsl:for-each select="$publishers">
- <li>
- <xsl:apply-templates mode="mal2html.inline.mode" select="mal:name/node()"/>
- </li>
- </xsl:for-each>
- </ul>
- </div>
- </xsl:if>
+ select="$credits[contains(concat(' ', @type, ' '), ' publisher ')]"/>
+ <!-- others doesn't exclude all copyrights, just credits that are only copyrights -->
<xsl:variable name="others"
- select="set:difference($node/mal:info/mal:credit,
- $copyrights | $authors | $editors | $maintainers | $translators |
$publishers)"/>
- <xsl:if test="$others">
- <div class="aboutblurb othercredits">
- <div class="title">
- <span class="title">
- <xsl:call-template name="l10n.gettext">
- <xsl:with-param name="msgid" select="'Other Credits'"/>
- </xsl:call-template>
- </span>
- </div>
- <ul class="credits">
- <xsl:for-each select="$others">
- <li>
- <xsl:apply-templates mode="mal2html.inline.mode" select="mal:name/node()"/>
- </li>
- </xsl:for-each>
- </ul>
+ select="set:difference($credits,
+ $authors | $editors | $maintainers | $translators | $publishers)
+ [not(@type = 'copyright' and mal:years)]"/>
+ <xsl:if test="$authors or $editors or $maintainers or
+ $translators or publishers or $others">
+ <div class="credits">
+ <xsl:call-template name="_mal2html.page.about.credits">
+ <xsl:with-param name="class" select="'credits-authors'"/>
+ <xsl:with-param name="title" select="'Written By'"/>
+ <xsl:with-param name="credits" select="$authors"/>
+ </xsl:call-template>
+ <xsl:call-template name="_mal2html.page.about.credits">
+ <xsl:with-param name="class" select="'credits-editors'"/>
+ <xsl:with-param name="title" select="'Edited By'"/>
+ <xsl:with-param name="credits" select="$editors"/>
+ </xsl:call-template>
+ <xsl:call-template name="_mal2html.page.about.credits">
+ <xsl:with-param name="class" select="'credits-maintainers'"/>
+ <xsl:with-param name="title" select="'Maintained By'"/>
+ <xsl:with-param name="credits" select="$maintainers"/>
+ </xsl:call-template>
+ <xsl:call-template name="_mal2html.page.about.credits">
+ <xsl:with-param name="class" select="'credits-translators'"/>
+ <xsl:with-param name="title" select="'Translated By'"/>
+ <xsl:with-param name="credits" select="$translators"/>
+ </xsl:call-template>
+ <xsl:call-template name="_mal2html.page.about.credits">
+ <xsl:with-param name="class" select="'credits-publishers'"/>
+ <xsl:with-param name="title" select="'Published By'"/>
+ <xsl:with-param name="credits" select="$publishers"/>
+ </xsl:call-template>
+ <xsl:call-template name="_mal2html.page.about.credits">
+ <xsl:with-param name="class" select="'credits-other'"/>
+ <xsl:with-param name="title" select="'Other Credits'"/>
+ <xsl:with-param name="credits" select="$others"/>
+ </xsl:call-template>
+ <div class="credits-blank"></div>
+ <div class="credits-blank"></div>
</div>
</xsl:if>
<xsl:for-each select="$node/mal:info/mal:license">
- <div class="aboutblurb license">
+ <div class="license">
<div class="title">
<span class="title">
<xsl:choose>
@@ -242,6 +175,31 @@ the #{page} element. Information is extracted from the #{info} element of ${node
</xsl:if>
</xsl:template>
+<!--#* _mal2html.page.about.credits -->
+<xsl:template name="_mal2html.page.about.credits">
+ <xsl:param name="class"/>
+ <xsl:param name="title"/>
+ <xsl:param name="credits"/>
+ <xsl:if test="$credits">
+ <div class="{$class}">
+ <div class="title">
+ <span class="title">
+ <xsl:call-template name="l10n.gettext">
+ <xsl:with-param name="msgid" select="$title"/>
+ </xsl:call-template>
+ </span>
+ </div>
+ <ul class="credits">
+ <xsl:for-each select="$credits">
+ <li>
+ <xsl:apply-templates mode="mal2html.inline.mode" select="mal:name/node()"/>
+ </li>
+ </xsl:for-each>
+ </ul>
+ </div>
+ </xsl:if>
+</xsl:template>
+
<xsl:template mode="l10n.format.mode" match="msg:copyright.years">
<xsl:param name="node"/>
<xsl:apply-templates mode="mal2html.inline.mode"
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
