improve tags page design ・ d662300 ・ Gitprep

- improve tags page design;
- Browse files
- Yuki Kimoto commited on 2016-02-01
- 1 parent 168712b
  
  commit d66230074093400fdb635562b2447dc4dd4e5bfa

Showing 4 changed files with 124 additions and 32 deletions

+44 -1

public/css/bootstrap.css

@@ -2458,5 +2458,48 @@ button.close {
 }
 
 .branches-overview-more a:hover {
-  background:#e0ffff;
+  background:#e6e6fa;
 }
+
+.tags {
+  
+}
+
+.tags > li {
+  border-bottom:1px solid #d8d8d8;
+  padding:10px 0;
+}
+
+.tags > li:first-child {
+  border-top:1px solid #d8d8d8;
+}
+
+.tags-item {
+  overflow:hidden;
+}
+
+.tags-item > li:first-child {
+  display:block;
+  width:30%;
+  float:left;
+  color:#767676;
+}
+
+.tags-item > li.last-child {
+  display:block;
+  width:70%;
+  float:left;
+}
+
+.tags-name a {
+  color:#333;
+}
+
+.tags-links {
+  padding-top:3px;
+}
+
+.tags-links a {
+  color:#767676;
+  font-size:13px;
+}

+47 -3

templates/branches.html.ep

View

@@ -8,6 +8,7 @@
   my $project = param('project');
   my $op = param('op') || '';
   my $display = param('display') || 'overview';
+  my $page = param('page') || 1;
   
   # Git
   my $git = $self->app->git;
@@ -64,9 +65,16 @@
     stale => [],
     all => []
   };
+
+  # Pagenation
+  my $page_count = 20;
+  my $skip = $page_count * ($page - 1);
   
   my $branches = $git->branches($user, $project);
   my $max = 0;
+  my $active_count = 0;
+  my $stale_count = 0;
+  my $all_count = 0;
   for my $branch (@$branches) {
     $branch->{status} = $git->branch_status($user, $project, $default_branch->{name}, $branch->{name});
     $max = $branch->{status}{ahead} if $max < $branch->{status}{ahead};
@@ -96,18 +104,28 @@
     }
     elsif ($display eq 'active') {
       if ($branch_type eq 'active') {
-        push @{$branches_h->{active}}, $branch;
+        if ($active_count >= $skip && $active_count < $skip + $page_count) {
+          push @{$branches_h->{active}}, $branch;
+        }
+        $active_count++;
       }
     }
     elsif ($display eq 'stale') {
       if ($branch_type eq 'stale') {
-        push @{$branches_h->{stale}}, $branch;
+        if ($stale_count >= $skip && $stale_count < $skip + $page_count) {
+          push @{$branches_h->{stale}}, $branch;
+        }
+        $stale_count++;
       }
     }
     elsif ($display eq 'all') {
-      push @{$branches_h->{all}}, $branch;
+      if ($all_count >= $skip && $all_count < $skip + $page_count) {
+        push @{$branches_h->{all}}, $branch;
+      }
+      $all_count++;
     }
   }
+  
 %>
 
 % layout 'common', title => "branches  \x{30fb} $user/$project";
@@ -166,6 +184,7 @@
             % }
           </li>
           % if (@$branches) {
+            % my $branches_count;
             % for (my $i = 0; $i < @$branches; $i++) {
               <%
                 my $branch = $branches->[$i];
@@ -252,6 +271,31 @@
                   </ul>
                 </li>
               % }
+              % $branches_count++;
+            % }
+
+
+            % if ($display ne 'overview') {
+              <div class="pagenation-container" style="margin-top:20px">
+                <ul class="pagenation">
+                  % if ($page == 1) {
+                    <li><span>Newer</span></li>
+                  % } else {
+                    % my $newer_page = $page - 1;
+                    <li>
+                      <a href="<%= url_for("/$user/$project/branches/$display?page=$newer_page") %>">Newer</a>
+                    </li>
+                  % }
+                  % if ($branches_count < $page_count) {
+                    <li><span>Older</span></li>
+                  % } else {
+                    % my $older_page = $page + 1;
+                    <li>
+                      <a href="<%= url_for("/$user/$project/branches/$display?page=$older_page") %>">Older</a>
+                    </li>
+                  % }
+                </ul>
+              </div>
             % }
           % } else {
             <li style="text-align:center;text-color:#767676">

+32 -27

templates/tags.html.ep

View

@@ -12,7 +12,7 @@
   
   # Ref names
   my $limit = app->config->{basic}{tags_limit};
-  my $page_count = 50;
+  my $page_count = 20;
   my $tags = $git->tags(
     $user,
     $project,
@@ -29,21 +29,21 @@
 
   <div class="container">
     
-    <h3 style="font-size:20px">Tags</h3>
+    <h3 class="topic1">Tags</h3>
     
     % if (@$tags) {
-      <div style="margin-bottom:30px">
+      <ul class="tags">
         % for (my $i = 0; $i < @$tags; $i++) {
           % my $tag = $tags->[$i];
           % my $name = $tag->{name};
           % my $tag_class = $i == @$tags - 1 ? 'tag tag_last' : 'tag';
-          <div class="border-gray" style="padding:7px 5px;border-left:none;border-right:none;border-bottom:none;">
-            <div class="row">
-              <div class="span3">
-                <span class="muted" href="<%= url_for("/$user/$project/tree/$name") %>" title="<%= $tag->{commit}{age_string_datetime_local} %>"><%= $tag->{commit}{age_string} %></span>
-              </div>
-              <div class="span8">
-                <div>
+          <li>
+            <ul class="tags-item">
+              <li>
+                <span title="<%= $tag->{commit}{age_string_datetime_local} %>">on <%= $tag->{commit}{age_string_date_local} %></span>
+              </li>
+              <li class="last-child">
+                <div class="tags-name">
                   <a class="font-black" href="<%= url_for("/$user/$project/tree/$name") %>">
                     <b><%= $name %></b>
                     % if (defined $tag->{comment_short}) {
@@ -51,7 +51,7 @@
                     % }
                   </a>
                 </div>
-                <div>
+                <div class="tags-links">
                   % my $commit_id = $tag->{commit}{id};
                   <a class="muted" href="<%= url_for("/$user/$project/commit/$commit_id") %>">
                     <i class="icon-share-alt"></i>
@@ -62,44 +62,49 @@
                       ignore space
                     </a>)
                   % }
-                  <a class="muted" href="<%= url_for("/$user/$project/archive/$name.zip") %>">
+                  <a href="<%= url_for("/$user/$project/archive/$name.zip") %>">
                     <i class="icon-file"></i>
                     zip
                   </a>
-                  <a class="muted" href="<%= url_for("/$user/$project/archive/$name.tar.gz") %>">
+                  <a href="<%= url_for("/$user/$project/archive/$name.tar.gz") %>">
                     <i class="icon-file"></i>
                     tar.gz
                   </a>
                 </div>
-              </div>
-            </div>
-          </div>
+              </li>
+            </ul>
+          </li>
         % }
-        % if ($tags_count > $page_count) {
-          <ul class="pager" style="text-align:left">
+      </ul>
+
+      % if ($tags_count > $page_count) {
+        <div class="pagenation-container" style="margin-top:20px">
+          <ul class="pagenation">
             % if ($page == 1) {
-              <li class="disabled">&laquo; Newer</li>
+              <li><span>Newer</span></li>
             % } else {
               % my $newer_page = $page - 1;
               <li class="disable">
-                <a href="<%= url_for("/$user/$project/tags?page=$newer_page") %>">&laquo; Newer</a>
+                <a href="<%= url_for("/$user/$project/tags?page=$newer_page") %>">Newer</a>
               </li>
             % }
             % if (@$tags < $page_count) {
-              <li class="disabled">Older &raquo;</li>
+              <li><span>Older</span></li>
             % } else {
               % my $older_page = $page + 1;
               <li>
-                <a href="<%= url_for("/$user/$project/tags?page=$older_page") %>">Older &raquo;</a>
+                <a href="<%= url_for("/$user/$project/tags?page=$older_page") %>">Older</a>
               </li>
             % }
           </ul>
-        % }
-      </div>
+        </div>
+      % }
     % } else {
-      <div class="well">
-        No Tags.
-      </div>
+      <ul class="tags">
+        <li>
+          No Tags.
+        </li>
+      </ul>
     % }
   </div>
   

+1 -1

xt/basic.t

View

@@ -220,7 +220,7 @@ note 'History page';
 note 'Tags page';
 {
   # Page access
-  $t->get_ok("/$user/$project/tags");
+  $t->get_ok("/$user/$project/tags?page=2");
   
   # Commit datetime
   $t->content_like(qr/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/);

...	...	@@ -2458,5 +2458,48 @@ button.close {
2458	2458	}
2459	2459
2460	2460	.branches-overview-more a:hover {
2461		- background:#e0ffff;
	2461	+ background:#e6e6fa;
2462	2462	}
	2463	+
	2464	+.tags {
	2465	+
	2466	+}
	2467	+
	2468	+.tags > li {
	2469	+ border-bottom:1px solid #d8d8d8;
	2470	+ padding:10px 0;
	2471	+}
	2472	+
	2473	+.tags > li:first-child {
	2474	+ border-top:1px solid #d8d8d8;
	2475	+}
	2476	+
	2477	+.tags-item {
	2478	+ overflow:hidden;
	2479	+}
	2480	+
	2481	+.tags-item > li:first-child {
	2482	+ display:block;
	2483	+ width:30%;
	2484	+ float:left;
	2485	+ color:#767676;
	2486	+}
	2487	+
	2488	+.tags-item > li.last-child {
	2489	+ display:block;
	2490	+ width:70%;
	2491	+ float:left;
	2492	+}
	2493	+
	2494	+.tags-name a {
	2495	+ color:#333;
	2496	+}
	2497	+
	2498	+.tags-links {
	2499	+ padding-top:3px;
	2500	+}
	2501	+
	2502	+.tags-links a {
	2503	+ color:#767676;
	2504	+ font-size:13px;
	2505	+}

...	...	@@ -220,7 +220,7 @@ note 'History page';
220	220	note 'Tags page';
221	221	{
222	222	# Page access
223		- $t->get_ok("/$user/$project/tags");
	223	+ $t->get_ok("/$user/$project/tags?page=2");
224	224
225	225	# Commit datetime
226	226	$t->content_like(qr/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/);

...	...	@@ -8,6 +8,7 @@
8	8	my $project = param('project');
9	9	my $op = param('op') \|\| '';
10	10	my $display = param('display') \|\| 'overview';
	11	+ my $page = param('page') \|\| 1;
11	12
12	13	# Git
13	14	my $git = $self->app->git;
...	...	@@ -64,9 +65,16 @@
64	65	stale => [],
65	66	all => []
66	67	};
	68	+
	69	+ # Pagenation
	70	+ my $page_count = 20;
	71	+ my $skip = $page_count * ($page - 1);
67	72
68	73	my $branches = $git->branches($user, $project);
69	74	my $max = 0;
	75	+ my $active_count = 0;
	76	+ my $stale_count = 0;
	77	+ my $all_count = 0;
70	78	for my $branch (@$branches) {
71	79	$branch->{status} = $git->branch_status($user, $project, $default_branch->{name}, $branch->{name});
72	80	$max = $branch->{status}{ahead} if $max < $branch->{status}{ahead};
...	...	@@ -96,18 +104,28 @@
96	104	}
97	105	elsif ($display eq 'active') {
98	106	if ($branch_type eq 'active') {
99		- push @{$branches_h->{active}}, $branch;
	107	+ if ($active_count >= $skip && $active_count < $skip + $page_count) {
	108	+ push @{$branches_h->{active}}, $branch;
	109	+ }
	110	+ $active_count++;
100	111	}
101	112	}
102	113	elsif ($display eq 'stale') {
103	114	if ($branch_type eq 'stale') {
104		- push @{$branches_h->{stale}}, $branch;
	115	+ if ($stale_count >= $skip && $stale_count < $skip + $page_count) {
	116	+ push @{$branches_h->{stale}}, $branch;
	117	+ }
	118	+ $stale_count++;
105	119	}
106	120	}
107	121	elsif ($display eq 'all') {
108		- push @{$branches_h->{all}}, $branch;
	122	+ if ($all_count >= $skip && $all_count < $skip + $page_count) {
	123	+ push @{$branches_h->{all}}, $branch;
	124	+ }
	125	+ $all_count++;
109	126	}
110	127	}
	128	+
111	129	%>
112	130
113	131	% layout 'common', title => "branches \x{30fb} $user/$project";
...	...	@@ -166,6 +184,7 @@
166	184	% }
167	185	</li>
168	186	% if (@$branches) {
	187	+ % my $branches_count;
169	188	% for (my $i = 0; $i < @$branches; $i++) {
170	189	<%
171	190	my $branch = $branches->[$i];
...	...	@@ -252,6 +271,31 @@
252	271	</ul>
253	272	</li>
254	273	% }
	274	+ % $branches_count++;
	275	+ % }
	276	+
	277	+
	278	+ % if ($display ne 'overview') {
	279	+ <div class="pagenation-container" style="margin-top:20px">
	280	+ <ul class="pagenation">
	281	+ % if ($page == 1) {
	282	+ <li><span>Newer</span></li>
	283	+ % } else {
	284	+ % my $newer_page = $page - 1;
	285	+ <li>
	286	+ <a href="<%= url_for("/$user/$project/branches/$display?page=$newer_page") %>">Newer</a>
	287	+ </li>
	288	+ % }
	289	+ % if ($branches_count < $page_count) {
	290	+ <li><span>Older</span></li>
	291	+ % } else {
	292	+ % my $older_page = $page + 1;
	293	+ <li>
	294	+ <a href="<%= url_for("/$user/$project/branches/$display?page=$older_page") %>">Older</a>
	295	+ </li>
	296	+ % }
	297	+ </ul>
	298	+ </div>
255	299	% }
256	300	% } else {
257	301	<li style="text-align:center;text-color:#767676">

...	...	@@ -12,7 +12,7 @@
12	12
13	13	# Ref names
14	14	my $limit = app->config->{basic}{tags_limit};
15		- my $page_count = 50;
	15	+ my $page_count = 20;
16	16	my $tags = $git->tags(
17	17	$user,
18	18	$project,
...	...	@@ -29,21 +29,21 @@
29	29
30	30	<div class="container">
31	31
32		- <h3 style="font-size:20px">Tags</h3>
	32	+ <h3 class="topic1">Tags</h3>
33	33
34	34	% if (@$tags) {
35		- <div style="margin-bottom:30px">
	35	+ <ul class="tags">
36	36	% for (my $i = 0; $i < @$tags; $i++) {
37	37	% my $tag = $tags->[$i];
38	38	% my $name = $tag->{name};
39	39	% my $tag_class = $i == @$tags - 1 ? 'tag tag_last' : 'tag';
40		- <div class="border-gray" style="padding:7px 5px;border-left:none;border-right:none;border-bottom:none;">
41		- <div class="row">
42		- <div class="span3">
43		- <span class="muted" href="<%= url_for("/$user/$project/tree/$name") %>" title="<%= $tag->{commit}{age_string_datetime_local} %>"><%= $tag->{commit}{age_string} %></span>
44		- </div>
45		- <div class="span8">
46		- <div>
	40	+ <li>
	41	+ <ul class="tags-item">
	42	+ <li>
	43	+ <span title="<%= $tag->{commit}{age_string_datetime_local} %>">on <%= $tag->{commit}{age_string_date_local} %></span>
	44	+ </li>
	45	+ <li class="last-child">
	46	+ <div class="tags-name">
47	47	<a class="font-black" href="<%= url_for("/$user/$project/tree/$name") %>">
48	48	<b><%= $name %></b>
49	49	% if (defined $tag->{comment_short}) {
...	...	@@ -51,7 +51,7 @@
51	51	% }
52	52	</a>
53	53	</div>
54		- <div>
	54	+ <div class="tags-links">
55	55	% my $commit_id = $tag->{commit}{id};
56	56	<a class="muted" href="<%= url_for("/$user/$project/commit/$commit_id") %>">
57	57	<i class="icon-share-alt"></i>
...	...	@@ -62,44 +62,49 @@
62	62	ignore space
63	63	</a>)
64	64	% }
65		- <a class="muted" href="<%= url_for("/$user/$project/archive/$name.zip") %>">
	65	+ <a href="<%= url_for("/$user/$project/archive/$name.zip") %>">
66	66	<i class="icon-file"></i>
67	67	zip
68	68	</a>
69		- <a class="muted" href="<%= url_for("/$user/$project/archive/$name.tar.gz") %>">
	69	+ <a href="<%= url_for("/$user/$project/archive/$name.tar.gz") %>">
70	70	<i class="icon-file"></i>
71	71	tar.gz
72	72	</a>
73	73	</div>
74		- </div>
75		- </div>
76		- </div>
	74	+ </li>
	75	+ </ul>
	76	+ </li>
77	77	% }
78		- % if ($tags_count > $page_count) {
79		- <ul class="pager" style="text-align:left">
	78	+ </ul>
	79	+
	80	+ % if ($tags_count > $page_count) {
	81	+ <div class="pagenation-container" style="margin-top:20px">
	82	+ <ul class="pagenation">
80	83	% if ($page == 1) {
81		- <li class="disabled">« Newer</li>
	84	+ <li><span>Newer</span></li>
82	85	% } else {
83	86	% my $newer_page = $page - 1;
84	87	<li class="disable">
85		- <a href="<%= url_for("/$user/$project/tags?page=$newer_page") %>">« Newer</a>
	88	+ <a href="<%= url_for("/$user/$project/tags?page=$newer_page") %>">Newer</a>
86	89	</li>
87	90	% }
88	91	% if (@$tags < $page_count) {
89		- <li class="disabled">Older »</li>
	92	+ <li><span>Older</span></li>
90	93	% } else {
91	94	% my $older_page = $page + 1;
92	95	<li>
93		- <a href="<%= url_for("/$user/$project/tags?page=$older_page") %>">Older »</a>
	96	+ <a href="<%= url_for("/$user/$project/tags?page=$older_page") %>">Older</a>
94	97	</li>
95	98	% }
96	99	</ul>
97		- % }
98		- </div>
	100	+ </div>
	101	+ % }
99	102	% } else {
100		- <div class="well">
101		- No Tags.
102		- </div>
	103	+ <ul class="tags">
	104	+ <li>
	105	+ No Tags.
	106	+ </li>
	107	+ </ul>
103	108	% }
104	109	</div>
105	110