Fixed front page to James' new design.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@588 7d457c2a-affb-35e4-300a-418c747d4874

src/main/webapp/scripts/index.js

@@ -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");
+            tr.className = "project";
-            
-            $('<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));
             
             $('<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">' +

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;

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;
+    }

src/main/webapp/styles/index.css

@@ -1,53 +1,64 @@
+body {
+    background: #f4f7fa;
+}
 #body {
-    padding: 50px;
+    padding: 40px;
-    background: url("/images/gridworks-watermark.png") no-repeat -70px -70px;
 }
 #body > div.grid-layout > table > tbody > tr > th, 
 #body > div.grid-layout > table > tbody > tr > td {
     vertical-align: top;
 }
 
-#top-panel {
+#gridworks-version {
-    margin-bottom: 15px;
+    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;
+    font-weight: bold;
-}
+    color: #848C8E;
-#gridworks-info {
-    color: #aaa;
 }
 
-#form-tabs > div {
+div.island {
-    height: 400px;
+    background: #dbe8eb;
-}
+    padding: 4px;
-
-#create-project-panel h1 {
-    font-size: 120%;
-    margin: 2em 0 1em 0;
-}
-#projects-panel {
-    width: 400px;
-}
-#projects {
-    background: #DBE8EB;
     -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: 7px 10px;
-    padding: 0;
+    font-size: 13pt;
-    font-size: 120%;
+    font-weight: bold;
 }
 
 #projects-container {
-    border: 1px solid #C5D1D4;
+    height: 40em;
-    background: white;
-    padding: 1px;
-    height: 30em;
     overflow: auto;
 }
 #projects-container .message {
@@ -60,24 +71,97 @@
     width: 100%;
 }
 #projects-container td, #projects-container th {
-    padding: 5px;
+    padding: 3px;
-    border-right: 1px solid white;
     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;
+    font-weight: normal;
-}
+    background: #f4f7fa;
-#projects-container tr.project.even {
+    border-bottom: 1px solid #eee;
-    background: #DBE8EB;
 }
 .project a {
     text-decoration: none;
-    font-weight: bold;
+    font-weight: normal;
-    color: #004;
+    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 {