diff options
| -rw-r--r-- | share/Makefile.am | 1 | ||||
| -rw-r--r-- | share/www/_sidebar.html | 1 | ||||
| -rw-r--r-- | share/www/image/bg.png | bin | 743 -> 372 bytes | |||
| -rw-r--r-- | share/www/image/sidebar-toggle.png | bin | 0 -> 512 bytes | |||
| -rw-r--r-- | share/www/script/futon.js | 36 | ||||
| -rw-r--r-- | share/www/style/layout.css | 38 |
6 files changed, 63 insertions, 13 deletions
diff --git a/share/Makefile.am b/share/Makefile.am index 16fe247d..4e584703 100644 --- a/share/Makefile.am +++ b/share/Makefile.am @@ -61,6 +61,7 @@ nobase_dist_localdata_DATA = \ www/image/run.png \ www/image/running.png \ www/image/save.png \ + www/image/sidebar-toggle.png \ www/image/spinner.gif \ www/image/test_failure.gif \ www/image/test_success.gif \ diff --git a/share/www/_sidebar.html b/share/www/_sidebar.html index 97843f88..c83b100c 100644 --- a/share/www/_sidebar.html +++ b/share/www/_sidebar.html @@ -13,6 +13,7 @@ specific language governing permissions and limitations under the License. --> <div id="sidebar"> + <a id="sidebar-toggle" href="#" title="Hide Sidebar"></a> <a href="index.html"> <img id="logo" src="image/logo.png" width="175" height="150" alt="Apache CouchDB: Relax"> </a> diff --git a/share/www/image/bg.png b/share/www/image/bg.png Binary files differindex 844add78..ec815244 100644 --- a/share/www/image/bg.png +++ b/share/www/image/bg.png diff --git a/share/www/image/sidebar-toggle.png b/share/www/image/sidebar-toggle.png Binary files differnew file mode 100644 index 00000000..3ea32ffe --- /dev/null +++ b/share/www/image/sidebar-toggle.png diff --git a/share/www/script/futon.js b/share/www/script/futon.js index 3f524094..78c2cb8e 100644 --- a/share/www/script/futon.js +++ b/share/www/script/futon.js @@ -100,6 +100,29 @@ }); } + this.toggle = function(speed) { + if (speed === undefined) { + speed = 500; + } + var sidebar = $("#sidebar").stop(true, true); + var hidden = !$(sidebar).is(".hidden"); + + sidebar.toggleClass("hidden").animate({ + width: hidden ? 26 : 210, + height: hidden ? $("h1").outerHeight() - 1 : "100%", + right: hidden ? 0 : -210 + }, speed).children(":not(#sidebar-toggle)").toggle(speed * 1.2); + $("h1").animate({marginRight: hidden ? 26 : 0}, speed); + $("#wrap").animate({ + marginRight: hidden ? 0 : 210 + }, speed, function() { + $(document.body).toggleClass("fullwidth", hidden); + }); + + $("#sidebar-toggle") + .attr("title", hidden ? "Show Sidebar" : "Hide Sidebar"); + $.cookies.set("sidebar", hidden ? "hidden" : "show"); + }; } $.futon = $.futon || {}; @@ -140,8 +163,19 @@ $(function() { document.title = "Apache CouchDB - Futon: " + document.title; + if ($.cookies.get("sidebar") == "hidden") { + // doing this as early as possible prevents flickering + $(document.body).addClass("fullwidth"); + } $.get("_sidebar.html", function(resp) { - $(resp).insertAfter("#wrap"); + $("#wrap").append(resp) + .find("#sidebar-toggle").click(function(e) { + $.futon.navigation.toggle(e.shiftKey ? 2500 : 500); + return false; + }); + if ($.cookies.get("sidebar") == "hidden") { + $.futon.navigation.toggle(0); + } $.futon.navigation.updateDatabases(); $.futon.navigation.updateSelection(); diff --git a/share/www/style/layout.css b/share/www/style/layout.css index ec49c7eb..8b6f172b 100644 --- a/share/www/style/layout.css +++ b/share/www/style/layout.css @@ -18,16 +18,13 @@ specific language governing permissions and limitations under the License. html, body { color: #000; font: normal 90% Arial,Helvetica,sans-serif; height: 100%; margin: 0; padding: 0; overflow: hidden; } -body { background: #fff url(../image/bg.png) 100% 0 repeat-y; - padding-right: 210px; -} :link, :visited { color: #ba1e16; text-decoration: none; } :link img, :visited img { border: none; } h1 { background: #333; border-right: 2px solid #111; border-bottom: 1px solid #333; color: #999; - font: 125% normal Arial,Helvetica,sans-serif; - line-height: 1.8em; margin: 0 0 1em; padding: 0 0 0 1em; position: relative; + font: 125% normal Arial,Helvetica,sans-serif; height: 32px; + line-height: 32px; margin: 0; padding: 0 0 0 .5em; position: relative; } h1 :link, h1 :visited, h1 strong { padding: .4em .5em; } h1 :link, h1 :visited { @@ -39,7 +36,7 @@ h1 strong { color: #fff; font-weight: normal; padding-right: 25px; } h1 strong a {color:#fff !important;background:none !important;} h1 :link.raw, h1 :visited.raw { background: url(../image/rarrow.png) 100% 50% no-repeat; position: absolute; - right: 20px; width: 35px; height: 100%; padding: 0; + right: 20px; width: 35px; height: 100%; padding: 0; margin: 0; } body.loading h1 strong { background: url(../image/spinner.gif) right center no-repeat; @@ -155,14 +152,25 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight; /* Logo & Navigation */ -#sidebar { background: #fff; position: absolute; top: 0; right: 0; +#sidebar { background: #fff; position: absolute; top: 0; right: -210px; width: 210px; height: 100%; } -#logo { padding: 20px 18px; } +body.fullwidth #sidebar { border-bottom: 1px solid #333; right: 0; + width: 26px; +} +#sidebar-toggle { background: url(../image/sidebar-toggle.png) 0 0 no-repeat; + color: #999; cursor: pointer; display: block; position: absolute; right: 0; + top: 0; font-size: 110%; width: 26px; height: 32px; text-indent: -9999px; +} +#sidebar-toggle:hover { background-position: -26px 0; } +#sidebar-toggle:focus { outline: none; } +#sidebar.hidden #sidebar-toggle { background-position: 0 -32px; } +#sidebar.hidden #sidebar-toggle:hover { background-position: -26px -32px; } + +#logo { margin: 30px 0 0; padding: 0 18px 10px; } #nav { color: #333; font-size: 110%; font-weight: bold; list-style: none; - margin: 0; overflow: auto; overflow-x: hidden; padding: 0; - position: absolute; top: 185px; bottom: 20px; right: 0; width: 210px; + margin: 0; overflow: auto; overflow-x: hidden; padding: 0; width: 210px; } #nav ul { list-style: none; margin: 0; padding: 0; } #nav li { color: #999; margin: 5px 0 0; padding: 3px 0; } @@ -200,8 +208,14 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight; } #footer :link, #footer :visited { color: #000; } -#wrap { height: 100%; overflow: auto; } -#content { padding: 0 20px 3em; } +#wrap { background: #fff url(../image/bg.png) 100% 0 repeat-y; + height: 100%; margin-right: 210px; position: relative; +} +body.fullwidth #wrap { margin-right: 0; } +#content { padding: 1em 16px 3em 10px; overflow: auto; position: absolute; + top: 33px; bottom: 0; left: 0; right: 0; +} +body.fullwidth #content { padding-right: 26px; } /* Toolbar */ |
