Switch to using 960.gs grids for layout.
Dan Brook [Sun, 7 Mar 2010 13:58:04 +0000 (13:58 +0000)]
* Still not really happy with the overall layout or presentation, but
hopefully these changes should make moving in the right direction a little easier.
* Also moved nav/actions.tt2 out of the per action templates into the wrapper.

23 files changed:
root/fragment/ref/history.tt2
root/fragment/ref/tree.tt2
root/fragment/repository/heads.tt2
root/fragment/repository/shortlog.tt2
root/inc/log_pager.tt2
root/nav/actions.tt2
root/ref/blame.tt2
root/ref/blob.tt2
root/ref/commit.tt2
root/ref/diff_fancy.tt2
root/ref/history.tt2
root/ref/tree.tt2
root/repository/heads.tt2
root/repository/longlog.tt2
root/repository/search.tt2
root/repository/shortlog.tt2
root/repository/summary.tt2
root/repository/tags.tt2
root/search_help.tt2
root/static/css/960.css [new file with mode: 0644]
root/static/css/site.css
root/wrapper.tt2
t/app-mech-rootpage.t

index 41dd259..c054650 100644 (file)
@@ -1,25 +1,18 @@
+[% BLOCK history_table_headfoot %]
+[% SET cell = type == 'head' ? 'th' : 'td' %]
+<tr>
+ <[% cell %]>sha1</[% cell %]>
+ <[% cell %]>time</[% cell %]>
+ <[% cell %]>author</[% cell %]>
+ <[% cell %]>message</[% cell %]>
+ <[% cell %]>actions</[% cell %]>
+</tr>
+[% END %]
 [%
   INCLUDE 'inc/log_pager.tt2';
 %]  <table class='history listing'>
-   <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>
-   </tfoot>
+   <thead>[% PROCESS history_table_headfoot type = 'head' %]</thead
+   <tfoot>[% PROCESS history_table_headfoot type = 'foot' %]</tfoot>
 
    <tbody>
    [% FOREACH line IN log_lines %]
index b3f7a69..f690386 100644 (file)
@@ -1,17 +1,14 @@
 [% BLOCK tree_table_headfoot %]
+[% SET cell = type == 'head' ? 'th' : 'td' %]
   <tr>
-   <th>mode</th>
-   <th>file</th>
-   <th>actions</th>
+   <[% cell %]>mode</[% cell %]>
+   <[% cell %]>file</[% cell %]>
+   <[% cell %]>actions</[% cell %]>
   </tr>
 [% END %]
 <table class='tree listing'>
- <thead>
-    [% PROCESS tree_table_headfoot %]
- </thead>
- <tfoot>
-    [% PROCESS tree_table_headfoot %]
- </tfoot>
+ <thead>[% PROCESS tree_table_headfoot type = 'head' %]</thead>
+ <tfoot>[% PROCESS tree_table_headfoot type = 'foot' %]</tfoot>
 
  <tbody>
   [% FOREACH item IN tree_list %]
index a05a2ed..2ce0339 100644 (file)
@@ -1,18 +1,15 @@
 [% BLOCK repository_heads_headfoot %]
+[% SET cell = type == 'head' ? 'th' : 'td' %]
 <tr>
-   <th>HEAD</th>
-   <th>age</th>
-   <th>branch</th>
-   <th>actions</th>
+   <[% cell %]>HEAD</[% cell %]>
+   <[% cell %]>age</[% cell %]>
+   <[% cell %]>branch</[% cell %]>
+   <[% cell %]>actions</[% cell %]>
 </tr>
 [% END %]
 <table class='[% action %] listing'>
- <thead>
-  [% PROCESS repository_heads_headfoot %]
- </thead>
- <tfoot>
-  [% PROCESS repository_heads_headfoot %]
- </tfoot>
+ <thead>[% PROCESS repository_heads_headfoot type = 'head' %]</thead>
+ <tfoot>[% PROCESS repository_heads_headfoot type = 'foot' %]</tfoot>
 
  <tbody>
  [% FOREACH head IN heads %]
index d3c14bb..4875181 100644 (file)
@@ -1,23 +1,18 @@
 [% BLOCK shortlog_table_headfoot %]
+[% SET cell = type == 'head' ? 'th' : 'td' %]
 <tr>
- <th>sha1</th>
- <th>time</th>
- <th>author</th>
- <th>message</th>
- <th>actions</th>
+ <[% cell %]>sha1</[% cell %]>
+ <[% cell %]>time</[% cell %]>
+ <[% cell %]>author</[% cell %]>
+ <[% cell %]>message</[% cell %]>
+ <[% cell %]>actions</[% cell %]>
 </tr>
 [% END %]
 <div class='content'>
-[%
-  INCLUDE 'inc/log_pager.tt2';
-%]<table class='shortlog listing'>
- <thead>
-    [% PROCESS shortlog_table_headfoot %]
- </thead>
-
- <tfoot>
-    [% PROCESS shortlog_table_headfoot %]
- </tfoot>
+ [% INCLUDE 'inc/log_pager.tt2' %]
+ <table class='shortlog listing'>
+ <thead>[% PROCESS shortlog_table_headfoot type = 'head' %]</thead>
+ <tfoot>[% PROCESS shortlog_table_headfoot type = 'foot' %]</tfoot>
 
  <tbody>
  [% FOREACH line IN log_lines %]
index 47da4c3..79282c5 100644 (file)
@@ -1,6 +1,6 @@
 <div class='pager'>
  <a href='[% c.uri_for_action('/' _ c.action, [Repository.name]) %]'>HEAD</a> &sect;
- [% IF log_lines.first.sha1 != Commit.sha1 %]
+ [% IF log_lines.first.sha1 != Commit.sha1 || (log_lines.size != 25 && page) %]
  <a href='[% c.uri_with(pg => (page||0) + 1) %]'>&laquo; newer</a>
  [% END %]
  [% IF log_lines.first.sha1 != Commit.sha1 && log_lines.size == 25%]
index 4ceab36..dda91aa 100644 (file)
@@ -1,4 +1,7 @@
+[%- SET object = commit || head -%]
 <div class='actions'>
+  <div class="clear"></div>
+  <div class='grid_8'>
   <!-- This should probably be a real LIst -->
     <a href="[% c.uri_for_action('/repository/summary', [c.req.captures.0]) %]">summary</a> &bull;
     [% IF c.req.captures.size == 1; SET path = 'repository'; ELSE; SET path = 'ref'; END %]
@@ -18,5 +21,6 @@
     <a href="[% c.uri_for_action('/ref/history', [c.req.captures.0, Commit.sha1], filename)  %]">history</a> &bull;
     <a href="[% c.uri_for(c.controller.action_for('commit'), [c.req.captures.0, Repository.head_hash]) %]">HEAD</a>
     [% END %]
-    <div class='chroma-hash'>[% INCLUDE 'inc/chroma_hash.tt2' sha1 = object.sha1 %]</div>
+  </div>
+  <div class='grid_4'>[% INCLUDE 'inc/chroma_hash.tt2' sha1 = object.sha1 %]</div>
 </div>
index d1a25a4..009b2d3 100644 (file)
@@ -7,7 +7,6 @@
  <td class='data'>data</td>
 </tr>
 [% END -%]
-[% PROCESS 'nav/actions.tt2' object = head %]
 [%- INCLUDE inc/syntax_highlight_css.tt2 -%]
 
 <div class='content'>
index 29a3b7b..aa489a7 100644 (file)
@@ -1,5 +1,4 @@
 [% INCLUDE inc/syntax_highlight_css.tt2 %]
-[% PROCESS 'nav/actions.tt2' object = head %]
 
 <div class='content'>
   [% IF object.type == 'commit' %]
index 423d13f..2d79fa7 100644 (file)
@@ -1,4 +1,3 @@
-[% INCLUDE 'nav/actions.tt2' object = commit %]
 
 <div class='content'>
   [% subinclude('/fragment/ref/commit', c.req.captures) %]
index 82a2740..23f453d 100644 (file)
@@ -1,4 +1,3 @@
-[% PROCESS 'nav/actions.tt2' object = commit %]
 
 <div class='content'>
   <div class='commit-message'>
index 3ee6374..5820d4d 100644 (file)
@@ -1,3 +1,2 @@
-[% INCLUDE 'nav/actions.tt2' object = commit %]
-
+[%# FIXME - Pager links are broken because I can't figure out how to pass the parameters %]
 [% subinclude('/fragment/ref/history', c.req.captures, c.req.args.to_path) %]
index 83baf01..91d2082 100644 (file)
@@ -1,4 +1,3 @@
-[% INCLUDE 'nav/actions.tt2' object = commit %]
 
 <div class='content'>
   <div class='commit-message'>
index cf5904d..1d8d910 100644 (file)
@@ -1,2 +1 @@
-[% INCLUDE 'nav/actions.tt2' object = commit %]
 [% subinclude('/fragment/repository/heads', c.req.captures) %]
index ffe6e24..a0c9f4b 100644 (file)
@@ -1,2 +1 @@
-[% INCLUDE 'nav/actions.tt2' object = Commit %]
 [% subinclude('/fragment/' _ c.action, c.req.captures, c.req.parameters) %]
index 2f43c79..76b3e6a 100644 (file)
@@ -1,4 +1,3 @@
-[% INCLUDE 'nav/actions.tt2' object = commit %]
 <div class='content'>
   [%# XXX Nabbed the HTML below from gitweb's log action. %]
   [% FOREACH result IN results %]
index 1a39f61..a0c9f4b 100644 (file)
@@ -1,2 +1 @@
-[% INCLUDE 'nav/actions.tt2' object = commit %]
 [% subinclude('/fragment/' _ c.action, c.req.captures, c.req.parameters) %]
index d74dbba..f79b15f 100644 (file)
@@ -1,4 +1,3 @@
-[% PROCESS 'nav/actions.tt2' object = commit %]
 
 <div class='summary content'>
   [% subinclude('/fragment/repository/summary', c.req.captures) %]
@@ -9,6 +8,8 @@
   <h2><a href='[% c.uri_for(c.controller.action_for('heads'), c.req.captures) %]'>branches</a></h2>
   [% subinclude('/fragment/repository/heads', c.req.captures) %]
 
+  [% IF Repository.tags.size > 0 %]
   <h2><a href='[% c.uri_for(c.controller.action_for('tags'), c.req.captures) %]'>tags</a></h2>
   [% subinclude('/fragment/repository/tags', c.req.captures) %]
+  [% END %]
 </div>
index 35ac2fe..3518081 100644 (file)
@@ -1,4 +1,3 @@
-[% INCLUDE 'nav/actions.tt2' object = commit %]
 <div class='content'>
   <div>
   [% Repository.name %]
index c23a414..60a97a1 100644 (file)
@@ -1,5 +1,3 @@
-[% PROCESS 'nav/actions.tt2' object = head %]
-
 <p><strong>Pattern</strong> is by default a normal string that is matched precisely (but without
 regard to case, except in the case of pickaxe). However, when you check the <em>re</em> checkbox,
 the pattern entered is recognized as the POSIX extended
diff --git a/root/static/css/960.css b/root/static/css/960.css
new file mode 100644 (file)
index 0000000..e77dff3
--- /dev/null
@@ -0,0 +1,269 @@
+
+/* Containers
+----------------------------------------------------------------------------------------------------*/
+.container_12 {
+       margin-left: auto;
+       margin-right: auto;
+       width: 960px;
+}
+
+/* Grid >> Global
+----------------------------------------------------------------------------------------------------*/
+.grid_1,
+.grid_2,
+.grid_3,
+.grid_4,
+.grid_5,
+.grid_6,
+.grid_7,
+.grid_8,
+.grid_9,
+.grid_10,
+.grid_11,
+.grid_12{
+       display:inline;
+       float: left;
+       position: relative;
+       margin-left: 10px;
+       margin-right: 10px;
+}
+
+/* Grid >> Children (Alpha ~ First, Omega ~ Last)
+----------------------------------------------------------------------------------------------------*/
+
+.alpha {
+       margin-left: 0;
+}
+
+.omega {
+       margin-right: 0;
+}
+
+/* Grid >> 2 Columns
+----------------------------------------------------------------------------------------------------*/
+    .container_12 .grid_1 {
+       width:60px;
+}
+    .container_12 .grid_2 {
+       width:140px;
+}
+    .container_12 .grid_3 {
+       width:220px;
+}
+    .container_12 .grid_4 {
+       width:300px;
+}
+    .container_12 .grid_5 {
+       width:380px;
+}
+    .container_12 .grid_6 {
+       width:460px;
+}
+    .container_12 .grid_7 {
+       width:540px;
+}
+    .container_12 .grid_8 {
+       width:620px;
+}
+    .container_12 .grid_9 {
+       width:700px;
+}
+    .container_12 .grid_10 {
+       width:780px;
+}
+    .container_12 .grid_11 {
+       width:860px;
+}
+    .container_12 .grid_12 {
+       width:940px;
+}
+
+
+
+
+/* Prefix Extra Space >> 2 Columns
+----------------------------------------------------------------------------------------------------*/
+    .container_12 .prefix_1 {
+       padding-left:80px;
+}
+    .container_12 .prefix_2 {
+       padding-left:160px;
+}
+    .container_12 .prefix_3 {
+       padding-left:240px;
+}
+    .container_12 .prefix_4 {
+       padding-left:320px;
+}
+    .container_12 .prefix_5 {
+       padding-left:400px;
+}
+    .container_12 .prefix_6 {
+       padding-left:480px;
+}
+    .container_12 .prefix_7 {
+       padding-left:560px;
+}
+    .container_12 .prefix_8 {
+       padding-left:640px;
+}
+    .container_12 .prefix_9 {
+       padding-left:720px;
+}
+    .container_12 .prefix_10 {
+       padding-left:800px;
+}
+    .container_12 .prefix_11 {
+       padding-left:880px;
+}
+
+
+/* Suffix Extra Space >> 2 Columns
+----------------------------------------------------------------------------------------------------*/
+    .container_12 .suffix_1 {
+       padding-right:80px;
+}
+    .container_12 .suffix_2 {
+       padding-right:160px;
+}
+    .container_12 .suffix_3 {
+       padding-right:240px;
+}
+    .container_12 .suffix_4 {
+       padding-right:320px;
+}
+    .container_12 .suffix_5 {
+       padding-right:400px;
+}
+    .container_12 .suffix_6 {
+       padding-right:480px;
+}
+    .container_12 .suffix_7 {
+       padding-right:560px;
+}
+    .container_12 .suffix_8 {
+       padding-right:640px;
+}
+    .container_12 .suffix_9 {
+       padding-right:720px;
+}
+    .container_12 .suffix_10 {
+       padding-right:800px;
+}
+    .container_12 .suffix_11 {
+       padding-right:880px;
+}
+
+
+/* Push Space >> 2 Columns
+----------------------------------------------------------------------------------------------------*/
+    .container_12 .push_1 {
+       left:80px;
+}
+    .container_12 .push_2 {
+       left:160px;
+}
+    .container_12 .push_3 {
+       left:240px;
+}
+    .container_12 .push_4 {
+       left:320px;
+}
+    .container_12 .push_5 {
+       left:400px;
+}
+    .container_12 .push_6 {
+       left:480px;
+}
+    .container_12 .push_7 {
+       left:560px;
+}
+    .container_12 .push_8 {
+       left:640px;
+}
+    .container_12 .push_9 {
+       left:720px;
+}
+    .container_12 .push_10 {
+       left:800px;
+}
+    .container_12 .push_11 {
+       left:880px;
+}
+
+
+
+
+/* Pull Space >> 2 Columns
+----------------------------------------------------------------------------------------------------*/
+    .container_12 .pull_1 {
+       right:80px;
+}
+    .container_12 .pull_2 {
+       right:160px;
+}
+    .container_12 .pull_3 {
+       right:240px;
+}
+    .container_12 .pull_4 {
+       right:320px;
+}
+    .container_12 .pull_5 {
+       right:400px;
+}
+    .container_12 .pull_6 {
+       right:480px;
+}
+    .container_12 .pull_7 {
+       right:560px;
+}
+    .container_12 .pull_8 {
+       right:640px;
+}
+    .container_12 .pull_9 {
+       right:720px;
+}
+    .container_12 .pull_10 {
+       right:800px;
+}
+    .container_12 .pull_11 {
+       right:880px;
+}
+
+
+/* Clear Floated Elements
+----------------------------------------------------------------------------------------------------*/
+
+
+.clear {
+       clear: both;
+       display: block;
+       overflow: hidden;
+       visibility: hidden;
+       width: 0;
+       height: 0;
+}
+
+
+.clearfix:after {
+       clear: both;
+       content: ' ';
+       display: block;
+       font-size: 0;
+       line-height: 0;
+       visibility: hidden;
+       width: 0;
+       height: 0;
+}
+
+.clearfix {
+       display: inline-block;
+}
+
+* html .clearfix {
+       height: 1%;
+}
+
+.clearfix {
+       display: block;
+}
\ No newline at end of file
index f65110b..2522583 100644 (file)
@@ -1,21 +1,12 @@
-#the-container {
-  margin: 1em 100px;
-  text-align: center;
-  background-color: white;
-}
-#body {
-  text-align: justify;
-}
-div.content {
-  padding: 0 7px;
-}
-
 /*
 14d2f2ca3732551d1585e7590e60b82492f3
 ^^ A rather nice chroma hash
 */
 body {
-  background-color: #555;
+  background-color: #999;
+}
+#the-container {
+  background-color: white;
 }
 
 thead, tfoot {
@@ -43,7 +34,7 @@ tfoot td {
   font-size:   1em;
   font-style: normal;
 }
-div.chroma-hash {
+.actions span.chroma-hash {
   float: right;
 }
 
@@ -72,23 +63,23 @@ div.chroma-hash {
 /* header */
 #page-header {
   height: 25px;
-  padding: 8px;
   font-size: 1.5em;
   font-weight: bold;
   border-bottom: solid 1px #777;
   text-align: justify;
+  padding: 8px 0;
 }
 
 img.logo {
-  float: right;
   border-width: 0px;
-  margin-top: 4px;
+  margin-top: 6px;
+  float: right;
+  padding-left: 15px;
 }
 
 /* footer */
 #page-footer {
   height: 20px;
-  padding: 8px;
   margin-top: 10px;
   font-style: italic;
   background-color: #d9d8d1;
@@ -97,11 +88,9 @@ img.logo {
 
 /* actions include */
 .actions {
-  padding-bottom: 4px 0;
   font-style: italic;
   border-bottom: solid 1px #777;
-  margin-bottom: 10px;
-  padding: 5px 7px;
+  height: 25px;
 }
 
 /* pager include */
@@ -112,9 +101,7 @@ img.logo {
 /* search include */
 #page-search {
   text-align: right;
-  float: right;
   font-size: 0.7em;
-  padding-right: 20px;
 }
 
 /* shortlog include */
index b6c6c86..3e5246f 100644 (file)
     <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') %]">
+  <link rel="stylesheet" type="text/css" href="[% c.uri_for('/static/css/960.css') %]">
   <link rel="shortcut icon" href="[% c.uri_for('/static/git-favicon.png') %]" type="image/png">
 </head>
 
 <body>
 
-<div id='the-container'>
-
-<div id="page-header">
-  <a title="git homepage" href="http://git-scm.org">
-   <img src="[% c.uri_for('/logo.png') %]" alt="git" class="logo">
-  </a>
-  <div id='header-title'>
-   <a href="[% c.uri_for('/') %]">A Gitalist</a>
-   [%- IF Repository %]
-    / <a href="[% c.uri_for_action('/repository/summary', [Repository.name]) %]">[% Repository.name %]</a>
-    [%# INCLUDE 'nav/branches.tt2' %]
+<div id='the-container' class='container_12'>
+
+ <div id="page-header">
+   <div class="clear"></div> 
+   <div class='grid_6'>
+    <a href="[% c.uri_for('/') %]">A Gitalist</a>
+    [%- IF Repository %]
+     / <a href="[% c.uri_for_action('/repository/summary', [Repository.name]) %]">[% Repository.name %]</a>
+    [%- END %]
    </div>
-   [% INCLUDE 'nav/search.tt2' %]
-  [% END %]
-</div>
+   <div class='grid_6'>
+    <a title="git homepage" href="http://git-scm.org">
+     <img src="[% c.uri_for('/logo.png') %]" alt="git" class="logo">
+    </a>
+    [% IF Repository; INCLUDE 'nav/search.tt2'; END %]
+   </div>
+ </div>
 
-<div id='body'>
-[% content %]
-</div>
+ [% INCLUDE 'nav/actions.tt2' %]
 
-<div id="page-footer">
-[% IF Repository %]
-  [% Repository.description | html %]
-[% END %]
-[% INCLUDE 'inc/footer_feeds.tt2' %]
-</div>
+ <div class="clear"></div>
+ <div id='body' class='grid_12'>
+ [% content %]
+ </div>
+
+ <div class="clear"></div>
+ <div id="page-footer">
+  <div class='grid_12'>
+   [%
+     IF Repository; Repository.description | html; END;
+     INCLUDE 'inc/footer_feeds.tt2';
+   %]
+  </div>
+ </div>
 
 </div>
 
index 89143b4..ff4d5a4 100644 (file)
@@ -2,7 +2,7 @@
 use FindBin qw/$Bin/;
 use lib "$Bin/lib";
 use TestGitalist;
-plan 'skip_all' => 'Either Test::WWW::Mechanize::Catalyst or WWW::Mechanize::TreeBuilder not present' unless MECH();
+plan 'skip_all' => "One or more of the following modules aren't present: Test::WWW::Mechanize::Catalyst WWW::Mechanize::TreeBuilder HTML::TreeBuilder::XPath" unless MECH();
 
 MECH->get_ok('/');
 {