design branches page ・ 7e5acb3 ・ Gitprep

- design branches page;
- Browse files
- Yuki Kimoto commited on 2012-12-06
- 1 parent 273825b
  
  commit 7e5acb375515338a8e8db8ee674387d353e891de

Showing 3 changed files with 223 additions and 50 deletions

+43 -43

templates/css/common.html.ep

@@ -1,12 +1,49 @@
 %= stylesheet begin
   
   /* Reset */
-  * {
-    margin:0;
-    padding:0;
-  }
-  li {
-    list-style: none;
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, font, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td {
+  	margin: 0;
+  	padding: 0;
+  	border: 0;
+  	outline: 0;
+  	font-size: 100%;
+  	vertical-align: baseline;
+  	background: transparent;
+  }
+  body {
+  	line-height: 1;
+  }
+  ol, ul {
+  	list-style: none;
+  }
+  blockquote, q {
+  	quotes: none;
+  }
+  blockquote:before, blockquote:after,
+  q:before, q:after {
+  	content: '';
+  	content: none;
+  }
+  :focus {
+  	outline: 0;
+  }
+  ins {
+  	text-decoration: none;
+  }
+  del {
+  	text-decoration: line-through;
+  }
+  table {
+  	border-collapse: collapse;
+  	border-spacing: 0;
   }
   
   /* Link */
@@ -23,43 +60,6 @@
     margin:5px auto;
   }
   
-  /* Code menu */
-  .code_menu {
-    margin-top:7px;
-    margin-bottom:15px;
-    height:30px;
-    overflow:hidden;
-  }
-  .code_menu_left {
-    width:700px;
-    float:left;
-    overflow:hidden;
-  }
-  .code_menu_current_ref {
-    float:left;
-    padding:5px 10px 10px 10px;
-  }
-  .code_menu_current_ref_button {
-    padding:1px;
-    border:1px solid gray;
-  }
-  .code_menu_left li {
-    float:left;
-    padding:5px 10px;
-  }
-  .code_menu_right {
-    text-align:right;
-    overflow:hidden;
-  }
-  .code_menu_right li {
-    float:right;
-    padding:5px 10px;
-  }
-  .code_menu_under {
-    border-top:1px solid gray;
-  }
-    
-  
   /* Source tree */
   .tree {
     width:100%;

+41

templates/include/code_menu.html.ep

View

...	...	@@ -1,3 +1,44 @@
	1	+%= stylesheet begin
	2	+ /* Code menu */
	3	+ .code_menu {
	4	+ margin-top:7px;
	5	+ margin-bottom:15px;
	6	+ height:30px;
	7	+ overflow:hidden;
	8	+ }
	9	+ .code_menu_left {
	10	+ width:700px;
	11	+ float:left;
	12	+ overflow:hidden;
	13	+ }
	14	+ .code_menu_current_ref {
	15	+ float:left;
	16	+ padding:5px 10px 10px 10px;
	17	+ }
	18	+ .code_menu_current_ref_button {
	19	+ padding:1px;
	20	+ border:1px solid gray;
	21	+ }
	22	+ .code_menu_left li {
	23	+ float:left;
	24	+ padding:5px 10px;
	25	+ }
	26	+ .code_menu_right {
	27	+ text-align:right;
	28	+ overflow:hidden;
	29	+ }
	30	+ .code_menu_right li {
	31	+ float:right;
	32	+ padding:5px 10px;
	33	+ }
	34	+ .code_menu_under {
	35	+ border-top:1px solid gray;
	36	+ }
	37	+ .code_menu a {
	38	+ color:#666;
	39	+ }
	40	+% end
	41	+
1	42	<div class="code_menu">
2	43	<ul class="code_menu_left">
3	44	<li class="code_menu_current_ref">

+139 -7

templates/main/branches.html.ep

View

@@ -18,13 +18,145 @@
   # Git
   my $git = $self->app->git;
   
-  # Ref names
-  my $heads  = $git->heads($project);
+  # Branches
+  my $branches  = $git->heads($project);
+  
+  # Default branch
+  my $default_branch;
+  my $default_branch_name = 'master';
+  my $branches_tmp = [];
+  for my $branch (@$branches) {
+    if ($branch->{name} eq $default_branch_name) {
+      $default_branch = $branch;
+    }
+    else { push @$branches_tmp, $branch }
+  }
+  $branches = $branches_tmp;
 %>
 
-% layout 'common';
-  %= include '/include/header', title => 'Branches', project => $project;
-  <div class="header">
-    <a class="title" href="<%= url_for('heads', project => $project_ns) %>">Branches</a>
+% layout 'new_common';
+  %= include '/css/common';
+  
+  %= stylesheet begin
+    /* h2 */
+    h2 {
+      font-size:140%;
+      padding-bottom:5px;
+    }
+    
+    /* Branches number */
+    .branches_number {
+      color:#666;
+      padding-bottom:5px;
+    }
+    
+    /* Branches */
+    .branches {
+      width:100%;
+    }
+    .branches .default {
+      width:100%;
+      background-color:black;
+      color:white;
+    }
+    .branches .default td {
+      padding-left:5px;
+      padding-right:5px;
+    }
+    .branches td {
+      padding-top:5px;
+      padding-bottom:5px;
+      border-bottom:1px solid #E5E5E5;
+      vertical-align:middle;
+    }
+    .branches .name {
+      font-size:120%;
+      font-weight:bold;
+    }
+    
+    .branches .last_updated {
+      color:#666;
+    }
+    .branches .left {
+      
+    }
+    .branches .right {
+      text-align:right;
+    }
+
+    .branches .right a {
+      color:#333;
+      display:inline-block;
+      padding:5px;
+      border:1px solid #E5E5E5;
+      border-radius:3px;
+      background-color:#F3F3F3;
+    }
+    .branches .right a:hover {
+      color:#FFF;
+      background-color:#4183C4;
+    }
+  % end
+  
+  %= include '/include/new_header';
+
+  <div class="main_panel">
+    %= include '/include/sub_header';
+    
+    %= include '/include/code_menu';
+    %= stylesheet begin
+      /* Code menu */
+      .code_menu_branches {
+        border:1px solid gray;
+        border-bottom:none;
+        background-color:white;
+        font-weight:bold;
+      }
+      .code_menu_branches a {
+        color:#333
+      }
+      
+    % end
+    
+    <h2>Branches</h2>
+    
+    <div class="branches_number">Showing 2 branches not merged into master</div>
+    <table class="branches">
+      <tr class="default">
+        <td class="left">
+          <div class="name"><%= $default_branch_name %></div>
+          <div class="last_updated">Last updated <%= $default_branch->{age} %> by author</div>
+        </td>
+        <td>
+          
+        </td>
+        <td class="right">
+          Base branch
+        </td>
+      </tr>
+    </table>
+    <table class="branches">
+      % for (my $i = 0; $i < @$branches; $i++) {
+        % my $branch = $branches->[$i];
+        % my $name = $branch->{name};
+        <tr>
+          <td class="left">
+            <div class="name">
+              <a href="<%= url_for("/$user/$repository/tree/$name") %>">
+                <%= $name %>
+              </a>
+            </div>
+            <div class="last_updated">Last updated <%= $branch->{age} %> by author</div>
+          </td>
+          <td>
+            
+          </td>
+          <td class="right">
+            <a href="<%= url_for("/$user/$repository/compare/$default_branch...$name") %>">Compare</a>
+          </td>
+        </tr>
+      % }
+    </table>
   </div>
-  %= include '/include/heads', project_ns => $project_ns, heads => $heads;
+  
+  %= include '/include/footer';

...	...	@@ -1,12 +1,49 @@
1	1	%= stylesheet begin
2	2
3	3	/* Reset */
4		- * {
5		- margin:0;
6		- padding:0;
7		- }
8		- li {
9		- list-style: none;
	4	+ html, body, div, span, applet, object, iframe,
	5	+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	6	+ a, abbr, acronym, address, big, cite, code,
	7	+ del, dfn, em, font, img, ins, kbd, q, s, samp,
	8	+ small, strike, strong, sub, sup, tt, var,
	9	+ b, u, i, center,
	10	+ dl, dt, dd, ol, ul, li,
	11	+ fieldset, form, label, legend,
	12	+ table, caption, tbody, tfoot, thead, tr, th, td {
	13	+ margin: 0;
	14	+ padding: 0;
	15	+ border: 0;
	16	+ outline: 0;
	17	+ font-size: 100%;
	18	+ vertical-align: baseline;
	19	+ background: transparent;
	20	+ }
	21	+ body {
	22	+ line-height: 1;
	23	+ }
	24	+ ol, ul {
	25	+ list-style: none;
	26	+ }
	27	+ blockquote, q {
	28	+ quotes: none;
	29	+ }
	30	+ blockquote:before, blockquote:after,
	31	+ q:before, q:after {
	32	+ content: '';
	33	+ content: none;
	34	+ }
	35	+ :focus {
	36	+ outline: 0;
	37	+ }
	38	+ ins {
	39	+ text-decoration: none;
	40	+ }
	41	+ del {
	42	+ text-decoration: line-through;
	43	+ }
	44	+ table {
	45	+ border-collapse: collapse;
	46	+ border-spacing: 0;
10	47	}
11	48
12	49	/* Link */
...	...	@@ -23,43 +60,6 @@
23	60	margin:5px auto;
24	61	}
25	62
26		- /* Code menu */
27		- .code_menu {
28		- margin-top:7px;
29		- margin-bottom:15px;
30		- height:30px;
31		- overflow:hidden;
32		- }
33		- .code_menu_left {
34		- width:700px;
35		- float:left;
36		- overflow:hidden;
37		- }
38		- .code_menu_current_ref {
39		- float:left;
40		- padding:5px 10px 10px 10px;
41		- }
42		- .code_menu_current_ref_button {
43		- padding:1px;
44		- border:1px solid gray;
45		- }
46		- .code_menu_left li {
47		- float:left;
48		- padding:5px 10px;
49		- }
50		- .code_menu_right {
51		- text-align:right;
52		- overflow:hidden;
53		- }
54		- .code_menu_right li {
55		- float:right;
56		- padding:5px 10px;
57		- }
58		- .code_menu_under {
59		- border-top:1px solid gray;
60		- }
61		-
62		-
63	63	/* Source tree */
64	64	.tree {
65	65	width:100%;

...	...	@@ -18,13 +18,145 @@
18	18	# Git
19	19	my $git = $self->app->git;
20	20
21		- # Ref names
22		- my $heads = $git->heads($project);
	21	+ # Branches
	22	+ my $branches = $git->heads($project);
	23	+
	24	+ # Default branch
	25	+ my $default_branch;
	26	+ my $default_branch_name = 'master';
	27	+ my $branches_tmp = [];
	28	+ for my $branch (@$branches) {
	29	+ if ($branch->{name} eq $default_branch_name) {
	30	+ $default_branch = $branch;
	31	+ }
	32	+ else { push @$branches_tmp, $branch }
	33	+ }
	34	+ $branches = $branches_tmp;
23	35	%>
24	36
25		-% layout 'common';
26		- %= include '/include/header', title => 'Branches', project => $project;
27		- <div class="header">
28		- <a class="title" href="<%= url_for('heads', project => $project_ns) %>">Branches</a>
	37	+% layout 'new_common';
	38	+ %= include '/css/common';
	39	+
	40	+ %= stylesheet begin
	41	+ /* h2 */
	42	+ h2 {
	43	+ font-size:140%;
	44	+ padding-bottom:5px;
	45	+ }
	46	+
	47	+ /* Branches number */
	48	+ .branches_number {
	49	+ color:#666;
	50	+ padding-bottom:5px;
	51	+ }
	52	+
	53	+ /* Branches */
	54	+ .branches {
	55	+ width:100%;
	56	+ }
	57	+ .branches .default {
	58	+ width:100%;
	59	+ background-color:black;
	60	+ color:white;
	61	+ }
	62	+ .branches .default td {
	63	+ padding-left:5px;
	64	+ padding-right:5px;
	65	+ }
	66	+ .branches td {
	67	+ padding-top:5px;
	68	+ padding-bottom:5px;
	69	+ border-bottom:1px solid #E5E5E5;
	70	+ vertical-align:middle;
	71	+ }
	72	+ .branches .name {
	73	+ font-size:120%;
	74	+ font-weight:bold;
	75	+ }
	76	+
	77	+ .branches .last_updated {
	78	+ color:#666;
	79	+ }
	80	+ .branches .left {
	81	+
	82	+ }
	83	+ .branches .right {
	84	+ text-align:right;
	85	+ }
	86	+
	87	+ .branches .right a {
	88	+ color:#333;
	89	+ display:inline-block;
	90	+ padding:5px;
	91	+ border:1px solid #E5E5E5;
	92	+ border-radius:3px;
	93	+ background-color:#F3F3F3;
	94	+ }
	95	+ .branches .right a:hover {
	96	+ color:#FFF;
	97	+ background-color:#4183C4;
	98	+ }
	99	+ % end
	100	+
	101	+ %= include '/include/new_header';
	102	+
	103	+ <div class="main_panel">
	104	+ %= include '/include/sub_header';
	105	+
	106	+ %= include '/include/code_menu';
	107	+ %= stylesheet begin
	108	+ /* Code menu */
	109	+ .code_menu_branches {
	110	+ border:1px solid gray;
	111	+ border-bottom:none;
	112	+ background-color:white;
	113	+ font-weight:bold;
	114	+ }
	115	+ .code_menu_branches a {
	116	+ color:#333
	117	+ }
	118	+
	119	+ % end
	120	+
	121	+ <h2>Branches</h2>
	122	+
	123	+ <div class="branches_number">Showing 2 branches not merged into master</div>
	124	+ <table class="branches">
	125	+ <tr class="default">
	126	+ <td class="left">
	127	+ <div class="name"><%= $default_branch_name %></div>
	128	+ <div class="last_updated">Last updated <%= $default_branch->{age} %> by author</div>
	129	+ </td>
	130	+ <td>
	131	+
	132	+ </td>
	133	+ <td class="right">
	134	+ Base branch
	135	+ </td>
	136	+ </tr>
	137	+ </table>
	138	+ <table class="branches">
	139	+ % for (my $i = 0; $i < @$branches; $i++) {
	140	+ % my $branch = $branches->[$i];
	141	+ % my $name = $branch->{name};
	142	+ <tr>
	143	+ <td class="left">
	144	+ <div class="name">
	145	+ <a href="<%= url_for("/$user/$repository/tree/$name") %>">
	146	+ <%= $name %>
	147	+ </a>
	148	+ </div>
	149	+ <div class="last_updated">Last updated <%= $branch->{age} %> by author</div>
	150	+ </td>
	151	+ <td>
	152	+
	153	+ </td>
	154	+ <td class="right">
	155	+ <a href="<%= url_for("/$user/$repository/compare/$default_branch...$name") %>">Compare</a>
	156	+ </td>
	157	+ </tr>
	158	+ % }
	159	+ </table>
29	160	</div>
30		- %= include '/include/heads', project_ns => $project_ns, heads => $heads;
	161	+
	162	+ %= include '/include/footer';