mirror of https://gitee.com/openkylin/libvirt.git
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 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>
This commit is contained in:
Daniel P. Berrange
parent
10e277a432
commit
7c956d42a2
|
|
@ -52,6 +52,7 @@ devhelphtml = \
|
|||
css = \
|
||||
generic.css \
|
||||
libvirt.css \
|
||||
mobile.css \
|
||||
main.css
|
||||
|
||||
fonts = \
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import url(fonts/stylesheet.css);
|
||||
@import url(generic.css);
|
||||
@import url(libvirt.css);
|
||||
@import url(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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue