VRFS-3227 : Genre selector dialog:

* Change from table to a 3-column list
* Format/spacing for caption

web/app/assets/javascripts/dialog/genreSelectorDialog.js

@@ -9,9 +9,8 @@
     var dialogId = 'genre-selector-dialog';
     var $screen = $('#' + dialogId);
     var $btnSelect = $screen.find(".btn-select-genres");
-    var $instructions = $screen.find('#instructions');
-    var $genres = $screen.find('.genres');
-    var GENRES_PER_COLUMN = 12;
+    var $instructions = $screen.find('.instructions');
+    var $genres = $screen.find('.genres');    
 
     function beforeShow(data) {
     }
@@ -22,28 +21,15 @@
       $genres.empty();
 
       if (genreList) {
-        var columns = genreList.length / GENRES_PER_COLUMN;
-        columns = Math.floor((genreList.length % GENRES_PER_COLUMN) === 0 ? columns : columns + 1);
-
-        var columnWidthPct = 100/columns;
-
-        $.each(genreList, function(index, val) {
-          if (index === 0 || index % GENRES_PER_COLUMN === 0) {
-            $genres.append('<div class="left" style="width:"' + columnWidthPct + '%;"><table>');
-          }
-
-          $genres.append('<tr>');
+        $.each(genreList, function(index, val) {        
+          $genres.append('<li>');
           var checked = '';
           if (genres && $.inArray(val.id, genres) > -1) {
             checked = 'checked';
           }
 
-          $genres.append('<td><input type="checkbox" value="' + val.id + '" ' + checked + ' />' + val.description + '</td>');
-          $genres.append('</tr>');
-
-          if (index === genreList.length-1 || (index+1) % GENRES_PER_COLUMN === 0) {
-            $genres.append('</table></div>')
-          }
+          $genres.append('<input type="checkbox" value="' + val.id + '" ' + checked + ' />' + val.description);
+          $genres.append('</li>');
         });
       }
     }

web/app/assets/stylesheets/dialogs/genreSelectorDialog.css.scss

@@ -15,7 +15,25 @@
     margin-bottom:10px;
   }
 
+  .three-column-list-container {
+    -moz-column-count: 3;
+    -moz-column-gap: 10px;
+    -webkit-column-count: 3;
+    -webkit-column-gap: 10px;
+    column-count: 3;
+    column-gap: 10px;
+    margin-left: 0;
+    ul {
+      list-style-type: none;
+      li {
+        margin: 1px 4px 1px 0;
+        font-size:12px;
+        line-height:14px;
+      }
+    }
+  }
+
   .genres {
-    
+
   }
 }

web/app/views/dialogs/_genreSelectorDialog.html.haml

@@ -4,11 +4,12 @@
     %h1
       = 'select genre'
   .dialog-inner
-    %span{id: 'instructions'}
+    %strong
+      .instructions
     %br{:clear => "all"}/
     .content-body 
       .content-body-scroller
-        .genres
+        %ul.genres.three-column-list-container
 
   .right.action-buttons
     %a.button-grey.btn-cancel-dialog{'layout-action' => 'cancel'} CANCEL