]> git.ipfire.org Git - thirdparty/libvirt.git/commitdiff
projects / thirdparty / libvirt.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 10e277a)
docs: make website responsive for mobile devices
authorDaniel P. Berrange <berrange@redhat.com>
Fri, 4 Aug 2017 12:29:43 +0000 (13:29 +0100)
committerDaniel P. Berrange <berrange@redhat.com>
Mon, 7 Aug 2017 13:44:40 +0000 (14:44 +0100)
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>
docs/Makefile.am patch | blob | blame | history
docs/main.css patch | blob | blame | history
docs/mobile.css [new file with mode: 0644] patch | blob
docs/page.xsl patch | blob | blame | history

diff --git a/docs/Makefile.am b/docs/Makefile.am
index d04b2d5c6f3df41445b3eac5f4837183213aca5e..8a201882c5b9b031500f6c9506635d4e413d5ef8 100644 (file)
--- a/docs/Makefile.am
+++ b/docs/Makefile.am
@@ -52,6 +52,7 @@ devhelphtml =                 \
 css =         \
   generic.css \
   libvirt.css \
+  mobile.css \
   main.css
 
 fonts = \
diff --git a/docs/main.css b/docs/main.css
index 95d5d325d7fe69c10fe48bb83b523ec108bc9c50..71f7b7a6a0d3728bde3dfa365994caa59fb0cd08 100644 (file)
--- 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);
+@import url(mobile.css);
diff --git a/docs/mobile.css b/docs/mobile.css
new file mode 100644 (file)
index 0000000..85ca497
--- /dev/null
+++ b/docs/mobile.css
@@ -0,0 +1,94 @@
+@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 7ca4e7bf4f16c29f886b52b8f763e3d80ae456cf..3a64a06c511368ffda142d6c63cb0f16d8a2fdd1 100644 (file)
--- 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">
Mirror of https://github.com/libvirt/libvirt.git