improve blame page design ・ 5ff5a22 ・ Gitprep

- improve blame page design;
- Browse files
- Yuki Kimoto commited on 2016-01-13
- 1 parent cca24f9
  
  commit 5ff5a2231692749d058cb2b312339d5d6e65a184

Showing 4 changed files with 137 additions and 47 deletions

+13

lib/Gitprep/Git.pm

@@ -201,6 +201,8 @@ sub blame {
         $min_author_time = $author_time if !$min_author_time || $author_time < $min_author_time;
         my $author_age_string_date = $self->_age_string_date($author_time);
         $blame_line->{author_age_string_date} = $author_age_string_date;
+        my $author_age_string_date_local = $self->_age_string_date_local($author_time);
+        $blame_line->{author_age_string_date_local} = $author_age_string_date_local;
       }
       elsif ($line =~ /^summary +(.+)/) {
         $blame_line->{summary} = $1;
@@ -243,6 +245,17 @@ sub _age_string_date {
   return $age_string_date;
 }
 
+sub _age_string_date_local {
+  my ($self, $age) = @_;
+  
+  my $time_zone_second = $self->time_zone_second || 0;
+  
+  my ($sec, $min, $hour, $mday, $mon, $year, $wday, $yday) = gmtime($age + $time_zone_second);
+  my $age_string_date_local = sprintf '%4d-%02d-%02d', 1900 + $year, $mon + 1, $mday;
+  
+  return $age_string_date_local;
+}
+
 sub blob {
   my ($self, $user, $project, $rev, $file) = @_;
   

+68 -1

public/css/bootstrap.css

View

@@ -10,7 +10,7 @@
  
 /*
   Default values
-    border-color: #d8d8d8;
+    border:1px solid #d8d8d8;
     border-radius: 3px;
     
     Text Gray
@@ -1920,3 +1920,70 @@ button.close {
 .pagenation li:last-child {
   border-radius:0 3px 3px 0;
 }
+
+.blame-page-path {
+  overflow:hidden;
+}
+
+.blame-page-path .page-path {
+  float:left;
+  margin-left:0;
+}
+
+.blame-gradation {
+  float:right;
+  text-align:right:
+}
+
+.blame-body-container {
+  overflow-x:scroll;
+  border:1px solid #d8d8d8;
+  border-radius:0 0 3px 3px;
+}
+
+.blame-body {
+  width:100%;
+  border-collapse: collapse;
+}
+
+.blame-body-left {
+  padding:3px 7px;
+  vertical-align:middle;
+  border-left:none;
+  border-bottom:none;
+}
+
+.blame-body-center {
+  padding:5px 10px;
+  color:gray;
+  font-size:12px;
+  vertical-align:middle;
+  border-right:1px solid #d8d8d8;
+}
+
+.blame-body-right {
+  padding:5px 10px;
+  vertical-align:middle;
+  white-space: nowrap;
+  border-right:none
+}
+
+.blame-summary-container {
+  overflow:hidden;
+}
+
+.blame-summary {
+  display:inline-block;
+  float:left;
+  font-weight:bold;
+}
+
+.blame-commit-id {
+  display:inline-block;
+  float:right;
+  font-size:90%;
+}
+
+.blame-author {
+  color:#767676;
+}

+56 -43

templates/blame.html.ep

View

@@ -57,62 +57,75 @@
   
   <!-- Blame page -->
   <div class="container">
-    %= include '/include/page_path', Path => $file;
-    <div class="text-right" style="margin-bottom:10px">
-      Newer
-      % for my $color (@$colors) {
-        <span style="font-size:20px;color:<%= $color %>">■</span>
-      % }
-      Older
+    <div class="blame-page-path">
+      %= include '/include/page_path', Path => $file;
+      <div class="blame-gradation">
+        Newer
+        % for my $color (@$colors) {
+          <span style="font-size:20px;color:<%= $color %>">■</span>
+        % }
+        Older
+      </div>
     </div>
-    <div class="border-gray bk-gray-light" style="padding:5px; border-bottom:none">
-      <div class="row">
-        <div class="span7" style="padding-top:5px">
-          <i class="icon-file icon-white"></i>
-          <%= $file_type %>
-          <span class="muted">|</span>
-          <%= @$blame_lines %> lines
-          <span class="muted">|</span>
-          <%= $file_size %>kb
-        </div>
-        <div class="text-right">
-          <a class="btn" href="<%= url_for("/$user/$project/raw/$rev/$file") %>">Raw</a><a class="btn" href="<%= url_for("/$user/$project/blob/$rev/$file") %>">Normal View</a><a class="btn" href="<%= url_for("/$user/$project/commits/$rev/$file") %>">History</a>
-        </div>
+    <div class="file-header">
+      <div class="file-header-left">
+        <i class="icon-file icon-white"></i>
+        <%= @$blame_lines %> lines
+        <span style="color:#dcdcdc">|</span>
+        <%= $file_size %>kb
+      </div>
+      <div class="file-header-right">
+        <ul>
+          <li>
+            <a class="btn btn-small" href="<%= url_for("/$user/$project/raw/$rev/$file") %>">Raw</a>
+          </li>
+          <li>
+            <a class="btn btn-small" href="<%= url_for("/$user/$project/blob/$rev/$file") %>">Normal View</a>
+          </li>
+          <li>
+            <a class="btn btn-small" href="<%= url_for("/$user/$project/commits/$rev/$file") %>">History</a>
+          </li>
+        </ul>
       </div>
     </div>
-    <div class="border-gray" style="width:938px;overflow-x:scroll;border-top:none">
-      <table style="min-width:938px">
+    <div class="blame-body-container">
+      <table class="blame-body">
         % for my $line (@$blame_lines) {
-          % my $blame_commit = $line->{commit};
-          % my $summary = $line->{summary};
-          % my $summary_short= length $summary > 28 ? substr($summary, 0, 28) . '...' : $summary;
-          % my $time_rate = $blame_max_author_time == $blame_min_author_time
-          %  ? 1
-          %  : ($blame_max_author_time - $line->{author_time}) / ($blame_max_author_time - $blame_min_author_time);
-          % my $color_number = int($time_rate * 10);
-          % $color_number = 9 if $color_number == 10;
-          % my $hot_color = $colors->[$color_number];
+          <%
+            my $blame_commit = $line->{commit};
+            my $summary = $line->{summary};
+            my $summary_short= length $summary > 28 ? substr($summary, 0, 28) . '...' : $summary;
+            my $time_rate = $blame_max_author_time == $blame_min_author_time
+             ? 1
+             : ($blame_max_author_time - $line->{author_time}) / ($blame_max_author_time - $blame_min_author_time);
+            my $color_number = int($time_rate * 10);
+            $color_number = 9 if $color_number == 10;
+            my $hot_color = $colors->[$color_number];
+          %>
           <tr id="L<%= $line->{number} %>">
             % if ($line->{before_same_commit}) {
-              <td nowrap class="border-gray" style="padding:5px 10px; background:#f7f7f7;vertical-align:middle;border-left:none;border-top:none;border-bottom:none;border-right:2px solid <%= $hot_color %>" >
-              </td>
+              <td class="blame-body-left" nowrap style="border-right:2px solid <%= $hot_color %>"></td>
             % } else {
-              <td nowrap class="border-gray" style="padding:5px 10px; background:#f7f7f7;vertical-align:middle;border-left:none;border-bottom:none;border-right:2px solid <%= $hot_color %>" >
-                  <div style="margin-bottom:0;padding-botttom:0">
-                    <a href="<%= url_for("/$user/$project/commit/$blame_commit") %>" ><%= substr($blame_commit, 0, 8) %></a>
-                    <a href="<%= url_for("/$user/$project/blame/$blame_commit/$file") %>" >»</a>
-                    <span title="<%= $line->{author_mail} %>"><%= $line->{author} %></span>
-                  </div>
-                  <div style="margin-top:0;padding-top:0">
-                    <%= $line->{author_age_string_date_local} %>
+              <td class="blame-body-left" nowrap style="border-right:2px solid <%= $hot_color %>">
+                <div class="blame-summary-container">
+                  <div class="blame-summary">
                     <%= $summary_short %>
                   </div>
+                  <div class="blame-commit-id">
+                    <a href="<%= url_for("/$user/$project/commit/$blame_commit") %>" ><%= substr($blame_commit, 0, 7) %></a>
+                  </div>
+                </div>
+                <div class="blame-author">
+                  <span title="<%= $line->{author_mail} %>"><%= $line->{author} %></span>
+                  authored on
+                  <%= $line->{author_age_string_date_local} %>
+                </div>
               </td>
             % }
-            <td nowrap class="border-gray" style="padding:5px 10px;color:gray;font-size:12px;vertical-align:middle;">
+            <td class="blame-body-center" nowrap>
               <%= $line->{number} %>
             </td>
-            <td nowrap class="border-gray" style="padding:5px 10px;vertical-align:middle;white-space: nowrap;border-right:none">
+            <td nowrap class="blame-body-right">
               <pre style="border:none;background:white;margin:0;padding:0;white-space: nowrap;"><%= $line->{content} %></pre>
             </td>
           </tr>

-3

xt/basic.t

View

@@ -431,9 +431,6 @@ note 'blame';
   # Commit link
   $t->content_like(qr#/commit/0929b1a4ee79d0f104fd9ef7d6d410d501a273cf#);
   
-  # Blame link
-  $t->content_like(qr#/blame/0929b1a4ee79d0f104fd9ef7d6d410d501a273cf/README#);
-  
   # Lines
   $t->content_like(qr#http://foo1#);
 }

...	...	@@ -201,6 +201,8 @@ sub blame {
201	201	$min_author_time = $author_time if !$min_author_time \|\| $author_time < $min_author_time;
202	202	my $author_age_string_date = $self->_age_string_date($author_time);
203	203	$blame_line->{author_age_string_date} = $author_age_string_date;
	204	+ my $author_age_string_date_local = $self->_age_string_date_local($author_time);
	205	+ $blame_line->{author_age_string_date_local} = $author_age_string_date_local;
204	206	}
205	207	elsif ($line =~ /^summary +(.+)/) {
206	208	$blame_line->{summary} = $1;
...	...	@@ -243,6 +245,17 @@ sub _age_string_date {
243	245	return $age_string_date;
244	246	}
245	247
	248	+sub _age_string_date_local {
	249	+ my ($self, $age) = @_;
	250	+
	251	+ my $time_zone_second = $self->time_zone_second \|\| 0;
	252	+
	253	+ my ($sec, $min, $hour, $mday, $mon, $year, $wday, $yday) = gmtime($age + $time_zone_second);
	254	+ my $age_string_date_local = sprintf '%4d-%02d-%02d', 1900 + $year, $mon + 1, $mday;
	255	+
	256	+ return $age_string_date_local;
	257	+}
	258	+
246	259	sub blob {
247	260	my ($self, $user, $project, $rev, $file) = @_;
248	261

...	...	@@ -431,9 +431,6 @@ note 'blame';
431	431	# Commit link
432	432	$t->content_like(qr#/commit/0929b1a4ee79d0f104fd9ef7d6d410d501a273cf#);
433	433
434		- # Blame link
435		- $t->content_like(qr#/blame/0929b1a4ee79d0f104fd9ef7d6d410d501a273cf/README#);
436		-
437	434	# Lines
438	435	$t->content_like(qr#http://foo1#);
439	436	}

...	...	@@ -10,7 +10,7 @@
10	10
11	11	/*
12	12	Default values
13		- border-color: #d8d8d8;
	13	+ border:1px solid #d8d8d8;
14	14	border-radius: 3px;
15	15
16	16	Text Gray
...	...	@@ -1920,3 +1920,70 @@ button.close {
1920	1920	.pagenation li:last-child {
1921	1921	border-radius:0 3px 3px 0;
1922	1922	}
	1923	+
	1924	+.blame-page-path {
	1925	+ overflow:hidden;
	1926	+}
	1927	+
	1928	+.blame-page-path .page-path {
	1929	+ float:left;
	1930	+ margin-left:0;
	1931	+}
	1932	+
	1933	+.blame-gradation {
	1934	+ float:right;
	1935	+ text-align:right:
	1936	+}
	1937	+
	1938	+.blame-body-container {
	1939	+ overflow-x:scroll;
	1940	+ border:1px solid #d8d8d8;
	1941	+ border-radius:0 0 3px 3px;
	1942	+}
	1943	+
	1944	+.blame-body {
	1945	+ width:100%;
	1946	+ border-collapse: collapse;
	1947	+}
	1948	+
	1949	+.blame-body-left {
	1950	+ padding:3px 7px;
	1951	+ vertical-align:middle;
	1952	+ border-left:none;
	1953	+ border-bottom:none;
	1954	+}
	1955	+
	1956	+.blame-body-center {
	1957	+ padding:5px 10px;
	1958	+ color:gray;
	1959	+ font-size:12px;
	1960	+ vertical-align:middle;
	1961	+ border-right:1px solid #d8d8d8;
	1962	+}
	1963	+
	1964	+.blame-body-right {
	1965	+ padding:5px 10px;
	1966	+ vertical-align:middle;
	1967	+ white-space: nowrap;
	1968	+ border-right:none
	1969	+}
	1970	+
	1971	+.blame-summary-container {
	1972	+ overflow:hidden;
	1973	+}
	1974	+
	1975	+.blame-summary {
	1976	+ display:inline-block;
	1977	+ float:left;
	1978	+ font-weight:bold;
	1979	+}
	1980	+
	1981	+.blame-commit-id {
	1982	+ display:inline-block;
	1983	+ float:right;
	1984	+ font-size:90%;
	1985	+}
	1986	+
	1987	+.blame-author {
	1988	+ color:#767676;
	1989	+}

...	...	@@ -57,62 +57,75 @@
57	57
58	58	<!-- Blame page -->
59	59	<div class="container">
60		- %= include '/include/page_path', Path => $file;
61		- <div class="text-right" style="margin-bottom:10px">
62		- Newer
63		- % for my $color (@$colors) {
64		- <span style="font-size:20px;color:<%= $color %>">■</span>
65		- % }
66		- Older
	60	+ <div class="blame-page-path">
	61	+ %= include '/include/page_path', Path => $file;
	62	+ <div class="blame-gradation">
	63	+ Newer
	64	+ % for my $color (@$colors) {
	65	+ <span style="font-size:20px;color:<%= $color %>">■</span>
	66	+ % }
	67	+ Older
	68	+ </div>
67	69	</div>
68		- <div class="border-gray bk-gray-light" style="padding:5px; border-bottom:none">
69		- <div class="row">
70		- <div class="span7" style="padding-top:5px">
71		- <i class="icon-file icon-white"></i>
72		- <%= $file_type %>
73		- <span class="muted">\|</span>
74		- <%= @$blame_lines %> lines
75		- <span class="muted">\|</span>
76		- <%= $file_size %>kb
77		- </div>
78		- <div class="text-right">
79		- <a class="btn" href="<%= url_for("/$user/$project/raw/$rev/$file") %>">Raw</a><a class="btn" href="<%= url_for("/$user/$project/blob/$rev/$file") %>">Normal View</a><a class="btn" href="<%= url_for("/$user/$project/commits/$rev/$file") %>">History</a>
80		- </div>
	70	+ <div class="file-header">
	71	+ <div class="file-header-left">
	72	+ <i class="icon-file icon-white"></i>
	73	+ <%= @$blame_lines %> lines
	74	+ <span style="color:#dcdcdc">\|</span>
	75	+ <%= $file_size %>kb
	76	+ </div>
	77	+ <div class="file-header-right">
	78	+ <ul>
	79	+ <li>
	80	+ <a class="btn btn-small" href="<%= url_for("/$user/$project/raw/$rev/$file") %>">Raw</a>
	81	+ </li>
	82	+ <li>
	83	+ <a class="btn btn-small" href="<%= url_for("/$user/$project/blob/$rev/$file") %>">Normal View</a>
	84	+ </li>
	85	+ <li>
	86	+ <a class="btn btn-small" href="<%= url_for("/$user/$project/commits/$rev/$file") %>">History</a>
	87	+ </li>
	88	+ </ul>
81	89	</div>
82	90	</div>
83		- <div class="border-gray" style="width:938px;overflow-x:scroll;border-top:none">
84		- <table style="min-width:938px">
	91	+ <div class="blame-body-container">
	92	+ <table class="blame-body">
85	93	% for my $line (@$blame_lines) {
86		- % my $blame_commit = $line->{commit};
87		- % my $summary = $line->{summary};
88		- % my $summary_short= length $summary > 28 ? substr($summary, 0, 28) . '...' : $summary;
89		- % my $time_rate = $blame_max_author_time == $blame_min_author_time
90		- % ? 1
91		- % : ($blame_max_author_time - $line->{author_time}) / ($blame_max_author_time - $blame_min_author_time);
92		- % my $color_number = int($time_rate * 10);
93		- % $color_number = 9 if $color_number == 10;
94		- % my $hot_color = $colors->[$color_number];
	94	+ <%
	95	+ my $blame_commit = $line->{commit};
	96	+ my $summary = $line->{summary};
	97	+ my $summary_short= length $summary > 28 ? substr($summary, 0, 28) . '...' : $summary;
	98	+ my $time_rate = $blame_max_author_time == $blame_min_author_time
	99	+ ? 1
	100	+ : ($blame_max_author_time - $line->{author_time}) / ($blame_max_author_time - $blame_min_author_time);
	101	+ my $color_number = int($time_rate * 10);
	102	+ $color_number = 9 if $color_number == 10;
	103	+ my $hot_color = $colors->[$color_number];
	104	+ %>
95	105	<tr id="L<%= $line->{number} %>">
96	106	% if ($line->{before_same_commit}) {
97		- <td nowrap class="border-gray" style="padding:5px 10px; background:#f7f7f7;vertical-align:middle;border-left:none;border-top:none;border-bottom:none;border-right:2px solid <%= $hot_color %>" >
98		- </td>
	107	+ <td class="blame-body-left" nowrap style="border-right:2px solid <%= $hot_color %>"></td>
99	108	% } else {
100		- <td nowrap class="border-gray" style="padding:5px 10px; background:#f7f7f7;vertical-align:middle;border-left:none;border-bottom:none;border-right:2px solid <%= $hot_color %>" >
101		- <div style="margin-bottom:0;padding-botttom:0">
102		- <a href="<%= url_for("/$user/$project/commit/$blame_commit") %>" ><%= substr($blame_commit, 0, 8) %></a>
103		- <a href="<%= url_for("/$user/$project/blame/$blame_commit/$file") %>" >»</a>
104		- <span title="<%= $line->{author_mail} %>"><%= $line->{author} %></span>
105		- </div>
106		- <div style="margin-top:0;padding-top:0">
107		- <%= $line->{author_age_string_date_local} %>
	109	+ <td class="blame-body-left" nowrap style="border-right:2px solid <%= $hot_color %>">
	110	+ <div class="blame-summary-container">
	111	+ <div class="blame-summary">
108	112	<%= $summary_short %>
109	113	</div>
	114	+ <div class="blame-commit-id">
	115	+ <a href="<%= url_for("/$user/$project/commit/$blame_commit") %>" ><%= substr($blame_commit, 0, 7) %></a>
	116	+ </div>
	117	+ </div>
	118	+ <div class="blame-author">
	119	+ <span title="<%= $line->{author_mail} %>"><%= $line->{author} %></span>
	120	+ authored on
	121	+ <%= $line->{author_age_string_date_local} %>
	122	+ </div>
110	123	</td>
111	124	% }
112		- <td nowrap class="border-gray" style="padding:5px 10px;color:gray;font-size:12px;vertical-align:middle;">
	125	+ <td class="blame-body-center" nowrap>
113	126	<%= $line->{number} %>
114	127	</td>
115		- <td nowrap class="border-gray" style="padding:5px 10px;vertical-align:middle;white-space: nowrap;border-right:none">
	128	+ <td nowrap class="blame-body-right">
116	129	<pre style="border:none;background:white;margin:0;padding:0;white-space: nowrap;"><%= $line->{content} %></pre>
117	130	</td>
118	131	</tr>