[yelp-xsl] mal2html-ui: Implemented side-by-side link tiles

[Shaun McCance <shaunm src gnome org>]

commit 4a72c1714655c797388dcad5a3727737f6407277
Author: Shaun McCance <shaunm gnome org>
Date:   Sat Oct 27 15:32:30 2012 -0400

    mal2html-ui: Implemented side-by-side link tiles
    
    Also changed the CSS classes in anticipation of using
    this style for other things

 xslt/mallard/html/mal2html-page.xsl |   25 +++++++++++------
 xslt/mallard/html/mal2html-ui.xsl   |   49 ++++++++++++++++++++++++----------
 2 files changed, 50 insertions(+), 24 deletions(-)
---
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index 79bb82e..e0b810b 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -918,13 +918,13 @@ ul.mouseovers a img {
   div.mouseovers { display: none; }
 }
 
-div.links-ui-tiles {
+div.ui-tile {
   display: inline-block;
   vertical-align: top;
   clear: both
   margin: 0;
 }
-div.links-ui-tiles > a {
+div.ui-tile > a {
   display: inline-block;
   vertical-align: top;
   margin: 0;
@@ -932,19 +932,26 @@ div.links-ui-tiles > a {
   padding: 1em;
   border-radius: 6px;
 }
-div.links-ui-tiles > a { border: none; }
-div.links-ui-tiles > a:hover {
+div.ui-tile > a { border: none; }
+div.ui-tile > a:hover {
   box-shadow: 0 1px 2px </xsl:text><xsl:value-of select="$color.blue_border"/><xsl:text>;
 }
-div.links-ui-tiles > a > * {
-  display: block;
-  overflow: hidden;
+div.ui-tile > a > * { display: block; }
+div.ui-tile-side > a > * {
+  display: inline-block;
+  vertical-align: top;
 }
-div.links-ui-tiles > a > span.title {
+div.ui-tile-side > a > span.ui-tile-text {
+  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
+}
+div.ui-tile > a > span.ui-tile-text > span.title {
+  display: block;
   margin-top: 0.5em;
   font-weight: bold;
 }
-span.links-ui-tiles-img { text-align: center; }
+div.ui-tile-side > a > span.ui-tile-text > span.title { margin-top: 0; }
+div.ui-tile > a > span.ui-tile-text > span.desc { display: block; }
+span.ui-tile-img { text-align: center; }
 
 div.links-ui-hover {
   text-align: center;
diff --git a/xslt/mallard/html/mal2html-ui.xsl b/xslt/mallard/html/mal2html-ui.xsl
index dfc14cb..fbc00e9 100644
--- a/xslt/mallard/html/mal2html-ui.xsl
+++ b/xslt/mallard/html/mal2html-ui.xsl
@@ -129,13 +129,18 @@ This template handles link sorting.
       </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="links-ui-tiles {$link/@class}">
+      <div class="ui-tile {$link/@class} {$tiles-side}">
         <xsl:for-each select="$link/@*">
           <xsl:if test="starts-with(name(.), 'data-')">
             <xsl:copy-of select="."/>
@@ -155,7 +160,7 @@ This template handles link sorting.
               <xsl:with-param name="xref" select="$link/@xref"/>
             </xsl:call-template>
           </xsl:attribute>
-          <span class="links-ui-tiles-img" style="width: {$width}px; height: {$height}px;">
+          <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"/>
@@ -164,20 +169,34 @@ This template handles link sorting.
               <xsl:with-param name="height" select="$height"/>
             </xsl:call-template>
           </span>
-          <span class="title" style="width: {$width}px;">
-            <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="role" select="$role"/>
-            </xsl:call-template>
-          </span>
-          <xsl:if test="not(contains(concat(' ', $node/@style, ' '), ' nodesc '))">
-            <xsl:if test="$target/mal:info/mal:desc">
-              <span class="desc" style="width: {$width}px;">
-                <xsl:apply-templates select="$target/mal:info/mal:desc/node()"/>
-              </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>
+            </xsl:attribute>
+            <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="role" select="$role"/>
+              </xsl:call-template>
+            </span>
+            <xsl:if test="not(contains(concat(' ', $node/@style, ' '), ' nodesc '))">
+              <xsl:if test="$target/mal:info/mal:desc">
+                <span class="desc">
+                  <xsl:apply-templates select="$target/mal:info/mal:desc/node()"/>
+                </span>
+              </xsl:if>
             </xsl:if>
-          </xsl:if>
+          </span>
         </a>
       </div>
     </xsl:for-each>