refactored admin/tags a bit, now inputs are hidden behind a modal so we can see moar tags

public/less/admin/admin.less

@@ -478,10 +478,14 @@
 			}
 
 			.tag-row {
-				a {
+				padding: 5px;
+				float: left;
+
+				.tag-item {
+					cursor: pointer;
 					display: inline-block;
 					margin-top: 22px;
-					font-size: 28px;
+					font-size: 11px;
 				}
 			}
 

public/src/forum/admin/tags.js

@@ -1,5 +1,5 @@
 "use strict";
-/*global define, socket, app, admin, utils*/
+/*global define, socket, app, admin, utils, bootbox, RELATIVE_PATH*/
 
 define('forum/admin/tags', ['forum/infinitescroll'], function(infinitescroll) {
 	var	Tags = {};
@@ -30,6 +30,45 @@ define('forum/admin/tags', ['forum/infinitescroll'], function(infinitescroll) {
 				});
 			}, 100);
 		});
+
+		$('.tag-item').on('click', function(ev) {
+			var tagName = $(this).text(),
+				tag = $(this),
+				row = tag.parents('.tag-row');
+
+			bootbox.dialog({
+				title: "Editing " + tagName + " tag",
+				message: $(this).parents('.tag-row').find('.tag-modal').html(),
+				buttons: {
+					success: {
+						label: "Save",
+						className: "btn-primary save",
+						callback: function() {
+							var modal = $('.bootbox'),
+								bgColor = modal.find('[data-name="bgColor"]').val(),
+									color = modal.find('[data-name="color"]').val();
+
+							row.find('[data-name="bgColor"]').val(bgColor);
+							row.find('[data-name="color"]').val(color);
+							row.find('.tag-item').css('background-color', bgColor).css('color', color);
+
+							save(tag);
+						}
+					},
+					info: {
+						label: "Click to view topics tagged \"" + tagName + "\"",
+						className: "btn-info",
+						callback: function() {
+							window.open(RELATIVE_PATH + '/tags/' + tagName);
+						}
+					}
+				}
+			});
+
+			setTimeout(function() {
+				handleColorPickers();
+			}, 500); // bootbox made me do it.
+		});
 	};
 
 	function handleColorPickers() {
@@ -58,7 +97,7 @@ define('forum/admin/tags', ['forum/infinitescroll'], function(infinitescroll) {
 			bgColor : tagRow.find('[data-name="bgColor"]').val(),
 			color : tagRow.find('[data-name="color"]').val()
 		};
-
+		console.log(data);
 		socket.emit('admin.tags.update', data, function(err) {
 			if (err) {
 				return app.alertError(err.message);

src/views/admin/tags.tpl

@@ -9,28 +9,25 @@
 
 
 	<div class="row">
+		<p>Click on a tag to modify its background and text colours</p>
 		<div class="tag-list">
 			<!-- BEGIN tags -->
-			<div class="tag-row col-md-12" data-tag="{tags.value}">
-				<div class="col-sm-5 col-xs-12">
-					<a href="{relative_path}/tags/{tags.value}" data-value="{tags.value}"><span class="tag-item" data-tag="{tags.value}" style="<!-- IF tags.color -->color: {tags.color};<!-- ENDIF tags.color --><!-- IF tags.bgColor -->background-color: {tags.bgColor};<!-- ENDIF tags.bgColor -->">{tags.value}</span><span class="tag-topic-count">{tags.score}</span></a>
+			<div class="tag-row" data-tag="{tags.value}">
+				<div data-value="{tags.value}">
+					<span class="tag-item" data-tag="{tags.value}" style="<!-- IF tags.color -->color: {tags.color};<!-- ENDIF tags.color --><!-- IF tags.bgColor -->background-color: {tags.bgColor};<!-- ENDIF tags.bgColor -->">{tags.value}</span><span class="tag-topic-count">{tags.score}</span>
 				</div>
-
-				<div class="col-sm-3 col-xs-12">
+				<div class="tag-modal hidden">
 					<div class="form-group">
 						<label for="bgColor">Background Colour</label>
 						<input id="bgColor" placeholder="#ffffff" data-name="bgColor" value="{tags.bgColor}" class="form-control category_bgColor" />
 					</div>
-				</div>
-				<div class="col-sm-3 col-xs-12">
-					<div class="form-group">
-						<label for="color">Text Colour</label>
-						<input id="color" placeholder="#a2a2a2" data-name="color" value="{tags.color}" class="form-control category_color" />
+					<div class="col-sm-3 col-xs-12">
+						<div class="form-group">
+							<label for="color">Text Colour</label>
+							<input id="color" placeholder="#a2a2a2" data-name="color" value="{tags.color}" class="form-control category_color" />
+						</div>
 					</div>
 				</div>
-				<div class="col-sm-1 col-xs-12">
-					<button class="btn btn-primary save">Save</button>
-				</div>
 			</div>
 			<!-- END tags -->
 		</div>