7:31 a.m.
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(a)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
9:56 a.m.
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(a)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
10:07 a.m.
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(a)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 :|
10:35 a.m.
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
10:38 a.m.
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 :|
2667
days inactive
2667
days old
4 comments
3 participants
participants (3)
-
Daniel P. Berrange -
Pavel Hrdina -
Peter Krempa