[libvirt] [PATCH] docs: make website responsive for mobile devices

Fri Aug 4 12:31:04 UTC 2017

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 dynanically adapt based on viewport size, so a
mobile device gets a layout more suited to its dimensions.

Signed-off-by: Daniel P. Berrange <berrange at redhat.com>
---
 docs/main.css   |  1 +
 docs/mobile.css | 95 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 docs/page.xsl   | 34 +++++++++++++++++++++
 3 files changed, 130 insertions(+)
 create mode 100644 docs/mobile.css

diff --git a/docs/main.css b/docs/main.css
index 95d5d325d..71f7b7a6a 100644
--- a/docs/main.css
+++ b/docs/main.css
@@ -1,3 +1,4 @@
 @import url(fonts/stylesheet.css);
 @import url(generic.css);
 @import url(libvirt.css);
+ at import url(mobile.css);
diff --git a/docs/mobile.css b/docs/mobile.css
new file mode 100644
index 000000000..0fc1e9d71
--- /dev/null
+++ b/docs/mobile.css
@@ -0,0 +1,95 @@
+
+ at media (max-width: 1000px) {
+    #home {
+	width: 100%;
+	display: block;
+	margin: 0px;
+	background: white url(logos/logo-banner-dark-256.png) no-repeat center center;
+	height: 94px;
+    }
+    #home a {
+	width: 100%;
+    }
+    #search {
+	width: 100%;
+	display: block;
+	margin: 0px;
+	background: white;
+	padding: 0px;
+    }
+    #search form {
+	padding: 5px;
+    }
+    body.index h1 {
+	display: none;
+    }
+    #jumplinks {
+	padding: 0px;
+	display: block;
+	width: 100%;
+	text-align: center;
+	margin: 0px;
+	height: 1.3em;
+	font-size: 1em;
+	border-top: 3px solid rgb(60, 133, 124);
+	border-bottom: 3px solid rgb(60, 133, 124);
+    }
+    #jumplinks ul {
+	display: block;
+	padding: 0px;
+	margin: 0px;
+    }
+    #jumplinks li {
+	margin: 0px;
+	padding-left: 0.5em;
+	padding-right: 0.5em;
+    }
+    #nav {
+	border: 0px;
+    }
+
+    #search.navhide {
+	display: none !IMPORTANT;
+    }
+    #home.navhide {
+	position: fixed;
+	top: 0px;
+	z-index: 9001;	
+	width: 6em;
+	display: block;
+	margin: 0px;
+	background: inherit;
+	height: 1.3em;
+	border-top: 3px solid rgb(60, 133, 124);
+	border-bottom: 3px solid rgb(60, 133, 124);
+	font-size: 1em;
+	text-indent: 0px;
+	font-weight: bold;
+	padding-left: 1em;
+    }
+    #home.navhide a {
+	color: white;
+	text-decoration: none;
+    }
+    #home.navhide a:hover {
+	color: rgb(255, 230, 0);
+    }
+    #jumplinks.navhide {
+	position: fixed;
+	text-align: right;
+	top: 0px;
+	z-index: 9000;
+	background: rgb(0, 95, 97);
+    }
+    #jumplinks.navhide ul {
+	z-index: 9001;
+    }
+    #body {
+	margin-top: 180px;
+    }
+    div.panel {
+	width: 80%;
+	float: none;
+	margin-bottom: 2em;
+    }
+}
diff --git a/docs/page.xsl b/docs/page.xsl
index 7ca4e7bf4..0f762be7d 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">
-- 
2.13.3


