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: N Daniel P. Berrange <berrange@redhat.com>

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: N Daniel P. Berrange <berrange@redhat.com>
7c956d42 · Daniel P. Berrange · 10e277a4 · 7c956d42 · 7c956d42 · 7c956d42
隐藏空白更改
内联并排

Showing with 131 addition and 1 deletion

docs/Makefile.am docs/Makefile.am +1 -0

docs/main.css docs/main.css +1 -0

docs/mobile.css docs/mobile.css +94 -0

docs/page.xsl docs/page.xsl +35 -1

未找到文件。
--- a/docs/Makefile.am
+++ b/docs/Makefile.am
@@ -52,6 +52,7 @@ devhelphtml =			\
 css =         \
  generic.css \
  libvirt.css \
+  mobile.css \
  main.css

 fonts = \

--- a/docs/main.css
+++ b/docs/main.css
 @import url(fonts/stylesheet.css);
 @import url(generic.css);
 @import url(libvirt.css);
+@import url(mobile.css);
--- a/docs/mobile.css
+++ b/docs/mobile.css
+@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;
+    }
+}
--- 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">