Fixed front page to James' new design.
git-svn-id: http://google-refine.googlecode.com/svn/trunk@588 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh
parent
883fc65304
commit
e9b630bd76
Binary file not shown.
|
Before Width: | Height: | Size: 392 B After Width: | Height: | Size: 238 B |
File diff suppressed because one or more lines are too long
@ -33,6 +33,8 @@ function formatDate(d) {
|
||||
return "Today " + d.toString("h:mm tt");
|
||||
} else if (d.between(yesterday, today)) {
|
||||
return "Yesterday " + d.toString("h:mm tt");
|
||||
} else if (d.getYear() == today.getYear()) {
|
||||
return d.toString("ddd, MMM d");
|
||||
} else {
|
||||
return d.toString("ddd, MMM d, yyyy");
|
||||
}
|
||||
@ -71,30 +73,20 @@ function renderProjects(data) {
|
||||
if (!projects.length) {
|
||||
$('<div>')
|
||||
.addClass("message")
|
||||
.text("No existing project. Use form on left to create.")
|
||||
.text("No existing project. Use form on right to create.")
|
||||
.appendTo(container);
|
||||
} else {
|
||||
var table = $(
|
||||
'<table><tr>' +
|
||||
'<th>Project Name</th>' +
|
||||
'<th>Last Modified</th>' +
|
||||
'<th></th>' +
|
||||
'<th>Name</th>' +
|
||||
'<th align="right">Last Modified</th>' +
|
||||
'</tr></table>'
|
||||
).appendTo(container)[0];
|
||||
|
||||
var renderProject = function(project) {
|
||||
var tr = table.insertRow(table.rows.length);
|
||||
tr.className = "project " + (table.rows.length % 2 ? "even" : "odd");
|
||||
|
||||
$('<a></a>')
|
||||
.text(project.name)
|
||||
.attr("href", "/project.html?project=" + project.id)
|
||||
.appendTo(tr.insertCell(tr.cells.length));
|
||||
|
||||
$('<span></span>')
|
||||
.text(formatDate(project.date))
|
||||
.addClass("last-modified")
|
||||
.appendTo(tr.insertCell(tr.cells.length));
|
||||
tr.className = "project";
|
||||
|
||||
$('<a></a>')
|
||||
.addClass("delete-project")
|
||||
@ -117,6 +109,17 @@ function renderProjects(data) {
|
||||
}
|
||||
return false;
|
||||
}).appendTo(tr.insertCell(tr.cells.length));
|
||||
|
||||
$('<a></a>')
|
||||
.text(project.name)
|
||||
.attr("href", "/project.html?project=" + project.id)
|
||||
.appendTo(tr.insertCell(tr.cells.length));
|
||||
|
||||
$('<div></div>')
|
||||
.text(formatDate(project.date))
|
||||
.addClass("last-modified")
|
||||
.appendTo(tr.insertCell(tr.cells.length));
|
||||
|
||||
};
|
||||
|
||||
for (var i = 0; i < projects.length; i++) {
|
||||
@ -136,10 +139,14 @@ function fetchProjects() {
|
||||
);
|
||||
}
|
||||
|
||||
function showHide(toHide, toShow) {
|
||||
$("#" + toHide).hide();
|
||||
$("#" + toShow).show();
|
||||
}
|
||||
|
||||
function onLoad() {
|
||||
fetchProjects();
|
||||
|
||||
$("#form-tabs").tabs();
|
||||
$("#upload-file-button").click(onClickUploadFileButton);
|
||||
$("#more-options-link").click(function() {
|
||||
$("#more-options-controls").hide();
|
||||
@ -147,7 +154,7 @@ function onLoad() {
|
||||
});
|
||||
|
||||
$("#gridworks-version").text(
|
||||
GridworksVersion.version + "-" + GridworksVersion.revision
|
||||
"Version " + GridworksVersion.version + "-" + GridworksVersion.revision
|
||||
);
|
||||
if (isThereNewRelease()) {
|
||||
$('<div id="version-message">' +
|
||||
|
||||
@ -93,10 +93,12 @@ div.input-container > input, div.input-container > textarea {
|
||||
|
||||
a.action,
|
||||
a.quiet-link {
|
||||
margin: 0 3px;
|
||||
text-decoration: none;
|
||||
color: #448;
|
||||
}
|
||||
a.action {
|
||||
margin: 0 3px;
|
||||
}
|
||||
a.action:hover,
|
||||
a.quiet-link:hover {
|
||||
color: #88f;
|
||||
|
||||
91
src/main/webapp/styles/freebase.css
Normal file
91
src/main/webapp/styles/freebase.css
Normal file
@ -0,0 +1,91 @@
|
||||
/*
|
||||
-----------------------------------------
|
||||
Buttons
|
||||
-----------------------------------------
|
||||
*/
|
||||
|
||||
/*
|
||||
|
||||
Active button currently is used to for buttons which are the primary call to action.
|
||||
This should be updated so that .active represents the state of a button, not it's
|
||||
relative importance in a workflow. Suggested class name would be .primary, which
|
||||
may or may not be .active
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
button, a.button-link {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5;
|
||||
background: #e6e6e6 url(/images/freebase-sprite-vertical.png) repeat-x 0 -3380px;
|
||||
color: #666;
|
||||
font-weight:bold;
|
||||
margin: 2px;
|
||||
padding: 3px 6px;
|
||||
border: 1px solid #c5c5c5;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
display: inline-block;
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.button-primary,
|
||||
input[type=submit].button-primary,
|
||||
button.active {
|
||||
color: #fff;
|
||||
border: 1px solid #dc5800;
|
||||
font-weight: bold;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
display: inline-block;
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
margin: 2px;
|
||||
padding: 3px 6px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5;
|
||||
background: #fa7c0a url(/images/freebase-sprite-vertical.png) repeat-x 0 -3450px;
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
button.disabled,
|
||||
button.primary.disabled,
|
||||
a.button-link.disabled,
|
||||
a.button-link-primary.disabled {
|
||||
background: #e6e6e6 url(/images/freebase-sprite-vertical.png) repeat-x 0 -3380px;
|
||||
color: #b3b3b3;
|
||||
border: 1px solid #d6d6d6;
|
||||
cursor: default;
|
||||
}
|
||||
button[disabled]:hover,
|
||||
button.disabled:hover {
|
||||
cursor: default;
|
||||
border: 1px solid #d6d6d6;
|
||||
}
|
||||
|
||||
a.button-link-primary {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
background: #fa7c0a url(/images/freebase-sprite-vertical.png) repeat-x 0 -3450px;
|
||||
margin: 2px;
|
||||
color: #fff;
|
||||
padding: 3px 6px;
|
||||
border: 1px solid #dc5800;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
display: inline-block;
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
.button-link:hover,
|
||||
a.button-link-primary:hover {
|
||||
border: 1px solid #61d7f7;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -1,53 +1,64 @@
|
||||
body {
|
||||
background: #f4f7fa;
|
||||
}
|
||||
#body {
|
||||
padding: 50px;
|
||||
background: url("/images/gridworks-watermark.png") no-repeat -70px -70px;
|
||||
padding: 40px;
|
||||
}
|
||||
#body > div.grid-layout > table > tbody > tr > th,
|
||||
#body > div.grid-layout > table > tbody > tr > td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#top-panel {
|
||||
margin-bottom: 15px;
|
||||
#gridworks-version {
|
||||
float: right;
|
||||
color: #aaa;
|
||||
margin: 5px;
|
||||
}
|
||||
#top-panel h1 {
|
||||
|
||||
#welcome-panel {
|
||||
width: 230px;
|
||||
min-width: 230px !important;
|
||||
font-size: 10pt;
|
||||
line-height: 150%;
|
||||
color: #666;
|
||||
}
|
||||
#welcome-panel h1 {
|
||||
font-size: 15pt;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
#gridworks-info {
|
||||
color: #aaa;
|
||||
font-weight: bold;
|
||||
color: #848C8E;
|
||||
}
|
||||
|
||||
#form-tabs > div {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
#create-project-panel h1 {
|
||||
font-size: 120%;
|
||||
margin: 2em 0 1em 0;
|
||||
}
|
||||
#projects-panel {
|
||||
width: 400px;
|
||||
}
|
||||
#projects {
|
||||
background: #DBE8EB;
|
||||
div.island {
|
||||
background: #dbe8eb;
|
||||
padding: 4px;
|
||||
-moz-border-radius: 7px;
|
||||
-webkit-border-radius: 7px;
|
||||
padding: 15px;
|
||||
}
|
||||
div.round-corners {
|
||||
border: 1px solid #c5d1d4;
|
||||
-moz-border-radius: 7px;
|
||||
-webkit-border-radius: 7px;
|
||||
}
|
||||
|
||||
#projects-panel {
|
||||
width: 270px;
|
||||
min-width: 270px !important;
|
||||
}
|
||||
#projects {
|
||||
background: white;
|
||||
}
|
||||
|
||||
#projects h1 {
|
||||
margin: 0;
|
||||
margin-bottom: 0.5em;
|
||||
padding: 0;
|
||||
font-size: 120%;
|
||||
padding: 7px 10px;
|
||||
font-size: 13pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#projects-container {
|
||||
border: 1px solid #C5D1D4;
|
||||
background: white;
|
||||
padding: 1px;
|
||||
height: 30em;
|
||||
height: 40em;
|
||||
overflow: auto;
|
||||
}
|
||||
#projects-container .message {
|
||||
@ -60,24 +71,97 @@
|
||||
width: 100%;
|
||||
}
|
||||
#projects-container td, #projects-container th {
|
||||
padding: 5px;
|
||||
border-right: 1px solid white;
|
||||
padding: 3px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#projects-container td:first-child, #projects-container th:first-child {
|
||||
padding-left: 7px;
|
||||
}
|
||||
#projects-container td:last-child, #projects-container th:last-child {
|
||||
padding-right: 7px;
|
||||
}
|
||||
#projects-container th {
|
||||
background: #C5D1D4;
|
||||
}
|
||||
#projects-container tr.project.even {
|
||||
background: #DBE8EB;
|
||||
font-weight: normal;
|
||||
background: #f4f7fa;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.project a {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
color: #004;
|
||||
font-weight: normal;
|
||||
color: #1170a3;
|
||||
}
|
||||
.project a:hover {
|
||||
text-decoration: underline;
|
||||
color: #008;
|
||||
}
|
||||
.last-modified {
|
||||
white-space: pre;
|
||||
text-align: right;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
#forms {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
a.form-tab-link {
|
||||
display: block;
|
||||
float: right;
|
||||
text-decoration: none;
|
||||
font-size: 10pt;
|
||||
font-weight: bold;
|
||||
color: #1170a3;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
#form-tabs-create-project, #form-tabs-import-project, #form-create-project-more-options {
|
||||
padding: 7px 10px;
|
||||
}
|
||||
#form-tabs-create-project, #form-tabs-import-project {
|
||||
background: white;
|
||||
width: 400px;
|
||||
}
|
||||
#form-tabs-create-project h1, #form-tabs-import-project h1 {
|
||||
margin: 0;
|
||||
padding: 0px 0px 15px 0px;
|
||||
font-size: 13pt;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
#form-create-project-more-options h2 {
|
||||
font-size: 100%;
|
||||
color: black;
|
||||
margin: 0;
|
||||
}
|
||||
#form-create-project-more-options > table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
#form-create-project-more-options > table > tbody > tr > td {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
div.field-group {
|
||||
margin-top: 0.7em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.field-label {
|
||||
font-weight: bold;
|
||||
white-space: pre;
|
||||
}
|
||||
div.field-label {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
td.field-label {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
div.field-body {
|
||||
white-space: pre;
|
||||
}
|
||||
div.field-hint {
|
||||
font-size: 90%;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#version-message {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user