Better block config display

Make colorBox to feet better the block config dialog, removing the unneeded horizontal scroll. Add a better style, and display the cancel button.

Better block config display
Make colorBox to feet better the block config dialog, removing the unneeded horizontal scroll. Add a better style, and display the cancel button.
Aurélio A. Heckert
1 parent 82c567f2
Showing 4 changed files with 53 additions and 35 deletions Show diff stats
app/views/box_organizer/_highlights_block.rhtml
app/views/box_organizer/edit.rhtml
public/javascripts/application.js
public/stylesheets/application.css
 <strong><%= _('Highlights') %></strong>
-<div id='edit-highlights-block' style='width:450px'>
+
 <table id='highlights' class='noborder'>
   <tr><th><%= _('Image') %></th><th><%= _('Address') %></th><th><%= _('Position') %></th><th><%= _('Title') %></th></tr>
   <% for image in @block.images do %>
@@ -13,7 +13,6 @@
     </tr>
   <% end %>
 </table>
-</div>
  
 <%= link_to_function(_('New highlight'), nil, :class => 'button icon-add with-text') do |page|
     page.insert_html :bottom, 'highlights', content_tag('tr',
-<div style='width: 500px;'>
-  <h2><%= _('Editing block') %></h2>
+<div class="block-config-options <%= @block.class.name %>-options">
+  <h2 class="title"><%= _('Editing block') %></h2>
  
   <% form_tag(:action => 'save', :id => @block.id) do %>
  
@@ -920,11 +920,18 @@ function facet_options_toggle(id, url) {
  
 jQuery(function($) {
   $('.colorbox').live('click', function() {
-    $.fn.colorbox({
-      href:$(this).attr('href'),
-      maxWidth: '600',
-      maxHeight: '550',
-      open:true
+    $.colorbox({
+      href:       $(this).attr('href'),
+      maxWidth:   $(window).width()-50,
+      height:     $(window).height()-50,
+      open:       true,
+      fixed:      true,
+      close:      'Cancel',
+      onComplete: function(bt) {
+        var opt = {}, maxH = $(window).height()-50;
+        if ($('#cboxLoadedContent *:first').height() > maxH) opt.height = maxH;
+        $.colorbox.resize(opt);
+      }
     });
     return false;
   });
@@ -1535,10 +1535,10 @@ a.button.disabled, input.disabled {
  * style for blocks 
  ***********************************************************/
  
-  #content .communities-block .profile-image {
-    float: none;
-    padding-left: 0px;
-    max-width: none;
+#content .communities-block .profile-image {
+  float: none;
+  padding-left: 0px;
+  max-width: none;
 }
 #content .communities-block .vcard .profile_link {
   text-align: center;
@@ -1591,30 +1591,30 @@ a.button.disabled, input.disabled {
 .invisible-block a.icon-button {
   position: relative;
 }
-/***********************************************************
- * the handles to where you can drag the blocks
- ***********************************************************/
+/************************************************
+ * the handles to where you can drag the blocks *
+ ************************************************/
  
-  .block-target {
-    margin: 5px;
-    height: 2px;
-    height: 15px;
-    border: 1px dashed #e0e0e0;
+.block-target {
+  margin: 5px;
+  height: 2px;
+  height: 15px;
+  border: 1px dashed #e0e0e0;
 }
 .block-target-hover {
   background: #ffd;
   border: 1px solid red;
   height: 30px;
 }
-/***********************************************************
- * put borders around boxes and blocks when organizing boxes
- ***********************************************************/
+/*************************************************************
+ * put borders around boxes and blocks when organizing boxes *
+ *************************************************************/
  
-  #box-organizer div.box {
-    border: 1px solid #ccc;
-    background-color: white;
-    background-repeat: no-repeat;
-    background-position: top right;
+#box-organizer div.box {
+  border: 1px solid #ccc;
+  background-color: white;
+  background-repeat: no-repeat;
+  background-position: top right;
 }
 #box-organizer div.box-1 {
   background-image: url(../images/blocks/1.png);
@@ -1648,6 +1648,24 @@ a.button.disabled, input.disabled {
   margin-top: 1em;
   text-align: center;
 }
+
+/****************************************
+ * Block options editor floating window *
+ ****************************************/
+
+#cboxLoadedContent {
+  background: #FFF;
+  box-shadow: 0 0 15px #888 inset;
+  border-radius: 5px;
+  border: 1px solid #777;
+  border-left: none;
+  border-right: none;
+}
+
+.block-config-options {
+  padding: 0px 30px;
+}
+
 /* ==> blocks/tags-block.css <<= */ 
  
 .tags-block {
@@ -5628,12 +5646,6 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
  
 /* Captcha */
  
-/* Colorbox */
-
-#cboxClose {
-  display: none !important;
-}
-
 /* Signup interface {{{ */
  
 #url-check {
1	1	<strong><%= _('Highlights') %></strong>
2		-<div id='edit-highlights-block' style='width:450px'>
	2	+
3	3	<table id='highlights' class='noborder'>
4	4	<tr><th><%= _('Image') %></th><th><%= _('Address') %></th><th><%= _('Position') %></th><th><%= _('Title') %></th></tr>
5	5	<% for image in @block.images do %>
...	...	@@ -13,7 +13,6 @@
13	13	</tr>
14	14	<% end %>
15	15	</table>
16		-</div>
17	16
18	17	<%= link_to_function(_('New highlight'), nil, :class => 'button icon-add with-text') do \|page\|
19	18	page.insert_html :bottom, 'highlights', content_tag('tr',
...	...
1		-<div style='width: 500px;'>
2		- <h2><%= _('Editing block') %></h2>
	1	+<div class="block-config-options <%= @block.class.name %>-options">
	2	+ <h2 class="title"><%= _('Editing block') %></h2>
3	3
4	4	<% form_tag(:action => 'save', :id => @block.id) do %>
5	5
...	...
...	...	@@ -920,11 +920,18 @@ function facet_options_toggle(id, url) {
920	920
921	921	jQuery(function($) {
922	922	$('.colorbox').live('click', function() {
923		- $.fn.colorbox({
924		- href:$(this).attr('href'),
925		- maxWidth: '600',
926		- maxHeight: '550',
927		- open:true
	923	+ $.colorbox({
	924	+ href: $(this).attr('href'),
	925	+ maxWidth: $(window).width()-50,
	926	+ height: $(window).height()-50,
	927	+ open: true,
	928	+ fixed: true,
	929	+ close: 'Cancel',
	930	+ onComplete: function(bt) {
	931	+ var opt = {}, maxH = $(window).height()-50;
	932	+ if ($('#cboxLoadedContent *:first').height() > maxH) opt.height = maxH;
	933	+ $.colorbox.resize(opt);
	934	+ }
928	935	});
929	936	return false;
930	937	});
...	...
...	...	@@ -1535,10 +1535,10 @@ a.button.disabled, input.disabled {
1535	1535	* style for blocks
1536	1536	***********************************************************/
1537	1537
1538		- #content .communities-block .profile-image {
1539		- float: none;
1540		- padding-left: 0px;
1541		- max-width: none;
	1538	+#content .communities-block .profile-image {
	1539	+ float: none;
	1540	+ padding-left: 0px;
	1541	+ max-width: none;
1542	1542	}
1543	1543	#content .communities-block .vcard .profile_link {
1544	1544	text-align: center;
...	...	@@ -1591,30 +1591,30 @@ a.button.disabled, input.disabled {
1591	1591	.invisible-block a.icon-button {
1592	1592	position: relative;
1593	1593	}
1594		-/***********************************************************
1595		- * the handles to where you can drag the blocks
1596		- ***********************************************************/
	1594	+/************************************************
	1595	+ * the handles to where you can drag the blocks *
	1596	+ ************************************************/
1597	1597
1598		- .block-target {
1599		- margin: 5px;
1600		- height: 2px;
1601		- height: 15px;
1602		- border: 1px dashed #e0e0e0;
	1598	+.block-target {
	1599	+ margin: 5px;
	1600	+ height: 2px;
	1601	+ height: 15px;
	1602	+ border: 1px dashed #e0e0e0;
1603	1603	}
1604	1604	.block-target-hover {
1605	1605	background: #ffd;
1606	1606	border: 1px solid red;
1607	1607	height: 30px;
1608	1608	}
1609		-/***********************************************************
1610		- * put borders around boxes and blocks when organizing boxes
1611		- ***********************************************************/
	1609	+/*************************************************************
	1610	+ * put borders around boxes and blocks when organizing boxes *
	1611	+ *************************************************************/
1612	1612
1613		- #box-organizer div.box {
1614		- border: 1px solid #ccc;
1615		- background-color: white;
1616		- background-repeat: no-repeat;
1617		- background-position: top right;
	1613	+#box-organizer div.box {
	1614	+ border: 1px solid #ccc;
	1615	+ background-color: white;
	1616	+ background-repeat: no-repeat;
	1617	+ background-position: top right;
1618	1618	}
1619	1619	#box-organizer div.box-1 {
1620	1620	background-image: url(../images/blocks/1.png);
...	...	@@ -1648,6 +1648,24 @@ a.button.disabled, input.disabled {
1648	1648	margin-top: 1em;
1649	1649	text-align: center;
1650	1650	}
	1651	+
	1652	+/****************************************
	1653	+ * Block options editor floating window *
	1654	+ ****************************************/
	1655	+
	1656	+#cboxLoadedContent {
	1657	+ background: #FFF;
	1658	+ box-shadow: 0 0 15px #888 inset;
	1659	+ border-radius: 5px;
	1660	+ border: 1px solid #777;
	1661	+ border-left: none;
	1662	+ border-right: none;
	1663	+}
	1664	+
	1665	+.block-config-options {
	1666	+ padding: 0px 30px;
	1667	+}
	1668	+
1651	1669	/* ==> blocks/tags-block.css <<= */
1652	1670
1653	1671	.tags-block {
...	...	@@ -5628,12 +5646,6 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
5628	5646
5629	5647	/* Captcha */
5630	5648
5631		-/* Colorbox */
5632		-
5633		-#cboxClose {
5634		- display: none !important;
5635		-}
5636		-
5637	5649	/* Signup interface {{{ */
5638	5650
5639	5651	#url-check {
...	...