improve commits page design ・ 421dbd6 ・ Gitprep

- improve commits page design;
- Browse files
- Yuki Kimoto commited on 2016-02-01
- 1 parent 0ca5d34
  
  commit 421dbd654a8e52d4c89fe00daac8d99f5f541c8f

Showing 2 changed files with 117 additions and 78 deletions

+38 -1

public/css/bootstrap.css

...	...	@@ -2502,4 +2502,41 @@ button.close {
2502	2502	.tags-links a {
2503	2503	color:#767676;
2504	2504	font-size:13px;
2505		-}
	2505	+}
	2506	+
	2507	+.commits-summary > :first-child {
	2508	+ overflow:hidden;
	2509	+ padding: 10px;
	2510	+ line-height: 20px;
	2511	+ background-color: #e6f1f6;
	2512	+ border: 1px solid #c1dce9;
	2513	+ border-radius: 3px;
	2514	+ border-bottom-right-radius: 0;
	2515	+ border-bottom-left-radius: 0;
	2516	+ margin-top:13px;
	2517	+}
	2518	+
	2519	+.commits-summary > .last-child {
	2520	+ padding: 5px 10px;
	2521	+ background-color: #fff;
	2522	+ border: 1px solid #c1dce9;
	2523	+ border-top:none;
	2524	+ border-bottom-left-radius: 3px;
	2525	+ border-bottom-right-radius: 3px;
	2526	+ color:#68777d;
	2527	+}
	2528	+
	2529	+.commits-summary-header {
	2530	+ overflow:hidden;
	2531	+}
	2532	+.commits-summary-header > :first-child {
	2533	+ float:left;
	2534	+ width:80%;
	2535	+}
	2536	+.commits-summary-header > .last-child {
	2537	+ float:right;
	2538	+ width:20%;
	2539	+ text-align:right;
	2540	+}
	2541	+
	2542	+

+79 -77

templates/commit.html.ep

View

@@ -42,17 +42,18 @@
     commit => $commit,
     parents => $commit->{parents}
   );
-%>
 
-% layout 'common', title => "$commit->{title_short} \x{30fb} $commit_short_id";
+  layout 'common', title => "$commit->{title_short} \x{30fb} $commit_short_id";
+%>
 
-  %= include '/include/header';
+%= include '/include/header';
 
-  <div class="container">
-    <div class="bk-blue-light border-gray" style="border-bottom:none;padding:10px;border-top-left-radius:5px;border-top-right-radius:5px">
-      <div class="row">
-       <div class="span10">
-          <big>
+<div class="container">
+  <ul class="commits-summary">
+    <li>
+      <ul class="commits-summary-header">
+        <li>
+          <div>
             % if ($commit->{title_short} eq $commit->{title}) {
               <b><%= $commit->{title_short} %></b>;
             % } else {
@@ -63,82 +64,83 @@
                 $title_tail =~ s/^\Q$title_short//;
                 $title_tail =~ s/^\s+//;
               %>
-              <p style="margin-bottom:2px;"><b><%= $title_short %>...</b></p>
-              <p style="margin-top:2px;margin-bottom:15px;">...<%= $title_tail %></p>
+              <p><b><%= $title_short %>...</b></p>
+              <p>...<%= $title_tail %></p>
             % }
-          </big>
-        </div>
-        <div class="text-right">
-          <a class="btn btn-primary" href="<%= url_for("/$user/$project/tree/$commit->{id}") %>">
-            Browse files
-          </a>
-        </div>
-      </div>
-      % if (@{$commit->{comment}} > 1) {
-        <div style="padding-left:15px;padding-bottom:5px">
-          % for (my $i = 1; $i < @{$commit->{comment}}; $i++) {
+          </div>
+
+          % if (@{$commit->{comment}} > 1) {
             <div>
-              <%= $commit->{comment}[$i] %>
+              % for (my $i = 1; $i < @{$commit->{comment}}; $i++) {
+                <div>
+                  <%= $commit->{comment}[$i] %>
+                </div>
+              % }
             </div>
           % }
-        </div>
-      % }
-      % if (@$branches || @$tags) {
-        <div class="broder-top-gray">
-          % for my $branch (@$branches) {
-            <i class="icon-share-alt" style="padding-right:1px"></i><a href="<%= url_for("/$user/$project/tree/$branch") %>"><%= $branch %></a>
-          % }
-          
-          % for my $tag (@$tags) {
-            <span style="padding-left:5px">
-              <i class="icon-tag" style="padding-right:2px"></i><a href="<%= url_for("/$user/$project/tree/$tag") %>"><%= $tag %></a>
-            </span>
-          % }
-        </div>
-      % }
-    </div>
-    <div class="border-gray" style="border-bottom-left-radius:5px;border-bottom-right-radius:5px;margin-bottom:10px;">
-      <div class="row">
-        <div class="span4" style="padding:5px">
-          <span><b><%= $commit->{author_name} %></b></span>
-          <span class="muted">authored <span title="<%= $commit->{age_string_datetime_local} %>"><%= $commit->{age_string} %></span>
-        </div>
-        <div class="span7 text-right" style="padding:5px;margin-left:75px">
-          % my $parents = $commit->{parents};
-          
-          % if (@$parents == 0) {
+          % if (@$branches || @$tags) {
             <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>:
+              % for my $branch (@$branches) {
+                <i class="icon-share-alt" style="padding-right:1px"></i><a href="<%= url_for("/$user/$project/tree/$branch") %>"><%= $branch %></a>
+              % }
               
-              <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>
+              % for my $tag (@$tags) {
+                <span style="padding-left:5px">
+                  <i class="icon-tag" style="padding-right:2px"></i><a href="<%= url_for("/$user/$project/tree/$tag") %>"><%= $tag %></a>
+                </span>
+              % }
             </div>
           % }
-        </div>
+        </li>
+        <li class="last-child">
+          <a class="btn btn-primary" href="<%= url_for("/$user/$project/tree/$commit->{id}") %>">
+            Browse files
+          </a>
+        </li>
+      </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>
-  
+      <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>
+          </div>
+        % }
+      </div>
+    </li>
+  </ul>
+
   %= include '/include/commit_body';
-  
-  %= include '/include/footer';
+</div>
+
+%= include '/include/footer';

...	...	@@ -42,17 +42,18 @@
42	42	commit => $commit,
43	43	parents => $commit->{parents}
44	44	);
45		-%>
46	45
47		-% layout 'common', title => "$commit->{title_short} \x{30fb} $commit_short_id";
	46	+ layout 'common', title => "$commit->{title_short} \x{30fb} $commit_short_id";
	47	+%>
48	48
49		- %= include '/include/header';
	49	+%= include '/include/header';
50	50
51		- <div class="container">
52		- <div class="bk-blue-light border-gray" style="border-bottom:none;padding:10px;border-top-left-radius:5px;border-top-right-radius:5px">
53		- <div class="row">
54		- <div class="span10">
55		- <big>
	51	+<div class="container">
	52	+ <ul class="commits-summary">
	53	+ <li>
	54	+ <ul class="commits-summary-header">
	55	+ <li>
	56	+ <div>
56	57	% if ($commit->{title_short} eq $commit->{title}) {
57	58	<b><%= $commit->{title_short} %></b>;
58	59	% } else {
...	...	@@ -63,82 +64,83 @@
63	64	$title_tail =~ s/^\Q$title_short//;
64	65	$title_tail =~ s/^\s+//;
65	66	%>
66		- <p style="margin-bottom:2px;"><b><%= $title_short %>...</b></p>
67		- <p style="margin-top:2px;margin-bottom:15px;">...<%= $title_tail %></p>
	67	+ <p><b><%= $title_short %>...</b></p>
	68	+ <p>...<%= $title_tail %></p>
68	69	% }
69		- </big>
70		- </div>
71		- <div class="text-right">
72		- <a class="btn btn-primary" href="<%= url_for("/$user/$project/tree/$commit->{id}") %>">
73		- Browse files
74		- </a>
75		- </div>
76		- </div>
77		- % if (@{$commit->{comment}} > 1) {
78		- <div style="padding-left:15px;padding-bottom:5px">
79		- % for (my $i = 1; $i < @{$commit->{comment}}; $i++) {
	70	+ </div>
	71	+
	72	+ % if (@{$commit->{comment}} > 1) {
80	73	<div>
81		- <%= $commit->{comment}[$i] %>
	74	+ % for (my $i = 1; $i < @{$commit->{comment}}; $i++) {
	75	+ <div>
	76	+ <%= $commit->{comment}[$i] %>
	77	+ </div>
	78	+ % }
82	79	</div>
83	80	% }
84		- </div>
85		- % }
86		- % if (@$branches \|\| @$tags) {
87		- <div class="broder-top-gray">
88		- % for my $branch (@$branches) {
89		- <i class="icon-share-alt" style="padding-right:1px"></i><a href="<%= url_for("/$user/$project/tree/$branch") %>"><%= $branch %></a>
90		- % }
91		-
92		- % for my $tag (@$tags) {
93		- <span style="padding-left:5px">
94		- <i class="icon-tag" style="padding-right:2px"></i><a href="<%= url_for("/$user/$project/tree/$tag") %>"><%= $tag %></a>
95		- </span>
96		- % }
97		- </div>
98		- % }
99		- </div>
100		- <div class="border-gray" style="border-bottom-left-radius:5px;border-bottom-right-radius:5px;margin-bottom:10px;">
101		- <div class="row">
102		- <div class="span4" style="padding:5px">
103		- <span><b><%= $commit->{author_name} %></b></span>
104		- <span class="muted">authored <span title="<%= $commit->{age_string_datetime_local} %>"><%= $commit->{age_string} %></span>
105		- </div>
106		- <div class="span7 text-right" style="padding:5px;margin-left:75px">
107		- % my $parents = $commit->{parents};
108		-
109		- % if (@$parents == 0) {
	81	+ % if (@$branches \|\| @$tags) {
110	82	<div>
111		- 0 <span class="muted" style="padding-right:10px">parent</span>
112		- <span class="muted">commit</span> <%= $commit->{id} %>
113		- </div>
114		- % } elsif (@$parents == 1) {
115		- <div>
116		- 1 <span class="muted">parent</span>
117		- <a class="font-black" style="padding-right:10px" href="<%= url_for("/$user/$project/commit/$parents->[0]") %>">
118		- <%= substr($parents->[0], 0, 7) %>
119		- </a>
120		- <span class="muted">commit</span> <%= $commit->{id} %>
121		- </div>
122		- % } else {
123		- <div>
124		- <span class="muted">commit</span> <%= $commit->{id} %>
125		- </div>
126		- <div>
127		- 2 <span class="muted">parents</span>:
	83	+ % for my $branch (@$branches) {
	84	+ <i class="icon-share-alt" style="padding-right:1px"></i><a href="<%= url_for("/$user/$project/tree/$branch") %>"><%= $branch %></a>
	85	+ % }
128	86
129		- <a class="font-black" href="<%= url_for("/$user/$project/commit/$parents->[0]") %>">
130		- <%= substr($parents->[0], 0, 7) %>
131		- </a>
132		- +
133		- <a class="font-black" href="<%= url_for("/$user/$project/commit/$parents->[1]") %>">
134		- <%= substr($parents->[1], 0, 7) %>
135		- </a>
	87	+ % for my $tag (@$tags) {
	88	+ <span style="padding-left:5px">
	89	+ <i class="icon-tag" style="padding-right:2px"></i><a href="<%= url_for("/$user/$project/tree/$tag") %>"><%= $tag %></a>
	90	+ </span>
	91	+ % }
136	92	</div>
137	93	% }
138		- </div>
	94	+ </li>
	95	+ <li class="last-child">
	96	+ <a class="btn btn-primary" href="<%= url_for("/$user/$project/tree/$commit->{id}") %>">
	97	+ Browse files
	98	+ </a>
	99	+ </li>
	100	+ </ul>
	101	+ </li>
	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>
139	106	</div>
140		- </div>
141		-
	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>
	137	+ </div>
	138	+ % }
	139	+ </div>
	140	+ </li>
	141	+ </ul>
	142	+
142	143	%= include '/include/commit_body';
143		-
144		- %= include '/include/footer';
	144	+</div>
	145	+
	146	+%= include '/include/footer';