[libvirt] [PATCH] 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 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@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); +@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 @@ + +@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
On Fri, Aug 04, 2017 at 13:31:04 +0100, Daniel Berrange wrote:
The website does not look good in a mobile device as the text is far too small and the layout assumes a wide screen.
So can we finally change the "Learn" to "Documentation" now that this patch will fix the mobile devices, which was AFAIK the reason not to do that?
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@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
docs/mobile.css:1: maint.mk: Prohibited empty first line make: *** [cfg.mk:939: sc_prohibit_empty_first_line] Error 1
On Fri, Aug 04, 2017 at 04:56:30PM +0200, Peter Krempa wrote:
On Fri, Aug 04, 2017 at 13:31:04 +0100, Daniel Berrange wrote:
The website does not look good in a mobile device as the text is far too small and the layout assumes a wide screen.
So can we finally change the "Learn" to "Documentation" now that this patch will fix the mobile devices, which was AFAIK the reason not to do that?
Still not enough room for "Documentation" when in portrait mode on my phone. At most we could do "Docs"
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@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
docs/mobile.css:1: maint.mk: Prohibited empty first line make: *** [cfg.mk:939: sc_prohibit_empty_first_line] Error 1
Opps will fix. Regards, Daniel -- |: https://berrange.com -o- https://www.flickr.com/photos/dberrange :| |: https://libvirt.org -o- https://fstop138.berrange.com :| |: https://entangle-photo.org -o- https://www.instagram.com/dberrange :|
On Fri, Aug 04, 2017 at 04:07:51PM +0100, Daniel P. Berrange wrote:
On Fri, Aug 04, 2017 at 04:56:30PM +0200, Peter Krempa wrote:
On Fri, Aug 04, 2017 at 13:31:04 +0100, Daniel Berrange wrote:
The website does not look good in a mobile device as the text is far too small and the layout assumes a wide screen.
So can we finally change the "Learn" to "Documentation" now that this patch will fix the mobile devices, which was AFAIK the reason not to do that?
Still not enough room for "Documentation" when in portrait mode on my phone. At most we could do "Docs"
+1 for "Docs", my previous attempt was not successful :) <https://www.redhat.com/archives/libvir-list/2016-November/msg00606.html> Pavel
On Fri, Aug 04, 2017 at 05:35:05PM +0200, Pavel Hrdina wrote:
On Fri, Aug 04, 2017 at 04:07:51PM +0100, Daniel P. Berrange wrote:
On Fri, Aug 04, 2017 at 04:56:30PM +0200, Peter Krempa wrote:
On Fri, Aug 04, 2017 at 13:31:04 +0100, Daniel Berrange wrote:
The website does not look good in a mobile device as the text is far too small and the layout assumes a wide screen.
So can we finally change the "Learn" to "Documentation" now that this patch will fix the mobile devices, which was AFAIK the reason not to do that?
Still not enough room for "Documentation" when in portrait mode on my phone. At most we could do "Docs"
+1 for "Docs", my previous attempt was not successful :)
<https://www.redhat.com/archives/libvir-list/2016-November/msg00606.html>
Since I'm in the minority opinion here, my v2 changes it to "Docs" Regards, Daniel -- |: https://berrange.com -o- https://www.flickr.com/photos/dberrange :| |: https://libvirt.org -o- https://fstop138.berrange.com :| |: https://entangle-photo.org -o- https://www.instagram.com/dberrange :|
participants (3)
-
Daniel P. Berrange -
Pavel Hrdina -
Peter Krempa