More work on experimental links styles for gnome 40 help

5 files changed, 158 insertions, 31 deletions

diff --git a/doc/yelp-xsl/C/html.page.page b/doc/yelp-xsl/C/html.page.page
index bdb1162e..849dc4f2 100644
--- a/doc/yelp-xsl/C/html.page.page
+++ b/doc/yelp-xsl/C/html.page.page
@@ -23,7 +23,7 @@
  as <code>$node</code> to this template. Importing stylesheets should also implement
  <code xref="html.header.mode">html.header.mode</code> to output link trails and <code xref="html.footer.mode">html.footer.mode</code> to output
  credits and other page information.</p>
- <p>This template outputs the HTML <sys>body</sys> element, which takes it attributes
+ <p>This template outputs the HTML <sys>body</sys> element, which takes its attributes
  from two sources. First, it calls <code xref="html.lang.attrs">html.lang.attrs</code>, which automatically
  outputs correct <sys>lang</sys>, <sys>xml:lang</sys>, and <sys>dir</sys> attributes. It then calls
  <code xref="html.body.attr.mode">html.body.attr.mode</code> on <code>$node</code> for additional attributes.</p>
diff --git a/doc/yelp-xsl/C/mal2html-links.page b/doc/yelp-xsl/C/mal2html-links.page
index 7b6772be..2d93fccd 100644
--- a/doc/yelp-xsl/C/mal2html-links.page
+++ b/doc/yelp-xsl/C/mal2html-links.page
@@ -75,6 +75,9 @@
    <p><link xref="mal2html.ui.expander.data"/></p>
   </item>
   <item>
+   <p><link xref="mal2html.ui.links.img"/></p>
+  </item>
+  <item>
    <p><link xref="mal2html.ui.links.tiles"/></p>
   </item>
  </list>
diff --git a/xslt/common/css/mallard.css.tmpl b/xslt/common/css/mallard.css.tmpl
index 56c3f786..0c66da6c 100644
--- a/xslt/common/css/mallard.css.tmpl
+++ b/xslt/common/css/mallard.css.tmpl
@@ -215,37 +215,71 @@ div.links-tile > a > span.links-tile-text > span.desc {
   color: {{$color.fg.dark}};
 }
 
+<!-- links/@style = 'experimental-gnome-splash' -->
+a.ex-gnome-top {
+  display: block;
+  border: solid 1px {{$color.gray}};
+  border-radius: 4px;
+  transition: box-shadow 0.5s linear;
+}
+a.ex-gnome-top:hover {
+  box-shadow: 0px 2px 4px {{$color.gray}};
+}
+span.ex-gnome-top-banner {
+  display: block;
+  height: 10px;
+  background: {{$color.green}};
+  overflow: hidden;
+}
+span.ex-gnome-top-title {
+  color: {{$color.fg}};
+  display: block;
+  margin: 10px 20px;
+  font-size: 1.2em;
+}
+span.ex-gnome-top-desc {
+  color: {{$color.fg.gray}};
+  display: block;
+  margin: 10px 20px;
+}
+
 <!-- links/@style = 'experimental-gnome-tiles' -->
 a.ex-gnome-tile {
-  display: block;
+  display: flex;
+  flex-flow: row;
+  align-items: stretch;
   border: solid 1px {{$color.gray}};
+  border-radius: 4px;
   transition: box-shadow 0.5s linear;
 }
 a.ex-gnome-tile:hover {
   box-shadow: 0px 2px 4px {{$color.gray}};
 }
-span.ex-gnome-tile-banner {
+span.ex-gnome-tiles-banner {
   display: block;
-  height: 112px;
+  flex: 0 0 64px;
   background: {{$color.fg.blue}};
   overflow: hidden;
 }
-span.ex-gnome-tile-banner img {
-  width: 128px; height: 128px;
-  margin-{{$left}}: 64px;
-  margin-top: -8px;  
+span.ex-gnome-tiles-banner img {
+  width: 64px; height: 64px;
+  margin: 10px 0;
   transform: rotate(-10deg);
 }
-span.ex-gnome-tile-title {
+span.ex-gnome-tiles-text {
+  display: block;
+  margin: 10px;
+}
+span.ex-gnome-tiles-title {
   color: {{$color.fg}};
   display: block;
-  margin: 10px 20px;
+  margin: 0;
   font-size: 1.2em;
 }
-span.ex-gnome-tile-desc {
+span.ex-gnome-tiles-desc {
   color: {{$color.fg.gray}};
   display: block;
-  margin: 10px 20px;
+  margin-top: 10px;
 }
 
 <!-- links/@style = 'grid' -->
diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl
index 8b7fe3f0..272c3835 100644
--- a/xslt/common/html.xsl
+++ b/xslt/common/html.xsl
@@ -365,7 +365,7 @@ as $node to this template. Importing stylesheets should also implement
 {html.header.mode} to output link trails and {html.footer.mode} to output
 credits and other page information.
 
-This template outputs the HTML `body` element, which takes it attributes
+This template outputs the HTML `body` element, which takes its attributes
 from two sources. First, it calls {html.lang.attrs}, which automatically
 outputs correct `lang`, `xml:lang`, and `dir` attributes. It then calls
 {html.body.attr.mode} on $node for additional attributes.
diff --git a/xslt/mallard/html/mal2html-links.xsl b/xslt/mallard/html/mal2html-links.xsl
index f15d17f9..a5dc1e6a 100644
--- a/xslt/mallard/html/mal2html-links.xsl
+++ b/xslt/mallard/html/mal2html-links.xsl
@@ -168,6 +168,13 @@ parameter will be used if provided.
               <xsl:with-param name="links" select="$links"/>
             </xsl:call-template>
           </xsl:when>
+          <xsl:when test="contains($style, ' experimental-gnome-top ')">
+            <xsl:call-template name="_mal2html.links.experimental_gnome_top">
+              <xsl:with-param name="node" select="$node"/>
+              <xsl:with-param name="links" select="$links"/>
+              <xsl:with-param name="role" select="$role"/>
+            </xsl:call-template>
+          </xsl:when>
           <xsl:when test="contains($style, ' experimental-gnome-tiles ')">
             <xsl:call-template name="_mal2html.links.experimental_gnome_tiles">
               <xsl:with-param name="node" select="$node"/>
@@ -1259,7 +1266,7 @@ when determining which links to output.
       <xsl:variable name="link" select="."/>
       <xsl:for-each select="$mal.cache">
         <xsl:variable name="target" select="key('mal.cache.key', $link/@xref)"/>
-        <div class="tile3 {$link/@class}">
+        <div class="tile2 {$link/@class}">
           <xsl:for-each select="$link/@*">
             <xsl:if test="starts-with(name(.), 'data-')">
               <xsl:copy-of select="."/>
@@ -1284,7 +1291,7 @@ when determining which links to output.
                 <xsl:with-param name="info" select="$link[@href]/mal:info"/>
               </xsl:call-template>
             </xsl:attribute>
-            <span class="ex-gnome-tile-banner">
+            <span class="ex-gnome-tiles-banner">
               <xsl:call-template name="mal2html.ui.links.img">
                 <xsl:with-param name="node" select="$node"/>
                 <xsl:with-param name="thumbs" select="$thumbs"/>
@@ -1292,40 +1299,123 @@ when determining which links to output.
                 <xsl:with-param name="height" select="128"/>
               </xsl:call-template>
             </span>
-            <span class="ex-gnome-tile-title">
-              <xsl:call-template name="mal.link.content">
+            <span class="ex-gnome-tiles-text">
+              <span class="ex-gnome-tiles-title">
+                <xsl:call-template name="mal.link.content">
+                  <xsl:with-param name="node" select="$node"/>
+                  <xsl:with-param name="xref" select="$link/@xref"/>
+                  <xsl:with-param name="href" select="$link/@href"/>
+                  <xsl:with-param name="role" select="$role"/>
+                  <xsl:with-param name="info" select="$link[@href]/mal:info"/>
+                </xsl:call-template>
+              </span>
+              <xsl:if test="not(contains(concat(' ', $node/@style, ' '), ' nodesc '))">
+                <xsl:variable name="desc">
+                  <xsl:call-template name="mal.link.desc">
+                    <xsl:with-param name="node" select="$node"/>
+                    <xsl:with-param name="xref" select="$link/@xref"/>
+                    <xsl:with-param name="href" select="$link/@href"/>
+                    <xsl:with-param name="role" select="$role"/>
+                    <xsl:with-param name="info" select="$link[@href]/mal:info"/>
+                  </xsl:call-template>
+                </xsl:variable>
+                <xsl:variable name="desc_" select="exsl:node-set($desc)/node()"/>
+                <xsl:if test="$desc_">
+                  <span class="linkdiv-dash">
+                    <xsl:text> &#x2014; </xsl:text>
+                  </span>
+                  <span class="ex-gnome-tiles-desc">
+                    <xsl:apply-templates mode="_mal2html.links.divs.nolink.mode"
+                                         select="$desc_"/>
+                  </span>
+                </xsl:if>
+              </xsl:if>
+            </span>
+          </a>
+        </div>
+      </xsl:for-each>
+    </xsl:for-each>
+    <!-- blank tiles for homogeneous sizing -->
+    <div class="tile2"></div>
+  </div>
+</xsl:template>
+
+
+<!--#* _mal2html.links.experimental_gnome_top -->
+<xsl:template name="_mal2html.links.experimental_gnome_top">
+  <xsl:param name="node" select="."/>
+  <xsl:param name="links"/>
+  <xsl:param name="role"/>
+  <div class="tiles">
+    <xsl:for-each select="$links">
+      <xsl:sort data-type="number" select="@groupsort"/>
+      <xsl:sort select="mal:title[@type = 'sort']"/>
+      <xsl:variable name="link" select="."/>
+      <xsl:for-each select="$mal.cache">
+        <xsl:variable name="target" select="key('mal.cache.key', $link/@xref)"/>
+        <div class="tile2 {$link/@class}">
+          <xsl:for-each select="$link/@*">
+            <xsl:if test="starts-with(name(.), 'data-')">
+              <xsl:copy-of select="."/>
+            </xsl:if>
+          </xsl:for-each>
+          <xsl:variable name="infos" select="$target/mal:info | $link[@href]/mal:info"/>
+          <a class="ex-gnome-top">
+            <xsl:attribute name="href">
+              <xsl:call-template name="mal.link.target">
+                <xsl:with-param name="node" select="$node"/>
+                <xsl:with-param name="xref" select="$link/@xref"/>
+                <xsl:with-param name="href" select="$link/@href"/>
+              </xsl:call-template>
+            </xsl:attribute>
+            <xsl:attribute name="title">
+              <xsl:call-template name="mal.link.tooltip">
                 <xsl:with-param name="node" select="$node"/>
                 <xsl:with-param name="xref" select="$link/@xref"/>
                 <xsl:with-param name="href" select="$link/@href"/>
                 <xsl:with-param name="role" select="$role"/>
                 <xsl:with-param name="info" select="$link[@href]/mal:info"/>
               </xsl:call-template>
-            </span>
-            <xsl:if test="not(contains(concat(' ', $node/@style, ' '), ' nodesc '))">
-              <xsl:variable name="desc">
-                <xsl:call-template name="mal.link.desc">
+            </xsl:attribute>
+            <span class="ex-gnome-top-banner"></span>
+            <span class="ex-gnome-top-text">
+              <span class="ex-gnome-top-title">
+                <xsl:call-template name="mal.link.content">
                   <xsl:with-param name="node" select="$node"/>
                   <xsl:with-param name="xref" select="$link/@xref"/>
                   <xsl:with-param name="href" select="$link/@href"/>
                   <xsl:with-param name="role" select="$role"/>
                   <xsl:with-param name="info" select="$link[@href]/mal:info"/>
                 </xsl:call-template>
-              </xsl:variable>
-              <xsl:variable name="desc_" select="exsl:node-set($desc)/node()"/>
-              <xsl:if test="$desc_">
-                <span class="ex-gnome-tile-desc">
-                  <xsl:apply-templates mode="_mal2html.links.divs.nolink.mode"
-                                       select="$desc_"/>
-                </span>
+              </span>
+              <xsl:if test="not(contains(concat(' ', $node/@style, ' '), ' nodesc '))">
+                <xsl:variable name="desc">
+                  <xsl:call-template name="mal.link.desc">
+                    <xsl:with-param name="node" select="$node"/>
+                    <xsl:with-param name="xref" select="$link/@xref"/>
+                    <xsl:with-param name="href" select="$link/@href"/>
+                    <xsl:with-param name="role" select="$role"/>
+                    <xsl:with-param name="info" select="$link[@href]/mal:info"/>
+                  </xsl:call-template>
+                </xsl:variable>
+                <xsl:variable name="desc_" select="exsl:node-set($desc)/node()"/>
+                <xsl:if test="$desc_">
+                  <span class="linkdiv-dash">
+                    <xsl:text> &#x2014; </xsl:text>
+                  </span>
+                  <span class="ex-gnome-top-desc">
+                    <xsl:apply-templates mode="_mal2html.links.divs.nolink.mode"
+                                         select="$desc_"/>
+                  </span>
+                </xsl:if>
               </xsl:if>
-            </xsl:if>
+            </span>
           </a>
         </div>
       </xsl:for-each>
     </xsl:for-each>
     <!-- blank tiles for homogeneous sizing -->
-    <div class="links-tile"></div>
-    <div class="links-tile"></div>
+    <div class="tile2"></div>
   </div>
 </xsl:template>