HBASE-14785 Hamburger menu for mobile site This requires use of a custom maven-fluido-skin JAR, also attached to the JIRA
More CSS fix-ups Project: http://git-wip-us.apache.org/repos/asf/hbase/repo Commit: http://git-wip-us.apache.org/repos/asf/hbase/commit/98052222 Tree: http://git-wip-us.apache.org/repos/asf/hbase/tree/98052222 Diff: http://git-wip-us.apache.org/repos/asf/hbase/diff/98052222 Branch: refs/heads/hbase-12439 Commit: 98052222b00377f94e35f1d9e9255d8da8ce67d8 Parents: 32de06f Author: Misty Stanley-Jones <mstanleyjo...@cloudera.com> Authored: Mon Nov 9 08:45:09 2015 +1000 Committer: Misty Stanley-Jones <mstanleyjo...@cloudera.com> Committed: Tue Nov 10 15:17:00 2015 +1000 ---------------------------------------------------------------------- src/main/site/resources/css/site.css | 66 ++++++++++--------------------- src/main/site/site.xml | 12 +++--- 2 files changed, 27 insertions(+), 51 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/hbase/blob/98052222/src/main/site/resources/css/site.css ---------------------------------------------------------------------- diff --git a/src/main/site/resources/css/site.css b/src/main/site/resources/css/site.css index 32ab564..5017ca5 100644 --- a/src/main/site/resources/css/site.css +++ b/src/main/site/resources/css/site.css @@ -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 { - 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; - } +.dropdown-backdrop { + position: static; } -// 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%; +@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%; + clear: both; } } - - http://git-wip-us.apache.org/repos/asf/hbase/blob/98052222/src/main/site/site.xml ---------------------------------------------------------------------- diff --git a/src/main/site/site.xml b/src/main/site/site.xml index cf878be..48a2dbc 100644 --- a/src/main/site/site.xml +++ b/src/main/site/site.xml @@ -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"/>
