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	-<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	<% form_tag(:action => 'save', :id => @block.id) do %>	4	<% form_tag(:action => 'save', :id => @block.id) do %>
5		5
	@@ -920,11 +920,18 @@ function facet_options_toggle(id, url) {		@@ -920,11 +920,18 @@ function facet_options_toggle(id, url) {
920		920
921	jQuery(function($) {	921	jQuery(function($) {
922	$('.colorbox').live('click', function() {	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	return false;	936	return false;
930	});	937	});