[libvirt] [PATCH v2] docs: make website responsive for mobile devices
Daniel P. Berrange
berrange at redhat.com
Fri Aug 4 15:19:18 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 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 at redhat.com>
---
docs/main.css | 1 +
docs/mobile.css | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
docs/page.xsl | 36 +++++++++++++++++++++-
3 files changed, 130 insertions(+), 1 deletion(-)
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..85ca49752
--- /dev/null
+++ b/docs/mobile.css
@@ -0,0 +1,94 @@
+ 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..3a64a06c5 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">
--
2.13.3
More information about the libvir-list
mailing list