From fe78fb8e30ff545532112edc4801d4a273cbb68e Mon Sep 17 00:00:00 2001 From: David Huynh Date: Fri, 5 Mar 2010 22:09:25 +0000 Subject: [PATCH] A bit of branding and re-laying out the front page. git-svn-id: http://google-refine.googlecode.com/svn/trunk@215 7d457c2a-affb-35e4-300a-418c747d4874 --- src/main/webapp/images/gridworks.png | Bin 0 -> 5906 bytes src/main/webapp/images/metaweb-headerlogo.png | Bin 0 -> 1150 bytes .../webapp/images/metaweb-sprite-vertical.png | Bin 0 -> 953 bytes src/main/webapp/index.html | 2 +- src/main/webapp/project.html | 2 +- src/main/webapp/scripts/index.js | 71 ++++++++------ src/main/webapp/styles/common.css | 34 ++++--- src/main/webapp/styles/index.css | 89 +++++++++++++++--- src/main/webapp/styles/project.css | 27 ++++++ 9 files changed, 168 insertions(+), 57 deletions(-) create mode 100644 src/main/webapp/images/gridworks.png create mode 100644 src/main/webapp/images/metaweb-headerlogo.png create mode 100644 src/main/webapp/images/metaweb-sprite-vertical.png diff --git a/src/main/webapp/images/gridworks.png b/src/main/webapp/images/gridworks.png new file mode 100644 index 0000000000000000000000000000000000000000..ad52b458fd033dbb431688cab9bc9a74643ffdb0 GIT binary patch literal 5906 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 literal 0 HcmV?d00001 diff --git a/src/main/webapp/images/metaweb-headerlogo.png b/src/main/webapp/images/metaweb-headerlogo.png new file mode 100644 index 0000000000000000000000000000000000000000..bd2a001d4bb1aa7630fe5308f9b907772fb55ad5 GIT binary patch literal 1150 zcmV-^1cCdBP) z3_Jn=0mQ(Ju0sH52tN-HLX-&b^YgI+4FO4V@bd!%5RlKs59IIx^?}6rk@SMt3_yyB zfq@z55JrAhUZ7H5es*S7P63c%KotN1xE_NffI$!jQnekeh2;OQHN~65g&_p8c1Aqj zYX?0~;gEix4K}~BuM9+3FAW8cLL%w1q%hpc32qDx=*B9b$tbt%8yo|#b-C?Z0`N)h zNDzZC3NtP*~X_+Yj1SvFnt zb=j=-Qfg_?w0Sl0s$RMmscmLy&}(Q(k@IjNL@oF$0(q{qI0c=n3>1%SEJ!$P-CPop zHt%Q=>-h)RTN&<9YYfEIsrK0MiGfpiuocbqD9;yKH5SwPM*vQ$Er($kgyq$w4+y#c zX=hBgX&=+1rK%z-oC3B3^ws+MZza+*tVO6%?~jQujRerP1-;QFxBQgNw?po1^x$e( zA7J(`J-}T)tWl&eO==k_qw6d$aQ6C>V!$%f98=Pi%{eM~n^kw)UFwr8(7cmsT1&f9 zAzC%0qL=lPF0P|0Tfc#mcf3>em7x9@rC@(X03Y-#k$NymG6qx-dCSB|oM!KSV(2WNs8xu0%7 zsEh;c=Ceg&Uam0YKLqHlik2hFL{hVA&aF+ zFU;176O%H6htZ#ENWNWOB$oa*+w}xR=(uTks&2o z0Dn8jOSKO!9AB#)fefXhIjWSR7huBSgQcVvLsSFmH}c17?Uj$inMGtvuP}2(-n*}8 z$f#dwQV)6}v2qI@mm^89QJ!jRhppQ{szcs6e_RVmO|!TU56fFy z&o2{hdWe?fN%QGyZ2R7BY3*r2=C$I@Wg)rdw(AUMg96{B6Dp{7X+|fa5+XhsRqL~@ zHWy@HRYZ=L!Mp!YpW1Vioc+il7^k}5IJ*;%*hI&lM@bP8W724N#`s2+AB@I;yq)S= Q#{d8T07*qoM6N<$f}rmo&j0`b literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..d47eb6460bed2c2e21791dc20a9d5e81fd04cbf1 GIT binary patch literal 953 zcmeAS@N?(olHy`uVBq!ia0vp^j0_BHOE{Q;ET&V9cYu^+iEBhjaDG}zd16s2gJVj5 zQmTSyZen_BP-|(I$V6duTu&QPF z|NsBrzkh%I`ejqcU|q*xQOR)l@L|hphTFGpTemToS1>R|_gZ!`SX46{IdbI2^&59? z-#K>d*v%U^ZCe>`-Mn@5=uyS|*(Xk%uy0;*=+GhNnBJ>bu3k8QfiHQ|)vH&JA3ttV zv)HS&Gp}2E>eMODgb6}vQ_h?@W7V+Cx`RQdY{5w&IB`<5bRKu& zM6rx%Cyt+x&zp7T^cj}eKC{{-=gyuxd-kko##G_7sYj0-RVtW$?%cUc7cT(;Z_*^& z#ue=G{n};oZPJ-9U%q_d!UgMw_^(q!hXU}kKS^4$%mx~uJe*XOV+SO}n#dA-e zI&ECNSifT7^=sEHYe0c^LDDmnjukF({W}i*t+{(+VXzj0NS!^g?Y;^x&o1B)#qo&MT63KJf z=1D$k)lRcaY|N9BOqp&JmXSCk`_{{pPTg%YpG=D4dzn6w)6HU8H{Z1tO70ck7c1~8 z#d2Ixh-j{eY;X&-?9fBnK5l8sv*9?~Y@dx@+WtMp$8DbK1p7}6(0VgLKgA-n z=(m4Ws#0{$>>Kl^o{dZuer7nC+mI{%dB#*5#mg^yQ)afhU1~KsnVviG#s28c{ETc2 YKc4YeUfSck2^gsip00i_>zopr0EH>}EC2ui literal 0 HcmV?d00001 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; +}