Apache/hbase
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

HBASE-14785 Hamburger menu for mobile site

Browse Source 
This requires use of a custom maven-fluido-skin JAR, also attached to the JIRA

More CSS fix-ups
This commit is contained in:
Misty Stanley-Jones 2015-11-09 08:45:09 +10:00
parent 32de06f663
commit 98052222b0
2 changed files with 27 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/main/site/resources/css/site.css
View File

@ -47,9 +47,12 @@ footer {
footer .row, footer p, footer .pull-right {
margin: 5px;
}
form#search-form.navbar-search.pull-right {
width: 150px;
margin-right: 33px;
div#search-form.navbar-search.pull-right {
width: 290px;
margin-right: 0;
margin-top: -5px;
margin-left: 0;
position: initial;
}
li#publishDate.pull-right {
margin-top: -23px;
@ -61,9 +64,7 @@ li#publishDate.pull-right {
.navbar-fixed-bottom .container,
.navbar-inner {
width: 100%;
margin: 2px;
}
/* Change the color and effect when clicking in menus */
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
@ -75,48 +76,21 @@ li#publishDate.pull-right {
font-weight: bolder;
}
/* On small screens, put the search form on its own line */
@media only screen and (max-width: 767px) {
body {
.dropdown-backdrop {
position: static;
}
@media only screen and (max-width: 977px) {
/* Without this rule, drop-down divs are a fixed height
* the first time they are expanded */
.collapse.in {
height: auto;
overflow: visible;
}
div#search-form.navbar-search.pull-right {
padding: 0;
margin-left: ;
width: 100%;
font-size: 120%;
}
div#topbar,
div#banner,
div#breadcrumbs,
div#bodyColumn,
footer {
width: 98%;
margin-left: 5px;
margin-right: 5px;
clear: both;
margin-bottom: 2px;
}
div#banner {
margin-top: 90px;
}
form#search-form.navbar-search.pull-right, .pull-right {
width: 95%;
margin: 2px;
float: left;
clear: both;
}
li#publishDate.pull-right {
display: block;
width: 95%;
float: left;
margin-top: 5px;
list-style: none;
}
}
// Make the font size even bigger on high-DPI small-screen devices
// such as iphone 6 and 6+ but not iPad (768 px)
only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (max-width: 767px) and (min-device-pixel-ratio : 1.5) {
body {
font-size: 140%;
}
}

12
src/main/site/site.xml
View File

@ -25,14 +25,15 @@
<skin>
<groupId>org.apache.maven.skins</groupId>
<artifactId>maven-fluido-skin</artifactId>
<version>1.4</version>
<version>1.5-HBASE</version>
</skin>
<custom>
<fluidoSkin>
<topBarEnabled>true</topBarEnabled>
<topBarContainerStyle>width: 98%;</topBarContainerStyle>
<sideBarEnabled>false</sideBarEnabled>
<googleSearch/>
<googleSearch>
<customSearch>000385458301414556862:sq1bb0xugjg</customSearch>
</googleSearch>
<sourceLineNumbersEnabled>false</sourceLineNumbersEnabled>
<skipGenerationDate>true</skipGenerationDate>
<breadcrumbDivider>»</breadcrumbDivider>
@ -53,9 +54,10 @@
<body>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css"/>
<link rel="stylesheet" href="css/site.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
</head>
<menu name="Apache HBase Project">
<item name="Overview" href="index.html"/>