GNOME.org
 

[yelp-xsl] More improvements for mobile rendering

commit d3d46be375bf41bdab7ade81f7712a77bb55b15e
Author: Shaun McCance <shaunm gnome org>
Date:   Thu Jan 12 14:27:00 2012 -0500

    More improvements for mobile rendering

 xslt/common/html.xsl                |   64 ++++++++++++++++++++++++++++++++++-
 xslt/mallard/html/mal2html-page.xsl |   41 +++++++++++++++-------
 2 files changed, 91 insertions(+), 14 deletions(-)
---
diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl
index 26eaad6..9edb454 100644
--- a/xslt/common/html.xsl
+++ b/xslt/common/html.xsl
@@ -246,6 +246,8 @@ as ${node} to this template.
   <xsl:param name="node" select="."/>
   <html>
     <head>
+      <meta name="viewport"
+            content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
       <title>
         <xsl:apply-templates mode="html.title.mode" select="$node"/>
       </title>
@@ -613,7 +615,8 @@ div.page {
 }
 div.body {
   margin: 0;
-  padding: 1em;
+  padding-left: 1em;
+  padding-right: 1em;
   min-height: 20em;
   background-color: </xsl:text><xsl:value-of select="$color.background"/><xsl:text>;
 }
@@ -773,6 +776,30 @@ p a {
     <xsl:value-of select="$color.blue_border"/><xsl:text>;
 }
 a img { border: none; }
+ media only screen and (max-width: 480px) {
+  div.page {
+    margin: 0;
+    border: none;
+  }
+  div.body {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  div.body > div.hgroup,
+  div.body > div.region > div.contents > *,
+  div.body > div.region > div.sect > div.inner > div.hgroup > *,
+  div.body > div.region > div.sect > div.inner > div.region > div.contents > * {
+    margin-left: 6px;
+    margin-right: 6px;
+  }
+  div.body > div.region > div.sect-links {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  div.trails {
+    padding: 6px;
+  }
+}
 </xsl:text>
 </xsl:template>
 
@@ -1226,6 +1253,41 @@ div.ui-expander > div.inner > div.hgroup:hover * {
 div.ui-expander > div.inner > div.hgroup > .subtitle {
   margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 2em;
 }
+ media only screen and (max-width: 480px) {
+  div.links {
+    margin-left: 6px;
+    margin-right: 6px;
+  } 
+  li.links { padding: 0; }
+  div.body > div.region > div.contents > div.steps,
+  div.body > div.region > div.contents > div.note,
+  div.body > div.region > div.sect > div.inner > div.region > div.contents > div.steps,
+  div.body > div.region > div.sect > div.inner > div.region > div.contents > div.note {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  div.steps > div.inner > div.title {
+    margin-left: 16px;
+    margin-right: 16px;
+  }
+  ol.steps, ul.steps {
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+  div.note-sidebar {
+    float: none;
+    max-width: none;
+    margin-left: inherit;
+    margin-right: inherit;
+    padding: inherit;
+  }
+  div.note-sidebar > div.inner > div.title,
+  div.note-sidebar > div.inner > div.region > div.contents {
+    margin-left: 6px;
+    margin-right: 6px;
+  }
+}
 </xsl:text>
 </xsl:template>
 
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index 0bd0889..8c3d16d 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -868,13 +868,22 @@ ul.mouseovers a img {
   position: absolute;
   margin: 0; padding: 0;
 }
+ media only screen and (max-width: 480px) {
+  ul.mouseovers a {
+    display: block;
+    padding: 6px;
+    margin-left: -6px;
+    margin-right: -6px;
+  }
+  div.mouseovers { display: none; }
+}
 
 div.links-grid {
   display: inline-block;
   clear: both
   margin-top: 1em;
   width: 30%;
-  margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 3%;
+  margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 2%;
   vertical-align: top;
 }
 div.links-grid-link {
@@ -885,26 +894,20 @@ div.links-grid > div.desc {
   margin: 0;
   color: </xsl:text><xsl:value-of select="$color.text_light"/><xsl:text>;
 }
- media (max-width: 480px) {
+ media only screen and (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%;
-  }
-}
 
 div.links-twocolumn {
   display: inline-block;
-  width: 49%;
+  width: 48%;
   margin-top: 0;
   margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 1%;
   vertical-align: top;
 }
- media (max-width: 480px) {
+ media only screen and (max-width: 480px) {
   div.links-twocolumn {
     width: 100%;
     margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 0;
@@ -943,6 +946,16 @@ a.linkdiv > span.desc {
   color: </xsl:text><xsl:value-of select="$color.text_light"/><xsl:text>;
 }
 span.linkdiv-dash { display: none; }
+ media only screen and (max-width: 480px) {
+  div.linkdiv {
+    margin-left: -6px;
+    margin-right: -6px;
+  }
+  div.linkdiv a {
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+}
 
 div.example {
   border-</xsl:text><xsl:value-of select="$left"/><xsl:text>: solid 4px </xsl:text>
@@ -1105,9 +1118,11 @@ $(document).ready(function () {
       var mlink = $(this);
       mlink.hover(
         function () {
-          var offset = contdiv.offset();
-          mlink.find('img').css({left: offset.left, top: offset.top, zIndex: 10});
-          mlink.find('img').fadeIn('fast');
+          if (contdiv.is(':visible')) {
+            var offset = contdiv.offset();
+            mlink.find('img').css({left: offset.left, top: offset.top, zIndex: 10});
+            mlink.find('img').fadeIn('fast');
+          }
         },
         function () {
           mlink.find('img').fadeOut('fast');
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]