docs/main.css | 1 + docs/mobile.css | 95 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ docs/page.xsl | 34 +++++++++++++++++++++ 3 files changed, 130 insertions(+) create mode 100644 docs/mobile.css
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
--
libvir-list mailing list
libvir-list@redhat.com
https://www.redhat.com/mailman/listinfo/libvir-list
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 -- libvir-list mailing list libvir-list@redhat.com https://www.redhat.com/mailman/listinfo/libvir-list
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 :| -- libvir-list mailing list libvir-list@redhat.com https://www.redhat.com/mailman/listinfo/libvir-list
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 -- libvir-list mailing list libvir-list@redhat.com https://www.redhat.com/mailman/listinfo/libvir-list
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 :| -- libvir-list mailing list libvir-list@redhat.com https://www.redhat.com/mailman/listinfo/libvir-list
© 2016 - 2024 Red Hat, Inc.