s434730/RandomSec
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

A bit of branding and re-laying out the front page.

Browse Source 
git-svn-id: http://google-refine.googlecode.com/svn/trunk@215 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-03-05 22:09:25 +00:00
parent 5c845f06bf
commit fe78fb8e30
9 changed files with 168 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/main/webapp/images/gridworks.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
src/main/webapp/images/metaweb-headerlogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/main/webapp/images/metaweb-sprite-vertical.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 953 B

2
src/main/webapp/index.html
View File

@ -1 +1 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Gridworks</title> <link rel="stylesheet" href="/styles/common.css" /> <link rel="stylesheet" href="/styles/index.css" /> <script type="text/javascript" src="externals/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="externals/date.js"></script> <script type="text/javascript" src="scripts/util/string.js"></script> <script type="text/javascript" src="scripts/index.js"></script> </head> <body> <div id="header"> <h1>Gridworks</h1> </div> <div id="body"> <div id="projects"></div> <h2>New Project</h2> <p>Create a new project by uploading a tab-separated value or comma-separated value file.</p> <form id="file-upload-form" method="post" enctype="multipart/form-data" action="/command/create-project-from-upload" accept-charset="UTF-8"> h1>Gridworks</h1> h1>Gridworks</h1> h1>Gridworks</h1> h1>Gridworks</h1> </div> h1>Gridworks</h1> h1>Gridworks</h1> <div id="body"> h1>Gridworks</h1> <div id="projects"></div> h1>Gridworks</h1> <h2>New Project</h2> h1>Gridworks</h1> <p>Create a new project by uploading a tab-separated value or comma-separated value file.</p> h1>Gridworks</h1> <div id="projects"></div> h1>Gridworks</h1> <input id="limit-input" name="limit" size="5" /> data rows h1>Gridworks</h1> <div id="projects"></div> <tr><td></td><td id="submit-container"> <input type="submit" value="Create Project" id="upload-file-button" /> h1>Gridworks</h1> <div id="projects"></div> </table> </form> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Gridworks</title> <link rel="stylesheet" href="/styles/common.css" /> <link rel="stylesheet" href="/styles/index.css" /> <script type="text/javascript" src="externals/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="externals/date.js"></script> <script type="text/javascript" src="scripts/util/string.js"></script> <script type="text/javascript" src="scripts/index.js"></script> </head> <body> <div id="header"> <a id="logo" href="http://www.metaweb.com/"><img alt="Metaweb" src="images/metaweb-headerlogo.png" /></a> </div> <div id="body"> <div id="body-empty"> <table><tr> <td id="body-empty-logo-container"><img src="images/gridworks.png" /> Gridworks</td> <td id="body-empty-create-project-panel-container"></td> </tr></table> </div> h1>Gridworks</h1> </div> <h2>New Project</h2> </div> <td id="body-nonempty-projects-container"> <div id="body"> <div id="projects"></div> <h2>New Project</h2> </tr></table> <p>Create a new project by uploading a tab-separated value or comma-separated value file.</p> </div> </div> <form id="file-upload-form" method="post" enctype="multipart/form-data" action="/command/create-project-from-upload" accept-charset="UTF-8"> <div id="body"> <div id="body"> h1>Gridworks</h1> </div> <div id="body"> </div> <div id="create-project-panel"> <form id="file-upload-form" method="post" enctype="multipart/form-data" action="/command/create-project-from-upload" accept-charset="UTF-8"> <div id="body"> <div id="projects"></div> <div id="body"> <h2>New Project</h2> <div id="body"> <p>Create a new project by uploading a tab-separated value or comma-separated value file.</p> </td></tr> <tr><td>Project Name:</td><td> <div id="projects"></div> </td></tr> <div id="projects"></div> h1>Gridworks</h1> <input id="limit-input" name="limit" size="5" /> data rows (optional) <div id="body"> <tr><td>Skip:</td><td> <div id="projects"></div> <div id="body"> </td></tr> <tr><td></td><td> <div id="projects"></div> <h2>New Project</h2> </td></tr> </table> </form> </div> </div> </body> </html>

2
src/main/webapp/project.html
View File

@ -1 +1 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Gridworks</title> <link type="text/css" rel="stylesheet" href="externals/suggest/css/suggest-1.0.3.min.css" /> <link type="text/css" rel="stylesheet" href="externals/jquery-ui/css/ui-lightness/jquery-ui-1.7.2.custom.css" /> <link rel="stylesheet" href="/styles/common.css" /> <link rel="stylesheet" href="/styles/util/menu.css" /> <link rel="stylesheet" href="/styles/util/dialog.css" /> <link rel="stylesheet" href="/styles/util/custom-suggest.css" /> <link rel="stylesheet" href="/styles/project.css" /> <link rel="stylesheet" href="/styles/project/history.css" /> <link rel="stylesheet" href="/styles/project/browsing.css" /> <link rel="stylesheet" href="/styles/project/process.css" /> <link rel="stylesheet" href="/styles/project/menu-bar.css" /> <link rel="stylesheet" href="/styles/views/data-table-view.css" /> <link rel="stylesheet" href="/styles/dialogs/expression-preview-dialog.css" /> <link rel="stylesheet" href="/styles/dialogs/recon-dialog.css" /> <link rel="stylesheet" href="/styles/dialogs/facet-based-edit-dialog.css" /> <link rel="stylesheet" href="/styles/protograph/schema-alignment-dialog.css" /> <script type="text/javascript" src="externals/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="externals/suggest/suggest-1.0.3.min.js"></script> <script type="text/javascript" src="externals/jquery-ui/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="externals/date.js"></script> <script type="text/javascript" src="scripts/util/misc.js"></script> <script type="text/javascript" src="scripts/util/url.js"></script> <script type="text/javascript" src="scripts/util/string.js"></script> <script type="text/javascript" src="scripts/util/ajax.js"></script> <script type="text/javascript" src="scripts/util/menu.js"></script> <script type="text/javascript" src="scripts/util/dialog.js"></script> <script type="text/javascript" src="scripts/util/dom.js"></script> <script type="text/javascript" src="scripts/util/custom-suggest.js"></script> <script type="text/javascript" src="scripts/project.js"></script> <script type="text/javascript" src="scripts/project/history-widget.js"></script> <script type="text/javascript" src="scripts/project/process-widget.js"></script> <script type="text/javascript" src="scripts/project/menu-bar.js"></script> <script type="text/javascript" src="scripts/project/browsing-engine.js"></script> <script type="text/javascript" src="scripts/project/scripting.js"></script> <script type="text/javascript" src="scripts/facets/list-facet.js"></script> <script type="text/javascript" src="scripts/facets/range-facet.js"></script> <script type="text/javascript" src="scripts/facets/text-search-facet.js"></script> <script type="text/javascript" src="scripts/views/data-table-view.js"></script> <script type="text/javascript" src="scripts/views/data-table-cell-ui.js"></script> <script type="text/javascript" src="scripts/views/data-table-column-header-ui.js"></script> <script type="text/javascript" src="scripts/dialogs/recon-dialog.js"></script> <script type="text/javascript" src="scripts/dialogs/expression-preview-dialog.js"></script> <script type="text/javascript" src="scripts/dialogs/facet-based-edit-dialog.js"></script> <script type="text/javascript" src="scripts/protograph/schema-alignment.js"></script> <script type="text/javascript" src="scripts/protograph/schema-alignment-ui-node.js"></script> <script type="text/javascript" src="scripts/protograph/schema-alignment-ui-link.js"></script> </head> <body> <div id="header"> <div id="path"><a class="app-path-section" href="./index.html">Gridworks</a> &raquo; </div> </div> <div id="body"> <div id="loading-message"><img src="images/large-spinner.gif" /> starting up ...</div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Gridworks</title> <link type="text/css" rel="stylesheet" href="externals/suggest/css/suggest-1.0.3.min.css" /> <link type="text/css" rel="stylesheet" href="externals/jquery-ui/css/ui-lightness/jquery-ui-1.7.2.custom.css" /> <link rel="stylesheet" href="/styles/common.css" /> <link rel="stylesheet" href="/styles/util/menu.css" /> <link rel="stylesheet" href="/styles/util/dialog.css" /> <link rel="stylesheet" href="/styles/util/custom-suggest.css" /> <link rel="stylesheet" href="/styles/project.css" /> <link rel="stylesheet" href="/styles/project/history.css" /> <link rel="stylesheet" href="/styles/project/browsing.css" /> <link rel="stylesheet" href="/styles/project/process.css" /> <link rel="stylesheet" href="/styles/project/menu-bar.css" /> <link rel="stylesheet" href="/styles/views/data-table-view.css" /> <link rel="stylesheet" href="/styles/dialogs/expression-preview-dialog.css" /> <link rel="stylesheet" href="/styles/dialogs/recon-dialog.css" /> <link rel="stylesheet" href="/styles/dialogs/facet-based-edit-dialog.css" /> <link rel="stylesheet" href="/styles/protograph/schema-alignment-dialog.css" /> <script type="text/javascript" src="externals/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="externals/suggest/suggest-1.0.3.min.js"></script> <script type="text/javascript" src="externals/jquery-ui/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="externals/date.js"></script> <script type="text/javascript" src="scripts/util/misc.js"></script> <script type="text/javascript" src="scripts/util/url.js"></script> <script type="text/javascript" src="scripts/util/string.js"></script> <script type="text/javascript" src="scripts/util/ajax.js"></script> <script type="text/javascript" src="scripts/util/menu.js"></script> <script type="text/javascript" src="scripts/util/dialog.js"></script> <script type="text/javascript" src="scripts/util/dom.js"></script> <script type="text/javascript" src="scripts/util/custom-suggest.js"></script> <script type="text/javascript" src="scripts/project.js"></script> <script type="text/javascript" src="scripts/project/history-widget.js"></script> <script type="text/javascript" src="scripts/project/process-widget.js"></script> <script type="text/javascript" src="scripts/project/menu-bar.js"></script> <script type="text/javascript" src="scripts/project/browsing-engine.js"></script> <script type="text/javascript" src="scripts/project/scripting.js"></script> <script type="text/javascript" src="scripts/facets/list-facet.js"></script> <script type="text/javascript" src="scripts/facets/range-facet.js"></script> <script type="text/javascript" src="scripts/facets/text-search-facet.js"></script> <script type="text/javascript" src="scripts/views/data-table-view.js"></script> <script type="text/javascript" src="scripts/views/data-table-cell-ui.js"></script> <script type="text/javascript" src="scripts/views/data-table-column-header-ui.js"></script> <script type="text/javascript" src="scripts/dialogs/recon-dialog.js"></script> <script type="text/javascript" src="scripts/dialogs/expression-preview-dialog.js"></script> <script type="text/javascript" src="scripts/dialogs/facet-based-edit-dialog.js"></script> <script type="text/javascript" src="scripts/protograph/schema-alignment.js"></script> <script type="text/javascript" src="scripts/protograph/schema-alignment-ui-node.js"></script> <script type="text/javascript" src="scripts/protograph/schema-alignment-ui-link.js"></script> </head> <body> <div id="header"> <a id="logo" href="http://www.metaweb.com/"><img alt="Metaweb" src="images/metaweb-headerlogo.png" /></a> <div id="path"><a class="app-path-section" href="./index.html">Gridworks</a> &raquo; </div> </div> <div id="body"> <div id="loading-message"><img src="images/large-spinner.gif" /> starting up ...</div> </div> <div id="footer"> <a href="about.html">About Gridworks</a> &bull; &copy; 2010 <a href="http://www.metaweb.com/">Metaweb Technologies, Inc.</a> </div> </body> </html>

45
src/main/webapp/scripts/index.js
View File

@ -38,26 +38,32 @@ 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(); }); 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(); var container = $("#projects").empty().show();
$('<h1>').text("Projects").appendTo(container);
$('<h2></h2>').text("Projects").appendTo(container); var renderProject = function(project) {
var div = $('<div>').addClass("project").appendTo(container);
var table = $('<table><tr><td></td><td>last modified</td><td></td></tr></table>').attr("cellspacing", "5")[0]; $('<a></a>')
.addClass("delete-project")
for (var i = 0; i < projects.length; i++) { .attr("title","Delete this project")
var project = projects[i]; .attr("href","")
var tr = table.insertRow(table.rows.length); .html("<img src='/images/close.png' />")
var td0 = tr.insertCell(0); .click(function() {
var td1 = tr.insertCell(1); if (window.confirm("Are you sure you want to delete project \"" + project.name + "\"?")) {
var td2 = tr.insertCell(2);
$('<a></a>').text(project.name).attr("href", "/project.html?project=" + project.id).appendTo(td0);
$('<span></span>').text(formatDate(project.date)).appendTo(td1);
$('<a></a>').attr("title","Delete this project").attr("href","").html("<img src='/images/close.png' />").click(function() {
if (window.confirm("Are you sure you want to delete this project?")) {
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: "/command/delete-project", url: "/command/delete-project",
@ -71,7 +77,14 @@ function renderProjects(data) {
}); });
} }
return false; return false;
}).appendTo(td2); }).appendTo(div);
$('<a></a>').text(project.name).attr("href", "/project.html?project=" + project.id).appendTo(div);
$('<span></span>').text(formatDate(project.date)).addClass("last-modified").appendTo(div);
};
for (var i = 0; i < projects.length; i++) {
renderProject(projects[i]);
} }
$(table).appendTo(container); $(table).appendTo(container);

34
src/main/webapp/styles/common.css
View File

@ -7,6 +7,7 @@ body {
font-size: 120%; font-size: 120%;
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #eee;
} }
table { table {
@ -22,27 +23,30 @@ input {
} }
#header { #header {
padding: 5px 20px; background: url(../images/metaweb-sprite-vertical.png) repeat-x scroll 0 0 #025B8D;
background: #666; border-bottom: 1px solid #FCE166;
color: #eee; color: #FFFFFF;
height: 47px;
padding-left: 20px;
padding-right: 20px;
position: relative;
} }
#header .app-path-section { #logo {
font-weight: bold; display: block;
padding: 13px 0;
} }
#header a.app-path-section { #footer {
text-decoration: none; font-size: 80%;
color: #eee; margin: 10px;
color: #888;
text-align: center;
} }
#header a.app-path-section:hover { #footer a {
text-decoration: underline; color: #448;
}
#header h1 {
margin: 0;
} }
#body { #body {
padding: 20px; background: white;
} }
a.action { a.action {

87
src/main/webapp/styles/index.css
View File

@ -1,16 +1,83 @@
#projects { #body-empty, #body-nonempty {
float:right;
margin: 20px;
border: 1px solid #ccc;
background: #fffee0;
padding: 20px;
display: none; display: none;
} }
#file-upload-form > table > tbody > tr > td { #body-template {
vertical-align: baseline; 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 { #body-nonempty {
padding: 20px 0px; 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;
} }

27
src/main/webapp/styles/project.css
View File

@ -1,3 +1,7 @@
#body {
padding: 20px;
}
#loading-message { #loading-message {
text-align: center; text-align: center;
font-size: 300%; font-size: 300%;
@ -6,3 +10,26 @@
font-style: italic; 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;
}