Skip to content
This repository
Browse code

Remove story table <thead>

Changes story column header into a <div> element within the same
<td> as the stories.
  • Loading branch information...
commit 22398f8c5eb923a89b7096050c0d847919b3c787 1 parent 9b03bbd
Malcolm Locke authored April 04, 2012
2  app/assets/javascripts/fulcrum.js
@@ -19,7 +19,7 @@ $(function() {
19 19
 
20 20
   });
21 21
 
22  
-  $('thead a.toggle-column, #column-toggles a').click(function(el){
  22
+  $('.column_header a.toggle-column, #column-toggles a').click(function(el){
23 23
     //Find relevant column from class name
24 24
     var className = _.detect( el.target.classList, function(elClass){ return elClass.match(/hide_\w+/) });
25 25
     $('.'+className.replace(/hide_/,'')+'_column').toggle();
4  app/assets/stylesheets/screen.css.scss
@@ -218,6 +218,7 @@ table.stories {
218 218
 table.stories td {
219 219
   vertical-align: top;
220 220
   background-color: #ccc;
  221
+  @include border-radius(5px 5px 0 0);
221 222
 }
222 223
 
223 224
 div.storycolumn {
@@ -226,7 +227,8 @@ div.storycolumn {
226 227
 }
227 228
 
228 229
 /* Story columns headers */
229  
-table.stories th {
  230
+.column_header {
  231
+  text-align: center;
230 232
   background: $darkgrey;
231 233
   @include background(linear-gradient(top, $darkgrey, $darkgrey*0.75));
232 234
   color: #eee;
28  app/views/projects/show.html.erb
@@ -37,20 +37,24 @@ $(function() {
37 37
 <% end %>
38 38
 
39 39
 <table class="stories" width="100%">
40  
-  <thead>
41  
-    <tr>
42  
-      <th class="done_column">Done<a class="toggle-column hide_done" title="Close">&times;</a></th>
43  
-      <th class="in_progress_column">In Progress<a class="toggle-column hide_in_progress" title="Close">&times;</a></th>
44  
-      <th class="backlog_column">Backlog<a class="toggle-column hide_backlog" title="Close">&times;</a></th>
45  
-      <th class="chilly_bin_column">Chilly Bin<a class="toggle-column hide_chilly_bin" title="Close">&times;</a></th>
46  
-    </tr>
47  
-  </thead>
48 40
   <tbody>
49 41
     <tr>
50  
-      <td class="done_column" style="width: 25%"><div id="done" class="storycolumn"></div></td>
51  
-      <td class="in_progress_column" style="width: 25%"><div id="in_progress" class="storycolumn sortable"></div></td>
52  
-      <td class="backlog_column" style="width: 25%"><div id="backlog" class="storycolumn sortable"></div></td>
53  
-      <td class="chilly_bin_column" style="width: 25%"><div id="chilly_bin" class="storycolumn sortable"></div></td>
  42
+      <td class="done_column" style="width: 25%">
  43
+        <div class="column_header">Done<a href="#" class="toggle-column hide_done" title="Close">&times;</a></div>
  44
+        <div id="done" class="storycolumn"></div>
  45
+      </td>
  46
+      <td class="in_progress_column" style="width: 25%">
  47
+        <div class="column_header">In Progress<a href="#" class="toggle-column hide_in_progress" title="Close">&times;</a></div>
  48
+        <div id="in_progress" class="storycolumn sortable"></div>
  49
+      </td>
  50
+      <td class="backlog_column" style="width: 25%">
  51
+        <div class="column_header">Backlog<a href="#" class="toggle-column hide_backlog" title="Close">&times;</a></div>
  52
+        <div id="backlog" class="storycolumn sortable"></div>
  53
+      </td>
  54
+      <td class="chilly_bin_column" style="width: 25%">
  55
+        <div class="column_header">Chilly Bin<a href="#" class="toggle-column hide_chilly_bin" title="Close">&times;</a></div>
  56
+        <div id="chilly_bin" class="storycolumn sortable"></div>
  57
+      </td>
54 58
     </tr>
55 59
   </tbody>
56 60
 </table>
28  app/views/static/testcard.html.erb
@@ -114,20 +114,24 @@ $(function() {
114 114
 <% end %>
115 115
 
116 116
 <table class="stories" width="100%">
117  
-  <thead>
118  
-    <tr>
119  
-      <th class="done_column">Done<a class="toggle-column hide_done" title="Close">&times;</a></th>
120  
-      <th class="in_progress_column">In Progress<a class="toggle-column hide_in_progress" title="Close">&times;</a></th>
121  
-      <th class="backlog_column">Backlog<a class="toggle-column hide_backlog" title="Close">&times;</a></th>
122  
-      <th class="chilly_bin_column">Chilly Bin<a class="toggle-column hide_chilly_bin" title="Close">&times;</a></th>
123  
-    </tr>
124  
-  </thead>
125 117
   <tbody>
126 118
     <tr>
127  
-      <td class="done_column" style="width: 25%"><div id="done" class="storycolumn"></div></td>
128  
-      <td class="in_progress_column" style="width: 25%"><div id="in_progress" class="storycolumn sortable"></div></td>
129  
-      <td class="backlog_column" style="width: 25%"><div id="backlog" class="storycolumn sortable"></div></td>
130  
-      <td class="chilly_bin_column" style="width: 25%"><div id="chilly_bin" class="storycolumn sortable"></div></td>
  119
+      <td class="done_column" style="width: 25%">
  120
+        <div class="column_header">Done<a class="toggle-column hide_done" title="Close">&times;</a></div>
  121
+        <div id="done" class="storycolumn"></div>
  122
+      </td>
  123
+      <td class="in_progress_column" style="width: 25%">
  124
+        <div class="column_header">In Progress<a class="toggle-column hide_in_progress" title="Close">&times;</a></div>
  125
+        <div id="in_progress" class="storycolumn sortable"></div>
  126
+      </td>
  127
+      <td class="backlog_column" style="width: 25%">
  128
+        <div class="column_header">Backlog<a class="toggle-column hide_backlog" title="Close">&times;</a></div>
  129
+        <div id="backlog" class="storycolumn sortable"></div>
  130
+      </td>
  131
+      <td class="chilly_bin_column" style="width: 25%">
  132
+        <div class="column_header">Chilly Bin<a class="toggle-column hide_chilly_bin" title="Close">&times;</a></div>
  133
+        <div id="chilly_bin" class="storycolumn sortable"></div>
  134
+      </td>
131 135
     </tr>
132 136
   </tbody>
133 137
 </table>
44  spec/requests/stories_spec.rb
@@ -55,4 +55,48 @@
55 55
 
56 56
   end
57 57
 
  58
+  describe "show and hide columns" do
  59
+
  60
+    before do
  61
+      project
  62
+      Capybara.ignore_hidden_elements = true
  63
+    end
  64
+
  65
+    it "hides and shows the columns", :js => true do
  66
+
  67
+      visit project_path(project)
  68
+
  69
+      columns = {
  70
+        "done"        => "Done",
  71
+        "in_progress" => "In Progress",
  72
+        "backlog"     => "Backlog",
  73
+        "chilly_bin"  => "Chilly Bin"
  74
+      }
  75
+
  76
+      columns.each do |column, button_text|
  77
+        selector = "table.stories td.#{column}_column"
  78
+        page.should have_css(selector)
  79
+
  80
+        # Hide the column
  81
+        within('#column-toggles') do
  82
+          click_on button_text
  83
+        end
  84
+        page.should_not have_css(selector)
  85
+
  86
+        # Show the column
  87
+        within('#column-toggles') do
  88
+          click_on button_text
  89
+        end
  90
+        page.should have_css(selector)
  91
+
  92
+        # Hide the column with the 'close' button in the column header
  93
+        within("#{selector} .column_header") do
  94
+          click_link 'Close'
  95
+        end
  96
+        page.should_not have_css(selector)
  97
+
  98
+      end
  99
+    end
  100
+  end
  101
+
58 102
 end

0 notes on commit 22398f8

Please sign in to comment.
Something went wrong with that request. Please try again.