[yelp-xsl] mal2html: Reflow grid and 2column links on small screens

[Shaun McCance <shaunm src gnome org>]

commit aaae4009c35065d09a0a3d8723b6c4e07694d048
Author: Shaun McCance <shaunm gnome org>
Date:   Wed Jan 11 09:18:28 2012 -0500

    mal2html: Reflow grid and 2column links on small screens

 xslt/mallard/html/mal2html-links.xsl |  118 +++++++++++++++-------------------
 xslt/mallard/html/mal2html-page.xsl  |   49 +++++++++-----
 2 files changed, 85 insertions(+), 82 deletions(-)
---
diff --git a/xslt/mallard/html/mal2html-links.xsl b/xslt/mallard/html/mal2html-links.xsl
index bda5fbd..7d32d91 100644
--- a/xslt/mallard/html/mal2html-links.xsl
+++ b/xslt/mallard/html/mal2html-links.xsl
@@ -661,7 +661,7 @@ when determining which links to output.
                   <xsl:with-param name="links" select="$_links"/>
                 </xsl:call-template>
               </xsl:when>
-              <xsl:when test="contains($style, ' toronto ')">
+              <xsl:when test="contains($style, ' toronto ') or contains($style, ' grid ')">
                 <xsl:call-template name="_mal2html.links.grid">
                   <xsl:with-param name="node" select="$node"/>
                   <xsl:with-param name="links" select="$_links"/>
@@ -678,24 +678,22 @@ when determining which links to output.
               </xsl:when>
               <xsl:when test="contains($style, ' 2column ')">
                 <xsl:variable name="coltot" select="ceiling(count($_links) div 2)"/>
-                <table class="twocolumn"><tr>
-                  <td class="twocolumnleft">
-                    <xsl:call-template name="_mal2html.links.divs">
-                      <xsl:with-param name="node" select="$node"/>
-                      <xsl:with-param name="links" select="$_links"/>
-                      <xsl:with-param name="nodesc" select="$nodesc"/>
-                      <xsl:with-param name="max" select="$coltot"/>
-                    </xsl:call-template>
-                  </td>
-                  <td class="twocolumnright">
-                    <xsl:call-template name="_mal2html.links.divs">
-                      <xsl:with-param name="node" select="$node"/>
-                      <xsl:with-param name="links" select="$_links"/>
-                      <xsl:with-param name="nodesc" select="$nodesc"/>
-                      <xsl:with-param name="min" select="$coltot"/>
-                    </xsl:call-template>
-                  </td>
-                </tr></table>
+                <div class="links-twocolumn">
+                  <xsl:call-template name="_mal2html.links.divs">
+                    <xsl:with-param name="node" select="$node"/>
+                    <xsl:with-param name="links" select="$_links"/>
+                    <xsl:with-param name="nodesc" select="$nodesc"/>
+                    <xsl:with-param name="max" select="$coltot"/>
+                  </xsl:call-template>
+                </div>
+                <div class="links-twocolumn">
+                  <xsl:call-template name="_mal2html.links.divs">
+                    <xsl:with-param name="node" select="$node"/>
+                    <xsl:with-param name="links" select="$_links"/>
+                    <xsl:with-param name="nodesc" select="$nodesc"/>
+                    <xsl:with-param name="min" select="$coltot"/>
+                  </xsl:call-template>
+                </div>
               </xsl:when>
               <xsl:otherwise>
                 <xsl:call-template name="_mal2html.links.divs">
@@ -756,57 +754,47 @@ when determining which links to output.
       </xsl:for-each>
     </xsl:for-each>
   </ul>
+  <div class="clear"/>
 </xsl:template>
 
 <xsl:template name="_mal2html.links.grid">
   <xsl:param name="node"/>
   <xsl:param name="links"/>
-  <xsl:variable name="rows" select="ceiling(count($links) div 3)"/>
-  <table class="toronto">
-    <xsl:for-each select="$links[position() &lt;= $rows]">
-      <xsl:variable name="rownum" select="position() - 1"/>
-      <tr>
-        <xsl:for-each select="$links">
-          <xsl:sort data-type="number" select="@groupsort"/>
-          <xsl:sort select="mal:title[ type = 'sort']"/>
-          <xsl:if test="(position() - 1 &gt;= (3 * $rownum)) and
-                        (position() - 1 &lt; (3 * $rownum) + 3)">
-            <xsl:variable name="xref" select="@xref"/>
-            <td>
-              <xsl:for-each select="$mal.cache">
-                <xsl:variable name="target" select="key('mal.cache.key', $xref)"/>
-                <div class="toronto-link"><a>
-                  <xsl:attribute name="href">
-                    <xsl:call-template name="mal.link.target">
-                      <xsl:with-param name="xref" select="$xref"/>
-                    </xsl:call-template>
-                  </xsl:attribute>
-                  <xsl:attribute name="title">
-                    <xsl:call-template name="mal.link.tooltip">
-                      <xsl:with-param name="xref" select="$xref"/>
-                    </xsl:call-template>
-                  </xsl:attribute>
-                  <xsl:call-template name="mal.link.content">
-                    <xsl:with-param name="node" select="."/>
-                    <xsl:with-param name="xref" select="$xref"/>
-                    <xsl:with-param name="role" select="'topic'"/>
-                  </xsl:call-template>
-                </a></div>
-                <xsl:variable name="desc" select="$target/mal:info/mal:desc"/>
-                <xsl:if test="$desc">
-                  <div class="toronto-desc desc">
-                    <span class="desc">
-                      <xsl:apply-templates mode="mal2html.inline.mode" select="$desc/node()"/>
-                    </span>
-                  </div>
-                </xsl:if>
-              </xsl:for-each>
-            </td>
-          </xsl:if>
-        </xsl:for-each>
-      </tr>
-    </xsl:for-each>
-  </table>
+  <xsl:for-each select="$links">
+    <xsl:sort data-type="number" select="@groupsort"/>
+    <xsl:sort select="mal:title[ type = 'sort']"/>
+    <xsl:variable name="xref" select="@xref"/>
+    <div class="links-grid">
+      <xsl:for-each select="$mal.cache">
+        <xsl:variable name="target" select="key('mal.cache.key', $xref)"/>
+        <div class="links-grid-link"><a>
+          <xsl:attribute name="href">
+            <xsl:call-template name="mal.link.target">
+              <xsl:with-param name="xref" select="$xref"/>
+            </xsl:call-template>
+          </xsl:attribute>
+          <xsl:attribute name="title">
+            <xsl:call-template name="mal.link.tooltip">
+              <xsl:with-param name="xref" select="$xref"/>
+            </xsl:call-template>
+          </xsl:attribute>
+          <xsl:call-template name="mal.link.content">
+            <xsl:with-param name="node" select="."/>
+            <xsl:with-param name="xref" select="$xref"/>
+            <xsl:with-param name="role" select="'topic'"/>
+          </xsl:call-template>
+        </a></div>
+        <xsl:variable name="desc" select="$target/mal:info/mal:desc"/>
+        <xsl:if test="$desc">
+          <div class="desc">
+            <span class="desc">
+              <xsl:apply-templates mode="mal2html.inline.mode" select="$desc/node()"/>
+            </span>
+          </div>
+        </xsl:if>
+      </xsl:for-each>
+    </div>
+  </xsl:for-each>
 </xsl:template>
 
 <xsl:template name="_mal2html.links.divs">
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index 8c63ef3..0bd0889 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -869,31 +869,46 @@ ul.mouseovers a img {
   margin: 0; padding: 0;
 }
 
-table.toronto {
-  clear: both;
-  width: 100%;
-}
-table.toronto td {
-  padding-top: 1em;
-  padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 0;
-  padding-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 0.83em;
-  width: 33%;
+div.links-grid {
+  display: inline-block;
+  clear: both
+  margin-top: 1em;
+  width: 30%;
+  margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 3%;
+  vertical-align: top;
 }
-div.toronto-link {
+div.links-grid-link {
   margin: 0;
   font-weight: bold;
 }
-div.toronto-desc {
+div.links-grid > div.desc {
   margin: 0;
   color: </xsl:text><xsl:value-of select="$color.text_light"/><xsl:text>;
 }
+ media (max-width: 480px) {
+  div.links-grid {
+    width: 47%;
+  }
+}
+ media (max-width: 320px) {
+  div.links-grid {
+    width: 100%;
+    margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 1%;
+  }
+}
 
-table.twocolumn { width: 100%; }
-td.twocolumnleft { width: 48%; vertical-align: top; padding: 0; margin: 0; }
-td.twocolumnright {
-  width: 52%; vertical-align: top;
-  margin: 0; padding: 0;
-  padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
+div.links-twocolumn {
+  display: inline-block;
+  width: 49%;
+  margin-top: 0;
+  margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 1%;
+  vertical-align: top;
+}
+ media (max-width: 480px) {
+  div.links-twocolumn {
+    width: 100%;
+    margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 0;
+  }
 }
 
 div.links .desc a {