')
.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 = $(
'
' +
- '| Project Name | ' +
- 'Last Modified | ' +
' | ' +
+ 'Name | ' +
+ 'Last Modified | ' +
'
'
).appendTo(container)[0];
var renderProject = function(project) {
var tr = table.insertRow(table.rows.length);
- tr.className = "project " + (table.rows.length % 2 ? "even" : "odd");
-
- $('
')
- .text(project.name)
- .attr("href", "/project.html?project=" + project.id)
- .appendTo(tr.insertCell(tr.cells.length));
-
- $('
')
- .text(formatDate(project.date))
- .addClass("last-modified")
- .appendTo(tr.insertCell(tr.cells.length));
+ tr.className = "project";
$('
')
.addClass("delete-project")
@@ -117,6 +109,17 @@ function renderProjects(data) {
}
return false;
}).appendTo(tr.insertCell(tr.cells.length));
+
+ $('
')
+ .text(project.name)
+ .attr("href", "/project.html?project=" + project.id)
+ .appendTo(tr.insertCell(tr.cells.length));
+
+ $('
')
+ .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()) {
$('
' +
diff --git a/src/main/webapp/styles/common.css b/src/main/webapp/styles/common.css
index 51607b55a..38ef4e904 100644
--- a/src/main/webapp/styles/common.css
+++ b/src/main/webapp/styles/common.css
@@ -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;
diff --git a/src/main/webapp/styles/freebase.css b/src/main/webapp/styles/freebase.css
new file mode 100644
index 000000000..0d5c7993b
--- /dev/null
+++ b/src/main/webapp/styles/freebase.css
@@ -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;
+ }
diff --git a/src/main/webapp/styles/index.css b/src/main/webapp/styles/index.css
index c34653492..c30b9ef20 100644
--- a/src/main/webapp/styles/index.css
+++ b/src/main/webapp/styles/index.css
@@ -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 {
