list collapse toggle

nullboard.html

@@ -78,6 +78,29 @@
    body {
       background: #fff;
       background: #f8f9fb;
+      height: 100vh;
+      margin-top: 0;
+      margin-bottom: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      display: flex;
+      flex-direction: column;
+   }
+
+   body > .wrap {
+      flex-grow: 2;
+      display: flex;
+      flex-direction: column;
+   }
+
+   .wrap > .board {
+      flex-grow: 2;
+      display: flex;
+      flex-direction: column;
+   }
+
+   .board > .lists {
+      flex-grow: 2;
    }
 
    body.dragging {
@@ -151,9 +174,11 @@
 
    /***/
    .board .head {
-      padding: 5px 0;
+      padding: 0;
       margin: 0 5px;
       position: relative;
+      display: flex;
+      flex-direction: row;
    }
 
    .board .head .text,
@@ -163,12 +188,14 @@
       line-height: 20px;
       padding: 0 5px 2px;
       border: none;
+      flex-grow: 2;
    }
 
    .board .head .text {
       min-height: 20px;
       white-space: pre;
       overflow: hidden;
+      padding: 5px;
    }
 
    .board .head .edit {
@@ -194,9 +221,6 @@
    }
 
    .board .menu {
-      position: absolute;
-      top: 0;
-      right: 0;
       height: 20px;
       padding: 5px 6px 7px 30px;
       background: linear-gradient(to right, #EAEDF000, #EAEDF0 10px);
@@ -289,11 +313,21 @@
       padding: 0 5px;
    }
 
+   .board .collapsed-list,
+   .board .collapsed-list .head {
+      text-orientation: sideways;
+      writing-mode: vertical-rl;
+      height: 290px;
+      width: 2em !important;
+   }
+
+   .board .collapsed-list .head .menu .bulk a:not(.collapse-list),
+   .board .collapsed-list .notes {
+      display: none;
+   }
+
    /***/
    .board .head .menu .teaser {
-      position: absolute;
-      right: 3px;
-      top: 5px;
       padding: 0 3px;
    }
 
@@ -303,6 +337,11 @@
       z-index: 1;
    }
 
+   .board .head .menu:hover {
+      flex-grow: 999;
+      text-align: right;
+   }
+
    .board .head .menu:hover .bulk {
       display: block;
       opacity: 1;
@@ -1170,6 +1209,7 @@
                   <a href=# class='mov-list-l full'>&lt; Move</a>
                   <a href=# class='mov-list-l half'>&lt; Mo</a><a href=# class='mov-list-r half'>ve &gt;</a>
                   <a href=# class='mov-list-r full'>Move &gt;</a>
+                  <a href=# class='collapse-list'>- Hide</a>
                   <a href=# class='add-note'>+ Note</a>
                </div>
             </div>
@@ -1742,11 +1782,11 @@
       setText( $b.find('.head .text'), board.title );
 
       board.lists.forEach(function(list){
-
          var $l = $ldiv.clone();
          var $l_notes = $l.find('.notes');
 
          setText( $l.find('.head .text'), list.title );
+         if (list.min) $l.addClass('collapsed-list');
 
          list.notes.forEach(function(n){
             var $n = $ndiv.clone();
@@ -1782,6 +1822,7 @@
       $board.find('.list').each(function(){
          var $list = $(this);
          var l = board.addList( getText($list.find('.head .text')) );
+         l.min = $list.hasClass('collapsed-list');
 
          $list.find('.note').each(function(){
             var $note = $(this)
@@ -2933,6 +2974,13 @@
    });
 
    //
+   $('.board .collapse-list').live('click', function(){
+      var $list = $(this).closest('.list');
+      $list.toggleClass('collapsed-list');
+      saveBoard();
+      return false;
+   });
+
    $('.board .add-note').live('click', function(){
       addNote( $(this).closest('.list') );
       return false;