From 7f771a53f1c71156706c860d4f30dd023198712d Mon Sep 17 00:00:00 2001
From: Travis Grathwell <tjgrathwell@gmail.com>
Date: Fri, 5 Jul 2013 22:47:26 -0700
Subject: [PATCH] Sec org: add button to toggle visibility of 'unassigned'
 section

The other five sections grow to compensate for its absence.
---
 .../views/section_organizer_view.js            | 14 ++++++++++++--
 .../stylesheets/_section_organizer.css.scss    | 18 +++++++++++++++---
 .../section_organizer/section_organizer.hbs    |  1 +
 app/views/events/organize_sections.html.erb    |  2 +-
 4 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/views/section_organizer_view.js b/app/assets/javascripts/views/section_organizer_view.js
index cfb0172bb..66ec3179c 100644
--- a/app/assets/javascripts/views/section_organizer_view.js
+++ b/app/assets/javascripts/views/section_organizer_view.js
@@ -18,7 +18,8 @@ Bridgetroll.Views.SectionOrganizer = (function () {
 
     events: {
       'click .add-section': 'onAddSectionClick',
-      'click .show-os': 'onShowOSClick'
+      'click .show-os': 'onShowOSClick',
+      'click .show-unassigned': 'onShowUnassignedClick'
     },
 
     initialize: function (options) {
@@ -63,6 +64,15 @@ Bridgetroll.Views.SectionOrganizer = (function () {
       } else {
         this.$('.show-os').text('Show Student OS');
       }
-    }
+    },
+
+    onShowUnassignedClick: function () {
+      this.$el.toggleClass('showing-unassigned');
+      if (this.$el.hasClass('showing-unassigned')) {
+        this.$('.show-unassigned').text('Hide Unassigned');
+      } else {
+        this.$('.show-unassigned').text('Show Unassigned');
+      }
+    },
   });
 })();
diff --git a/app/assets/stylesheets/_section_organizer.css.scss b/app/assets/stylesheets/_section_organizer.css.scss
index ea99f7def..f8f6d92a6 100644
--- a/app/assets/stylesheets/_section_organizer.css.scss
+++ b/app/assets/stylesheets/_section_organizer.css.scss
@@ -40,8 +40,20 @@ $bridgetroll-section-border-color: #BBB;
 .bridgetroll-section-level {
   vertical-align: top;
   display: inline-block;
-  width: 175px;
+  width: 215px;
   margin-right: 10px;
+
+  .showing-unassigned & {
+    width: 175px;
+  }
+
+  &.level0 {
+    display: none;
+
+    .showing-unassigned & {
+      display: inline-block;
+    }
+  }
 }
 
 .bridgetroll-section-title {
@@ -73,7 +85,6 @@ $bridgetroll-section-border-color: #BBB;
   border: 1px solid $bridgetroll-section-border-color;
   margin-bottom: 20px;
   border-radius: 5px;
-  width: 175px;
   vertical-align: top;
 
   .actions {
@@ -164,7 +175,8 @@ $bridgetroll-section-border-color: #BBB;
     .name {
       display: inline-block;
       overflow: hidden;
-      width: 120px;
+      width: 70%;
+      width: calc(100% - 55px);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
diff --git a/app/assets/templates/section_organizer/section_organizer.hbs b/app/assets/templates/section_organizer/section_organizer.hbs
index af88aed5b..9e0f74ca2 100644
--- a/app/assets/templates/section_organizer/section_organizer.hbs
+++ b/app/assets/templates/section_organizer/section_organizer.hbs
@@ -3,6 +3,7 @@
   <a class='btn' href='sections/arrange' data-method='post' data-confirm='This will remove all existing sections and recreate them using COMPUTERS. Are you sure?'>Auto-Arrange All</a>
   <a class='btn' href='sections/arrange?checked_in=true' data-method='post' data-confirm='This will remove all existing sections and recreate them using COMPUTERS. Are you sure?'>Auto-Arrange Checked-In People</a>
   <button class='btn show-os'>Show Student OS</button>
+  <button class='btn show-unassigned'>Hide Unassigned</button>
   <div class='student-os-key'>
     <div class='swatch linux'></div>Linux
     <div class='swatch osx'></div>OSX
diff --git a/app/views/events/organize_sections.html.erb b/app/views/events/organize_sections.html.erb
index 921b7f16a..b3012866f 100644
--- a/app/views/events/organize_sections.html.erb
+++ b/app/views/events/organize_sections.html.erb
@@ -3,7 +3,7 @@
 
 <h2>Super Secret Organizer Section Organizing Tool</h2>
 
-<div id="section-organizer"></div>
+<div id="section-organizer" class="showing-unassigned"></div>
 
 <script>
   $(document).ready(function () {