Adding experimental-gnome-tiles links style

I'm trying to be very, very explicit about style hints that are experimental
and currently only intended for a single use, because I really want to be
able to drop these styles when we're done with them.

3 files changed, 149 insertions, 0 deletions

diff --git a/xslt/common/css/core.css.tmpl b/xslt/common/css/core.css.tmpl
index bd19c49c..1ed0ff12 100644
--- a/xslt/common/css/core.css.tmpl
+++ b/xslt/common/css/core.css.tmpl
@@ -226,6 +226,27 @@ dl.compact dt { margin-top: 0.2em; }
 dl.compact dt:first-child { margin-top: 0; }
 dl.compact dt + dt { margin-top: 0; }
 
+div.tiles {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: stretch;
+  justify-content: stretch;
+  vertical-align: top;
+  clear: both;
+  margin: 0 -10px;
+}
+div.tiles > * {
+  vertical-align: top;
+  margin: 0;
+  padding: 10px;
+  max-width: none;
+}
+div.tiles > *:empty { padding: 0 10px; height: 0; }
+div.tile4 { flex: 1 0 {{$html.grid.size div 4 - 20}}px; }
+div.tile3 { flex: 1 0 {{$html.grid.size div 3 - 20}}px; }
+div.tile2 { flex: 1 0 {{$html.grid.size div 2 - 20}}px; }
+div.tile1 { flex: 1 0 {{$html.grid.size - 20}}px; }
+
 a {
   text-decoration: none;
   color: {{$color.fg.blue}};
diff --git a/xslt/common/css/mallard.css.tmpl b/xslt/common/css/mallard.css.tmpl
index 0c533b1d..56c3f786 100644
--- a/xslt/common/css/mallard.css.tmpl
+++ b/xslt/common/css/mallard.css.tmpl
@@ -166,6 +166,7 @@ a.ui-overlay-close {
   background-color: {{$color.blue}};
   color: {{$color.bg}};
 }
+<!-- FIXME drop this in favor of tiles CSS in core.css -->
 div.links-tiles {
   display: flex;
   flex-flow: row wrap;
@@ -214,6 +215,39 @@ div.links-tile > a > span.links-tile-text > span.desc {
   color: {{$color.fg.dark}};
 }
 
+<!-- links/@style = 'experimental-gnome-tiles' -->
+a.ex-gnome-tile {
+  display: block;
+  border: solid 1px {{$color.gray}};
+  transition: box-shadow 0.5s linear;
+}
+a.ex-gnome-tile:hover {
+  box-shadow: 0px 2px 4px {{$color.gray}};
+}
+span.ex-gnome-tile-banner {
+  display: block;
+  height: 112px;
+  background: {{$color.fg.blue}};
+  overflow: hidden;
+}
+span.ex-gnome-tile-banner img {
+  width: 128px; height: 128px;
+  margin-{{$left}}: 64px;
+  margin-top: -8px;  
+  transform: rotate(-10deg);
+}
+span.ex-gnome-tile-title {
+  color: {{$color.fg}};
+  display: block;
+  margin: 10px 20px;
+  font-size: 1.2em;
+}
+span.ex-gnome-tile-desc {
+  color: {{$color.fg.gray}};
+  display: block;
+  margin: 10px 20px;
+}
+
 <!-- links/@style = 'grid' -->
 div.links-grid-container {
   margin-left: -10px;
diff --git a/xslt/mallard/html/mal2html-links.xsl b/xslt/mallard/html/mal2html-links.xsl
index 7b63b4db..f15d17f9 100644
--- a/xslt/mallard/html/mal2html-links.xsl
+++ b/xslt/mallard/html/mal2html-links.xsl
@@ -145,6 +145,7 @@ parameter will be used if provided.
               <xsl:with-param name="links" select="$links"/>
             </xsl:call-template>
           </xsl:when>
+          <!-- FIXME delete this style -->
           <xsl:when test="$uithumbs = 'tiles'">
             <xsl:call-template name="mal2html.ui.links.tiles">
               <xsl:with-param name="node" select="$node"/>
@@ -152,6 +153,7 @@ parameter will be used if provided.
               <xsl:with-param name="role" select="$role"/>
             </xsl:call-template>
           </xsl:when>
+          <!-- FIXME delete this style -->
           <xsl:when test="$uithumbs = 'hover'">
             <xsl:call-template name="_mal2html.ui.links.hover">
               <xsl:with-param name="node" select="$node"/>
@@ -159,12 +161,20 @@ parameter will be used if provided.
               <xsl:with-param name="role" select="$role"/>
             </xsl:call-template>
           </xsl:when>
+          <!-- FIXME delete this style -->
           <xsl:when test="contains($style, ' mouseovers ')">
             <xsl:call-template name="_mal2html.links.mouseovers">
               <xsl:with-param name="node" select="$node"/>
               <xsl:with-param name="links" select="$links"/>
             </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"/>
+              <xsl:with-param name="links" select="$links"/>
+              <xsl:with-param name="role" select="$role"/>
+            </xsl:call-template>
+          </xsl:when>
           <xsl:when test="contains($style, ' toronto ') or contains($style, ' grid ')">
             <xsl:call-template name="_mal2html.links.grid">
               <xsl:with-param name="node" select="$node"/>
@@ -172,6 +182,7 @@ parameter will be used if provided.
               <xsl:with-param name="role" select="$role"/>
             </xsl:call-template>
           </xsl:when>
+          <!-- FIXME delete this style -->
           <xsl:when test="contains($style, ' norwich ')">
             <xsl:call-template name="_mal2html.links.norwich">
               <xsl:with-param name="node" select="$node"/>
@@ -1236,6 +1247,89 @@ when determining which links to output.
 </xsl:template>
 
 
+<!--#* _mal2html.links.experimental_gnome_tiles -->
+<xsl:template name="_mal2html.links.experimental_gnome_tiles">
+  <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="tile3 {$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"/>
+          <xsl:variable name="thumbs" select="$infos/uix:thumb[@role='experimental-gnome-tiles']"/>
+          <a class="ex-gnome-tile">
+            <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>
+            </xsl:attribute>
+            <span class="ex-gnome-tile-banner">
+              <xsl:call-template name="mal2html.ui.links.img">
+                <xsl:with-param name="node" select="$node"/>
+                <xsl:with-param name="thumbs" select="$thumbs"/>
+                <xsl:with-param name="role" select="$role"/>
+                <xsl:with-param name="height" select="128"/>
+              </xsl:call-template>
+            </span>
+            <span class="ex-gnome-tile-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="ex-gnome-tile-desc">
+                  <xsl:apply-templates mode="_mal2html.links.divs.nolink.mode"
+                                       select="$desc_"/>
+                </span>
+              </xsl:if>
+            </xsl:if>
+          </a>
+        </div>
+      </xsl:for-each>
+    </xsl:for-each>
+    <!-- blank tiles for homogeneous sizing -->
+    <div class="links-tile"></div>
+    <div class="links-tile"></div>
+  </div>
+</xsl:template>
+
+
 <!--#* _mal2html.links.divs -->
 <xsl:template name="_mal2html.links.divs">
   <xsl:param name="node" select="."/>