diff --git a/src/main/webapp/images/gridworks.png b/src/main/webapp/images/gridworks.png new file mode 100644 index 000000000..ad52b458f Binary files /dev/null and b/src/main/webapp/images/gridworks.png differ diff --git a/src/main/webapp/images/metaweb-headerlogo.png b/src/main/webapp/images/metaweb-headerlogo.png new file mode 100644 index 000000000..bd2a001d4 Binary files /dev/null and b/src/main/webapp/images/metaweb-headerlogo.png differ diff --git a/src/main/webapp/images/metaweb-sprite-vertical.png b/src/main/webapp/images/metaweb-sprite-vertical.png new file mode 100644 index 000000000..d47eb6460 Binary files /dev/null and b/src/main/webapp/images/metaweb-sprite-vertical.png differ diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html index f6ce84ff0..a20aafd5b 100644 --- a/src/main/webapp/index.html +++ b/src/main/webapp/index.html @@ -1 +1 @@ - Gridworks

New Project

Create a new project by uploading a tab-separated value or comma-separated value file.

Project Name:
Project Password:
optional, not protected, so use some password you don't care to reveal
Upload File:
Skip: initial data rows
Load up to: data rows
\ No newline at end of file + Gridworks
Gridworks
Gridworks
Data File:
Project Name:
Load up to: data rows (optional)
Skip: initial data rows (optional)
\ No newline at end of file diff --git a/src/main/webapp/project.html b/src/main/webapp/project.html index f25f59d9a..384f62026 100644 --- a/src/main/webapp/project.html +++ b/src/main/webapp/project.html @@ -1 +1 @@ - Gridworks
starting up ...
\ No newline at end of file + Gridworks
starting up ...
\ No newline at end of file diff --git a/src/main/webapp/scripts/index.js b/src/main/webapp/scripts/index.js index fa249d422..4ae8ea4bb 100644 --- a/src/main/webapp/scripts/index.js +++ b/src/main/webapp/scripts/index.js @@ -38,40 +38,53 @@ function renderProjects(data) { } } - if (projects.length > 0) { + if (projects.length == 0) { + $('#body-empty').show(); + $('#create-project-panel').remove().appendTo($('#body-empty-create-project-panel-container')); + } else { + $('#body-nonempty').show(); + $('#create-project-panel').remove().appendTo($('#body-nonempty-create-project-panel-container')); + projects.sort(function(a, b) { return b.date.getTime() - a.date.getTime(); }); + if (projects.length > 10) { + $('#body-nonempty-logo-container').css("vertical-align", "top"); + $('#body-nonempty-create-project-panel-container').css("vertical-align", "top"); + } var container = $("#projects").empty().show(); - - $('

').text("Projects").appendTo(container); - - var table = $('
last modified
').attr("cellspacing", "5")[0]; - - for (var i = 0; i < projects.length; i++) { - var project = projects[i]; - var tr = table.insertRow(table.rows.length); - var td0 = tr.insertCell(0); - var td1 = tr.insertCell(1); - var td2 = tr.insertCell(2); + $('

').text("Projects").appendTo(container); - $('').text(project.name).attr("href", "/project.html?project=" + project.id).appendTo(td0); - $('').text(formatDate(project.date)).appendTo(td1); - $('').attr("title","Delete this project").attr("href","").html("").click(function() { - if (window.confirm("Are you sure you want to delete this project?")) { - $.ajax({ - type: "POST", - url: "/command/delete-project", - data: { "project" : project.id }, - dataType: "json", - success: function (data) { - if (data && typeof data['code'] != 'undefined' && data.code == "ok") { - window.location.reload() + var renderProject = function(project) { + var div = $('
').addClass("project").appendTo(container); + + $('') + .addClass("delete-project") + .attr("title","Delete this project") + .attr("href","") + .html("") + .click(function() { + if (window.confirm("Are you sure you want to delete project \"" + project.name + "\"?")) { + $.ajax({ + type: "POST", + url: "/command/delete-project", + data: { "project" : project.id }, + dataType: "json", + success: function (data) { + if (data && typeof data['code'] != 'undefined' && data.code == "ok") { + window.location.reload() + } } - } - }); - } - return false; - }).appendTo(td2); + }); + } + return false; + }).appendTo(div); + + $('').text(project.name).attr("href", "/project.html?project=" + project.id).appendTo(div); + $('').text(formatDate(project.date)).addClass("last-modified").appendTo(div); + }; + + for (var i = 0; i < projects.length; i++) { + renderProject(projects[i]); } $(table).appendTo(container); diff --git a/src/main/webapp/styles/common.css b/src/main/webapp/styles/common.css index a41f44da8..9cb68e986 100644 --- a/src/main/webapp/styles/common.css +++ b/src/main/webapp/styles/common.css @@ -7,6 +7,7 @@ body { font-size: 120%; margin: 0; padding: 0; + background: #eee; } table { @@ -22,27 +23,30 @@ input { } #header { - padding: 5px 20px; - background: #666; - color: #eee; + background: url(../images/metaweb-sprite-vertical.png) repeat-x scroll 0 0 #025B8D; + border-bottom: 1px solid #FCE166; + color: #FFFFFF; + height: 47px; + padding-left: 20px; + padding-right: 20px; + position: relative; } -#header .app-path-section { - font-weight: bold; +#logo { + display: block; + padding: 13px 0; } -#header a.app-path-section { - text-decoration: none; - color: #eee; +#footer { + font-size: 80%; + margin: 10px; + color: #888; + text-align: center; } -#header a.app-path-section:hover { - text-decoration: underline; -} - -#header h1 { - margin: 0; +#footer a { + color: #448; } #body { - padding: 20px; + background: white; } a.action { diff --git a/src/main/webapp/styles/index.css b/src/main/webapp/styles/index.css index ddf2adfdc..a3fb98c3f 100644 --- a/src/main/webapp/styles/index.css +++ b/src/main/webapp/styles/index.css @@ -1,16 +1,83 @@ -#projects { - float:right; - margin: 20px; - border: 1px solid #ccc; - background: #fffee0; - padding: 20px; +#body-empty, #body-nonempty { display: none; } -#file-upload-form > table > tbody > tr > td { - vertical-align: baseline; +#body-template { + display: none; +} +#body-empty, #body-nonempty { + width: 800px; + padding: 100px 0; + margin: auto; +} +#body-empty > table, #body-nonempty > table { + width: 100%; + border-collapse: collapse: +} +#body-empty > table > tbody > tr > td, #body-nonempty > table > tbody > tr > td { + padding: 20px; + vertical-align: middle; +} +#body-empty-logo-container, #body-nonempty-logo-container { + width: 1%; + white-space: pre; + font-size: 400%; +} +#body-empty-create-project-panel-container, #body-nonempty-create-project-panel-container { + border-left: 3px solid #eee; } -#submit-container { - padding: 20px 0px; -} \ No newline at end of file +#body-nonempty { + width: 1000px; +} +#body-nonempty-logo-container { + font-size: 300%; +} + +#body-nonempty-projects-container { + border-left: 3px solid #eee; +} + +#create-project-panel-layout { + width: 100%; + border-collapse: collapse; +} +#create-project-panel-layout > tbody > tr > td { + padding-right: 7px; + padding-bottom: 7px; +} +#create-project-panel-layout > tbody > tr > td:last-child { + padding-right: 0px; +} +#create-project-panel-layout > tbody > tr:last-child > td { + padding-bottom: 0px; +} + +#projects { + white-space: pre; +} +#projects h1 { + margin: 0; + margin-bottom: 1em; + font-size: 120%; + color: #aaa +} +#projects a { + text-decoration: none; + font-weight: bold; + color: #004; +} +#projects a:hover { + text-decoration: underline; + color: #008; +} +.project { + margin: 0.25em 0; +} +.delete-project { + margin-right: 0.5em; +} +.last-modified { + margin: 0 0.25em; + color: #aaa; +} diff --git a/src/main/webapp/styles/project.css b/src/main/webapp/styles/project.css index 1ad125616..e6f50de48 100644 --- a/src/main/webapp/styles/project.css +++ b/src/main/webapp/styles/project.css @@ -1,3 +1,7 @@ +#body { + padding: 20px; +} + #loading-message { text-align: center; font-size: 300%; @@ -6,3 +10,26 @@ font-style: italic; } +#logo { + padding: 13px 0; + padding-right: 13px; + border-right: 1px solid #ccc; + float: left; +} +#path { + position: absolute; + top: 50%; + left: 170px; + margin-top: -0.5em; + line-height: 1em; +} +#path .app-path-section { + font-weight: bold; +} +#path a.app-path-section { + text-decoration: none; + color: #eee; +} +#path a.app-path-section:hover { + text-decoration: underline; +}