complete blob page design ・ e75d147 ・ Gitprep

- complete blob page design;
- Browse files
- Yuki Kimoto commited on 2016-01-09
- 1 parent 33fb9eb
  
  commit e75d1476448653c0a53592ad0efd4c8d99d72003

Showing 5 changed files with 110 additions and 30 deletions

+69 -1

public/css/bootstrap.css

@@ -100,7 +100,7 @@ ul {
   margin: 0;;
 }
 
-li {
+ul li {
   list-style:none;
 }
 
@@ -1679,6 +1679,16 @@ button.close {
   color:#445055;
 }
 
+.commit-contributor {
+  padding: 5px 10px;
+  background-color: #fff;
+  border: 1px solid #c1dce9;
+  border-top:none;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  color:#68777d;
+}
+
 .file-list li {
   border: 1px solid #c1dce9;
   border-top:none;
@@ -1710,3 +1720,61 @@ button.close {
   text-align:right;
   color:#888
 }
+
+.file-header {
+  padding: 5px 10px;
+  background-color: #f7f7f7;
+  border: 1px solid #d8d8d8;
+  border-bottom:none;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  margin-top:20px;
+  overflow:hidden;
+}
+
+.file-header-left {
+  float:left;
+  width:50%;
+  padding-top:4px;
+}
+
+.file-header-right {
+  float:left;
+  width:50%;
+  overflow:hidden;
+}
+
+.file-header-right ul {
+  float:right;
+  overflow:hidden;
+}
+
+.file-header-right li {
+  float:left;
+  margin-left:1px;
+  font-weight:bold;
+}
+
+.blob-image {
+  background:#ddd;
+  text-align:center;
+  padding-top:30px;
+  padding-bottom:30px;
+  margin-bottom:30px;
+  border-radius: 0 0 2px 2px;
+}
+
+.blob-image img {
+  max-width: 600px;
+  border: 1px solid #fff;
+}
+
+.blob-raw {
+  font-size:16px;
+  background:#ddd;
+  text-align:center;
+  padding-top:30px;
+  padding-bottom:30px;
+  margin-bottom:30px;
+  border-radius: 0 0 2px 2px;
+}

+6 -6

public/js/google-code-prettify/prettify.css

View

@@ -3,10 +3,10 @@
 .pun, .opn, .clo { color: #93a1a1; }
 .fun { color: #dc322f; }
 .str, .atv { color: #D14; }
-.kwd, .prettyprint .tag { color: #1e347b; }
+.kwd, .linenums .tag { color: #1e347b; }
 .typ, .atn, .dec, .var { color: teal; }
 .pln { color: #48484c; }
-
+ 
 .prettyprint {
   padding: 8px;
   background-color: #f7f7f9;
@@ -17,14 +17,14 @@
      -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
           box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
 }
-
+ 
 /* Specify class=linenums on a pre to get line numbering */
 ol.linenums {
   margin: 0 0 0 33px; /* IE indents via margin-left */
-}
+} 
 ol.linenums li {
   padding-left: 12px;
   color: #bebec5;
-  line-height: 20px;
+  line-height: 18px;
   text-shadow: 0 1px 0 #fff;
-}
+}

-1

public/js/google-code-prettify/prettify.css.original

View

...

@@ -1 +0,0 @@

-.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}

+34 -21

templates/blob.html.ep

View

@@ -47,41 +47,54 @@
     <div style="margin-bottom:20px;">
       %= include '/include/branch_select', display => 'blob', Path => $file;
     </div>
-        
-    <div class="border-gray" style="margin-bottom:20px">
-      <div class="bk-blue-light" style="padding:5px">
-        <a style="color:#333;font-weight:bold" href="#" title="<%= $commit->{author_email} %>"><%= $commit->{author_name} %></a>
-        <span class="muted" title="<%= $commit->{age_string_datetime_local} %>"><%= $commit->{age_string} %></span>
-        <a style="color:#666" href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
+
+    <div class="commit-summary">
+      <div class="commit-summary-left-container">
+        <span class="commit-summary-author" title="<%= $commit->{author_email} %>"><%= $commit->{author_name} %></span>
+        <a href="<%= url_for("/$user/$project/commit/$rev") %>">
           <%= $commit->{title} %>
         </a>
       </div>
-      <div style="padding:5px">
-        <b><%= @$authors %></b> <span class="muted">contributor</span>
+      <div class="commit-summary-right-container">
+        <a href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
+          <%= substr($commit->{id}, 0, 7) %>
+        </a>
+        <%= $commit->{age_string} %>
       </div>
     </div>
+          
+    <div class="commit-contributor">
+      <%= @$authors %> contributor
+    </div>
 
-    <div class="border-gray bk-gray-light" style="padding:5px">
-      <div class="row">
-        <div class="span7" style="padding-top:5px">
-          <i class="icon-file icon-white"></i>
-          <%= $file_type %>
+    <div>
+      <div class="file-header">
+        <div class="file-header-left">
           % if ($lines) {
-            <span class="muted">|</span>
             <%= @$lines %> lines
+            <span style="color:#dcdcdc">|</span>
           % }
-          <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/blame/$rev/$file") %>">Blame</a>
-          <a class="btn" href="<%= url_for("/$user/$project/commits/$rev/$file") %>">History</a>
+        <div class="file-header-right">
+          <ul>
+            <li>
+              <a class="btn btn-small" href="<%= url_for("/$user/$project/raw/$rev/$file") %>">Raw</a>
+            </li>
+            % if ($mime_type =~ m#^text/#) {
+              <li>
+                <a class="btn btn-small" href="<%= url_for("/$user/$project/blame/$rev/$file") %>">Blame</a>
+              </li>
+            % }
+            <li>
+              <a class="btn btn-small" href="<%= url_for("/$user/$project/commits/$rev/$file") %>">History</a>
+            </li>
+          </ul>
         </div>
       </div>
     </div>
     % if ($mime_type =~ m#^image/#) {
-      <div style="background:#ddd;text-align:center;padding-top:30px;padding-bottom:30px;margin-bottom:30px">
+      <div class="blob-image">
         <img type="<%= $mime_type %>
           % if (defined $file) {
             alt="<%= $file %>" title="<%= $file %>"
@@ -102,7 +115,7 @@
         <pre class="prettyprint linenums"><% for my $line (@$lines) { %><%= "$line\n" %><% } %></pre>
       % }
     % } else {
-      <div style="font-size:16px;background:#ddd;text-align:center;padding-top:30px;padding-bottom:30px;margin-bottom:30px">
+      <div class="blob-raw">
         <a href="<%= url_for("/$user/$project/raw/$rev/$file") %>">View raw</a>
       </div>
     % }

+1 -1

templates/include/tree.html.ep

View

@@ -2,7 +2,7 @@
   my $dir = stash('dir');
 %>
 
-<div style="margin-bottom:10px">
+<div>
   <div class="commit-summary">
     <div class="commit-summary-left-container">
       <span class="commit-summary-author" title="<%= $commit->{author_email} %>"><%= $commit->{author_name} %></span>

...	...	@@ -100,7 +100,7 @@ ul {
100	100	margin: 0;;
101	101	}
102	102
103		-li {
	103	+ul li {
104	104	list-style:none;
105	105	}
106	106
...	...	@@ -1679,6 +1679,16 @@ button.close {
1679	1679	color:#445055;
1680	1680	}
1681	1681
	1682	+.commit-contributor {
	1683	+ padding: 5px 10px;
	1684	+ background-color: #fff;
	1685	+ border: 1px solid #c1dce9;
	1686	+ border-top:none;
	1687	+ border-bottom-left-radius: 3px;
	1688	+ border-bottom-right-radius: 3px;
	1689	+ color:#68777d;
	1690	+}
	1691	+
1682	1692	.file-list li {
1683	1693	border: 1px solid #c1dce9;
1684	1694	border-top:none;
...	...	@@ -1710,3 +1720,61 @@ button.close {
1710	1720	text-align:right;
1711	1721	color:#888
1712	1722	}
	1723	+
	1724	+.file-header {
	1725	+ padding: 5px 10px;
	1726	+ background-color: #f7f7f7;
	1727	+ border: 1px solid #d8d8d8;
	1728	+ border-bottom:none;
	1729	+ border-top-left-radius: 2px;
	1730	+ border-top-right-radius: 2px;
	1731	+ margin-top:20px;
	1732	+ overflow:hidden;
	1733	+}
	1734	+
	1735	+.file-header-left {
	1736	+ float:left;
	1737	+ width:50%;
	1738	+ padding-top:4px;
	1739	+}
	1740	+
	1741	+.file-header-right {
	1742	+ float:left;
	1743	+ width:50%;
	1744	+ overflow:hidden;
	1745	+}
	1746	+
	1747	+.file-header-right ul {
	1748	+ float:right;
	1749	+ overflow:hidden;
	1750	+}
	1751	+
	1752	+.file-header-right li {
	1753	+ float:left;
	1754	+ margin-left:1px;
	1755	+ font-weight:bold;
	1756	+}
	1757	+
	1758	+.blob-image {
	1759	+ background:#ddd;
	1760	+ text-align:center;
	1761	+ padding-top:30px;
	1762	+ padding-bottom:30px;
	1763	+ margin-bottom:30px;
	1764	+ border-radius: 0 0 2px 2px;
	1765	+}
	1766	+
	1767	+.blob-image img {
	1768	+ max-width: 600px;
	1769	+ border: 1px solid #fff;
	1770	+}
	1771	+
	1772	+.blob-raw {
	1773	+ font-size:16px;
	1774	+ background:#ddd;
	1775	+ text-align:center;
	1776	+ padding-top:30px;
	1777	+ padding-bottom:30px;
	1778	+ margin-bottom:30px;
	1779	+ border-radius: 0 0 2px 2px;
	1780	+}

...	...	@@ -3,10 +3,10 @@
3	3	.pun, .opn, .clo { color: #93a1a1; }
4	4	.fun { color: #dc322f; }
5	5	.str, .atv { color: #D14; }
6		-.kwd, .prettyprint .tag { color: #1e347b; }
	6	+.kwd, .linenums .tag { color: #1e347b; }
7	7	.typ, .atn, .dec, .var { color: teal; }
8	8	.pln { color: #48484c; }
9		-
	9	+
10	10	.prettyprint {
11	11	padding: 8px;
12	12	background-color: #f7f7f9;
...	...	@@ -17,14 +17,14 @@
17	17	-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
18	18	box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
19	19	}
20		-
	20	+
21	21	/* Specify class=linenums on a pre to get line numbering */
22	22	ol.linenums {
23	23	margin: 0 0 0 33px; /* IE indents via margin-left */
24		-}
	24	+}
25	25	ol.linenums li {
26	26	padding-left: 12px;
27	27	color: #bebec5;
28		- line-height: 20px;
	28	+ line-height: 18px;
29	29	text-shadow: 0 1px 0 #fff;
30		-}
	30	+}

...	...	@@ -47,41 +47,54 @@
47	47	<div style="margin-bottom:20px;">
48	48	%= include '/include/branch_select', display => 'blob', Path => $file;
49	49	</div>
50		-
51		- <div class="border-gray" style="margin-bottom:20px">
52		- <div class="bk-blue-light" style="padding:5px">
53		- <a style="color:#333;font-weight:bold" href="#" title="<%= $commit->{author_email} %>"><%= $commit->{author_name} %></a>
54		- <span class="muted" title="<%= $commit->{age_string_datetime_local} %>"><%= $commit->{age_string} %></span>
55		- <a style="color:#666" href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
	50	+
	51	+ <div class="commit-summary">
	52	+ <div class="commit-summary-left-container">
	53	+ <span class="commit-summary-author" title="<%= $commit->{author_email} %>"><%= $commit->{author_name} %></span>
	54	+ <a href="<%= url_for("/$user/$project/commit/$rev") %>">
56	55	<%= $commit->{title} %>
57	56	</a>
58	57	</div>
59		- <div style="padding:5px">
60		- <b><%= @$authors %></b> <span class="muted">contributor</span>
	58	+ <div class="commit-summary-right-container">
	59	+ <a href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
	60	+ <%= substr($commit->{id}, 0, 7) %>
	61	+ </a>
	62	+ <%= $commit->{age_string} %>
61	63	</div>
62	64	</div>
	65	+
	66	+ <div class="commit-contributor">
	67	+ <%= @$authors %> contributor
	68	+ </div>
63	69
64		- <div class="border-gray bk-gray-light" style="padding:5px">
65		- <div class="row">
66		- <div class="span7" style="padding-top:5px">
67		- <i class="icon-file icon-white"></i>
68		- <%= $file_type %>
	70	+ <div>
	71	+ <div class="file-header">
	72	+ <div class="file-header-left">
69	73	% if ($lines) {
70		- <span class="muted">\|</span>
71	74	<%= @$lines %> lines
	75	+ <span style="color:#dcdcdc">\|</span>
72	76	% }
73		- <span class="muted">\|</span>
74	77	<%= $file_size %>kb
75	78	</div>
76		- <div class="text-right">
77		- <a class="btn" href="<%= url_for("/$user/$project/raw/$rev/$file") %>">Raw</a>
78		- <a class="btn" href="<%= url_for("/$user/$project/blame/$rev/$file") %>">Blame</a>
79		- <a class="btn" href="<%= url_for("/$user/$project/commits/$rev/$file") %>">History</a>
	79	+ <div class="file-header-right">
	80	+ <ul>
	81	+ <li>
	82	+ <a class="btn btn-small" href="<%= url_for("/$user/$project/raw/$rev/$file") %>">Raw</a>
	83	+ </li>
	84	+ % if ($mime_type =~ m#^text/#) {
	85	+ <li>
	86	+ <a class="btn btn-small" href="<%= url_for("/$user/$project/blame/$rev/$file") %>">Blame</a>
	87	+ </li>
	88	+ % }
	89	+ <li>
	90	+ <a class="btn btn-small" href="<%= url_for("/$user/$project/commits/$rev/$file") %>">History</a>
	91	+ </li>
	92	+ </ul>
80	93	</div>
81	94	</div>
82	95	</div>
83	96	% if ($mime_type =~ m#^image/#) {
84		- <div style="background:#ddd;text-align:center;padding-top:30px;padding-bottom:30px;margin-bottom:30px">
	97	+ <div class="blob-image">
85	98	<img type="<%= $mime_type %>
86	99	% if (defined $file) {
87	100	alt="<%= $file %>" title="<%= $file %>"
...	...	@@ -102,7 +115,7 @@
102	115	<pre class="prettyprint linenums"><% for my $line (@$lines) { %><%= "$line\n" %><% } %></pre>
103	116	% }
104	117	% } else {
105		- <div style="font-size:16px;background:#ddd;text-align:center;padding-top:30px;padding-bottom:30px;margin-bottom:30px">
	118	+ <div class="blob-raw">
106	119	<a href="<%= url_for("/$user/$project/raw/$rev/$file") %>">View raw</a>
107	120	</div>
108	121	% }

...	...	@@ -2,7 +2,7 @@
2	2	my $dir = stash('dir');
3	3	%>
4	4
5		-<div style="margin-bottom:10px">
	5	+<div>
6	6	<div class="commit-summary">
7	7	<div class="commit-summary-left-container">
8	8	<span class="commit-summary-author" title="<%= $commit->{author_email} %>"><%= $commit->{author_name} %></span>