diff --git a/Changes b/Changes index 4bb45de4..0eb1f812 100644 --- a/Changes +++ b/Changes @@ -1,3 +1,9 @@ +0.4 + + [NEW FEATURES] + + * Sidebar can be pinned in place to keep it visible when scrolling. + 0.3 2011-02-03 [NEW FEATURES] diff --git a/Netdisco/public/css/netdisco.css b/Netdisco/public/css/netdisco.css index b5583a34..9e74d7eb 100644 --- a/Netdisco/public/css/netdisco.css +++ b/Netdisco/public/css/netdisco.css @@ -175,6 +175,31 @@ form .clearfix.success input { /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* sidebar collapser */ +/* for placing the sidebar pin icon */ +#sidebar_pin_box { + float: right; + margin: 0px; + margin-top: -12px; + margin-right: -12px; + padding: 0px; + cursor: pointer; +} + +.sidebar_pin_box_pressed { + background-color: #DCDCDC; +} + +.sidebar_pinned { + position: fixed !important; + margin-top: 50px; +} + +#sidebar_pin { + padding-top: 2px; + padding-left: 1px; + padding-right: 2px; +} + /* for placing the sidebar toggle icons */ #sidebar_toggle_img_in { float: left; diff --git a/Netdisco/public/images/matte_basic_pin.png b/Netdisco/public/images/matte_basic_pin.png new file mode 100644 index 00000000..85737ece Binary files /dev/null and b/Netdisco/public/images/matte_basic_pin.png differ diff --git a/Netdisco/public/javascripts/netdisco.js b/Netdisco/public/javascripts/netdisco.js index c2819084..76cffdeb 100644 --- a/Netdisco/public/javascripts/netdisco.js +++ b/Netdisco/public/javascripts/netdisco.js @@ -136,30 +136,33 @@ $(document).ready(function() { }; $('.add-on :checkbox').each(syncCheckBox).click(syncCheckBox); + // sidebar toggle - pinning + $('#sidebar_pin_box').click(function() { + $(this).toggleClass('sidebar_pin_box_pressed'); + $('.sidebar').toggleClass('sidebar_pinned'); + }); // sidebar toggle - trigger in/out on image click() - $('#sidebar_toggle_img_in').click( - function() { - $('.sidebar').toggle( - function() { - $('#sidebar_toggle_img_out').toggle(); - $('.content').animate({'margin-right': '10px !important'}, 50); + $('#sidebar_toggle_img_in').click(function() { + $('.sidebar').toggle( + function() { + $('#sidebar_toggle_img_out').toggle(); + $('.content').animate({'margin-right': '10px !important'}, 50); + } + ); + sidebar_hidden = 1; + }); + $('#sidebar_toggle_img_out').click(function() { + $('#sidebar_toggle_img_out').toggle(); + $('.content').animate({'margin-right': '220px !important'}, 100, + function() { + $('.sidebar').toggle(200); + if (! $('.sidebar').hasClass('sidebar_pinned')) { + $(window).scrollTop(0); } - ); - sidebar_hidden = 1; - } - ); - $('#sidebar_toggle_img_out').click( - function() { - $('#sidebar_toggle_img_out').toggle(); - $('.content').animate({'margin-right': '220px !important'}, 100, - function() { - $('.sidebar').toggle(200); - $(window).scrollTop(0); - } - ); - sidebar_hidden = 0; - } - ); + } + ); + sidebar_hidden = 0; + }); // could not get twitter bootstrap tabs to behave, so implemented this // but warning! will probably not work for dropdowns in tabs diff --git a/Netdisco/views/device.tt b/Netdisco/views/device.tt index b9d58b5e..b6b68ab5 100644 --- a/Netdisco/views/device.tt +++ b/Netdisco/views/device.tt @@ -7,6 +7,9 @@ +
[% FOREACH tab IN vars.tabs %]