widgets page first pass

public/src/forum/admin/extend/widgets.js

@@ -23,9 +23,9 @@ define('forum/admin/extend/widgets', function() {
 	function prepareWidgets() {
 		$('[data-location="drafts"]').insertAfter($('[data-location="drafts"]').closest('.tab-content'));
 
-		$('#widgets .available-widgets .panel').draggable({
+		$('#widgets .available-widgets .widget-panel').draggable({
 			helper: function(e) {
-				return $(e.target).parents('.panel').clone().addClass('block').width($(e.target.parentNode).width());
+				return $(e.target).parents('.widget-panel').clone().addClass('block').width($(e.target.parentNode).width());
 			},
 			distance: 10,
 			connectToSortable: ".widget-area"
@@ -66,9 +66,9 @@ define('forum/admin/extend/widgets', function() {
 			},
 			connectWith: "div"
 		}).on('click', '.toggle-widget', function() {
-			$(this).parents('.panel').children('.panel-body').toggleClass('hidden');
+			$(this).parents('.widget-panel').children('.panel-body').toggleClass('hidden');
 		}).on('click', '.delete-widget', function() {
-			var panel = $(this).parents('.panel');
+			var panel = $(this).parents('.widget-panel');
 
 			bootbox.confirm('Are you sure you wish to delete this widget?', function(confirm) {
 				if (confirm) {
@@ -76,7 +76,7 @@ define('forum/admin/extend/widgets', function() {
 				}
 			});
 		}).on('dblclick', '.panel-heading', function() {
-			$(this).parents('.panel').children('.panel-body').toggleClass('hidden');
+			$(this).parents('.widget-panel').children('.panel-body').toggleClass('hidden');
 		});
 
 		$('#widgets .save').on('click', saveWidgets);
@@ -92,7 +92,7 @@ define('forum/admin/extend/widgets', function() {
 					area = el.children('.widget-area'),
 					widgets = [];
 
-				area.find('.panel[data-widget]').each(function() {
+				area.find('.widget-panel[data-widget]').each(function() {
 					var widgetData = {},
 						data = $(this).find('form').serializeArray();
 

src/views/admin/extend/widgets.tpl

@@ -1,8 +1,9 @@
 <div id="widgets">
-	<h3>Widgets</h3>
-
+	<div class="col-md-7">
+		<div class="panel panel-default">
+			<div class="panel-heading">Widget Areas</div>
+			<div class="panel-body">
 				<div class="row">
-		<div class="col-xs-6 pull-right">
 					<ul class="nav nav-pills">
 					<!-- BEGIN templates -->
 						<li class="<!-- IF @first -->active<!-- ENDIF @first -->"><a href="#" data-template="{templates.template}" data-toggle="pill">{templates.template}</a></li>
@@ -26,16 +27,23 @@
 
 					<button class="btn btn-success save pull-right">Save</button>
 				</div>
-		<div class="col-xs-6 pull-left">
+			</div>
+		</div>
+	</div>
+
+	<div class="col-md-5">
+		<div class="panel panel-default">
+			<div class="panel-heading">Available Widgets</div>
+			<div class="panel-body">
 				<div class="available-widgets">
-				<h4>Available Widgets <small>Drag and drop widgets into templates</small></h4>
+					<p>Drag and drop widgets into templates</p>
 					<!-- IF !widgets.length -->
 					<div class="alert alert-info">No widgets found! Activate the essential widgets plugin in the <a href="/admin/plugins">plugins</a> control panel.</div>
 					<!-- ENDIF !widgets.length -->
 					<div class="row">
 						<!-- BEGIN widgets -->
-					<div class="col-lg-6 col-md-12">
-						<div data-widget="{widgets.widget}" class="panel panel-default pointer">
+						<div class="col-lg-3 col-md-12">
+							<div data-widget="{widgets.widget}" class="panel widget-panel panel-default pointer">
 								<div class="panel-heading">
 									<strong>{widgets.name}</strong>
 									<small><br />{widgets.description}</small>
@@ -50,7 +58,13 @@
 						<!-- END widgets -->
 					</div>
 				</div>
-			<hr />
+			</div>
+		</div>
+		<div class="panel panel-default">
+			<div class="panel-heading">Available Containers</div>
+			<div class="panel-body">
+				<div class="available-widgets">
+					<p>Drag and drop on top of any active widget</p>
 					<div class="available-containers">
 						<h4>Available Containers <small>Drag and drop on top of any widget</small></h4>
 						<div class="containers">
@@ -98,4 +112,6 @@
 					</div>
 				</div>
 			</div>
+		</div>
+	</div>
 </div>