diff options
| author | Daniel P. Berrange <berrange@redhat.com> | 2017-08-04 13:29:43 +0100 |
|---|---|---|
| committer | Daniel P. Berrange <berrange@redhat.com> | 2017-08-07 14:44:40 +0100 |
| commit | 7c956d42a2472d6f9df94d51a61ea271df6ce6c9 (patch) | |
| tree | 4358278e5a879786542f7825292e01c5dcdc7300 /docs/page.xsl | |
| parent | 10e277a4323d478f6a01b590b073d0b57b3b3654 (diff) | |
| download | libvirt-7c956d42a2472d6f9df94d51a61ea271df6ce6c9.tar.gz | |
docs: make website responsive for mobile devices
The website does not look good in a mobile device as the text is
far too small and the layout assumes a wide screen.
Make the style dynamically adapt based on viewport size, so a
mobile device gets a layout more suited to its dimensions,
also changing "Learn" to "Docs"
Signed-off-by: Daniel P. Berrange <berrange@redhat.com>
Diffstat (limited to 'docs/page.xsl')
| -rw-r--r-- | docs/page.xsl | 36 |
1 files changed, 35 insertions, 1 deletions
diff --git a/docs/page.xsl b/docs/page.xsl index 7ca4e7bf4f..3a64a06c51 100644 --- a/docs/page.xsl +++ b/docs/page.xsl @@ -88,6 +88,7 @@ </xsl:comment> <head> <meta charset="UTF-8"/> + <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="{$href_base}main.css"/> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/> @@ -97,6 +98,39 @@ <title>libvirt: <xsl:value-of select="html:html/html:body/html:h1"/></title> <meta name="description" content="libvirt, virtualization, virtualization API"/> <xsl:apply-templates select="/html:html/html:head/*" mode="content"/> + + <script type="text/javascript"> + <xsl:comment> + <![CDATA[ + function init() { + window.addEventListener('scroll', function(e){ + var distanceY = window.pageYOffset || document.documentElement.scrollTop, + shrinkOn = 94 + home = document.getElementById("home"); + links = document.getElementById("jumplinks"); + search = document.getElementById("search"); + body = document.getElementById("body"); + if (distanceY > shrinkOn) { + if (home.className != "navhide") { + body.className = "navhide" + home.className = "navhide" + links.className = "navhide" + search.className = "navhide" + } + } else { + if (home.className == "navhide") { + body.className = "" + home.className = "" + links.className = "" + search.className = "" + } + } + }); + } + window.onload = init(); + ]]> + </xsl:comment> + </script> </head> <body> <xsl:if test="html:html/html:body/@class"> @@ -117,7 +151,7 @@ <ul> <li><a href="{$href_base}downloads.html">Download</a></li> <li><a href="{$href_base}contribute.html">Contribute</a></li> - <li><a href="{$href_base}docs.html">Learn</a></li> + <li><a href="{$href_base}docs.html">Docs</a></li> </ul> </div> <div id="search"> |