summaryrefslogtreecommitdiff
path: root/share/www
diff options
context:
space:
mode:
Diffstat (limited to 'share/www')
-rw-r--r--share/www/_sidebar.html1
-rw-r--r--share/www/image/bg.pngbin743 -> 372 bytes
-rw-r--r--share/www/image/sidebar-toggle.pngbin0 -> 512 bytes
-rw-r--r--share/www/script/futon.js36
-rw-r--r--share/www/style/layout.css38
5 files changed, 62 insertions, 13 deletions
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
index 844add78..ec815244 100644
--- a/share/www/image/bg.png
+++ b/share/www/image/bg.png
Binary files differ
diff --git a/share/www/image/sidebar-toggle.png b/share/www/image/sidebar-toggle.png
new file mode 100644
index 00000000..3ea32ffe
--- /dev/null
+++ b/share/www/image/sidebar-toggle.png
Binary files differ
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 */