improved project page design ・ 83a1e39 ・ Gitprep

- improved project page design;
- Browse files
- Yuki Kimoto commited on 2013-04-29
- 1 parent 4fa38fa
  
  commit 83a1e396ac806b74a52c4c69a3389139d18149f3

Showing 5 changed files with 85 additions and 141 deletions

+36 -3

lib/Gitprep/Git.pm

...	...	@@ -805,6 +805,39 @@ sub latest_commit_log {
805	805	return $commit_log;
806	806	}
807	807
	808	+sub last_change_commit {
	809	+ my ($self, $user, $project, $rev, $file) = @_;
	810	+
	811	+ my $commit_log = {};
	812	+ $file = '' unless defined $file;
	813	+
	814	+ my @cmd = $self->cmd(
	815	+ $user,
	816	+ $project,
	817	+ '--no-pager',
	818	+ 'log',
	819	+ '-n',
	820	+ '1',
	821	+ '--pretty=format:%H',
	822	+ $rev,
	823	+ '--',
	824	+ $file
	825	+ );
	826	+ open my $fh, '-\|', @cmd
	827	+ or croak 'Open git-log failed';
	828	+
	829	+ local $/;
	830	+ my $commit_log_text = $self->dec(scalar <$fh>);
	831	+
	832	+ my $commit;
	833	+ if ($commit_log_text =~ /^([0-9a-zA-Z]+)/) {
	834	+ my $rev = $1;
	835	+ $commit = $self->parse_commit($user, $project, $rev);
	836	+ }
	837	+
	838	+ return $commit;
	839	+}
	840	+
808	841	sub parse_blobdiff_lines {
809	842	my ($self, $lines) = @_;
810	843
...	...	@@ -1323,9 +1356,9 @@ sub trees {
1323	1356	$tree->{mode_str} = $self->_mode_str($tree->{mode});
1324	1357
1325	1358	# Commit log
1326		- my $name = defined $dir && $dir ne '' ? "$dir/$tree->{name}" : $tree->{name};
1327		- my $commit_log = $self->latest_commit_log($user, $project, $rev, $name);
1328		- $tree = {%$tree, %$commit_log};
	1359	+ my $path = defined $dir && $dir ne '' ? "$dir/$tree->{name}" : $tree->{name};
	1360	+ my $commit = $self->last_change_commit($user, $project, $rev, $path);
	1361	+ $tree->{commit} = $commit;
1329	1362
1330	1363	push @$trees, $tree;
1331	1364	}

+1 -1

public/css/common.css

View

@@ -89,7 +89,7 @@
   border-bottom:1px solid #ccc;
   border-right:1px solid #ccc;
 }
-      
+
 .corner-left-none {
   border-top-left-radius:0;
   border-bottom-left-radius:0;

+1 -1

templates/include/project_header.html.ep

View

...	...	@@ -9,7 +9,7 @@
9	9
10	10	<div class="row">
11	11	<div class="span9">
12		- <ul class="breadcrumb">
	12	+ <ul class="breadcrumb" style="margin:0">
13	13	<li><a href="<%= url_for('/') %>"><i class="icon-home"></i></a></li>
14	14	/
15	15	<li><a href="<%= url_for("/$user") %>"><%= $user %></a></li>

+40 -125

templates/include/tree.html.ep

View

@@ -2,146 +2,61 @@
   my $dir = stash('dir');
 %>
 
-%= stylesheet begin
-  /* Source tree */
-  .tree {
-    width:100%;
-    margin:5px auto;
-    border:2px solid gray;
-  }
-  .tree_header {
-    background-color: #E0FFFF;
-    border-bottom: 1px solid gray;
-    padding: 8px;
-    padding-left:6px;
-  }
-  .tree_header a {
-    text-decoration:none;
-    color:black;
-  }
-  .tree_header a:hover {
-    text-decoration:underline;
-    color:black;
-  }
-  .tree_header2 {
-    padding:5px;
-    padding-left:3px;
-    border-bottom:1px solid gray;
-  }
-  .tree_header2_left {
-    width:700px;
-    float:left;
-  }
-  .tree_header2_left_right {
-    color:gray;
-  }
-  .tree_header2_right {
-    text-align:right;
-    font-size:90%;
-    color:gray;
-  }
-  .tree_header2_right a {
-    color:gray;
-    text-decoration:none;
-  }
-  .tree_header2_right a:hover {
-    color:gray;
-    text-decoration:underline;
-  }
-  
-  .tree_body {
-    font-size:80%;
-    width: 100%;
-    background-color:#F8F8FF;
-    padding:0;
-  }
-  .tree_body td {
-    border-bottom:1px solid #DCDCDC;
-    padding:5px;
-    padding-top:9px;
-    padding-bottom:9px;
-  }
-  .tree_td_blob a {
-    background-image:url(<%= url_for('/image/file_min.png') %>);
-    text-decoration:none;
-    background-repeat:no-repeat;
-    padding-left:25px;
-    color:#4183C4;
-  }
-  .tree_td_blob a:hover{
-    text-decoration:underline;
-  }
-  .tree_td_dir a {
-    background-image:url(<%= url_for('/image/folder_min.png') %>);
-    text-decoration:none;
-    background-repeat:no-repeat; 
-    padding-left:25px;
-    color:#4183C4;
-  }
-  .tree_td_dir a:hover{
-    text-decoration:underline;
-  }
-  .tree_td_commit a {
-    text-decoration:none;
-    color:black;
-  }
-  .tree_td_commit a:hover {
-    text-decoration:underline;
-    color:black;
-  }
-% end
-
-<div class="border-gray border-bottom-none" style="margin-bottom:10px">
-  <div class="padding5 bk-blue-light border-bottom-gray">
-    <a href="<%= url_for("/$user/$project/commit/$rev") %>">
+<div style="margin-bottom:10px">
+  <div class="bk-blue-light border-blue radius-top" style="padding:5px">
+    <a style="color:#333" href="<%= url_for("/$user/$project/commit/$rev") %>">
       <%= $commit->{title} %>
     </a>
   </div>
-  <div class="padding5 border-bottom-gray">
-    <div class="row">
+  <div class="border-blue" style="padding:5px;border-top:none">
+    <div class="row" style="font-size:12px">
       <div class="span8">
-        <b><%= $commit->{author} %></b>
+        <a style="color:#333" href="#" title="<%= $commit->{author_email} %>"><%= $commit->{author_name} %></a>
         <span class="muted">
           authored <%= $commit->{author_date} %>
         </span>
       </div>
-      <div class="span3 offset1-mini text-right">
-        <a href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
+      <div class="text-right">
+        <a class="muted" href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
           latest commit <%= substr($commit->{id}, 0, 10) %>
         </a>
      </div>
    </div>
   </div>
   % for (my $i = 0; $i <@$trees; $i++) {
-    <div class="border-bottom-gray padding5" style="font-size:90%">
-      <div class="row">
-        % my $tree = $trees->[$i];
-        % my $type = $tree->{type};
-        % my $name = $tree->{name};
-        
-        <div class="span3" style="width:170px">
-          % my $child_dir = defined $dir && length $dir ? join('/', $dir, $name) : $name;
-          % if ($type eq 'blob') {
-            % my $file = defined $dir && $dir ne '' ? "$dir/$name" : $name;
-            <i class="icon-file"></i>
-            <a href="<%= url_for("/$user/$project/blob/$rev/$file") %>">
-              <%= $name %>
-            </a>
-          % } elsif ($tree) {
-            <i class="icon-folder-open"></i>
-            <a href="<%= url_for("/$user/$project/tree/$rev/$child_dir") %>">
-              <%= $name %>
+    % my $last = $i == @$trees - 1;
+    <div class="border-gray <%= $last ? 'radius-bottom' : '' %>" style="padding:5px;font-size:90%;border-top:none;#eee;background:#f8f8f8;<%= $last ? '' : 'border-bottom:1px solid #eee;' %>">
+      <div>
+        <div class="row">
+          % my $tree = $trees->[$i];
+          % my $type = $tree->{type};
+          % my $name = $tree->{name};
+          % my $commit = $tree->{commit};
+          
+          <div class="span3" style="width:170px">
+            % my $child_dir = defined $dir && length $dir ? join('/', $dir, $name) : $name;
+            % if ($type eq 'blob') {
+              % my $file = defined $dir && $dir ne '' ? "$dir/$name" : $name;
+              <i class="icon-file"></i>
+              <a href="<%= url_for("/$user/$project/blob/$rev/$file") %>">
+                <%= $name %>
+              </a>
+            % } elsif ($tree) {
+              <i class="icon-folder-open"></i>
+              <a href="<%= url_for("/$user/$project/tree/$rev/$child_dir") %>">
+                <%= $name %>
+              </a>
+            % }
+          </div>
+          <div class="span2" style="width:100px">
+            <%= $commit->{age_string} %>
+          </div>
+          <div class="span6" style="width:610px">
+            <a class="font-black" href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
+              <%= $commit->{title_short} %>
             </a>
-          % }
-        </div>
-        <div class="span2" style="width:100px">
-          <%= $tree->{author_date} %>
-        </div>
-        <div class="span6" style="width:610px">
-          <a class="font-black" href="<%= url_for("/$user/$project/commit/$tree->{commit}") %>">
-            <%= $tree->{comment} %>
-          </a>
-          [<%= $tree->{author} %>]
+            [<a href="#" title="<%= $commit->{author_email} %>"><%= $commit->{author_name} %></a>]
+          </div>
         </div>
       </div>
     </div>

+7 -11

templates/project.html.ep

View

@@ -105,15 +105,11 @@
     
     %= include '/include/project_header';
 
-    <div class="row">
-      <div class="span10">
-        <h4 style="margin-top:5px">
-          <%= $desc %>
-        </h4>
-      </div>
-    </div>
+    <h3 style="margin:20px 0px 20px 0;font-size:16px;line-height:0">
+      <%= $desc %>
+    </h3>
     % if ($state eq 'display') {
-      <div class="border-gray" style="padding:0 5px;margin-bottom:10px">
+      <div class="border-gray radius" style="padding:0 5px;margin-bottom:10px">
         <a class="btn" href="<%= url_for("/$user/$project/archive/master.zip") %>">
           <i class="icon-arrow-down"></i>ZIP
         </a>
@@ -131,11 +127,11 @@
       
       %= include '/include/code_menu', display => 'files';
       
-      <div class="row">
+      <div class="row" style="font-size:17px;margin-bottom:10px">
         <div class="span6">
           <a href="<%= url_for %>"><%= $project %></a>
         </div>
-        <div class="span6 text-right">
+        <div class="text-right">
           <a href="<%= url_for("/$user/$project/commits/master") %>">
             <%= $commits_number %> commits
           </a>
@@ -145,7 +141,7 @@
       %= include '/include/tree';
       
       <div>
-        <h3>README</h3>
+        <h3 style="font-size:20px">README</h3>
         <pre><%= $readme %></pre>
       </div>
     % } elsif ($state eq 'init' && $logined) {

...	...	@@ -89,7 +89,7 @@
89	89	border-bottom:1px solid #ccc;
90	90	border-right:1px solid #ccc;
91	91	}
92		-
	92	+
93	93	.corner-left-none {
94	94	border-top-left-radius:0;
95	95	border-bottom-left-radius:0;

...	...	@@ -2,146 +2,61 @@
2	2	my $dir = stash('dir');
3	3	%>
4	4
5		-%= stylesheet begin
6		- /* Source tree */
7		- .tree {
8		- width:100%;
9		- margin:5px auto;
10		- border:2px solid gray;
11		- }
12		- .tree_header {
13		- background-color: #E0FFFF;
14		- border-bottom: 1px solid gray;
15		- padding: 8px;
16		- padding-left:6px;
17		- }
18		- .tree_header a {
19		- text-decoration:none;
20		- color:black;
21		- }
22		- .tree_header a:hover {
23		- text-decoration:underline;
24		- color:black;
25		- }
26		- .tree_header2 {
27		- padding:5px;
28		- padding-left:3px;
29		- border-bottom:1px solid gray;
30		- }
31		- .tree_header2_left {
32		- width:700px;
33		- float:left;
34		- }
35		- .tree_header2_left_right {
36		- color:gray;
37		- }
38		- .tree_header2_right {
39		- text-align:right;
40		- font-size:90%;
41		- color:gray;
42		- }
43		- .tree_header2_right a {
44		- color:gray;
45		- text-decoration:none;
46		- }
47		- .tree_header2_right a:hover {
48		- color:gray;
49		- text-decoration:underline;
50		- }
51		-
52		- .tree_body {
53		- font-size:80%;
54		- width: 100%;
55		- background-color:#F8F8FF;
56		- padding:0;
57		- }
58		- .tree_body td {
59		- border-bottom:1px solid #DCDCDC;
60		- padding:5px;
61		- padding-top:9px;
62		- padding-bottom:9px;
63		- }
64		- .tree_td_blob a {
65		- background-image:url(<%= url_for('/image/file_min.png') %>);
66		- text-decoration:none;
67		- background-repeat:no-repeat;
68		- padding-left:25px;
69		- color:#4183C4;
70		- }
71		- .tree_td_blob a:hover{
72		- text-decoration:underline;
73		- }
74		- .tree_td_dir a {
75		- background-image:url(<%= url_for('/image/folder_min.png') %>);
76		- text-decoration:none;
77		- background-repeat:no-repeat;
78		- padding-left:25px;
79		- color:#4183C4;
80		- }
81		- .tree_td_dir a:hover{
82		- text-decoration:underline;
83		- }
84		- .tree_td_commit a {
85		- text-decoration:none;
86		- color:black;
87		- }
88		- .tree_td_commit a:hover {
89		- text-decoration:underline;
90		- color:black;
91		- }
92		-% end
93		-
94		-<div class="border-gray border-bottom-none" style="margin-bottom:10px">
95		- <div class="padding5 bk-blue-light border-bottom-gray">
96		- <a href="<%= url_for("/$user/$project/commit/$rev") %>">
	5	+<div style="margin-bottom:10px">
	6	+ <div class="bk-blue-light border-blue radius-top" style="padding:5px">
	7	+ <a style="color:#333" href="<%= url_for("/$user/$project/commit/$rev") %>">
97	8	<%= $commit->{title} %>
98	9	</a>
99	10	</div>
100		- <div class="padding5 border-bottom-gray">
101		- <div class="row">
	11	+ <div class="border-blue" style="padding:5px;border-top:none">
	12	+ <div class="row" style="font-size:12px">
102	13	<div class="span8">
103		- <b><%= $commit->{author} %></b>
	14	+ <a style="color:#333" href="#" title="<%= $commit->{author_email} %>"><%= $commit->{author_name} %></a>
104	15	<span class="muted">
105	16	authored <%= $commit->{author_date} %>
106	17	</span>
107	18	</div>
108		- <div class="span3 offset1-mini text-right">
109		- <a href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
	19	+ <div class="text-right">
	20	+ <a class="muted" href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
110	21	latest commit <%= substr($commit->{id}, 0, 10) %>
111	22	</a>
112	23	</div>
113	24	</div>
114	25	</div>
115	26	% for (my $i = 0; $i <@$trees; $i++) {
116		- <div class="border-bottom-gray padding5" style="font-size:90%">
117		- <div class="row">
118		- % my $tree = $trees->[$i];
119		- % my $type = $tree->{type};
120		- % my $name = $tree->{name};
121		-
122		- <div class="span3" style="width:170px">
123		- % my $child_dir = defined $dir && length $dir ? join('/', $dir, $name) : $name;
124		- % if ($type eq 'blob') {
125		- % my $file = defined $dir && $dir ne '' ? "$dir/$name" : $name;
126		- <i class="icon-file"></i>
127		- <a href="<%= url_for("/$user/$project/blob/$rev/$file") %>">
128		- <%= $name %>
129		- </a>
130		- % } elsif ($tree) {
131		- <i class="icon-folder-open"></i>
132		- <a href="<%= url_for("/$user/$project/tree/$rev/$child_dir") %>">
133		- <%= $name %>
	27	+ % my $last = $i == @$trees - 1;
	28	+ <div class="border-gray <%= $last ? 'radius-bottom' : '' %>" style="padding:5px;font-size:90%;border-top:none;#eee;background:#f8f8f8;<%= $last ? '' : 'border-bottom:1px solid #eee;' %>">
	29	+ <div>
	30	+ <div class="row">
	31	+ % my $tree = $trees->[$i];
	32	+ % my $type = $tree->{type};
	33	+ % my $name = $tree->{name};
	34	+ % my $commit = $tree->{commit};
	35	+
	36	+ <div class="span3" style="width:170px">
	37	+ % my $child_dir = defined $dir && length $dir ? join('/', $dir, $name) : $name;
	38	+ % if ($type eq 'blob') {
	39	+ % my $file = defined $dir && $dir ne '' ? "$dir/$name" : $name;
	40	+ <i class="icon-file"></i>
	41	+ <a href="<%= url_for("/$user/$project/blob/$rev/$file") %>">
	42	+ <%= $name %>
	43	+ </a>
	44	+ % } elsif ($tree) {
	45	+ <i class="icon-folder-open"></i>
	46	+ <a href="<%= url_for("/$user/$project/tree/$rev/$child_dir") %>">
	47	+ <%= $name %>
	48	+ </a>
	49	+ % }
	50	+ </div>
	51	+ <div class="span2" style="width:100px">
	52	+ <%= $commit->{age_string} %>
	53	+ </div>
	54	+ <div class="span6" style="width:610px">
	55	+ <a class="font-black" href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
	56	+ <%= $commit->{title_short} %>
134	57	</a>
135		- % }
136		- </div>
137		- <div class="span2" style="width:100px">
138		- <%= $tree->{author_date} %>
139		- </div>
140		- <div class="span6" style="width:610px">
141		- <a class="font-black" href="<%= url_for("/$user/$project/commit/$tree->{commit}") %>">
142		- <%= $tree->{comment} %>
143		- </a>
144		- [<%= $tree->{author} %>]
	58	+ [<a href="#" title="<%= $commit->{author_email} %>"><%= $commit->{author_name} %></a>]
	59	+ </div>
145	60	</div>
146	61	</div>
147	62	</div>

...	...	@@ -105,15 +105,11 @@
105	105
106	106	%= include '/include/project_header';
107	107
108		- <div class="row">
109		- <div class="span10">
110		- <h4 style="margin-top:5px">
111		- <%= $desc %>
112		- </h4>
113		- </div>
114		- </div>
	108	+ <h3 style="margin:20px 0px 20px 0;font-size:16px;line-height:0">
	109	+ <%= $desc %>
	110	+ </h3>
115	111	% if ($state eq 'display') {
116		- <div class="border-gray" style="padding:0 5px;margin-bottom:10px">
	112	+ <div class="border-gray radius" style="padding:0 5px;margin-bottom:10px">
117	113	<a class="btn" href="<%= url_for("/$user/$project/archive/master.zip") %>">
118	114	<i class="icon-arrow-down"></i>ZIP
119	115	</a>
...	...	@@ -131,11 +127,11 @@
131	127
132	128	%= include '/include/code_menu', display => 'files';
133	129
134		- <div class="row">
	130	+ <div class="row" style="font-size:17px;margin-bottom:10px">
135	131	<div class="span6">
136	132	<a href="<%= url_for %>"><%= $project %></a>
137	133	</div>
138		- <div class="span6 text-right">
	134	+ <div class="text-right">
139	135	<a href="<%= url_for("/$user/$project/commits/master") %>">
140	136	<%= $commits_number %> commits
141	137	</a>
...	...	@@ -145,7 +141,7 @@
145	141	%= include '/include/tree';
146	142
147	143	<div>
148		- <h3>README</h3>
	144	+ <h3 style="font-size:20px">README</h3>
149	145	<pre><%= $readme %></pre>
150	146	</div>
151	147	% } elsif ($state eq 'init' && $logined) {