th_simple_content_management 0.2.2 → 0.2.3

checksums.yaml

@@ -0,0 +1,15 @@
+---
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    MGRhZjY5YmRiOWNhMDg3Yzg0YTZlZWM1NzY0NmYwNjNmZjQ2ZWYyNw==
+  data.tar.gz: !binary |-
+    NGQ2NDRkNGFlYTI3ZThjNmE5NzlmODU5N2RjYzBjOGI0ZjUxNmJlNQ==
+!binary "U0hBNTEy":
+  metadata.gz: !binary |-
+    YWFhZWIyMTcxMzRkYTI1NzQxZWNhMTU1YWFmNDYzZmQ0OGMzMjc0MWM0NzMz
+    YzQ5YjY1Zjk4OTc0MTdiZTdhZDM5OTJmNTUyZjgwOTI0OTFmNDc5NDdlYTNk
+    NmZmNzc0NjA2OTUyMTMzZjM1N2Q1NDAwZTYyMmEyOTE5NWE1ZDY=
+  data.tar.gz: !binary |-
+    ZjgyZmZjMTNjZjBhYmZkZmEyM2JiMjcwZDVmY2ViM2I2NzAyZWQwMWNkMTk3
+    NzQ3ZGE0MTEzNjQ5OTQxYjBmZTc0OTMxMDhmZjE3MDM2NzI1YzE1MGZlMjAy
+    Njk3OTY4Yjg5ZmQ2ZjEzNjRjMGI3ZjNjZTI2OGUxZDk5YWJkZTQ=

data/app/assets/javascripts/simple_content_management/simple_pages/form.js

@@ -1,4 +1,5 @@
 //= require th-page-editor
+//= require jquery.ajaxform.js
 
 $(function() {
 	var $simplePageForm = $(".simple-page-form");
@@ -21,6 +22,9 @@ $(function() {
 	})();
 
 	var $htmlContainer = $simplePageForm.find(".content-html-container");
+	if($htmlContainer.html().match(/^\s*$/)) {
+		$htmlContainer.html("<div class=row><div class=span12><br><br><center>Klik om mij te bewerken.</center><br><br></div></div>");
+	}
 	$htmlContainer.pageeditor({
 		iframeStylePath: $("[data-iframe-style-path]").data("iframe-style-path")
 	});

data/app/assets/javascripts/th-page-editor/column.js

@@ -3,7 +3,8 @@
 
 $.widget("th.pageeditorcolumn", {
 	options: {
-		row: null
+		row: null,
+		autoresize: false
 	},
 
 	_create: function() {
@@ -12,10 +13,40 @@ $.widget("th.pageeditorcolumn", {
 		if(!this.isPlaceholder()) {
 			if(this.element.find(".row").length) {
 				this.convertToEditor();
+			} else if(this.element.children("[data-link-banner-id]").length || this.element.find(">.offer-form").length || this.element.find(">#new_appointment_request").length) {
+				var spanOffset = 0;
+				if(this.element.find(">[data-link-banner-id]>.bloc-sub").length) {
+					spanOffset = this.span() - 3;
+				} else if(this.element.find(">[data-link-banner-id]>.bloc-main").length) {
+					spanOffset = this.span() - 9;
+				} else if(this.element.find(">.offer-form").length) {
+  				spanOffset = this.span() - 7;
+  			} else if(this.element.find(">#new_appointment_request").length) {
+					spanOffset = this.span() - 9;
+				}
+				this.span(this.span() - spanOffset);
+
+				// we're not sure if the next element is a valid editorcolumn yet, so we update its offset manually.
+				if(spanOffset > 0 && this.element.next().length) {
+					var $next = this.element.next();
+					var match = null;
+					if(match = $next.prop("className").match(/offset(\d+)/)) {
+						$this.removeClass(match[0]).addClass("offset" + (parseInt(match[1])+spanOffset));
+					}
+				}
+
+				this.enableSortable();
 			} else {
+				this.enableSortable();
 				this.enableResize();
 			}
 		}
+		var self = this;
+		this.element.on("mousedown", function(e) {
+			if(e.button == 0 && self.isPlaceholder()) {
+				return false;
+			}
+		});
 	},
 
 	span: function(newSpan) {
@@ -70,6 +101,7 @@ $.widget("th.pageeditorcolumn", {
 			});
 			this.destroy();
 			this.element.replaceWith($column);
+			$column.closest(".row").pageeditorrow("updateToolbar");
 		} else {
 			var $content = this.element.clone();
 			$content.find(".ui-resizable-handle, .hovertool").remove();
@@ -77,6 +109,12 @@ $.widget("th.pageeditorcolumn", {
 		}
 	},
 
+	disableResize: function() {
+		if(this.element.data("uiResizable")) {
+			this.element.resizable("destroy");
+		}
+	},
+
 	enableResize: function() {
 		var self = this;
 		this.element.resizable({
@@ -112,25 +150,46 @@ $.widget("th.pageeditorcolumn", {
 		});
 	},
 
+	enableSortable: function() {
+		var self = this;
+		this.element.on("mousedown", function(e) {
+			if(!$(e.target).closest(".hovertool").length && e.button == 0) {
+				self.row().pageeditorrow("prepareColumnsSortable");
+				var mouseupCallback = function() {
+					setTimeout(function() {
+						self.row().pageeditorrow("unprepareColumnsSortable");
+					}, 0);
+					$(window).off("mouseup", mouseupCallback);
+				};
+				$(window).on("mouseup", mouseupCallback);
+			}
+		});
+	},
+
 	convertToEditor: function() {
-		if(!this.element.find(".row").length) {
+		if(!this.element.find(".row").length && !this.isPlaceholder()) {
 			this.element.html("<div class=row><div class=span"+this.span()+">"+this.element.html()+"</div></div>");
 		}
+		this.element.removeClass("column-add-placeholder");
+		this.element.removeAttr("style");
 		if(this.element.data("uiResizable")) {
 			this.element.resizable("destroy");
 		}
 		this.element.addClass("nested-editor").find(".hovertool").remove();
-		this.asEditor = this.element.pageeditor($.extend(this.options.row.options.editor.options, { spanwidth: this.span() }));
+		this.asEditor = this.element.pageeditor($.extend({}, this.options.row.options.editor.options, { spanwidth: this.span() }));
 	},
 
 	destroy: function() {
 		this.element.find(".hovertool").remove();
-		if(this.element.data("uiResizable")) {
-			this.element.resizable("destroy");
-		}
+		this.element.find(".dummy").remove();
+		this.disableResize();
 		if(this.asEditor) {
 			this.element.removeClass("nested-editor");
 			this.asEditor.pageeditor("destroy");
+			var $children = this.element.children(".row").children();
+			if($children.length == 1) {
+				this.element.replaceWith($children);
+			}
 		}
 	}
 });

data/app/assets/javascripts/th-page-editor/index.js

@@ -5,7 +5,7 @@
 
 (function($) {
 	var BASIC_SPANS_SELECTOR = ".span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12".replace(/\.span\d+/g, function(classname) {
-		return classname + ":not(.nested-editor)";
+		return "> .row > " +classname + ":not(.nested-editor)";
 	});
 	var NO_PLACEHOLDER_SELECTOR = BASIC_SPANS_SELECTOR.replace(/\.span\d+/g, function(classname) {
 		return classname + ":not(.column-add-placeholder)";
@@ -16,7 +16,7 @@
 			spanwidth: 12,
 			iframeStylePath: null,
 			editorModal: "#content-editor",
-			editorArea: "#content-editor textarea"
+			editorArea: "#content-editor #editor-html-content textarea"
 		},
 
 		_create: function() {
@@ -29,7 +29,8 @@
 
 			this.element.on("mouseenter", NO_PLACEHOLDER_SELECTOR, function() {
 				var $this = $(this);
-				$("<span class=\"hovertool btn btn-mini\"><i class=icon-trash></i></span>").prependTo(this).css({ marginTop: -11, marginLeft: -11 }).click(function() {
+				$("<span class=\"hovertool btn btn-mini\"><i class=icon-trash></i></span>").prependTo(this).css({ marginTop: -11, marginLeft: -11 }).click(function(e) {
+					e.preventDefault();
 					var $row = $this.pageeditorcolumn("row");
 					$this.remove();
 					$row.pageeditorrow("refreshColumnPlaceholders");
@@ -47,33 +48,260 @@
 
 			var $editorModal = $(this.options.editorModal);
 			var $editorArea = $(this.options.editorArea);
-			this.element.on("click", BASIC_SPANS_SELECTOR, function() {
+
+			this.element.on("click", BASIC_SPANS_SELECTOR, function(e) {
 				var $column = $(this);
+
+				if($column.is(".ui-sortable-helper")) {
+					return;
+				}
+
 				var saveCallback = function() {
+					var $activePane = $editorModal.find(".tab-pane.active");
+					switch($activePane.attr("id")) {
 
-					switch($editorModal.find(".tab-pane.active").attr("id")) {
 						case "editor-container":
 							self.subeditors.push($column.pageeditorcolumn("convertToEditor"));
 							break;
+
+            case "editor-blog-post-preview":
+              var path = $activePane.data("path");
+              var postId = $activePane.find("select#_blog_post_id option:selected").val();
+              $activePane.find("select#_blog_post_id option:first-child").prop("selected", true);
+              if(postId && postId.length) {
+                $.get(path.replace(/simple_post_id/, postId), function(html) {
+                  var $row = $column.closest(".row");
+									$column.pageeditorcolumn("val", html);
+									$row.pageeditorrow("refreshColumnPlaceholders");
+									$editorModal.modal("hide");
+									self.checkEmptyRowRequired();
+                });
+              }
+              return;
+
+						case "editor-link-banner":
+							$activePane.find("form").ajaxSubmit({
+								success: function(html) {
+									var $html = $($.parseHTML(html));
+									if($html.find(".errors").length) {
+										$activePane.find(".errors").replaceWith($html.find(".errors"));
+									} else {
+										var $row = $column.closest(".row");
+										$column.pageeditorcolumn("val", html);
+										$row.pageeditorrow("refreshColumnPlaceholders");
+										$editorModal.modal("hide");
+										self.checkEmptyRowRequired();
+									}
+								}
+							});
+							return; // return to prevent immidiate handling of saving
+
+						case "editor-link-list":
+							var $form = $activePane.find("form");
+							var title = $form.find("#editor-link-list-title").val();
+							var type = $form.find("input[name=listtype]:checked").val();
+
+							var $html = $("<div class=\""+type+"-container\"></div>");
+							$("<h3></h3>").text(title).appendTo($html);
+
+							var $labels = $form.find("input[name=\"link-label[]\"]");
+							var $uris = $form.find("input[name=\"link-uri[]\"]");
+
+							switch(type) {
+								case "linklist":
+									var $linklist = $("<ul class=\"link-list\"></ul>").appendTo($html);
+									for(var i=0; i<$labels.length; i++) {
+										var label = $($labels[i]).val();
+										var uri = $($uris[i]).val();
+										if(uri.length && label.length) {
+											var $listitem = $("<li></li>").appendTo($linklist);
+											$("<a></a>").attr("href", uri).text(label).appendTo($listitem);
+										}
+									}
+									break;
+								case "dropdown":
+									var $linklist = $("<select class=\"link-list\" data-placeholder=\"Maak een keuze\"><option></option></select>").appendTo($html);
+									for(var i=0; i<$labels.length; i++) {
+										var label = $($labels[i]).val();
+										var uri = $($uris[i]).val();
+										if(uri.length && label.length) {
+											$("<option></option>").attr("value", uri).text(label).appendTo($linklist);
+										}
+									}
+									break;
+							}
+
+							$column.pageeditorcolumn("val", $html[0].outerHTML);
+							break;
+
+						case "editor-blog-links":
+							$html = $("<div class=\"blog-posts-section\"></div>");
+							$html.append($("<h3></h3>").text($activePane.find("#editor-blog-links-title").val()));
+							$linksList = $("<ul class=\"link-list\"></ul>");
+
+							var tagIds = $activePane.find("#editor-blog-links-tags").val();
+							$linksList.attr("data-blog-post-links-list", tagIds ? tagIds.join(",") : "");
+
+							var linksAmount = parseInt($activePane.find("#editor-blog-links-amount").val());
+							$linksList.attr("data-blog-post-links-amount", linksAmount);
+
+							for(var i=0; i<linksAmount; i++) {
+								$linksList.append("<li class=\"dummy\"><a href=\"#\">Link naar blogpost "+(i+1)+"</a></li>");
+							}
+
+							var openAllLinkText = $activePane.find("#editor-blog-links-open-all").val();
+							if(openAllLinkText.length) {
+								$linksList.append($("<li style=\"font-weight: bold;\"></li>").append($("<a href=\"blog"+( tagIds ? "?tag_ids="+tagIds.join("+") : "" )+"\"></a>").text(openAllLinkText)));
+							}
+							$html.append($linksList);
+
+							$column.pageeditorcolumn("val", $html[0].outerHTML);
+							break;
+
+						case "editor-offer":
+							var $offerForm = $activePane.find(".offer-form");
+							$column.pageeditorcolumn("val", $offerForm[0].outerHTML.replace(/<(\/?)form/g, function(_, slash) {
+								return "<"+slash+"dummyformtag";
+							}));
+							break;
+
+						case "editor-appointment":
+							var $html = $activePane.find("form");
+							var $row = $column.closest(".row");
+							console.log($html[0].outerHTML);
+							$column.pageeditorcolumn("val", $html[0].outerHTML.replace(/<(\/?)form/g, function(_, slash) {
+								return "<"+slash+"dummyformtag";
+							}));
+							$row.pageeditorrow("refreshColumnPlaceholders");
+							break;
+
 						default:
 						 $column.pageeditorcolumn("val", $editorArea.val());
 					}
-
 					$editorModal.modal("hide");
 					self.checkEmptyRowRequired();
+				};
 
+				var showLinkBannerTabCallback = function() {
+					var path = $(this).data("path");
+					var linkBannerId = $column.children("[data-link-banner-id]").data("link-banner-id");
+					if(linkBannerId) {
+						path = path.replace("new", "" +linkBannerId + "/edit");
+					}
+					var $linkBannerEditor = $("#editor-link-banner");
+					$linkBannerEditor.html("<em>laden...</em>");
+					$.get(path, function(html) {
+						$linkBannerEditor.html(html);
+						$linkBannerEditor.find("#link-banner-quick-select").chosen().trigger("liszt:updated").change(function() {
+							var data = $(this).find("option:checked").data();
+							$("#simple_content_management_link_banner_uri").val(data.route || data.routes[0]);
+						});
+					});
 				};
 
-				$editorModal.modal("show").find("[data-save-button]").on("click", saveCallback)
+				var showLinkListTabCallback = function() {
+					var $tab = $editorModal.find("#editor-link-list");
+					var $form = $tab.find("form");
+					var $table = $tab.find("#links-table");
+					$table.find("tbody > tr:not(:first-child)").remove();
+					$form[0].reset();
+          $form.find("#editor-link-list-title").val($column.find("h3").text());
+					var $template = $table.find("tbody > tr:first-child").clone();
+					var rowCallback = function($row) {
+						$row.find(".chzn-container").remove();
+						$row.find("select").removeClass("chzn-done").removeAttr("id").show().chosen().val("").trigger("liszt:updated").change(function() {
+							var data = $(this).find("option:checked").data();
+							$row.find("input[name=\"link-label[]\"]").val(data.name);
+							$row.find("input[name=\"link-uri[]\"]").val(data.route || data.routes[0]);
+						});
+					}
+					rowCallback($table.find("tbody > tr:first-child"));
+					$form.find("#add-link-button").off("click").on("click", function() {
+						var $row = $template.clone();
+						$table.find("tbody").append($row);
+						rowCallback($row);
+						return false;
+					});
+
+					var $linkList = $column.find(".dropdown-container > .link-list, .linklist-container > .link-list");
+					if($linkList.length && $linkList.children().length) {
+						$table.find("tbody tr").remove();
+						$linkList.children().each(function() {
+							var uri = $(this).is("option") ? $(this).val() : $(this).find("a").attr("href");
+							var label = $(this).text();
+							if(uri.length && label.length) {
+								var $row = $template.clone();
+								$row.find("input[name=\"link-label[]\"]").val(label);
+								$row.find("input[name=\"link-uri[]\"]").val(uri);
+								$table.find("tbody").append($row);
+								rowCallback($row);
+							}
+						});
+					}
+					$table.find("tbody").sortable();
+				}
+
+				$editorModal.modal("show").find("[data-save-button]").on("click", saveCallback);
 				$editorModal.on("hide", function() {
+					$editorModal.find("a[href=#editor-html-content]").tab("show");
 					$editorModal.find("[data-save-button]").off("click", saveCallback);
+					$editorModal.find("a[href=#editor-link-banner]").off("show", showLinkBannerTabCallback);
+					$editorModal.find("a[href=#editor-link-list]").off("shown", showLinkListTabCallback);
+				});
+
+				$editorModal.find("a[href=#editor-link-banner]").on("show", showLinkBannerTabCallback);
+				$editorModal.find("a[href=#editor-link-list]").on("shown", showLinkListTabCallback);
+
+				$editorModal.find("a[href=#editor-blog-links]").on("shown", function() {
+					$editorModal.find("#editor-blog-links-tags").chosen();
+					var $blogSection = $column.find(".blog-posts-section");
+					if($blogSection.length) {
+						var $list = $column.find("[data-blog-post-links-list]");
+						$editorModal.find("#editor-blog-links-tags").val($list.data("blog-post-links-list").toString().split(/,/g)).trigger("liszt:updated");
+						$editorModal.find("#editor-blog-links-title").val($blogSection.find("h3").text());
+						$editorModal.find("#editor-blog-links-amount").val($list.data("blog-post-links-amount"));
+						$editorModal.find("#editor-blog-links-open-all").val($list.children("li:not(.dummy)").text());
+					} else {
+						$editorModal.find("#editor-blog-links-form")[0].reset();
+						$editorModal.find("#editor-blog-links-tags").trigger("liszt:updated");
+					}
 				});
 
-				$editorArea.redactor($.extend(getRedactorOptions(), {
-					iframe: true,
-					css: self.options.iframeStylePath,
-					formattingTags: ['p', 'plead', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4']
-				})).redactor("set", $column.pageeditorcolumn("val"));
+				if($column.children("[data-link-banner-id]").length) {
+					$editorModal.find("a[href=#editor-link-banner]").tab("show");
+				} else if($column.children(".dropdown-container, .linklist-container").length) {
+					$editorModal.find("a[href=#editor-link-list]").tab("show");
+				} else if($column.children(".blog-posts-section").length) {
+					$editorModal.find("a[href=#editor-blog-links]").tab("show");
+				} else if($column.find(".appointment-request-form").length) {
+					$editorModal.find("a[href=#editor-appointment]").tab("show");
+				} else if($column.find(".offer-form").length) {
+  				$editorModal.find("a[href=#editor-offer-form]").tab("show");
+  			} else if($column.find(".simple-post-preview").length) {
+				  $editorModal.find("a[href=#editor-blog-post-preview]").tab("show");
+				}
+
+				if(!$editorArea.data("redactor")) {
+					$editorArea.val($column.pageeditorcolumn("val"));
+					$editorArea.redactor($.extend(getRedactorOptions(), {
+						iframe: true,
+						css: self.options.iframeStylePath,
+						formattingTags: ['p', 'plead', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4']
+					}))
+				} else {
+					$editorArea.redactor("set", $column.pageeditorcolumn("val"));
+				}
+			});
+
+			this.element.sortable({
+				axis: "y",
+				handle: ".icon-resize-vertical",
+				start: function() {
+					self.element.addClass("ui-sortable-active");
+				},
+				stop: function() {
+					self.element.removeClass("ui-sortable-active");
+				}
 			});
 		},
 
@@ -99,6 +327,10 @@
 			this.rows().each(function() {
 				$(this).pageeditorrow("destroy");
 			});
+			this.element.removeClass("ui-sortable");
+			this.element.find("[style=]").each(function() {
+				$(this).removeAttr("style");
+			});
 		}
 	});
 })(jQuery);

data/app/assets/javascripts/th-page-editor/row.js

@@ -1,4 +1,5 @@
 //= require jquery.ui.widget
+//= require jquery.ui.sortable
 //= require th-page-editor/column
 
 (function($) {
@@ -15,14 +16,26 @@
 				$(this).pageeditorcolumn({ row: self });
 			});
 			this.enableColumnPlaceholders();
+			this.updateToolbar();
 		},
 
 		spanwidth: function() {
 			return this.options.editor.spanwidth();
 		},
 
+		updateToolbar: function() {
+			if(this.hasContentColumns() && this.element.children(".hovertool").length == 0) {
+				$("<span class=\"hovertool btn btn-mini\"><i class=icon-resize-vertical></i></span>").prependTo(this.element);
+			}
+		},
+
 		columns: function() {
-			return this.element.children(BASIC_SPANS_SELECTOR);
+			var columns = this.element.children(BASIC_SPANS_SELECTOR);
+			var self = this;
+			columns.each(function() {
+				$(this).pageeditorcolumn({ row: self });
+			});
+			return columns;
 		},
 
 		refreshColumnPlaceholders: function() {
@@ -34,6 +47,62 @@
 			return $('<div class=column-add-placeholder></div>').pageeditorcolumn({ row: this, span: span, offset: offset });
 		},
 
+		unprepareColumnsSortable: function() {
+			this.element.removeClass("ui-sortable");
+			this.columns().each(function() {
+				var $column = $(this);
+				var $next = $column.next();
+				if($next.length && $column.is(".column-add-placeholder") && $next.is(".column-add-placeholder")) {
+					$next.pageeditorcolumn("span", $next.pageeditorcolumn("span") + $column.pageeditorcolumn("span"));
+					$column.remove();
+				}
+			});
+		},
+
+		prepareColumnsSortable: function() {
+			this.disableColumnPlaceholders();
+			var $columns = this.columns();
+			var spanwidth = this.spanwidth();
+			if($columns.length == 0) {
+				for(var x=0; x<spanwidth; x++) {
+					this.createColumnPlaceholder(1).appendTo(this.element);
+				}
+			} else {
+				var self = this;
+				var columnsRemaining = spanwidth;
+				$.each(this.columns(), function() {
+					var offset = $(this).pageeditorcolumn("offset");
+					columnsRemaining -= offset + $(this).pageeditorcolumn("span");
+					if(offset > 0) {
+						for(var x=0; x<offset; x++) {
+							self.createColumnPlaceholder(1).insertBefore($(this));
+						}
+						$(this).pageeditorcolumn("offset", 0);
+					}
+				});
+				if(columnsRemaining > 0) {
+					for(var x=0; x<columnsRemaining; x++) {
+						this.createColumnPlaceholder(1).appendTo(this.element);
+					}
+				}
+			}
+
+			var self = this;
+			this.element.sortable({
+				axis: "x",
+				items: ">:not(.hovertool)",
+				stop: function() {
+					self.element.removeClass("ui-sortable-active");
+					self.unprepareColumnsSortable();
+				},
+				start: function() {
+					self.element.addClass("ui-sortable-active");
+				}
+			});
+			this.element.addClass("ui-sortable");
+			this._updatePlaceholderHeights();
+		},
+
 		disableColumnPlaceholders: function() {
 			this.columns().filter(".column-add-placeholder").each(function() {
 				$(this).next().pageeditorcolumn("offset", $(this).pageeditorcolumn("span"));
@@ -76,6 +145,7 @@
 				this.columns().each(function() {
 					$(this).pageeditorcolumn("destroy");
 				});
+				this.element.find(".hovertool").remove();
 			} else {
 				this.element.remove();
 			}

data/app/assets/stylesheets/simple_content_management/simple_menus.css.scss

@@ -25,7 +25,7 @@ form.edit_simple_content_management_simple_menu {
 				border: 1px solid #ccc;
 				border-right-width: 0;
 				width: 100%;
-				box-sizing: border-box;
+				@include box-sizing(border-box);
 
 				a.destroy {
 					display: inline-block;

data/app/assets/stylesheets/simple_content_management/simple_pages.css.scss

@@ -1,5 +1,25 @@
 @import "bootstrap-tagmanager";
 @import "jquery.ui.resizable";
+@import "chosen";
+
+.content-html-preview {
+	.row {
+		white-space: nowrap;
+		margin-bottom: 5px;
+	}
+
+	.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
+		display: inline-block;
+		white-space: normal;
+		float: none;
+		vertical-align: top;
+	}
+
+  .offer-form {
+    .step { display: none; }
+    .step0 { display: block; }
+  }
+}
 
 .simple-page-form {
 
@@ -18,18 +38,38 @@
 	}
 
 	.content-html-container {
-		.row {
-			white-space: nowrap;
+		.hovertool {
+			z-index: 91;
+			position: absolute;
+			border-radius: 22px;
+			width: 22px;
+			height: 22px;
+			margin: 0;
+			padding: 0;
+		}
+
+		// I cried myself to sleep after this...
+		.nested-editor:nth-child(2) > .row:first-child > .hovertool { margin-top: 22px; }
+		.nested-editor:nth-child(2) > .row:first-child > .nested-editor:nth-child(2) > .row:first-child > .hovertool { margin-top: 44px; }
+
+		&.ui-sortable-active > .row, .nested-editor.ui-sortable-active > .row {
+			box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6), 0 0 0 1px rgba(82, 168, 236, 0.8);
+			background: rgba(82, 168, 236, 0.075);
+		}
+
+		.row.ui-sortable-active > .column-add-placeholder {
+			box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6), 0 0 0 1px rgba(82, 168, 236, 0.8);
+			background: rgba(82, 168, 236, 0.075);
+			cursor: pointer;
+		}
+
+		.row > .hovertool {
+			margin-left: -22px;
 		}
+
 		.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
-			display: inline-block;
-			white-space: normal;
-			float: none;
-			vertical-align: top;
-
-			&:hover, &.ui-resizable-resizing {
-				outline: 1px solid rgba(82, 168, 236, 0.8);
-				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+			&:hover, &.ui-resizable-resizing, &.ui-sortable-helper {
+				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6), 0 0 0 1px rgba(82, 168, 236, 0.8);
 				background: rgba(82, 168, 236, 0.075);
 				cursor: pointer;
 
@@ -50,21 +90,12 @@
 			&.column-add-placeholder {
 				min-height: 60px;
 			}
-
-			> .hovertool {
-				z-index: 91;
-				position: absolute;
-				border-radius: 22px;
-				width: 22px;
-				height: 22px;
-				margin: 0;
-				padding: 0;
-			}
 		}
 	}
 }
 
 #content-editor {
+	position: absolute;
 	width: 800px;
 	margin-left: -400px;
 
@@ -78,6 +109,7 @@
 	.modal-body {
 		height: 480px;
 		max-height: 480px;
+		overflow: auto;
 
 		textarea {
 			height: 480px - 32px;