minor style updates

Src/VideoGameQuotes.Web/Models/EditQuoteModel.cs

@@ -56,6 +56,7 @@ namespace VideoGameQuotes.Web.Models {
 		private static string MakeTable<T>(string tableId, int cellsPerRow, IEnumerable<T> items, Func<T, string> cellDataCallback) {
 			var table = new TagBuilder("table");
 			table.MergeAttribute("id", tableId);
+			table.MergeAttribute("class", "checkbox-table");
 			var count = 0;
 			var row = new TagBuilder("tr");
 			var cell = new TagBuilder("td");

Src/VideoGameQuotes.Web/VideoGameQuotes.Web.csproj

@@ -147,6 +147,7 @@
     <Content Include="media\images\add.png" />
     <Content Include="media\images\cancel.png" />
     <Content Include="media\images\delete.png" />
+    <Content Include="media\images\error.png" />
     <Content Include="media\images\favicon.png" />
     <Content Include="media\images\loading.gif" />
     <Content Include="media\images\pencil.png" />

Src/VideoGameQuotes.Web/Views/Quote/EditQuoteForm.ascx

@@ -4,7 +4,7 @@
 
 				<div id="edit-quote-form">
 					<% using (Html.BeginForm(Model.ActionName, Model.ControllerName)) { %>
-						<%= Html.HiddenFor(model => model.QuoteId, new { id = "quote-id" })%>
+						<div><%= Html.HiddenFor(model => model.QuoteId, new { id = "quote-id" })%></div>
 
 						<p id="game-select">
 							<%= Html.LabelFor(model => model.GameId, new { @class = "label" })%>
@@ -24,7 +24,7 @@
 							<fieldset>
 								<legend>Create new game</legend>
 								
-								<p class="error-message"></p>
+								<p class="error-summary"></p>
 
 								<p>
 									<%= Html.Label("Name", "GameName", new { @class = "label" })%>
@@ -46,17 +46,13 @@
 								</p>
 								<% } %>
 
-								<p>
+								<p><span id="GameRegions" class="label">Regions</span></p>					
-									<span id="GameRegions" class="label">Regions</span>
-									<br />
 								<%= Model.MakeRegionTable() %>
-								</p>
 
 								<div id="system-select">
-									<span id="SystemIds" class="label">Systems</span>
+									<p><span id="SystemIds" class="label">Systems</span></p>
-									<br />
 									<%= Model.MakeSystemTable(Html) %>
-									<a href="#" id="create-system-link" class="create-new-link"></a>
+									<p><a href="#" id="create-system-link" class="create-new-link" title="create new system"></a></p>
 								</div>
 
 								<div id="create-system-form" class="subform">
@@ -84,16 +80,15 @@
 											<%= Html.TextBox("SystemReleaseDate", null) %>
 										</p>
 
-										<%= Html.Button("Create System", new { id = "create-system-submit" })%>
+										<%= Html.Button("Save System", new { id = "create-system-submit" })%>
 										<%= Html.Button("Cancel", new { id = "create-system-cancel" })%>
 									</fieldset>
 								</div>
 
 								<div id="publisher-select">
-									<span class="label">Publishers</span>
+									<p><span class="label">Publishers</span></p>
-									<br />
 									<%= Model.MakePublisherTable(Html) %>
-									<a href="#" id="create-publisher-link" class="create-new-link"></a>
+									<p><a href="#" id="create-publisher-link" class="create-new-link" title="create new publisher"></a></p>
 								</div>
 
 								<div id="create-publisher-form" class="subform">
@@ -115,12 +110,12 @@
 											<%= Html.TextBox("PublisherWebsite") %>
 										</p>
 
-										<%= Html.Button("Create Publisher", new { id = "create-publisher-submit" })%>
+										<%= Html.Button("Save Publisher", new { id = "create-publisher-submit" })%>
 										<%= Html.Button("Cancel", new { id = "create-publisher-cancel" })%>
 									</fieldset>
 								</div>
 
-								<%= Html.Button("Create Game", new { id = "create-game-submit" })%>
+								<%= Html.Button("Save Game", new { id = "create-game-submit" })%>
 								<%= Html.Button("Cancel", new { id = "create-game-cancel" })%>
 							</fieldset>
 						</div>
@@ -132,12 +127,9 @@
 						</p>
 
 						<div>
-							<p>
+							<p><span class="label">Categories</span></p>
-								<span class="label">Categories</span>
-							</p>
 							<%= Model.MakeCategoryTable(Html) %>
-
+							<p><a href="#" id="create-category-link" class="create-new-link" title="create new category"></a></p>
-							<a href="#" id="create-category-link" class="create-new-link"></a>
 						</div>
 
 						<% if (Model.QuoteId > 0) { %>
@@ -160,6 +152,6 @@
 
 						<hr />
 
-						<%= Html.Submit(Model.QuoteId > 0 ? "Save" : "Submit Quote") %>
+						<p><%= Html.Submit(Model.QuoteId > 0 ? "Save" : "Submit Quote") %></p>
 					<% } %>
 				</div>

Src/VideoGameQuotes.Web/media/css/global.css

@@ -28,8 +28,9 @@ p {
 	line-height: 1.2em;
 }
 fieldset {
-	border: 1px solid #999999;
+	border: 1px solid #CCCCCC;
 	padding: 5px;
+	margin: 5px;
 }
 legend {
 	font-weight: bold;
@@ -43,12 +44,26 @@ ul.menu {
 	list-style: none;
 }
 
-.validation-summary-errors {
+.error-message {
+	padding-left: 18px;
+	background: transparent url(/media/images/error.png) no-repeat;
+}
+.input-validation-error {
+	background-color: #FFCCCC;
+}
+.validation-summary-errors, .error-summary {
 	color: #000000;
 	border: 1px solid #000000;
 	background-color: #F7DBDB;
 	padding: 5px;
 }
+.error-summary {
+	display: none;
+}
+.field-validation-error {
+	margin-left: 5px;
+	color: #990000;
+}
 
 .inset {
 	margin-left: 20px;
@@ -98,9 +113,7 @@ ul.menu {
 	left: 0;
 }
 
-.input-validation-error {
+
-	background-color: #FFCCCC;
-}
 
 .contact-form textarea {
 	width: 100%;
@@ -112,13 +125,7 @@ ul.menu {
 	width: 600px;
 }
 
-.error-message {
+
-	display: none;
-	color: #990000;
-}
-.field-validation-error {
-	color: #990000;
-}
 
 .paging-menu p {
 	text-align: right;
@@ -152,7 +159,7 @@ ul.menu {
 	width: 500px;
 	height: 120px;
 }
-.create-new-link, .edit-link, .loading-link, .delete-link {
+.create-new-link, .edit-link, .loading-link, .delete-link, .submit-link, .cancel-link {
 	padding-left: 16px;
 	margin-left: 2px;
 }
@@ -168,6 +175,14 @@ ul.menu {
 .delete-link {
 	background: transparent url(/media/images/delete.png) left center no-repeat;
 }
+.submit-link {
+	background: transparent url(/media/images/accept.png) left center no-repeat;
+}
+.cancel-link {
+	background: transparent url(/media/images/cancel.png) left center no-repeat;
+}
+.checkbox-table {
+}
 
 #browse-default-menu li {
 	margin-bottom: 2px;

Src/VideoGameQuotes.Web/media/css/quote.css

@@ -54,9 +54,18 @@
 .quote-categories a {
 	border: 1px solid #999999 !important;
 	background-color: #BBBBBB;
-	padding: 5px 8px;
+	padding: 0 8px;
+	line-height: 26px;
 	display: block;
 	color: #FFFFFF !important;
+	position: relative;
+}
+.quote-categories a.game-link {
+	padding-left: 4px;
+}
+.quote-categories a.game-link img {
+	position: relative;
+	top: 3px;
 }
 .quote-categories a:hover {
 	background-color: #999999;

Src/VideoGameQuotes.Web/media/js/vgquotes.js

@@ -10,7 +10,7 @@
 		var $this = this;
 		
 		if (errorMessage !== null) {
-			$this.find(".error-message").first().text(errorMessage).show();
+			$this.find(".error-summary").first().text(errorMessage).show();
 		}
 		
 		$.each(errorData, function(inputFieldName, value) {
@@ -19,10 +19,13 @@
 				$input = $("#" + inputFieldName);
 			}
 			
-			if ($input.length) {
+			if ($input.length === 1) {
+				if ($input[0].localName === "INPUT") {
 					$input.addClass("input-validation-error");
+				}
+				
 				$("<span/>")
-					.addClass("field-validation-error")
+					.addClass("field-validation-error error-message")
 					.text(value)
 					.insertAfter($input);
 			}
@@ -37,26 +40,21 @@
 			.find(".input-validation-error")
 			.removeClass("input-validation-error")
 			.end()
-			.find(".error-message")
+			.find(".error-summary")
 			.empty()
 			.hide();
 	};
 	
 	$.vgquotes = function() {
-		var callApi = function(url, type, data, callback) {
+		var ajaxCallback = function(type, callback) {
-			$.ajax(url, {
+			return function(data) {
-				type: type,
+				if (typeof(data) === "undefined" || typeof(data.Error) === "undefined" || data.Error !== null) {
-				data: data,
+					callback.call(null, null);
-				success: callback,
+					return;
-				error: callback
+				}
-			});
-		};
 				
-		var cache = {
+				callback.call(null, data.Data[type + "s"][0]);
-			game: { },
+			};
-			system: { },
-			category: { },
-			publisher: { }
 		};
 		
 		return {
@@ -65,8 +63,7 @@
 			formatDate: function(date) { return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate(); },
 			parseAndFormatDate: function(jsonDate) { return $.vgquotes.formatDate($.vgquotes.parseDate(jsonDate)); },
 			ajaxErrorHandler: function(xhr) {
-				console.dir(xhr);
+				alert("An error occurred (" + xhr.status + ")");
-				alert("An error occurred (" + xhr.statusCode + ")");
 			},
 			preload: function(images) {
 				//MM_preloadImages(lulz)
@@ -75,22 +72,12 @@
 				});
 			},
 			loadingGif: "/media/images/loading.gif",
-			editIcon: "/media/images/pencil.png",
 			getResourceById: function(type, id, callback) {
 				id = id.toString();
-				// if (typeof(cache[type][id]) !== "undefined") {
+				$.ajax("/api/" + type + "/" + id, {
-					// callback.call(null, cache[type][id]);
+					type: "GET",
-					// return;
+					success: ajaxCallback(type, callback),
-				// }
+					error: ajaxCallback(type, callback)
-				
-				callApi("/api/" + type + "/" + id, "GET", null, function(data) {
-					if (typeof(data) === "undefined" || typeof(data.Error) === "undefined" || data.Error !== null) {
-						callback.call(null, null);
-						return;
-					}
-					
-					cache[type][id] = data.Data[type + "s"][0];
-					callback.call(null, cache[type][id]);
 				});
 			}
 		};
@@ -427,7 +414,7 @@
 		});
 		
 		$("#create-game-submit").click(function() {
-			var regions = [], publishers = [], systems = [], data = { GameName: $("#GameName").val(), GameWebsite: $("#GameWebsite").val() };
+			var regions = [], publishers = [], systems = [], data = { GameName: $("#GameName").val(), GameWebsite: $("#GameWebsite").val(), GameIcon: $("#GameIcon").val() };
 			$("input:checked[name='GameRegions']").each(function(index, input) { if (typeof(data.GameRegions) === "undefined") { data.GameRegions = []; } data.GameRegions.push(input.value); });
 			$("input:checked[name='SystemIds']").each(function(index, input) { if (typeof(data.SystemIds) === "undefined") { data.SystemIds = []; } data.SystemIds.push(input.value); });
 			$("input:checked[name='PublisherIds']").each(function(index, input) { if (typeof(data.PublisherIds) === "undefined") { data.PublisherIds = []; } data.PublisherIds.push(input.value); });
@@ -488,67 +475,141 @@
 			return false;
 		});
 
-		$("#create-category-link").click(function() {
+		var makeCategoryForm = function(categoryId) {
-			var $table = $("#category-checkbox-table");
+			if ($("#new-category-name").length > 0) {
+				return;
+			}
+			
+			var submitCategory = function() {
+				var $link = $(this);
+				var url = "/category/create";
+				var data = { CategoryName: $input.val() };
+				if (categoryId !== undefined) {
+					url = "/category/edit";
+					data.CategoryId = categoryId;
+				}
+				
+				$.ajax(url, {
+					data: data,
+					type: "POST",
+					beforeSend: function() { $link.toggleClass("submit-link loading-link"); },
+					success: function(data, status, $xhr) {
+						if (data.Error !== null) {
+							alert(data.Error);
+							return;
+						}
+
+						if (categoryId === undefined) {
+							//add category checkbox to table
+							var $checkbox = $("<input/>")
+								.css("display", "none")
+								.attr({
+									"id": "category_" + data.Data.Id,
+									"type": "checkbox",
+									"name": "CategoryIds",
+									"checked": "checked"
+								}).val(data.Data.Id);
+
+							var $label = $("<label/>")
+								.css("display", "none")
+								.attr("for", $checkbox.attr("id"))
+								.text(data.Data.Name);
+
+							$("#new-category-name").before($checkbox).before($label);
+						} else {
+							$("#new-category-name").siblings("label").text(data.Data.Name);
+						}
+					},
+					complete: function() {
+						$link.toggleClass("submit-link loading-link");
+						var $cell = $("#new-category-name").parent();
+						$cell
+							.children(":visible").remove().end()
+							.children().show();
+					}
+				});
+				
+				return false;
+			};
+			
+			var $table = $("#category-checkbox-table"), $cell;
+			var $submit = $("<a/>").attr({ href: "#", title: "submit" }).addClass("submit-link").click(submitCategory);
+			var $cancel = $("<a/>").attr({ href: "#", title: "cancel" }).addClass("cancel-link");
+			var $input = $("<input/>").attr({ id: "new-category-name", type: "text" }).bind("keyup", function(e) {
+				console.log(e.which);
+				if (e.which === 13) {
+					e.preventDefault(); //make sure the parent form doesn't get submitted
+					submitCategory.call($(this).siblings(".submit-link").get(0)); //make sure to invoke it with the correct context
+				} else if (e.which === 27) {
+					e.preventDefault();
+					//$cancel.onclick.call($(this).siblings(".cancel-link").get(0));
+					$cancel.click();
+				}
+			});
+			
+			if (categoryId !== undefined) {
+				$cell = $table.find("input[value='" + categoryId + "']").parent();
+				$cell.children().hide();
+				$cancel.click(function() {
+					$input.remove();
+					$submit.remove();
+					$cancel.remove();
+					$cell.children().show();
+					return false;
+				});
+				
+				$input.val($cell.find("label").text());
+				$cell.append($input).append($submit).append($cancel);
+				$input.select();
+				return;
+			}
+			
 			var $row = $table.find("tr:last");
-			if ($row.find("#new-category-name").length === 0) {
+			$cell = $("<td/>");
-				var $cell = $("<td/>");
+			if ($row.find("td").length === 5) {
-				if ($row.find("td").length === 8) {
 				$row = $("<tr/>");
 				$table.append($row);
 			}
 
 			$row.append($cell);
+			$input.val("Category name");
 			
-				var $input = $("<input/>").attr("id", "new-category-name").attr("type", "text").val("Category name");
+			$cancel.click(function() {
+				$cell.remove();
+				return false;
+			});
 
-				$input.bind("keypress", function(e) {
+			$cell.append($input).append($submit).append($cancel);
-					if (e.which === 13) {
+			$input.select();
-						e.preventDefault(); //make sure the parent form doesn't get submitted
+		};
 		
-						$input.attr("disabled", "disabled");
+		$("#create-category-link").click(function() {
-						$.ajax("/category/create", {
+			makeCategoryForm.call(this);
-							data: { Name: $input.val() },
+			return false;
+		});
+		$(".edit-category-link").click(function() {
+			var categoryId = $(this).siblings("input[name='CategoryIds']").val();
+			makeCategoryForm.call(this, categoryId);
+			return false;
+		});
+		$(".delete-category-link").click(function() {
+			var categoryId = $(this).siblings("input[name='CategoryIds']").val();
+			var $link = $(this);
+			$.ajax("/category/delete", {
 				type: "POST",
-							success: function(data, status, $xhr) {
+				data: { id: categoryId },
+				beforeSend: function() { $link.toggleClass("delete-link loading-link"); },
+				success: function(data) {
 					if (data.Error !== null) {
-									alert("An error occurred: " + data.Error);
+						alert(data.Error);
 						return;
 					}
 					
-								//add category checkbox to table
+					//remove checkbox
-								var $checkbox = $("<input/>")
+					$("#category-checkbox-table").find("input[value='" + categoryId + "']").parent().empty();
-									.attr({
-										"id": "category_" + data.Data.categoryId,
-										"type": "checkbox",
-										"name": "CategoryIds",
-										"checked": "checked"
-									}).val(data.Data.categoryId);
-
-								var $label = $("<label/>")
-									.attr("for", $checkbox.attr("id"))
-									.text(data.Data.categoryName);
-
-								$input.before($checkbox).before($label);
 				},
-							error: function($xhr, status, error) {
+				complete: function() { $link.toggleClass("delete-link loading-link"); }
-								alert("An error occurred");
-							},
-
-							complete: function() {
-								$input.remove();
-							}
 			});
-					}
-				});
-
-				$cell.append($input);
-				$input.select();
-				$(this).text("Cancel new category");
-			} else {
-				$row.find("td:last").remove();
-				$(this).text("Create new category");
-			}
 			
 			return false;
 		});
@@ -588,12 +649,12 @@
 		
 		$("#delete-game-link").click(function() {
 			var $link = $(this);
-			$link.toggleClass("delete-link loading-link");
 			var gameId = $("#GameId").val();
 			
 			$.ajax("/game/delete", {
 				type: "POST",
 				data: { id: gameId },
+				beforeSend: function() { $link.toggleClass("delete-link loading-link"); },
 				success: function(data, status, $xhr) {
 					if (data.Error !== null) {
 						alert(data.Error);