added resizing of metabar

mikemintz · Apr 15, 2013 · 6b10fab · 6b10fab
1 parent 7c5f345
commit 6b10fab
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 8 deletions.
diff --git a/deme_django/cms/templates/default_layout.html b/deme_django/cms/templates/default_layout.html
@@ -37,6 +37,7 @@
     <script type="text/javascript" src="{% media_url "javascripts/fg.menu.js" %}"></script>
 
     <script type="text/javascript" src="{% media_url "javascripts/deme/adminbar.js" %}"></script>
+    <script type="text/javascript" src="{% media_url "javascripts/deme/metabar.js" %}"></script>
 
     <script type="text/javascript">
             $(document).ready(function () {

diff --git a/deme_django/cms/templates/includes/adminbar.html b/deme_django/cms/templates/includes/adminbar.html
@@ -30,7 +30,7 @@
     <li><a href="#"><i class="glyphicon glyphicon-edit"></i></a></li>
     <li><a href="#"><i class="glyphicon glyphicon-comment"></i></a></li>
     <li><a href="#"><i class="glyphicon glyphicon-user"></i></a></li>
-    <li><a href="#"><i class="glyphicon glyphicon-info-sign"></i></a></li>
+    <li><a href="#" title="Toggle Metadata" class="metadata"><i class="glyphicon glyphicon-info-sign"></i></a></li>
   </ul>
 </div>
 

diff --git a/deme_django/cms/templates/includes/metabar.html b/deme_django/cms/templates/includes/metabar.html
@@ -1,6 +1,6 @@
 {% load item_tags %}
 {% load chat_extras %}
-<div id="fixed_right_pane">
+<div id="metabar">
   <h1>Meta</h1>
     <!--div class="ui-helper-clearfix" style="font-size: 60%; float: right;">
 

diff --git a/deme_django/static/css/deme.css b/deme_django/static/css/deme.css
@@ -4689,8 +4689,7 @@ you can use the generic selector below, but it's slower:
   font-size: 16px;
   border-right: 1px solid rgba(0, 0, 0, 0.15);
   border-left: 1px solid rgba(255, 255, 255, 0.15);
-  padding-top: 10px;
-  padding-bottom: 10px;
+  padding: 10px;
 }
 .adminbar .nav .dropdown-menu .demeicon,
 .adminbar .nav .dropdown-menu .glyphicon {
@@ -4776,6 +4775,23 @@ you can use the generic selector below, but it's slower:
 
   flex: 1;
 }
-#fixed_right_pane {
+#metabar {
   width: 200px;
+  -webkit-transition: width 0.5s;
+  -moz-transition: width 0.5s;
+  -o-transition: width 0.5s;
+  transition: width 0.5s;
+  background: #eefafe;
+  box-shadow: 3px 0 5px rgba(0, 0, 0, 0.15) inset;
+  left: 0 !important;
+}
+#metabar.noanim {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  transition: none;
+}
+#metabar.closed {
+  width: 0px;
+  display: block;
 }
diff --git a/deme_django/static/javascripts/deme/adminbar.js b/deme_django/static/javascripts/deme/adminbar.js
@@ -0,0 +1,8 @@
+$(function(){
+  // show/hide meta bar
+  $('.adminbar a.metadata').click(function(e){
+    e.preventDefault();
+    $('#metabar').toggleClass('closed');
+  });
+
+});
diff --git a/deme_django/static/javascripts/deme/metabar.js b/deme_django/static/javascripts/deme/metabar.js
@@ -0,0 +1,22 @@
+$(function(){
+  var $metabar = $('#metabar');
+
+  // sets metabar sizing styles based on window dimensions
+  function metabar_sizing(){
+    $metabar.css('min-height', $(window).height());
+  }
+  $(window).resize(function(){ metabar_sizing(); });
+  metabar_sizing();
+
+  // attach resizable
+  $metabar.resizable({
+    minWidth: 200,
+    handles: 'w',
+    start: function() {
+      $metabar.addClass('noanim');
+    },
+    stop: function() {
+      $metabar.removeClass('noanim');
+    }
+  });
+});
diff --git a/deme_django/static/less/deme/adminbar.less b/deme_django/static/less/deme/adminbar.less
@@ -14,8 +14,7 @@
       font-size: 16px;
       border-right: 1px solid fade(@black, 15%);
       border-left:  1px solid fade(@white, 15%);
-      padding-top: 10px;
-      padding-bottom: 10px;
+      padding: 10px;
       &:hover, &:active {
         //#gradient .vertical(@adminbar-top-active, @adminbar-bottom-active);
       }

diff --git a/deme_django/static/less/deme/metabar.less b/deme_django/static/less/deme/metabar.less
@@ -15,7 +15,18 @@
   flex: 1;
 }
 
-#fixed_right_pane {
+#metabar {
   // position: fixed; overflow-y: auto; top: 90px; bottom: 10px; right: 10px; width: 0%; display: none; z-index: 1;
   width: 200px;
+  .transition(width .5s);
+  background: @metabar-background;
+  box-shadow: 3px 0 5px fade(@black, 15%) inset;
+  left: 0 !important;
+  &.noanim {
+    .transition(none);
+  }
+  &.closed {
+    width: 0px;
+    display: block;
+  }
 }
diff --git a/deme_django/static/less/deme/variables.less b/deme_django/static/less/deme/variables.less
@@ -8,6 +8,7 @@
 @adminbar-top-light: #8ac9df;
 @adminbar-bottom-light: #49869c;
 
+@metabar-background: #eefafe;
 
 // Inverted navbar
 @navbar-inverse-text:                       @grayLighter;