Better add block dialog

* erase code is fun; * better name for "Area 1". Users can understand it now; * inline style for layout sux! Stop doing this! * add block dialog looks nice, with simpler code.

Better add block dialog
* erase code is fun; * better name for "Area 1". Users can understand it now; * inline style for layout sux! Stop doing this! * add block dialog looks nice, with simpler code.
Aurélio A. Heckert
1 parent 7d94ca05
Showing 3 changed files with 36 additions and 28 deletions Show diff stats
app/views/box_organizer/_block_types.rhtml
app/views/box_organizer/add_block.rhtml
public/stylesheets/application.css
@@ -1,10 +0,0 @@
-<% block_types.in_groups_of(2) do |block1, block2| %>
-  <div style='float: left; width: 48%; padding-top: 2px;'>
-    <%= labelled_radio_button(block1.description, :type, block1.name) %>
-  </div>
-  <% if block2 %>
-    <div style='float: left; width: 48%; padding-top: 2px;'>
-      <%= labelled_radio_button(block2.description, :type, block2.name) %>
-    </div>
-  <% end %>
-<% end %>
-<div style='height:350px'>
+<div id="add-block-dialog">
   <% form_tag do %>
  
     <p><%= _('In what area do you want to put your new block?') %></p>
  
+    <div id="box-position">
     <% @boxes.each do |box| %>
-      <%= labelled_radio_button(_("Area %d") % box.position, :box_id, box.id, box.central?, { :class => 'box-position', 'data-position' => box.position })  %>
+      <% name = box.central? ? _('Main area') : _('Area %d') % box.position %>
+      <%= labelled_radio_button(name, :box_id, box.id, box.central?, { 'data-position' => box.position }) %>
     <% end %>
+    </div>
  
     <script type="text/javascript">
-      (function ($) {
-        $(document).ready(function () {
-          $(".box-position").live('change', function () {
-            if ($(this).attr('data-position') == '1') {
-              $('#center-block-types').show();
-              $('#side-block-types').hide();
-            } else {
-              $('#center-block-types').hide();
-              $('#side-block-types').show();
-            };
-          });
-      })})(jQuery);
+      jQuery('#box-position input').bind('change',
+        function () {
+          showCenter = jQuery(this).attr('data-position') == '1';
+          jQuery('#center-block-types').toggle(showCenter);
+          jQuery('#side-block-types').toggle(!showCenter);
+        }
+      );
     </script>
  
     <p><%= _('Select the type of block you want to add to your page.') %></p>
  
-    <div id='center-block-types'>
-      <%= render :partial => 'block_types', :locals => { :block_types => @center_block_types } %>
+    <div id="center-block-types" class="block-types">
+      <% @center_block_types.each do |block| %>
+        <div>
+          <%= labelled_radio_button(block.description, :type, block.name) %>
+        </div>
+      <% end %>
     </div>
  
-    <div id='side-block-types' style='display:none'>
-      <%= render :partial => 'block_types', :locals => { :block_types => @side_block_types } %>
+    <div id="side-block-types" class="block-types" style="display:none">
+      <% @side_block_types.each do |block| %>
+        <div>
+          <%= labelled_radio_button(block.description, :type, block.name) %>
+        </div>
+      <% end %>
     </div>
  
     <br style='clear: both'/>
@@ -1666,6 +1666,18 @@ a.button.disabled, input.disabled {
   padding: 0px 30px;
 }
  
+#add-block-dialog {
+  display: inline-block;
+  padding: 0px 5px 0px 20px;
+}
+
+#add-block-dialog .block-types {
+  column-count: 2;
+  -ms-column-count: 2;
+  -moz-column-count: 2;
+  -webkit-column-count: 2;
+}
+
 /* ==> blocks/tags-block.css <<= */ 
  
 .tags-block {
...	...	@@ -1,10 +0,0 @@
1		-<% block_types.in_groups_of(2) do \|block1, block2\| %>
2		- <div style='float: left; width: 48%; padding-top: 2px;'>
3		- <%= labelled_radio_button(block1.description, :type, block1.name) %>
4		- </div>
5		- <% if block2 %>
6		- <div style='float: left; width: 48%; padding-top: 2px;'>
7		- <%= labelled_radio_button(block2.description, :type, block2.name) %>
8		- </div>
9		- <% end %>
10		-<% end %>
1		-<div style='height:350px'>
	1	+<div id="add-block-dialog">
2	2	<% form_tag do %>
3	3
4	4	<p><%= _('In what area do you want to put your new block?') %></p>
5	5
	6	+ <div id="box-position">
6	7	<% @boxes.each do \|box\| %>
7		- <%= labelled_radio_button(_("Area %d") % box.position, :box_id, box.id, box.central?, { :class => 'box-position', 'data-position' => box.position }) %>
	8	+ <% name = box.central? ? _('Main area') : _('Area %d') % box.position %>
	9	+ <%= labelled_radio_button(name, :box_id, box.id, box.central?, { 'data-position' => box.position }) %>
8	10	<% end %>
	11	+ </div>
9	12
10	13	<script type="text/javascript">
11		- (function ($) {
12		- $(document).ready(function () {
13		- $(".box-position").live('change', function () {
14		- if ($(this).attr('data-position') == '1') {
15		- $('#center-block-types').show();
16		- $('#side-block-types').hide();
17		- } else {
18		- $('#center-block-types').hide();
19		- $('#side-block-types').show();
20		- };
21		- });
22		- })})(jQuery);
	14	+ jQuery('#box-position input').bind('change',
	15	+ function () {
	16	+ showCenter = jQuery(this).attr('data-position') == '1';
	17	+ jQuery('#center-block-types').toggle(showCenter);
	18	+ jQuery('#side-block-types').toggle(!showCenter);
	19	+ }
	20	+ );
23	21	</script>
24	22
25	23	<p><%= _('Select the type of block you want to add to your page.') %></p>
26	24
27		- <div id='center-block-types'>
28		- <%= render :partial => 'block_types', :locals => { :block_types => @center_block_types } %>
	25	+ <div id="center-block-types" class="block-types">
	26	+ <% @center_block_types.each do \|block\| %>
	27	+ <div>
	28	+ <%= labelled_radio_button(block.description, :type, block.name) %>
	29	+ </div>
	30	+ <% end %>
29	31	</div>
30	32
31		- <div id='side-block-types' style='display:none'>
32		- <%= render :partial => 'block_types', :locals => { :block_types => @side_block_types } %>
	33	+ <div id="side-block-types" class="block-types" style="display:none">
	34	+ <% @side_block_types.each do \|block\| %>
	35	+ <div>
	36	+ <%= labelled_radio_button(block.description, :type, block.name) %>
	37	+ </div>
	38	+ <% end %>
33	39	</div>
34	40
35	41	<br style='clear: both'/>
...	...
...	...	@@ -1666,6 +1666,18 @@ a.button.disabled, input.disabled {
1666	1666	padding: 0px 30px;
1667	1667	}
1668	1668
	1669	+#add-block-dialog {
	1670	+ display: inline-block;
	1671	+ padding: 0px 5px 0px 20px;
	1672	+}
	1673	+
	1674	+#add-block-dialog .block-types {
	1675	+ column-count: 2;
	1676	+ -ms-column-count: 2;
	1677	+ -moz-column-count: 2;
	1678	+ -webkit-column-count: 2;
	1679	+}
	1680	+
1669	1681	/* ==> blocks/tags-block.css <<= */
1670	1682
1671	1683	.tags-block {
...	...