GNOME.org
 

[yelp-xsl/wip/html5: 2/4] mal2html-ui: Flexboxing thumbnail tails

commit 88f54cdafd352262bde1b537bcba5d3cf4d48487
Author: Shaun McCance <shaunm redhat com>
Date:   Fri Oct 23 10:26:11 2015 -0400

    mal2html-ui: Flexboxing thumbnail tails
    
    This removes some ability to specify thumb sizes, but gives nicer
    and more responsive results.

 xslt/mallard/html/mal2html-page.xsl |   79 ++++----
 xslt/mallard/html/mal2html-ui.xsl   |  385 +++++++++++++++--------------------
 2 files changed, 203 insertions(+), 261 deletions(-)
---
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index db2e2b0..2188d91 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -994,8 +994,8 @@ ul.mouseovers a img {
   div.mouseovers { display: none; }
 }
 
-<!-- FIXME -->
-div.ui-screen {
+<!-- uix:overlay -->
+div.ui-overlay-screen {
   display: none;
   position: fixed;
   margin: 0;
@@ -1019,11 +1019,13 @@ div.ui-overlay > div.inner {
   background-color: </xsl:text><xsl:value-of select="$color.gray_background"/><xsl:text>;
   border: solid 1px </xsl:text><xsl:value-of select="$color.text_light"/><xsl:text>;
   box-shadow: 0 2px 4px </xsl:text><xsl:value-of select="$color.text_light"/><xsl:text>;
-  -moz-border-radius: 6px;
-  -webkit-border-radius: 6px;
   border-radius: 6px;
   text-align: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
 }
+div.ui-overlay img, div.ui-overlay video {
+  max-height: 80vh;
+  max-width: 90vw;
+}
 div.ui-overlay > div.inner > div.title { margin-top: -4px; }
 a.ui-overlay-close {
   display: block;
@@ -1036,8 +1038,6 @@ a.ui-overlay-close {
   padding: 1px 2px 3px 2px;
   text-align: center;
   border: none;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
   border-radius: 50%;
   background-color: </xsl:text><xsl:value-of select="$color.text"/><xsl:text>;
   background-image: -moz-radial-gradient(50% 30%, circle farthest-corner, </xsl:text><xsl:value-of 
select="$color.text_light"/><xsl:text>, </xsl:text><xsl:value-of select="$color.text"/><xsl:text>);
@@ -1048,57 +1048,56 @@ a.ui-overlay-close {
   box-shadow: 0 2px 2px </xsl:text><xsl:value-of select="$color.text"/><xsl:text>;
   text-shadow: 0 2px 2px </xsl:text><xsl:value-of select="$color.text"/><xsl:text>;
 }
-a.ui-overlay-close:hover {
-}
 
-<!-- FIXME -->
-div.ui-tile {
-  display: inline-block;
+<!-- links/@uix:thumbs = 'tiles' -->
+div.links-tiles {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: stretch;
+  justify-content: stretch;
   vertical-align: top;
-  clear: both
-}
-div.region > div.ui-tile {
-  margin-top: 0;
-  margin-bottom: 1em;
+  clear: both;
+  margin: 0 -10px;
 }
-div.ui-tile:first-child { margin-top: 1em; }
-div.ui-tile > a {
-  display: inline-block;
+div.links-tile {
+  flex: 1 0 300px;
   vertical-align: top;
   margin: 0;
-  margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 1em;
-  padding: 1em;
-  -moz-border-radius: 6px;
-  -webkit-border-radius: 6px;
-  border-radius: 6px;
+  padding: 10px;
 }
-div.ui-tile > a {
-  border: solid 1px </xsl:text><xsl:value-of select="$color.gray_background"/><xsl:text>;
+div.links-tile:empty { padding: 0 10px; height: 0; }
+div.links-tile > a {
+  display: block;
+  vertical-align: top;
+  padding: 9px;
+  border-radius: 6px;
+  border: solid 1px </xsl:text><xsl:value-of select="$color.background"/><xsl:text>;
 }
-div.ui-tile > a:hover {
+div.links-tile > a:hover {
   border: solid 1px </xsl:text><xsl:value-of select="$color.blue_background"/><xsl:text>;
   box-shadow: 0 1px 2px </xsl:text><xsl:value-of select="$color.blue_border"/><xsl:text>;
 }
-div.ui-tile > a > * { display: block; }
-div.ui-tile-side > a > * {
-  display: inline-block;
-  vertical-align: top;
+div.links-tile > a > span.links-tile-img {
+  display: block;
+  text-align: center;
+  max-width: 360px;
 }
-div.ui-tile-side > a > span.ui-tile-text {
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
+div.links-tile > a > span.links-tile-img > img {
+  width: 100%;
+  border-radius: 3px;
 }
-div.ui-tile > a > span.ui-tile-text > span.title {
+div.links-tile > a > span.links-tile-text > span.title {
   display: block;
-  margin-top: 0.5em;
   font-weight: bold;
 }
-div.ui-tile-side > a > span.ui-tile-text > span.title { margin-top: 0; }
-div.ui-tile > a > span.ui-tile-text > span.desc {
+div.links-tile > a > span.links-tile-text > * + span.title {
+  margin-top: 0.5em;
+}
+div.links-tile > a > span.links-tile-text > span.desc {
   display: block;
   margin: 0.2em 0 0 0;
   color: </xsl:text><xsl:value-of select="$color.text_light"/><xsl:text>;
 }
-span.ui-tile-img { text-align: center; }
 
 <!-- FIXME -->
 div.links-ui-hover {
@@ -1523,9 +1522,9 @@ $(document).ready(function () {
       var inner = overlay.children('div.inner');
       var close = inner.children('a.ui-overlay-close');
       var media = inner.find('audio, video');
-      var screen = $('div.ui-screen');
+      var screen = $('div.ui-overlay-screen');
       if (screen.length == 0) {
-        screen = $('<div class="ui-screen"></div>');
+        screen = $('<div class="ui-overlay-screen"></div>');
         $('body').append(screen);
       }
       var hideoverlay = function () {
diff --git a/xslt/mallard/html/mal2html-ui.xsl b/xslt/mallard/html/mal2html-ui.xsl
index 9735df9..23f0022 100644
--- a/xslt/mallard/html/mal2html-ui.xsl
+++ b/xslt/mallard/html/mal2html-ui.xsl
@@ -98,16 +98,15 @@ http://projectmallard.org/ui/1.0/ui_expanded.html</xsl:text>
 <!--**==========================================================================
 mal2html.ui.links.tiles
 Output links as thumbnail tiles.
-:Revision:version="3.8" date="2012-10-27" status="final"
+:Revision:version="3.22" date="2015-10-22" status="volatile"
 $node: A #{links} element to link from.
 $links: A list of links, as from a template in !{mal-link}.
 $role: A link role, used to select the appropriate title and thumbnail.
 
-This template outputs links as thumbnail tiles, as per the UI extension.
-For each link, it outputs an inline-block #{div} element with a thumbnail,
-title, and desc (unless the #{nodesc} style hint is used). This template calls
-*{mal2html.ui.links.img} to find the best-match thumbnail and output the HTML
-#{img} element for each link.
+This template outputs links as thumbnail tiles. For each link, it outputs
+a #{div} element with a thumbnail, title, and desc (unless the #{nodesc}
+style hint is used). This template calls *{mal2html.ui.links.img} to find
+the best-match thumbnail and output the HTML #{img} element for each link.
 
 This template handles link sorting.
 -->
@@ -115,114 +114,82 @@ This template handles link sorting.
   <xsl:param name="node" select="."/>
   <xsl:param name="links"/>
   <xsl:param name="role"/>
-  <xsl:variable name="width">
-    <xsl:choose>
-      <xsl:when test="$node/@uix:width">
-        <xsl:value-of select="$node/@uix:width"/>
-      </xsl:when>
-      <xsl:otherwise>
-        <xsl:text>200</xsl:text>
-      </xsl:otherwise>
-    </xsl:choose>
-  </xsl:variable>
-  <xsl:variable name="height">
-    <xsl:choose>
-      <xsl:when test="$node/@uix:height">
-        <xsl:value-of select="$node/@uix:height"/>
-      </xsl:when>
-      <xsl:otherwise>
-        <xsl:text>200</xsl:text>
-      </xsl:otherwise>
-    </xsl:choose>
-  </xsl:variable>
-  <xsl:variable name="tiles-side">
-    <xsl:if test="contains(concat(' ', $node/@style, ' '), ' tiles-side ')">
-      <xsl:text>ui-tile-side</xsl:text>
-    </xsl:if>
-  </xsl:variable>
-  <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="ui-tile {$link/@class} {$tiles-side}">
-        <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"/>
-        <a>
-          <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="ui-tile-img" style="width: {$width}px; height: {$height}px;">
-            <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="width" select="$width"/>
-              <xsl:with-param name="height" select="$height"/>
-            </xsl:call-template>
-          </span>
-          <span class="ui-tile-text">
-            <xsl:attribute name="style">
-              <xsl:text>max-width: </xsl:text>
-              <xsl:choose>
-                <xsl:when test="$tiles-side != ''">
-                  <xsl:value-of select="2 * number($width)"/>
-                </xsl:when>
-                <xsl:otherwise>
-                  <xsl:value-of select="$width"/>
-                </xsl:otherwise>
-              </xsl:choose>
-              <xsl:text>px;</xsl:text>
+  <div class="links-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="links-tile {$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"/>
+          <a>
+            <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>
-            <span class="title">
-              <xsl:call-template name="mal.link.content">
+            <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="links-tile-img">
+              <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:call-template>
             </span>
-            <xsl:if test="not(contains(concat(' ', $node/@style, ' '), ' nodesc '))">
-              <xsl:variable name="desc">
-                <xsl:call-template name="mal.link.desc">
+            <span class="links-tile-text">
+              <span class="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:if test="exsl:node-set($desc)/node()">
-                <span class="desc">
-                  <xsl:copy-of 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_/node()">
+                  <span class="desc">
+                    <xsl:apply-templates mode="_mal2html.links.divs.nolink.mode"
+                                         select="$desc_"/>
+                  </span>
+                </xsl:if>
               </xsl:if>
-            </xsl:if>
-          </span>
-        </a>
-      </div>
+            </span>
+          </a>
+        </div>
+      </xsl:for-each>
     </xsl:for-each>
-  </xsl:for-each>
+    <!-- blank tiles for homogeneous sizing -->
+    <div class="links-tile"></div>
+    <div class="links-tile"></div>
+  </div>
 </xsl:template>
 
 
@@ -499,133 +466,109 @@ ${node} element.
 
 <!-- = ui:overlay = -->
 <xsl:template mode="mal2html.block.mode" match="uix:overlay">
-  <xsl:variable name="media" select="mal:media[1]"/>
-  <xsl:variable name="width">
-    <xsl:choose>
-      <xsl:when test="@width">
-        <xsl:value-of select="@width"/>
-      </xsl:when>
-      <xsl:otherwise>
-        <xsl:text>80</xsl:text>
-      </xsl:otherwise>
-    </xsl:choose>
-  </xsl:variable>
-  <xsl:variable name="height">
-    <xsl:choose>
-      <xsl:when test="@height">
-        <xsl:value-of select="@height"/>
-      </xsl:when>
-      <xsl:otherwise>
-        <xsl:text>80</xsl:text>
-      </xsl:otherwise>
-    </xsl:choose>
-  </xsl:variable>
-  <xsl:variable name="tiles-side">
-    <xsl:if test="contains(concat(' ', @style, ' '), ' tiles-side ')">
-      <xsl:text>ui-tile-side</xsl:text>
-    </xsl:if>
-  </xsl:variable>
-  <div class="ui-tile {$tiles-side}">
-    <a href="{$media/@src}" class="ui-overlay">
-      <span class="ui-tile-img" style="width: {$width}px; height: {$height}px;">
-        <xsl:choose>
-          <xsl:when test="$media/uix:thumb">
-            <img src="{$media/uix:thumb[1]/@src}">
-              <xsl:call-template name="mal2html.ui.links.img.attrs">
-                <xsl:with-param name="node" select="."/>
-                <xsl:with-param name="thumb" select="$media/uix:thumb[1]"/>
-                <xsl:with-param name="width" select="$width"/>
-                <xsl:with-param name="height" select="$height"/>
-              </xsl:call-template>
-            </img>
-          </xsl:when>
-          <!-- FIXME: audio/video with image child -->
-          <!--
-          <xsl:when test="($media/@type = 'video' or $media/@type = 'audio') and
-            $media/mal:media[not(@type) or @type = 'image']">
-          </xsl:when>
-          -->
-          <xsl:when test="$media/@type = 'video'">
-            <video src="{$media/@src}">
-              <xsl:call-template name="mal2html.ui.links.img.attrs">
-                <xsl:with-param name="node" select="."/>
-                <xsl:with-param name="thumb" select="$media"/>
-                <xsl:with-param name="width" select="$width"/>
-                <xsl:with-param name="height" select="$height"/>
-              </xsl:call-template>
-            </video>
-          </xsl:when>
-          <xsl:otherwise>
-            <img src="{$media/@src}">
-              <xsl:call-template name="mal2html.ui.links.img.attrs">
-                <xsl:with-param name="node" select="."/>
-                <xsl:with-param name="thumb" select="$media"/>
-                <xsl:with-param name="width" select="$width"/>
-                <xsl:with-param name="height" select="$height"/>
-              </xsl:call-template>
-            </img>
-          </xsl:otherwise>
-        </xsl:choose>
-      </span>
-      <xsl:if test="$media/uix:thumb/uix:caption">
-        <span class="ui-tile-text">
-          <xsl:attribute name="style">
-            <xsl:text>max-width: </xsl:text>
-            <xsl:choose>
-              <xsl:when test="$tiles-side != ''">
-                <xsl:value-of select="2 * number($width)"/>
-              </xsl:when>
-              <xsl:otherwise>
-                <xsl:value-of select="$width"/>
-              </xsl:otherwise>
-            </xsl:choose>
-            <xsl:text>px;</xsl:text>
-          </xsl:attribute>
-          <xsl:variable name="title" select="$media/uix:thumb/uix:caption/mal:title[1]"/>
-          <xsl:if test="$title">
-            <span>
-              <xsl:attribute name="class">
-                <xsl:text>title</xsl:text>
-                <xsl:if test="contains(concat(' ', $title/@style, ' '), ' center ')">
-                  <xsl:text> center</xsl:text>
-                </xsl:if>
-              </xsl:attribute>
-              <xsl:apply-templates mode="mal2html.inline.mode" select="$title/node()"/>
+  <!-- only process first, and handle consecutive overlays so we
+       can put them in a wrapper div for flexbox -->
+  <xsl:if test="not(preceding-sibling::*[1][self::uix:overlay])">
+    <xsl:variable name="media" select="mal:media[1]"/>
+    <xsl:variable name="width">
+      <xsl:choose>
+        <xsl:when test="@width">
+          <xsl:value-of select="@width"/>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:text>280</xsl:text>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:variable>
+    <xsl:variable name="height">
+      <xsl:choose>
+        <xsl:when test="@height">
+          <xsl:value-of select="@height"/>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:text>280</xsl:text>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:variable>
+    <div class="links-tiles">
+      <xsl:variable name="count" select="count(following-sibling::*[not(self::uix:overlay)])"/>
+      <xsl:for-each select="self::* |
+                            following-sibling::uix:overlay
+                            [count(following-sibling::*[not(self::uix:overlay)]) = $count]">
+        <div class="links-tile">
+          <a href="{$media/@src}" class="ui-overlay">
+            <span class="links-tile-img">
+              <xsl:choose>
+                <xsl:when test="$media/uix:thumb">
+                  <img src="{$media/uix:thumb[1]/@src}"/>
+                </xsl:when>
+                <!-- FIXME: audio/video with image child -->
+                <!--
+                    <xsl:when test="($media/@type = 'video' or $media/@type = 'audio') and
+                    $media/mal:media[not(@type) or @type = 'image']">
+                    </xsl:when>
+                -->
+                <xsl:when test="$media/@type = 'video'">
+                  <video src="{$media/@src}"/>
+                </xsl:when>
+                <xsl:otherwise>
+                  <img src="{$media/@src}"/>
+                </xsl:otherwise>
+              </xsl:choose>
             </span>
-          </xsl:if>
-          <xsl:variable name="desc" select="$media/uix:thumb/uix:caption/mal:desc[1]"/>
-          <xsl:if test="$desc">
-            <span>
-              <xsl:attribute name="class">
-                <xsl:text>desc</xsl:text>
-                <xsl:if test="contains(concat(' ', $desc/@style, ' '), ' center ')">
-                  <xsl:text> center</xsl:text>
+            <xsl:if test="$media/uix:thumb/uix:caption">
+              <span class="links-tile-text">
+                <xsl:variable name="title" select="$media/uix:thumb/uix:caption/mal:title[1]"/>
+                <xsl:if test="$title">
+                  <span>
+                    <xsl:attribute name="class">
+                      <xsl:text>title</xsl:text>
+                      <xsl:if test="contains(concat(' ', $title/@style, ' '), ' center ')">
+                        <xsl:text> center</xsl:text>
+                      </xsl:if>
+                    </xsl:attribute>
+                    <xsl:apply-templates mode="mal2html.inline.mode" select="$title/node()"/>
+                  </span>
                 </xsl:if>
-              </xsl:attribute>
-              <xsl:apply-templates mode="mal2html.inline.mode" select="$desc/node()"/>
-            </span>
-          </xsl:if>
-        </span>
-      </xsl:if>
-    </a>
-    <div class="ui-overlay">
-      <div class="inner">
-        <a href="#" class="ui-overlay-close">
-          <xsl:attribute name="title">
-            <xsl:call-template name="l10n.gettext">
-              <xsl:with-param name="msgid" select="'Close'"/>
-            </xsl:call-template>
-          </xsl:attribute>
-          <xsl:text>⨯</xsl:text>
-        </a>
-        <xsl:apply-templates mode="mal2html.block.mode" select="uix:caption/mal:title[1]"/>
-        <div class="contents">
-          <xsl:apply-templates mode="mal2html.block.mode" select="$media"/>
+                <xsl:variable name="desc" select="$media/uix:thumb/uix:caption/mal:desc[1]"/>
+                <xsl:if test="$desc">
+                  <span>
+                    <xsl:attribute name="class">
+                      <xsl:text>desc</xsl:text>
+                      <xsl:if test="contains(concat(' ', $desc/@style, ' '), ' center ')">
+                        <xsl:text> center</xsl:text>
+                      </xsl:if>
+                    </xsl:attribute>
+                    <xsl:apply-templates mode="mal2html.inline.mode" select="$desc/node()"/>
+                  </span>
+                </xsl:if>
+              </span>
+            </xsl:if>
+          </a>
+          <div class="ui-overlay">
+            <div class="inner">
+              <a href="#" class="ui-overlay-close">
+                <xsl:attribute name="title">
+                  <xsl:call-template name="l10n.gettext">
+                    <xsl:with-param name="msgid" select="'Close'"/>
+                  </xsl:call-template>
+                </xsl:attribute>
+                <xsl:text>⨯</xsl:text>
+              </a>
+              <xsl:apply-templates mode="mal2html.block.mode" select="uix:caption/mal:title[1]"/>
+              <div class="contents">
+                <xsl:apply-templates mode="mal2html.block.mode" select="$media"/>
+              </div>
+              <xsl:apply-templates mode="mal2html.block.mode" select="uix:caption/mal:desc[1]"/>
+            </div>
+          </div>
         </div>
-        <xsl:apply-templates mode="mal2html.block.mode" select="uix:caption/mal:desc[1]"/>
-      </div>
+      </xsl:for-each>
+      <!-- blank tiles for homogeneous sizing -->
+      <div class="links-tile"></div>
+      <div class="links-tile"></div>
     </div>
-  </div>
+  </xsl:if>
 </xsl:template>
 
 </xsl:stylesheet>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]