Started work on giving Gitalist a distinct look.

All the "last change" times are based on the original gitweb code.
Dropped the gitweb.css and added Blueprint.
Added a chromahash for commits (based on Matt Thompson's http://github.com/mattt/Chroma-Hash/).

diff --git a/lib/Gitalist/Controller/Root.pm b/lib/Gitalist/Controller/Root.pm
index f576ca7..1303900 100644 (file)
--- a/lib/Gitalist/Controller/Root.pm
+++ b/lib/Gitalist/Controller/Root.pm
@@ -556,20 +556,45 @@ sub end : ActionClass('RenderView') {
   # Give every view the current HEAD.
   $_[1]->stash->{HEAD} = $_[1]->model()->head_hash;
   
-  # XXX Move this into a plugin!
-  use DateTime::Format::Human::Duration;
+  # XXX This should be in a plugin.
   $_[1]->stash->{time_since} = sub {
-    my($dt, $now) = ($_[0], DateTime->now);
-
-    my($age) = $dt < (DateTime->now - DateTime::Duration->new(days=>12))
-      ? $dt->ymd
-      : DateTime::Format::Human::Duration->new->format_duration($now - $dt)
-          =~ /^(?:.*?weeks?, )?(\d+ [^\d]+)(?:,| and|$)/;
-
-    return $age;
+    return age_string(time - $_[0]->epoch);
   };
 }
 
+# XXX Ripped straight from gitweb.pm
+# convert age in seconds to "nn units ago" string
+sub age_string {
+       my $age = shift;
+       my $age_str;
+
+       if ($age > 60*60*24*365*2) {
+               $age_str = (int $age/60/60/24/365);
+               $age_str .= " years ago";
+       } elsif ($age > 60*60*24*(365/12)*2) {
+               $age_str = int $age/60/60/24/(365/12);
+               $age_str .= " months ago";
+       } elsif ($age > 60*60*24*7*2) {
+               $age_str = int $age/60/60/24/7;
+               $age_str .= " weeks ago";
+       } elsif ($age > 60*60*24*2) {
+               $age_str = int $age/60/60/24;
+               $age_str .= " days ago";
+       } elsif ($age > 60*60*2) {
+               $age_str = int $age/60/60;
+               $age_str .= " hours ago";
+       } elsif ($age > 60*2) {
+               $age_str = int $age/60;
+               $age_str .= " min ago";
+       } elsif ($age > 2) {
+               $age_str = int $age;
+               $age_str .= " sec ago";
+       } else {
+               $age_str .= " right now";
+       }
+       return $age_str;
+}
+
 =head1 AUTHOR
 
 Dan Brook

diff --git a/root/_chroma_hash.tt2 b/root/_chroma_hash.tt2
new file mode 100644 (file)
index 0000000..1982f0c
--- /dev/null
+++ b/root/_chroma_hash.tt2
@@ -0,0 +1,4 @@
+[% sha1 = sha1 || HEAD %]
+<div class='chroma-hash'>
+  <span style='background-color: #[% sha1.substr(0, 6) %];'>&nbsp;</span><span style='background-color: #[% sha1.substr(6, 6) %];'>&nbsp</span><span style='background-color: #[% sha1.substr(12, 6) %];'>&nbsp</span>
+</div>

diff --git a/root/_diff.tt2 b/root/_diff.tt2
index 869e0ee..bf5c47e 100644 (file)
--- a/root/_diff.tt2
+++ b/root/_diff.tt2
@@ -1,4 +1,4 @@
-<link rel="stylesheet" type="text/css" href="[% c.uri_for('/static/css/syntax/' + language + '.css') %]"/>
+<link rel="stylesheet" type="text/css" href="[% c.uri_for('/static/css/syntax/' _ language _ '.css') %]"/>
 [% FOREACH item IN diff %]
 <div class='diff-head'>
  diff --git

diff --git a/root/_diff_tree.tt2 b/root/_diff_tree.tt2
index fc7a91f..8f70e2f 100644 (file)
--- a/root/_diff_tree.tt2
+++ b/root/_diff_tree.tt2
@@ -1,11 +1,18 @@
 <table class='diff-tree'>
  <thead>
   <tr>
+   <th>file</th>
+   <th>status</th>
+   <th>actions</th>
+  </tr>
+ </thead>
+ <tfoot>
+  <tr>
    <td>file</td>
    <td>status</td>
    <td>actions</td>
   </tr>
- </thead>
+ </tfoot>
  <tbody>
   [% FOREACH line IN diff_tree -%]
   <tr>
@@ -32,11 +39,4 @@
   </tr>
   [% END %]
  </tbody>
- <tfoot>
-  <tr>
-   <td>file</td>
-   <td>status</td>
-   <td>actions</td>
-  </tr>
- </tfoot>
 </table>

diff --git a/root/_heads.tt2 b/root/_heads.tt2
index 307f95a..74e46ab 100644 (file)
--- a/root/_heads.tt2
+++ b/root/_heads.tt2
@@ -1,11 +1,18 @@
 <table class='heads'>
  <thead>
   <tr>
+   <th>age</th>
+   <th>branch</th>
+   <th>actions</th>
+  </tr>
+ </thead>
+ <tfoot>
+  <tr>
    <td>age</td>
    <td>branch</td>
    <td>actions</td>
   </tr>
- </thead>
+ </tfoot>
 
  <tbody>
  [% FOREACH head IN heads %]
@@ -20,14 +27,4 @@
   </tr>
  [% END %]
  </tbody>
-
- <tfoot>
-  <tr>
-   <td>age</td>
-   <td>branch</td>
-   <td>actions</td>
-  </tr>
- </tfoot>
 </table>
-
-

diff --git a/root/_shortlog.tt2 b/root/_shortlog.tt2
index d862829..949105d 100644 (file)
--- a/root/_shortlog.tt2
+++ b/root/_shortlog.tt2
@@ -1,13 +1,23 @@
-<table>
+<table class='shortlog'>
  <thead>
   <tr>
+   <th>sha1</th>
+   <th>time</th>
+   <th>author</th>
+   <th>message</th>
+   <th>actions</th>
+  </tr>
+ </thead>
+
+ <tfoot>
+  <tr>
    <td>sha1</td>
    <td>time</td>
    <td>author</td>
    <td>message</td>
    <td>actions</td>
   </tr>
- </thead>
+ </tfoot>
 
  <tbody>
  [% FOREACH line IN log_lines %]
@@ -35,14 +45,4 @@
   </tr>
  [% END %]
  </tbody>
-
- <tfoot>
-  <tr>
-   <td>sha1</td>
-   <td>time</td>
-   <td>author</td>
-   <td>message</td>
-   <td>actions</td>
-  </tr>
- </tfoot>
 </table>

diff --git a/root/_tree.tt2 b/root/_tree.tt2
index 78c9b01..3eebb15 100644 (file)
--- a/root/_tree.tt2
+++ b/root/_tree.tt2
@@ -1,11 +1,18 @@
 <table>
  <thead>
   <tr>
+   <th>mode</th>
+   <th>file</th>
+   <th>actions</th>
+  </tr>
+ </thead>
+ <tfoot>
+  <tr>
    <td>mode</td>
    <td>file</td>
    <td>actions</td>
   </tr>
- </thead>
+ </tfoot>
 
  <tbody>
   [% FOREACH item IN tree_list %]
@@ -23,12 +30,4 @@
   </tr>
   [% END %]
  </tbody>
-
- <tfoot>
-  <tr>
-   <td>mode</td>
-   <td>file</td>
-   <td>actions</td>
-  </tr>
- </tfoot>
 </table>

diff --git a/root/default.tt2 b/root/default.tt2
index 8e3ce99..4cb8ecc 100644 (file)
--- a/root/default.tt2
+++ b/root/default.tt2
@@ -18,7 +18,7 @@
     <link rel="stylesheet" href="[% c.uri_for('/static/css/blueprint/ie.css') %]" type="text/css" media="screen, projection">
   <![endif]-->  
   <link rel="stylesheet" type="text/css" href="[% c.uri_for('/static/css/site.css') %]"/>
-  [% IF stylesheet %]<link rel="stylesheet" type="text/css" href="[% stylesheet %]"/>[% END %]
+ 
   [% FOR link IN links %]
             <link rel="[% link.rel %]"
                   title="[% link.title %]"
@@ -35,7 +35,7 @@
 
 [% site_header %]
 
-<div class="page_header">
+<div id="page-header">
   <a title="[% logo_label | url %]" href="[% logo_url | url %]"><img src="[% logo_img %]" alt="git" class="logo"/></a>
   <a href="[% home_link | url %]">[% home_link_str %]</a>
   [%- IF project %]
@@ -64,7 +64,7 @@
 
 [%- # git_footer_html
 -%]
-<div class="page_footer">
+<div class="page-footer">
 [% IF project AND project_description %]
   <div class="page_footer_text">[% project_description | html %]</div>
 [% END %]

diff --git a/root/index.tt2 b/root/index.tt2
index 227dcf6..b7fc613 100644 (file)
--- a/root/index.tt2
+++ b/root/index.tt2
@@ -21,6 +21,16 @@
         <th></th>
     </tr>
 </thead>
+<tfoot>
+    <tr>
+        <td>Project</td>
+        <!-- XXX These do nothing presently -->
+        <td><a href="/?o=descr">Description</a></td>
+        <td><a href="/?o=owner">Owner</a></td>
+        <td><a href="/?o=age">Last Change</a></td>
+        <td></td>
+    </tr>
+</tfoot>
 
 <tbody>
   [%
@@ -30,7 +40,7 @@
         <td><a class="list" href="[% c.uri_for('/summary', {p=p.name}) %]">[% p.name %]</a></td>
         <td><a class="list" title="[% p.description %]" href="[% c.uri_for('/summary', {p=p.name} ) %]">[% p.description.substr(0, 20) %]</a></td>
         <td>[% p.owner %]</td>
-        <td class="age2">[% p.last_change %]</td>
+        <td class="age2">[% time_since(p.last_change) %]</td>
         <td class="link"><a href="[% c.uri_for("summary", {p=p.name}) %]">summary</a>
             | <a href="[% c.uri_for("shortlog", {p=p.name}) %]">shortlog</a>
             | <a href="[% c.uri_for("log", {p=p.name}) %]">log</a>

diff --git a/root/log.tt2 b/root/log.tt2
index 36d8231..b92acc2 100644 (file)
--- a/root/log.tt2
+++ b/root/log.tt2
@@ -2,27 +2,36 @@
 
 [% INCLUDE '_log_pager.tt2' %]
 
+<div id='log'>
 [%# XXX Nabbed the HTML below from gitweb's log action. %]
 [% FOREACH line IN log_lines %]
-<div class="header">
- <a class="title" href="/commit?p=gitweb/.git;h=[% line.sha1 %]">
-  <span class="age">[% line.authored_time %]</span>
-  [% line.comment.substr(0, 50) | html %]
- </a>
-</div>
+  <div class='entry'>
+  <div class="message">
+     [% message = line.comment | html;
+        message.replace("\n", "<br/>") %]
+     [% INCLUDE '_chroma_hash.tt2' sha1 = line.sha1 %]
+    </div>
+    <div class="meta">
+     <table class='summary' cellspacing='0' cellpadding='0'>
+      <tr><td>commit</td><td>[% line.sha1 %]</td></tr>
+      <tr><td>author</td><td>[% line.author.name | html %]</td></tr>
+      <tr><td>authored time</td><td>[% line.authored_time %]</td></tr>
+      [% IF line.author.name != line.committer.name %]
+      <tr><td>committer</td><td>[% line.committer.name | html %]</td></tr>
+      <tr><td>committered time</td><td>[% line.committed_time %]</td></tr>
+      [% END %]
+     </table>
+     <span class="age">[% time_since(line.authored_time) %]</span>
+     <div class="action-list">
+       <a href="[% c.uri_for("commit", {h=line.sha}) %]">commit</a>
+     | <a href="[% c.uri_for("commitdiff", {h=line.sha1}) %]">commitdiff</a>
+     | <a href="[% c.uri_for("tree", {h=line.sha1, hb=line.sha1}) %]">tree</a>
+     </div>
+    </div>
 
-<div class="title_text">
- <div class="log_link">
-   <a href="[% c.uri_for("commit", {h=line.sha}) %]">commit</a>
- | <a href="[% c.uri_for("commitdiff", {h=line.sha1}) %]">commitdiff</a>
- | <a href="[% c.uri_for("tree", {h=line.sha1, hb=line.sha1}) %]">tree</a>
- </div>
- <i>[% line.author.name | html %] [% line.authored_time %]</i>
+  </div>
+[% END %]
 </div>
 
-<div class="log_body">
- [% line.comment | html %]
-</div>
-[% END %]
 
 [% INCLUDE '_log_pager.tt2' %]

diff --git a/root/nav/actions.tt2 b/root/nav/actions.tt2
index 8f2293b..99988de 100644 (file)
--- a/root/nav/actions.tt2
+++ b/root/nav/actions.tt2
@@ -5,4 +5,5 @@
     <a href="[% c.uri_for('commit', {h=object.sha1}) %]">commit</a> |
     <a href="[% c.uri_for('commitdiff', {h=object.sha1}) %]">commitdiff</a> |
     <a href="[% c.uri_for('tree', {h=object.tree_sha1, hb=object.sha1}) %]">tree</a>
+     [% INCLUDE '_chroma_hash.tt2' sha1 = object.sha1 %]
 </div>

diff --git a/root/nav/search.tt2 b/root/nav/search.tt2
index a86a935..09f30e4 100644 (file)
--- a/root/nav/search.tt2
+++ b/root/nav/search.tt2
@@ -1,4 +1,4 @@
-<div class="search">
+<div id="page-search">
   <form method="get" action="[% c.uri_for('search') %]" enctype="application/x-www-form-urlencoded">
   <input name="p" type="hidden" value="[% project %]" />
   <input name="a" type="hidden" value="search" />

diff --git a/root/static/css/blueprint/screen.css b/root/static/css/blueprint/screen.css
index 2c2b328..a16698b 100644 (file)
--- a/root/static/css/blueprint/screen.css
+++ b/root/static/css/blueprint/screen.css
@@ -15,7 +15,7 @@
 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
 body {line-height:1.5;}
 table {border-collapse:separate;border-spacing:0;}
-caption, th, td {text-align:left;font-weight:normal;}
+caption, th, td {text-align:left;}
 table, td, th {vertical-align:middle;}
 blockquote:before, blockquote:after, q:before, q:after {content:"";}
 blockquote, q {quotes:"" "";}
@@ -23,7 +23,7 @@ a img {border:none;}
 
 /* typography.css */
 html {font-size:100.01%;}
-body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}
+body {font-size:85%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}
 h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
 h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
 h2 {font-size:2em;margin-bottom:0.75em;}
@@ -54,12 +54,12 @@ ol {list-style-type:decimal;}
 dl {margin:0 0 1.5em 0;}
 dl dt {font-weight:bold;}
 dd {margin-left:1.5em;}
-table {margin-bottom:1.4em;width:100%;}
+table {width:100%;}
 th {font-weight:bold;}
 thead th {background:#c3d9ff;}
-th, td, caption {padding:4px 10px 4px 5px;}
+
 tr.even td {background:#e5ecf9;}
-tfoot {font-style:italic;}
+
 caption {background:#eee;}
 .small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
 .large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
@@ -254,4 +254,4 @@ hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;marg
 hr.space {background:#fff;color:#fff;visibility:hidden;}
 .clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
 .clearfix, .container {display:block;}
-.clear {clear:both;}
\ No newline at end of file
+.clear {clear:both;}

diff --git a/root/static/css/site.css b/root/static/css/site.css
index 8922c7f..629c8be 100644 (file)
--- a/root/static/css/site.css
+++ b/root/static/css/site.css
@@ -1,5 +1,6 @@
 /* XXX Colours. Lots of colours. */
-#body {
+
+body {
   margin: 1em;
 }
 
@@ -10,9 +11,17 @@
 }
 
 thead, tfoot {
-  color: #ddd;
+  color: navy;
   font-size: small;
-  font-weight: bold;
+  font-weight: bold !important;
+  background-color: #C3D9FF;
+}
+
+table.shortlog tr {
+  padding: 1px 0px;
+}
+table.shortlog td {
+  padding: 0 1px;
 }
 
 /* /commit page */
@@ -51,7 +60,7 @@ div.commit-message {
   text-decoration: underline;
 }
 table.heads {
-       width: 50%;
+  width: 50%;
 }
 
 /* /blob */
@@ -63,3 +72,89 @@ pre.blob {
   padding-left: 15px;
   margin: 10px 15px;
 }
+
+/* /blobdiff etc */
+
+.diff-head, .diff-index {
+  font-family: monospace;
+}
+.diff-head {
+  border-top: solid 1px red;
+}
+.diff-index {
+  border-bottom: solid 1px green;
+}
+
+/* /log */
+#log .entry {
+  border: solid 1px grey;
+  margin: 5px 0;
+  padding: 5px;
+}
+#log .meta {
+  border-top: dotted 1px #ddd;
+  color: #755;
+}
+#log table.summary {
+  width: 33%;
+  font-size: 0.9em;
+}
+#log .message {
+  font-family: monospace;
+  font-size: 1.15em;
+}
+#log .age {
+  float: right;
+  font-size: 0.85em;
+  font-style: italic;
+}
+.chroma-hash {
+  float: right;
+  font-family: monospace;
+  font-size:   1em;
+}
+
+/**
+ * from gitweb.css
+ * XXX These can be rejigged once gitweb.css has gone away.
+ */
+#page-header {
+       height: 25px;
+       padding: 8px;
+       font-size: 150%;
+       font-weight: bold;
+       background-color: #d9d8d1;
+}
+img.logo {
+       float: right;
+       border-width: 0px;
+}
+
+span.refs span {
+       padding: 0px 4px;
+       font-size: 80%;
+        /* XXX needs more families */
+        font-family: Verdana;
+        letter-spacing: -1px;
+       border: 1px solid;
+       background-color: #ffaaff;
+       border-color: #ffccff #ff00ee #ff00ee #ffccff;
+}
+
+span.refs span.ref {
+       background-color: #aaaaff;
+       border-color: #ccccff #0033cc #0033cc #ccccff;
+}
+
+span.refs span.tag {
+       background-color: #ffffaa;
+       border-color: #ffffcc #ffee00 #ffee00 #ffffcc;
+}
+
+span.refs span.head {
+       background-color: #aaffaa;
+       border-color: #ccffcc #00cc33 #00cc33 #ccffcc;
+}
+span.refs a {
+  text-decoration: none;
+}