improve commit page design ・ 4b310fd ・ Gitprep

- improve commit page design;
- Browse files
- Yuki Kimoto commited on 2016-02-03
- 1 parent 35354da
  
  commit 4b310fd8581e73f74d1dde1092f621aa0b85f4a3

Showing 4 changed files with 108 additions and 76 deletions

+22

public/css/bootstrap.css

...	...	@@ -2622,6 +2622,9 @@ button.close {
2622	2622	padding:0 2px;
2623	2623	}
2624	2624
	2625	+.commit-diff {
	2626	+ margin-bottom:30px;
	2627	+}
2625	2628	.commit-diff > :first-child {
2626	2629	border:1px solid #d8d8d8;
2627	2630	border-radius:3px 3px 0 0;
...	...	@@ -2641,3 +2644,22 @@ button.close {
2641	2644	width:20%;
2642	2645	text-align:right;
2643	2646	}
	2647	+
	2648	+.commit-diff-body {
	2649	+ border:1px solid #d8d8d8;
	2650	+ border-top:none;
	2651	+ border-radius: 0 0 3px 3px;
	2652	+ margin-bottom:30px;
	2653	+}
	2654	+.commit-diff-body > table {
	2655	+ border-collapse:collapse;
	2656	+}
	2657	+.commit-diff-plain {
	2658	+ padding:10px;
	2659	+}
	2660	+.commit-diff-image {
	2661	+ background:#ddd;
	2662	+ text-align:center;
	2663	+ padding-top:40px;
	2664	+ padding-bottom:40px;
	2665	+}

+10 -6

templates/blob.html.ep

View

@@ -104,12 +104,16 @@
       </div>
     % } elsif ($mime_type =~ m#^text/#) {
       % if ($file =~ /\.md$/) {
-        % my $readme = join "\n", @$lines;
-        % $readme =~ s#^(\[.*\]:)(?!\s*https?://)\s*(\S*)#$1 /$user/$project/raw/$rev/$2#mg;
-        % $readme =~ s#^(!\[.*\]\()(?!https?://)(\S*)#$1/$user/$project/raw/$rev/$2#mg;
-        % my $readme_e = Text::Markdown::Hoedown::markdown($readme, extensions => HOEDOWN_EXT_FENCED_CODE);
-        <div class="markdown-body border-gray">
-          <%== $readme_e %>
+        <%
+          my $readme = join "\n", @$lines;
+          $readme =~ s#^(\[.*\]:)(?!\s*https?://)\s*(\S*)#$1 /$user/$project/raw/$rev/$2#mg;
+          $readme =~ s#^(!\[.*\]\()(?!https?://)(\S*)#$1/$user/$project/raw/$rev/$2#mg;
+          my $readme_e = Text::Markdown::Hoedown::markdown($readme, extensions => HOEDOWN_EXT_FENCED_CODE);
+        %>
+        <div class="readme-frame">
+          <div class="markdown-body">
+            <%== $readme_e %>
+          </div>
         </div>
       % } else {
         <pre class="prettyprint linenums"><% for my $line (@$lines) { %><%= "$line\n" %><% } %></pre>

templates/commit.html.ep

View

...	...	@@ -73,6 +73,7 @@
73	73	<div>
74	74	% for (my $i = 1; $i < @{$commit->{comment}}; $i++) {
75	75	<div>
	76	+ % warn $commit->{comment}[$i];
76	77	<%= $commit->{comment}[$i] %>
77	78	</div>
78	79	% }

+75 -70

templates/include/blob_diff_body.html.ep

View

@@ -71,79 +71,84 @@
         % }
       </div>
     </div>
-    <table>
-      % my $not_shown;
-      % my $from_rev_shown;
-      % my $rev_shown;
-      
+    <div class="commit-diff-body">
+        <%
+          my $not_shown;
+          my $from_rev_shown;
+          my $rev_shown;
+        %>
+        
 
-      % if ($blob_diff->{binary}) {
-        % if ($binary_not_shown) {
-          <div class="border-gray" style="padding:10px;margin-bottom:30px;border-top:none">
-            Binary file not shown.
-          </div>
-        % } else {
-          <div class="border-gray" style="border-top:none;background:#ddd;text-align:center;padding-top:30px;padding-bottom:30px">
-            % if ($binary_from_rev_shown) {
-              <a href="<%= url_for("/$user/$project/blob/$from_rev/$file") %>">
-                <img src="<%= url_for("/$user/$project/raw/$from_rev/$file") %>" style="border:1px solid red;padding:1px;margin-right:20px">
-              </a>          
+        % if ($blob_diff->{binary}) {
+          % if ($binary_not_shown) {
+            <div class="commit-diff-plain">
+              Binary file not shown.
+            </div>
+          % } else {
+            <div class="commit-diff-image">
+              % if ($binary_from_rev_shown) {
+                <a href="<%= url_for("/$user/$project/blob/$from_rev/$file") %>">
+                  <img src="<%= url_for("/$user/$project/raw/$from_rev/$file") %>" style="border:1px solid red;padding:1px;margin-right:20px">
+                </a>          
+              % }
+              
+              % if ($binary_rev_shown) {
+                <a href="<%= url_for("/$user/$project/blob/$rev/$file") %>">
+                  <img src="<%= url_for("/$user/$project/raw/$rev/$file") %>" style="border:1px solid green;padding:1px;margin-left:20px">
+                </a>
+              % }
+            </div>
+          % }
+        % } elsif (@$lines) {
+          <table>
+
+            % for my $line (@$lines) {
+              % my $class = $line->{class};
+              % my $value = $line->{value};
+
+              <%
+                my $bk_color_line = '';
+                my $bk_color = '';
+                my $border_color;
+                if ($value =~ /^@/) {
+                  $bk_color_line = '#f3f3ff';
+                  $border_color = '#e4e4ff';
+                  $bk_color = '#f8f8ff';
+                } elsif ($value =~ /^\+/) {
+                  $bk_color_line = '#ceffce';
+                  $border_color = '#b4e2b4';
+                  $bk_color = '#dfd';
+                } elsif ($value =~ /^-/) {
+                  $bk_color_line = '#f7c8c8';
+                  $border_color = '#e9aeae';
+                  $bk_color = '#fdd';
+                } else {
+                  $border_color = '#e5e5e5';
+                }
+              %>
+              <tr >
+                <td style="font-size:12px;color:#aaa;padding:0 7px;border-right:1px <%= $border_color %> solid;background:<%= $bk_color_line %>;">
+                  <%= $line->{before_line_num} %>
+                </td>
+                <td style="font-size:12px;color:#aaa;padding:0 7px;border-right:1px <%= $border_color %> solid;background:<%= $bk_color_line %>;">
+                  <%= $line->{after_line_num} %>
+                </td>
+                <td style="width:100%;padding-left:7px;background:<%= $bk_color %>;">
+                  <pre style="border:none;background:none;padding:0;margin:0"><%= $value %></pre>
+                </td>
+              </tr>
             % }
-            
-            % if ($binary_rev_shown) {
-              <a href="<%= url_for("/$user/$project/blob/$rev/$file") %>">
-                <img src="<%= url_for("/$user/$project/raw/$rev/$file") %>" style="border:1px solid green;padding:1px;margin-left:20px">
-              </a>
+          </table>
+        % } else {
+          <div class="commit-diff-plain">
+            % if ($status eq 'R') {
+              File renamed without changes.
+            % } elsif ($status eq 'A' || $status eq 'D') {
+               No changes.
+            % } elsif ($from_mode_str ne $to_mode_str) {
+              File mode changed.
             % }
           </div>
         % }
-      % } elsif (@$lines) {
-        % for my $line (@$lines) {
-          % my $class = $line->{class};
-          % my $value = $line->{value};
-
-          <%
-            my $bk_color_line = '';
-            my $bk_color = '';
-            my $border_color;
-            if ($value =~ /^@/) {
-              $bk_color_line = '#f3f3ff';
-              $border_color = '#e4e4ff';
-              $bk_color = '#f8f8ff';
-            } elsif ($value =~ /^\+/) {
-              $bk_color_line = '#ceffce';
-              $border_color = '#b4e2b4';
-              $bk_color = '#dfd';
-            } elsif ($value =~ /^-/) {
-              $bk_color_line = '#f7c8c8';
-              $border_color = '#e9aeae';
-              $bk_color = '#fdd';
-            } else {
-              $border_color = '#e5e5e5';
-            }
-          %>
-          <tr >
-            <td style="font-size:12px;color:#aaa;padding:0 7px;border-right:1px <%= $border_color %> solid;background:<%= $bk_color_line %>;">
-              <%= $line->{before_line_num} %>
-            </td>
-            <td style="font-size:12px;color:#aaa;padding:0 7px;border-right:1px <%= $border_color %> solid;background:<%= $bk_color_line %>;">
-              <%= $line->{after_line_num} %>
-            </td>
-            <td style="width:100%;padding-left:7px;background:<%= $bk_color %>;">
-              <pre style="border:none;background:none;padding:0;margin:0"><%= $value %></pre>
-            </td>
-          </tr>
-        % }
-      % } else {
-        <div class="border-gray" style="padding:10px;margin-bottom:30px;border-top:none">
-          % if ($status eq 'R') {
-            File renamed without changes.
-          % } elsif ($status eq 'A' || $status eq 'D') {
-             No changes.
-          % } elsif ($from_mode_str ne $to_mode_str) {
-            File mode changed.
-          % }
-        </div>
-      % }
-    </table>
+    </div>
   </div>

...	...	@@ -104,12 +104,16 @@
104	104	</div>
105	105	% } elsif ($mime_type =~ m#^text/#) {
106	106	% if ($file =~ /\.md$/) {
107		- % my $readme = join "\n", @$lines;
108		- % $readme =~ s#^(\[.\]:)(?!\shttps?://)\s(\S)#$1 /$user/$project/raw/$rev/$2#mg;
109		- % $readme =~ s#^(!\[.\]\()(?!https?://)(\S)#$1/$user/$project/raw/$rev/$2#mg;
110		- % my $readme_e = Text::Markdown::Hoedown::markdown($readme, extensions => HOEDOWN_EXT_FENCED_CODE);
111		- <div class="markdown-body border-gray">
112		- <%== $readme_e %>
	107	+ <%
	108	+ my $readme = join "\n", @$lines;
	109	+ $readme =~ s#^(\[.\]:)(?!\shttps?://)\s(\S)#$1 /$user/$project/raw/$rev/$2#mg;
	110	+ $readme =~ s#^(!\[.\]\()(?!https?://)(\S)#$1/$user/$project/raw/$rev/$2#mg;
	111	+ my $readme_e = Text::Markdown::Hoedown::markdown($readme, extensions => HOEDOWN_EXT_FENCED_CODE);
	112	+ %>
	113	+ <div class="readme-frame">
	114	+ <div class="markdown-body">
	115	+ <%== $readme_e %>
	116	+ </div>
113	117	</div>
114	118	% } else {
115	119	<pre class="prettyprint linenums"><% for my $line (@$lines) { %><%= "$line\n" %><% } %></pre>

...	...	@@ -71,79 +71,84 @@
71	71	% }
72	72	</div>
73	73	</div>
74		- <table>
75		- % my $not_shown;
76		- % my $from_rev_shown;
77		- % my $rev_shown;
78		-
	74	+ <div class="commit-diff-body">
	75	+ <%
	76	+ my $not_shown;
	77	+ my $from_rev_shown;
	78	+ my $rev_shown;
	79	+ %>
	80	+
79	81
80		- % if ($blob_diff->{binary}) {
81		- % if ($binary_not_shown) {
82		- <div class="border-gray" style="padding:10px;margin-bottom:30px;border-top:none">
83		- Binary file not shown.
84		- </div>
85		- % } else {
86		- <div class="border-gray" style="border-top:none;background:#ddd;text-align:center;padding-top:30px;padding-bottom:30px">
87		- % if ($binary_from_rev_shown) {
88		- <a href="<%= url_for("/$user/$project/blob/$from_rev/$file") %>">
89		- <img src="<%= url_for("/$user/$project/raw/$from_rev/$file") %>" style="border:1px solid red;padding:1px;margin-right:20px">
90		- </a>
	82	+ % if ($blob_diff->{binary}) {
	83	+ % if ($binary_not_shown) {
	84	+ <div class="commit-diff-plain">
	85	+ Binary file not shown.
	86	+ </div>
	87	+ % } else {
	88	+ <div class="commit-diff-image">
	89	+ % if ($binary_from_rev_shown) {
	90	+ <a href="<%= url_for("/$user/$project/blob/$from_rev/$file") %>">
	91	+ <img src="<%= url_for("/$user/$project/raw/$from_rev/$file") %>" style="border:1px solid red;padding:1px;margin-right:20px">
	92	+ </a>
	93	+ % }
	94	+
	95	+ % if ($binary_rev_shown) {
	96	+ <a href="<%= url_for("/$user/$project/blob/$rev/$file") %>">
	97	+ <img src="<%= url_for("/$user/$project/raw/$rev/$file") %>" style="border:1px solid green;padding:1px;margin-left:20px">
	98	+ </a>
	99	+ % }
	100	+ </div>
	101	+ % }
	102	+ % } elsif (@$lines) {
	103	+ <table>
	104	+
	105	+ % for my $line (@$lines) {
	106	+ % my $class = $line->{class};
	107	+ % my $value = $line->{value};
	108	+
	109	+ <%
	110	+ my $bk_color_line = '';
	111	+ my $bk_color = '';
	112	+ my $border_color;
	113	+ if ($value =~ /^@/) {
	114	+ $bk_color_line = '#f3f3ff';
	115	+ $border_color = '#e4e4ff';
	116	+ $bk_color = '#f8f8ff';
	117	+ } elsif ($value =~ /^\+/) {
	118	+ $bk_color_line = '#ceffce';
	119	+ $border_color = '#b4e2b4';
	120	+ $bk_color = '#dfd';
	121	+ } elsif ($value =~ /^-/) {
	122	+ $bk_color_line = '#f7c8c8';
	123	+ $border_color = '#e9aeae';
	124	+ $bk_color = '#fdd';
	125	+ } else {
	126	+ $border_color = '#e5e5e5';
	127	+ }
	128	+ %>
	129	+ <tr >
	130	+ <td style="font-size:12px;color:#aaa;padding:0 7px;border-right:1px <%= $border_color %> solid;background:<%= $bk_color_line %>;">
	131	+ <%= $line->{before_line_num} %>
	132	+ </td>
	133	+ <td style="font-size:12px;color:#aaa;padding:0 7px;border-right:1px <%= $border_color %> solid;background:<%= $bk_color_line %>;">
	134	+ <%= $line->{after_line_num} %>
	135	+ </td>
	136	+ <td style="width:100%;padding-left:7px;background:<%= $bk_color %>;">
	137	+ <pre style="border:none;background:none;padding:0;margin:0"><%= $value %></pre>
	138	+ </td>
	139	+ </tr>
91	140	% }
92		-
93		- % if ($binary_rev_shown) {
94		- <a href="<%= url_for("/$user/$project/blob/$rev/$file") %>">
95		- <img src="<%= url_for("/$user/$project/raw/$rev/$file") %>" style="border:1px solid green;padding:1px;margin-left:20px">
96		- </a>
	141	+ </table>
	142	+ % } else {
	143	+ <div class="commit-diff-plain">
	144	+ % if ($status eq 'R') {
	145	+ File renamed without changes.
	146	+ % } elsif ($status eq 'A' \|\| $status eq 'D') {
	147	+ No changes.
	148	+ % } elsif ($from_mode_str ne $to_mode_str) {
	149	+ File mode changed.
97	150	% }
98	151	</div>
99	152	% }
100		- % } elsif (@$lines) {
101		- % for my $line (@$lines) {
102		- % my $class = $line->{class};
103		- % my $value = $line->{value};
104		-
105		- <%
106		- my $bk_color_line = '';
107		- my $bk_color = '';
108		- my $border_color;
109		- if ($value =~ /^@/) {
110		- $bk_color_line = '#f3f3ff';
111		- $border_color = '#e4e4ff';
112		- $bk_color = '#f8f8ff';
113		- } elsif ($value =~ /^\+/) {
114		- $bk_color_line = '#ceffce';
115		- $border_color = '#b4e2b4';
116		- $bk_color = '#dfd';
117		- } elsif ($value =~ /^-/) {
118		- $bk_color_line = '#f7c8c8';
119		- $border_color = '#e9aeae';
120		- $bk_color = '#fdd';
121		- } else {
122		- $border_color = '#e5e5e5';
123		- }
124		- %>
125		- <tr >
126		- <td style="font-size:12px;color:#aaa;padding:0 7px;border-right:1px <%= $border_color %> solid;background:<%= $bk_color_line %>;">
127		- <%= $line->{before_line_num} %>
128		- </td>
129		- <td style="font-size:12px;color:#aaa;padding:0 7px;border-right:1px <%= $border_color %> solid;background:<%= $bk_color_line %>;">
130		- <%= $line->{after_line_num} %>
131		- </td>
132		- <td style="width:100%;padding-left:7px;background:<%= $bk_color %>;">
133		- <pre style="border:none;background:none;padding:0;margin:0"><%= $value %></pre>
134		- </td>
135		- </tr>
136		- % }
137		- % } else {
138		- <div class="border-gray" style="padding:10px;margin-bottom:30px;border-top:none">
139		- % if ($status eq 'R') {
140		- File renamed without changes.
141		- % } elsif ($status eq 'A' \|\| $status eq 'D') {
142		- No changes.
143		- % } elsif ($from_mode_str ne $to_mode_str) {
144		- File mode changed.
145		- % }
146		- </div>
147		- % }
148		- </table>
	153	+ </div>
149	154	</div>