improve commit page design ・ a7d8543 ・ Gitprep

- improve commit page design;
- Browse files
- Yuki Kimoto commited on 2016-02-02
- 1 parent 421dbd6
  
  commit a7d85436e095234f2a0673100cdbb7e2451864a0

Showing 6 changed files with 147 additions and 115 deletions

+82 -1

public/css/bootstrap.css

@@ -2523,7 +2523,6 @@ button.close {
   border-top:none;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
-  color:#68777d;
 }
 
 .commits-summary-header {
@@ -2538,5 +2537,87 @@ button.close {
   width:20%;
   text-align:right;
 }
+.commits-summary-body {
+  overflow:hidden;
+  padding:4px 0;
+}
+.commits-summary-body > :first-child {
+  width:40%;
+  float:left;
+}
+.commits-summary-body > .last-child {
+  width:60%;
+  float:left;
+  text-align:right;
+}
+.commits-summary-author {
+  font-weight:bold;
+}
+.commits-summary-parent {
+  display:inline-block;
+  color:#767676;
+  margin-right:10px;
+}
+.commits-summary-parent a {
+  color:#333333;
+  text-decoration:underline;
+}
+.commits-summary-commit-id {
+  display:inline-block;
+  color:#767676;
+}
+.commits-summary-commit-id > span {
+  color:#333333;
+}
 
+.commit-changes {
+  margin:15px 0;
+}
 
+.file-add {
+  color:#32CD32;
+  border:2px #32CD32 solid;
+  margin-left:3px;
+  font-weight:bold;
+  text-align:center;
+  font-size:13px;
+  padding:0;
+  line-height:100%;
+  padding:0 2px;
+}
+
+.file-del {
+  color:red;
+  border:2px red solid;
+  margin-left:3px;
+  font-weight:bold;
+  text-align:center;
+  font-size:13px;
+  padding:0;
+  line-height:100%;
+  padding:0 2px;
+}
+
+.file-modified {
+  color:#DAA520;
+  border:2px #DAA520 solid;
+  margin-left:3px;
+  font-weight:bold;
+  text-align:center;
+  font-size:13px;
+  padding:0;
+  line-height:100%;
+  padding:0 2px;
+}
+
+.file-renamed {
+  color:#677a85;
+  border:2px #677a85 solid;
+  margin-left:3px;
+  font-weight:bold;
+  text-align:center;
+  font-size:13px;
+  padding:0;
+  line-height:100%;
+  padding:0 2px;
+}

+36 -36

templates/commit.html.ep

View

@@ -100,43 +100,43 @@
       </ul>
     </li>
     <li class="last-child">
-      <div>
-        <span><b><%= $commit->{author_name} %></b></span>
-        <span>authored <span title="<%= $commit->{age_string_datetime_local} %>"><%= $commit->{age_string} %></span>
-      </div>
-      <div>
-        % my $parents = $commit->{parents};
-        
-        % if (@$parents == 0) {
-          <div>
-            0 <span class="muted" style="padding-right:10px">parent</span>
-            <span class="muted">commit</span> <%= $commit->{id} %>
-          </div>
-        % } elsif (@$parents == 1) {
-          <div>
-            1 <span class="muted">parent</span>
-            <a class="font-black" style="padding-right:10px" href="<%= url_for("/$user/$project/commit/$parents->[0]") %>">
-              <%= substr($parents->[0], 0, 7) %>
-            </a>
-            <span class="muted">commit</span> <%= $commit->{id} %>
-          </div>
-        % } else {
-          <div>
-            <span class="muted">commit</span> <%= $commit->{id} %>
-          </div>
-          <div>
-            2 <span class="muted">parents</span>:
-            
-            <a class="font-black" href="<%= url_for("/$user/$project/commit/$parents->[0]") %>">
-              <%= substr($parents->[0], 0, 7) %>
-            </a>
-            +
-            <a class="font-black" href="<%= url_for("/$user/$project/commit/$parents->[1]") %>">
-              <%= substr($parents->[1], 0, 7) %>
-            </a>
+      <ul class="commits-summary-body">
+        <li>
+          <span class="commits-summary-author"><%= $commit->{author_name} %></span>
+          <span>commited on <span title="<%= $commit->{age_string_datetime_local} %>"><%= $commit->{age_string_date_local} %></span>
+        </li>
+        <li class="last-child">
+          % my $parents = $commit->{parents};
+          
+          % if (@$parents == 0) {
+            <div class="commits-summary-parent">
+              <span>0 parent</span>
+            </div>
+          % } elsif (@$parents == 1) {
+            <div class="commits-summary-parent">
+              <span>1 parent</span>
+              <a href="<%= url_for("/$user/$project/commit/$parents->[0]") %>">
+                <%= substr($parents->[0], 0, 7) %>
+              </a>
+            </div>
+          % } else {
+            <div class="commits-summary-parent">
+              <span>2 parents</span>:
+              
+              <a class="font-black" href="<%= url_for("/$user/$project/commit/$parents->[0]") %>">
+                <%= substr($parents->[0], 0, 7) %>
+              </a>
+              +
+              <a class="font-black" href="<%= url_for("/$user/$project/commit/$parents->[1]") %>">
+                <%= substr($parents->[1], 0, 7) %>
+              </a>
+            </div>
+          % }
+          <div class="commits-summary-commit-id">
+            commit <span><%= $commit->{id} %></span>
           </div>
-        % }
-      </div>
+        </li>
+      </ul>
     </li>
   </ul>
 

+4 -8

templates/include/commit_body.html.ep

View

@@ -59,7 +59,6 @@
         $('#diff_tree').css('display', 'none');
       }
       else {
-        $(this).text('Hide Diff Stats');
         $('#diff_tree').css('display', 'block');
       }
       diff_tree_show = !diff_tree_show;
@@ -67,19 +66,16 @@
   });
 % end
 
-<div class="row" style="margin-bottom:10px">
-  <div class="span8" style="padding-top:5px">
-    Showing <b><%= @$diff_trees %> changed files</b>
+<div class="commit-changes">
+  <div>
+    Showing <b><a id="diff-stats-btn" href="javascript:void;"><%= @$diff_trees %> changed files</a></b>
     with
     <b><%= $total_add_line_count %> additions</b>
     and
     <b><%= $total_delete_line_count %> deletions</b>
   </div>
-  <div class="text-right">
-    <button id="diff-stats-btn" class="btn">Show Diff Stats</button>
-  </div>
 </div>
-<div id="diff_tree" style="display:none">
+<div id="diff_tree">
   <%= include '/include/diff_tree', id => $rev, from_id => $from_rev,
     diff_trees => $diff_trees %>
 </div>

+12 -1

templates/include/diff_status_bar.html.ep

View

@@ -35,7 +35,18 @@
 %>
 
 
-<<%= $tag %> title="<%= $diff_count_text %>" style="text-decoration:none;color:#666" href="#<%= $fragment %>"><%= $diff_tree->{binary} ? 'BIN' : $diff_line_count %></<%= $tag %>>
+<<%= $tag %> title="<%= $diff_count_text %>" style="text-decoration:none;color:#666" href="#<%= $fragment %>">
+  % if ($diff_tree->{binary}) {
+    BIN
+  % } else {
+    % if ($add_line_count) {
+      <span style="color:green">+<%= $add_line_count %></span>
+    % }
+    % if ($delete_line_count) {
+      <span style="color:red">-<%= $delete_line_count %></span>
+    % }
+  % }
+</<%= $tag %>>
 
 <<%= $tag %> title="<%= $diff_count_text %>" style="text-decoration:none;display:inline-block;overflow:none;" href="#<%= $fragment %>">
   % for (my $i = 0; $i < $add_block_count; $i++) {

+11 -67

templates/include/diff_tree.html.ep

View

@@ -2,64 +2,6 @@
   my $rev = stash('rev');
   my $from_rev = stash('from_rev');
 %>
-
-%= stylesheet begin
-  .file-add {
-    color:#32CD32;
-    border:2px #32CD32 solid;
-    margin-left:3px;
-    font-weight:bold;
-    line-height:0;
-    display:table-cell;
-    text-align:center;
-    vertical-align:middle;
-    width:9px;
-    height:9px;
-    font-size:13px;
-  }
-
-  .file-del {
-    color:red;
-    border:2px red solid;
-    margin-left:3px;
-    font-weight:bold;
-    line-height:0;
-    display:table-cell;
-    text-align:center;
-    vertical-align:middle;
-    width:9px;
-    height:9px;
-    font-size:15px;
-  }
-
-  .file-modified {
-    color:#DAA520;
-    border:2px #DAA520 solid;
-    margin-left:3px;
-    font-weight:bold;
-    line-height:0;
-    display:table-cell;
-    text-align:center;
-    vertical-align:middle;
-    width:9px;
-    height:9px;
-    font-size:11px;
-  }
-
-  .file-renamed {
-    color:#677a85;
-    border:2px #677a85 solid;
-    margin-left:3px;
-    font-weight:bold;
-    line-height:0;
-    display:table-cell;
-    text-align:center;
-    vertical-align:middle;
-    width:9px;
-    height:9px;
-    font-size:7px;
-  }
-% end
   
 <table style="margin-bottom:10px;width:100%">
   
@@ -67,15 +9,17 @@
   % my $num = 0;
   % for my $diff_tree (@$diff_trees) {
     <tr style="<%= $num + 1 ne @$diff_trees ? 'border-bottom:1px #ddd solid' : '' %>">
-      % my $status = $diff_tree->{status};
-      % my $file = $diff_tree->{to_file};
-      % my $file_type = $diff_tree->{to_file_type};
-      % my $mode = $diff_tree->{to_mode};
-      % my $mode_str = $diff_tree->{to_mode_str};
-      % my $mode_oct = $diff_tree->{to_mode_oct};
-      % my $from_file = $diff_tree->{from_file};
-      % my $from_mode_str = $diff_tree->{from_mode_str};
-      <td style="padding:7px 5px 7px 0; width:12px">
+      <%
+        my $status = $diff_tree->{status};
+        my $file = $diff_tree->{to_file};
+        my $file_type = $diff_tree->{to_file_type};
+        my $mode = $diff_tree->{to_mode};
+        my $mode_str = $diff_tree->{to_mode_str};
+        my $mode_oct = $diff_tree->{to_mode_oct};
+        my $from_file = $diff_tree->{from_file};
+        my $from_mode_str = $diff_tree->{from_mode_str};
+      %>
+      <td style="padding:0 5px 0 0; width:12px;">
         % if ($status eq 'A') {
           <div class="file-add" title="added">+</div>
         % } elsif ($status eq 'D') {

+2 -2

xt/basic.t

View

@@ -91,7 +91,7 @@ note 'Commit page';
     $t->content_like(qr/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/);
     
     # Parent not eixsts
-    $t->content_like(qr/0 <span .*?>parent/);
+    $t->content_like(qr/<span>0 parent/);
     
     # Commit id
     $t->content_like(qr/4b0e81c462088b16fefbe545e00b993fd7e6f884/);
@@ -113,7 +113,7 @@ note 'Commit page';
   note 'rename';
   {
     $t->get_ok("/$user/$project/commit/15ea9d711617abda5eed7b4173a3349d30bca959");
-    $t->content_like(qr#1 <span class="muted">parent</span>.*1b59896#s);
+    $t->content_like(qr#<span>1 parent</span>.*1b59896#s);
     $t->content_like(qr/File renamed without changes/);
     $t->content_like(qr/a.txt → a_renamed.txt/);
     $t->content_like(qr/class="file-renamed"/);

...	...	@@ -2523,7 +2523,6 @@ button.close {
2523	2523	border-top:none;
2524	2524	border-bottom-left-radius: 3px;
2525	2525	border-bottom-right-radius: 3px;
2526		- color:#68777d;
2527	2526	}
2528	2527
2529	2528	.commits-summary-header {
...	...	@@ -2538,5 +2537,87 @@ button.close {
2538	2537	width:20%;
2539	2538	text-align:right;
2540	2539	}
	2540	+.commits-summary-body {
	2541	+ overflow:hidden;
	2542	+ padding:4px 0;
	2543	+}
	2544	+.commits-summary-body > :first-child {
	2545	+ width:40%;
	2546	+ float:left;
	2547	+}
	2548	+.commits-summary-body > .last-child {
	2549	+ width:60%;
	2550	+ float:left;
	2551	+ text-align:right;
	2552	+}
	2553	+.commits-summary-author {
	2554	+ font-weight:bold;
	2555	+}
	2556	+.commits-summary-parent {
	2557	+ display:inline-block;
	2558	+ color:#767676;
	2559	+ margin-right:10px;
	2560	+}
	2561	+.commits-summary-parent a {
	2562	+ color:#333333;
	2563	+ text-decoration:underline;
	2564	+}
	2565	+.commits-summary-commit-id {
	2566	+ display:inline-block;
	2567	+ color:#767676;
	2568	+}
	2569	+.commits-summary-commit-id > span {
	2570	+ color:#333333;
	2571	+}
2541	2572
	2573	+.commit-changes {
	2574	+ margin:15px 0;
	2575	+}
2542	2576
	2577	+.file-add {
	2578	+ color:#32CD32;
	2579	+ border:2px #32CD32 solid;
	2580	+ margin-left:3px;
	2581	+ font-weight:bold;
	2582	+ text-align:center;
	2583	+ font-size:13px;
	2584	+ padding:0;
	2585	+ line-height:100%;
	2586	+ padding:0 2px;
	2587	+}
	2588	+
	2589	+.file-del {
	2590	+ color:red;
	2591	+ border:2px red solid;
	2592	+ margin-left:3px;
	2593	+ font-weight:bold;
	2594	+ text-align:center;
	2595	+ font-size:13px;
	2596	+ padding:0;
	2597	+ line-height:100%;
	2598	+ padding:0 2px;
	2599	+}
	2600	+
	2601	+.file-modified {
	2602	+ color:#DAA520;
	2603	+ border:2px #DAA520 solid;
	2604	+ margin-left:3px;
	2605	+ font-weight:bold;
	2606	+ text-align:center;
	2607	+ font-size:13px;
	2608	+ padding:0;
	2609	+ line-height:100%;
	2610	+ padding:0 2px;
	2611	+}
	2612	+
	2613	+.file-renamed {
	2614	+ color:#677a85;
	2615	+ border:2px #677a85 solid;
	2616	+ margin-left:3px;
	2617	+ font-weight:bold;
	2618	+ text-align:center;
	2619	+ font-size:13px;
	2620	+ padding:0;
	2621	+ line-height:100%;
	2622	+ padding:0 2px;
	2623	+}

...	...	@@ -100,43 +100,43 @@
100	100	</ul>
101	101	</li>
102	102	<li class="last-child">
103		- <div>
104		- <span><b><%= $commit->{author_name} %></b></span>
105		- <span>authored <span title="<%= $commit->{age_string_datetime_local} %>"><%= $commit->{age_string} %></span>
106		- </div>
107		- <div>
108		- % my $parents = $commit->{parents};
109		-
110		- % if (@$parents == 0) {
111		- <div>
112		- 0 <span class="muted" style="padding-right:10px">parent</span>
113		- <span class="muted">commit</span> <%= $commit->{id} %>
114		- </div>
115		- % } elsif (@$parents == 1) {
116		- <div>
117		- 1 <span class="muted">parent</span>
118		- <a class="font-black" style="padding-right:10px" href="<%= url_for("/$user/$project/commit/$parents->[0]") %>">
119		- <%= substr($parents->[0], 0, 7) %>
120		- </a>
121		- <span class="muted">commit</span> <%= $commit->{id} %>
122		- </div>
123		- % } else {
124		- <div>
125		- <span class="muted">commit</span> <%= $commit->{id} %>
126		- </div>
127		- <div>
128		- 2 <span class="muted">parents</span>:
129		-
130		- <a class="font-black" href="<%= url_for("/$user/$project/commit/$parents->[0]") %>">
131		- <%= substr($parents->[0], 0, 7) %>
132		- </a>
133		- +
134		- <a class="font-black" href="<%= url_for("/$user/$project/commit/$parents->[1]") %>">
135		- <%= substr($parents->[1], 0, 7) %>
136		- </a>
	103	+ <ul class="commits-summary-body">
	104	+ <li>
	105	+ <span class="commits-summary-author"><%= $commit->{author_name} %></span>
	106	+ <span>commited on <span title="<%= $commit->{age_string_datetime_local} %>"><%= $commit->{age_string_date_local} %></span>
	107	+ </li>
	108	+ <li class="last-child">
	109	+ % my $parents = $commit->{parents};
	110	+
	111	+ % if (@$parents == 0) {
	112	+ <div class="commits-summary-parent">
	113	+ <span>0 parent</span>
	114	+ </div>
	115	+ % } elsif (@$parents == 1) {
	116	+ <div class="commits-summary-parent">
	117	+ <span>1 parent</span>
	118	+ <a href="<%= url_for("/$user/$project/commit/$parents->[0]") %>">
	119	+ <%= substr($parents->[0], 0, 7) %>
	120	+ </a>
	121	+ </div>
	122	+ % } else {
	123	+ <div class="commits-summary-parent">
	124	+ <span>2 parents</span>:
	125	+
	126	+ <a class="font-black" href="<%= url_for("/$user/$project/commit/$parents->[0]") %>">
	127	+ <%= substr($parents->[0], 0, 7) %>
	128	+ </a>
	129	+ +
	130	+ <a class="font-black" href="<%= url_for("/$user/$project/commit/$parents->[1]") %>">
	131	+ <%= substr($parents->[1], 0, 7) %>
	132	+ </a>
	133	+ </div>
	134	+ % }
	135	+ <div class="commits-summary-commit-id">
	136	+ commit <span><%= $commit->{id} %></span>
137	137	</div>
138		- % }
139		- </div>
	138	+ </li>
	139	+ </ul>
140	140	</li>
141	141	</ul>
142	142

...	...	@@ -59,7 +59,6 @@
59	59	$('#diff_tree').css('display', 'none');
60	60	}
61	61	else {
62		- $(this).text('Hide Diff Stats');
63	62	$('#diff_tree').css('display', 'block');
64	63	}
65	64	diff_tree_show = !diff_tree_show;
...	...	@@ -67,19 +66,16 @@
67	66	});
68	67	% end
69	68
70		-<div class="row" style="margin-bottom:10px">
71		- <div class="span8" style="padding-top:5px">
72		- Showing <b><%= @$diff_trees %> changed files</b>
	69	+<div class="commit-changes">
	70	+ <div>
	71	+ Showing <b><a id="diff-stats-btn" href="javascript:void;"><%= @$diff_trees %> changed files</a></b>
73	72	with
74	73	<b><%= $total_add_line_count %> additions</b>
75	74	and
76	75	<b><%= $total_delete_line_count %> deletions</b>
77	76	</div>
78		- <div class="text-right">
79		- <button id="diff-stats-btn" class="btn">Show Diff Stats</button>
80		- </div>
81	77	</div>
82		-<div id="diff_tree" style="display:none">
	78	+<div id="diff_tree">
83	79	<%= include '/include/diff_tree', id => $rev, from_id => $from_rev,
84	80	diff_trees => $diff_trees %>
85	81	</div>

...	...	@@ -35,7 +35,18 @@
35	35	%>
36	36
37	37
38		-<<%= $tag %> title="<%= $diff_count_text %>" style="text-decoration:none;color:#666" href="#<%= $fragment %>"><%= $diff_tree->{binary} ? 'BIN' : $diff_line_count %></<%= $tag %>>
	38	+<<%= $tag %> title="<%= $diff_count_text %>" style="text-decoration:none;color:#666" href="#<%= $fragment %>">
	39	+ % if ($diff_tree->{binary}) {
	40	+ BIN
	41	+ % } else {
	42	+ % if ($add_line_count) {
	43	+ <span style="color:green">+<%= $add_line_count %></span>
	44	+ % }
	45	+ % if ($delete_line_count) {
	46	+ <span style="color:red">-<%= $delete_line_count %></span>
	47	+ % }
	48	+ % }
	49	+</<%= $tag %>>
39	50
40	51	<<%= $tag %> title="<%= $diff_count_text %>" style="text-decoration:none;display:inline-block;overflow:none;" href="#<%= $fragment %>">
41	52	% for (my $i = 0; $i < $add_block_count; $i++) {

...	...	@@ -2,64 +2,6 @@
2	2	my $rev = stash('rev');
3	3	my $from_rev = stash('from_rev');
4	4	%>
5		-
6		-%= stylesheet begin
7		- .file-add {
8		- color:#32CD32;
9		- border:2px #32CD32 solid;
10		- margin-left:3px;
11		- font-weight:bold;
12		- line-height:0;
13		- display:table-cell;
14		- text-align:center;
15		- vertical-align:middle;
16		- width:9px;
17		- height:9px;
18		- font-size:13px;
19		- }
20		-
21		- .file-del {
22		- color:red;
23		- border:2px red solid;
24		- margin-left:3px;
25		- font-weight:bold;
26		- line-height:0;
27		- display:table-cell;
28		- text-align:center;
29		- vertical-align:middle;
30		- width:9px;
31		- height:9px;
32		- font-size:15px;
33		- }
34		-
35		- .file-modified {
36		- color:#DAA520;
37		- border:2px #DAA520 solid;
38		- margin-left:3px;
39		- font-weight:bold;
40		- line-height:0;
41		- display:table-cell;
42		- text-align:center;
43		- vertical-align:middle;
44		- width:9px;
45		- height:9px;
46		- font-size:11px;
47		- }
48		-
49		- .file-renamed {
50		- color:#677a85;
51		- border:2px #677a85 solid;
52		- margin-left:3px;
53		- font-weight:bold;
54		- line-height:0;
55		- display:table-cell;
56		- text-align:center;
57		- vertical-align:middle;
58		- width:9px;
59		- height:9px;
60		- font-size:7px;
61		- }
62		-% end
63	5
64	6	<table style="margin-bottom:10px;width:100%">
65	7
...	...	@@ -67,15 +9,17 @@
67	9	% my $num = 0;
68	10	% for my $diff_tree (@$diff_trees) {
69	11	<tr style="<%= $num + 1 ne @$diff_trees ? 'border-bottom:1px #ddd solid' : '' %>">
70		- % my $status = $diff_tree->{status};
71		- % my $file = $diff_tree->{to_file};
72		- % my $file_type = $diff_tree->{to_file_type};
73		- % my $mode = $diff_tree->{to_mode};
74		- % my $mode_str = $diff_tree->{to_mode_str};
75		- % my $mode_oct = $diff_tree->{to_mode_oct};
76		- % my $from_file = $diff_tree->{from_file};
77		- % my $from_mode_str = $diff_tree->{from_mode_str};
78		- <td style="padding:7px 5px 7px 0; width:12px">
	12	+ <%
	13	+ my $status = $diff_tree->{status};
	14	+ my $file = $diff_tree->{to_file};
	15	+ my $file_type = $diff_tree->{to_file_type};
	16	+ my $mode = $diff_tree->{to_mode};
	17	+ my $mode_str = $diff_tree->{to_mode_str};
	18	+ my $mode_oct = $diff_tree->{to_mode_oct};
	19	+ my $from_file = $diff_tree->{from_file};
	20	+ my $from_mode_str = $diff_tree->{from_mode_str};
	21	+ %>
	22	+ <td style="padding:0 5px 0 0; width:12px;">
79	23	% if ($status eq 'A') {
80	24	<div class="file-add" title="added">+</div>
81	25	% } elsif ($status eq 'D') {

...	...	@@ -91,7 +91,7 @@ note 'Commit page';
91	91	$t->content_like(qr/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/);
92	92
93	93	# Parent not eixsts
94		- $t->content_like(qr/0 <span .*?>parent/);
	94	+ $t->content_like(qr/<span>0 parent/);
95	95
96	96	# Commit id
97	97	$t->content_like(qr/4b0e81c462088b16fefbe545e00b993fd7e6f884/);
...	...	@@ -113,7 +113,7 @@ note 'Commit page';
113	113	note 'rename';
114	114	{
115	115	$t->get_ok("/$user/$project/commit/15ea9d711617abda5eed7b4173a3349d30bca959");
116		- $t->content_like(qr#1 <span class="muted">parent</span>.*1b59896#s);
	116	+ $t->content_like(qr#<span>1 parent</span>.*1b59896#s);
117	117	$t->content_like(qr/File renamed without changes/);
118	118	$t->content_like(qr/a.txt → a_renamed.txt/);
119	119	$t->content_like(qr/class="file-renamed"/);