minor style updates

This commit is contained in:
tmont 2011-02-24 20:28:35 +00:00
parent e2bb88498d
commit 756a9c629e
7 changed files with 205 additions and 126 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -54,9 +54,18 @@
.quote-categories a { .quote-categories a {
border: 1px solid #999999 !important; border: 1px solid #999999 !important;
background-color: #BBBBBB; background-color: #BBBBBB;
padding: 5px 8px; padding: 0 8px;
line-height: 26px;
display: block; display: block;
color: #FFFFFF !important; 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 { .quote-categories a:hover {
background-color: #999999; background-color: #999999;

Binary file not shown.

After

Width:  |  Height:  |  Size: 701 B

View File

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