improved code menu design ・ 3c6a8f4 ・ Gitprep

- improved code menu design;
- Browse files
- Yuki Kimoto commited on 2013-03-11
- 1 parent 3f4fde5
  
  commit 3c6a8f4c991ccd4d051ba9503d44839e8f87958b

Showing 4 changed files with 35 additions and 181 deletions

+1 -62

templates/css/common.html.ep

@@ -1,66 +1,5 @@
 %= stylesheet begin
-  
-  /* Reset */
-  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 */
-  a {
-    text-decoration:none;
-  }
-  a.ubar:hover {
-    text-decoration:underline;
-  }
-  
-  /* Main panel */
-  .main_panel {
-    width:900px;
-    margin:5px auto;
-    min-height:300px;
-  }
-  
+
   /* Diff */
   table.diff_tree {
           font-family: monospace;

+26 -97

templates/include/code_menu.html.ep

View

@@ -4,103 +4,32 @@
   my $display = stash('display') || '';
 %>
 
-%= stylesheet begin
-  /* Code menu */
-  .code_menu {
-    margin-top:7px;
-    margin-bottom:15px;
-    height:30px;
-    overflow:hidden;
-  }
-  .code_menu .cleft {
-    width:700px;
-    float:left;
-    overflow:hidden;
-  }
-  .code_menu .ccurrent_rev {
-    float:left;
-    padding:5px 10px 10px 10px;
-  }
-  .code_menu .ccurrent_rev_button {
-    border:1px solid #E5E5E5;
-  }
-  .code_menu .cleft li {
-    float:left;
-    padding:5px 10px;
-  }
-  .code_menu .cright {
-    text-align:right;
-    overflow:hidden;
-    height:27px;
-  }
-  .code_menu .cright li {
-    float:right;
-    padding:5px 10px;
-    height:27px;
-  }
-  .code_menu .cunder {
-    border-top:1px solid #E5E5E5;
-    margin-top:-1px;
-  }
-  .code_menu a {
-    color:#666;
-  }
-  .code_menu .ccount {
-    display:inline-block;
-    font-weight:normal;
-    border:1px solid #CCC;
-    background-color:#EEE;
-    padding:2px;
-    padding-left:5px;
-    padding-right:5px;
-    border-radius:9px;
-    font-size:75%;
-  }
-  
-  % if ($display) {
-    /* Code menu */
-    .code_menu .c<%= $display %> {
-      border:1px solid #E5E5E5;
-      border-bottom:none;
-      background-color:white;
-      font-weight:bold;
-    }
-    .code_menu .c<%= $display %> a {
-      color:#333
-    }
+<ul class="nav nav-tabs">
+  % if (defined(my $rev = stash('rev'))) {
+    <li style="margin-right:10px">
+      <button class="btn">
+        <i class="icon-share-alt"></i><span class="muted">branch</span> <b><%= $rev %></b>
+      </button>
+    </li>
   % }
-
-% end
-
-<div class="code_menu">
-  <ul class="cleft">
-    
-    % if (defined(my $rev = stash('rev'))) {
-      <li class="ccurrent_rev">
-        <div class="ccurrent_rev_button">
-          branch <b><%= $rev %></b>
-        </div>
-      </li>
+  <li class="<%= $display eq 'files' ? 'active' : '' %>">
+    <a href="<%= url_for("/$user/$project") %>">Files</a>
+  </li>
+  <li class="<%= $display eq 'commits' ? 'active' : '' %>">
+    <a href="<%= url_for("/$user/$project/commits/master") %>">Commits</a>
+  </li>
+  <li class="<%= $display eq 'branches' ? 'active' : '' %>">
+    <a href="<%= url_for("/$user/$project/branches") %>">Branches</a>
+    % if ($display eq 'branches') {
+      <span><%= $branches_count %></span>
     % }
-    <li class="cfiles"><a href="<%= url_for("/$user/$project") %>">Files</a></li>
-    <li class="ccommits"><a href="<%= url_for("/$user/$project/commits/master") %>">Commits</a>
-      </li>
-    <li class="cbranches">
-      <a href="<%= url_for("/$user/$project/branches") %>">Branches</a>
-      % if ($display eq 'branches') {
-        <span class="ccount"><%= $branches_count %></span>
+  </li>
+  <li class="<%= $display eq 'tags' ? 'active' : '' %>">
+    <a href="<%= url_for("/$user/$project/tags") %>">
+      Tags
+      % if ($display eq 'tags') {
+        <span><%= $tags_count %></span>
       % }
-    </li>
-  </ul>
-  <ul class="cright">
-    <li class="ctags">
-      <a href="<%= url_for("/$user/$project/tags") %>">
-        Tags
-        % if ($display eq 'tags') {
-          <span class="ccount"><%= $tags_count %></span>
-        % }
-      </a>
-    </li>
-  </ul>
-  <div class="cunder"></div>
-</div>
+    </a>
+  </li>
+</ul>

+6 -20

templates/main/blob.html.ep

View

@@ -136,30 +136,16 @@
 
   %= include '/include/header';
 
-  <div class="main_panel">
-    %= include '/include/sub_header';
-
-    %= include '/include/code_menu';
-    %= stylesheet begin
-      /* Code menu */
-      .code_menu_files {
-        border:1px solid #E5E5E5;
-        border-bottom:none;
-        background-color:white;
-        font-weight:bold;
-      }
-      .code_menu_files a {
-        color:#333
-      }
-    % end
-
+  <div class="container">
+    %= include '/include/project_header';
+    %= include '/include/code_menu', display => 'files';
     %= include '/include/page_path', type => 'blob', Path => $blob;
         
     <div class="blob_header">
       <div class="htop">
-        <b><%= $commit_log->{author} %></b>
-        <span class="hauthor_date"><%= $commit_log->{author_date} %></span>
-        <a class="hcomment" href="<%= url_for("/$user/$project/commit/$rev") %>">
+        <%= $commit_log->{author} %>
+        <span class="muted"><%= $commit_log->{author_date} %></span>
+        <a href="<%= url_for("/$user/$project/commit/$rev") %>">
           <%= $commit->{title} %>
         </a>
       </div>

+2 -2

templates/main/project.html.ep

View

@@ -73,9 +73,9 @@
     <h4 style="margin-top:0px">
       <%= $desc %>
     </h4>
-    
+
     <div class="breadcrumb" style="background-color:white;border:1px solid #ccc;padding:0 5px;">
-      <a class="btn" href="<%= url_for("/$user/$project/archive/master.zip") %>">ZIP</a>
+      <a class="btn" href="<%= url_for("/$user/$project/archive/master.zip") %>"><i class="icon-arrow-down"></i>ZIP</a>
       <a class="btn corner-right-none" href="#" >HTTP</a><a class="btn corner-left-none corner-right-none" href="#">SSH</a><input type="text" style="border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0;margin-top:10px;">
       <span>Read-only access</span>
     </div>

...	...	@@ -136,30 +136,16 @@
136	136
137	137	%= include '/include/header';
138	138
139		- <div class="main_panel">
140		- %= include '/include/sub_header';
141		-
142		- %= include '/include/code_menu';
143		- %= stylesheet begin
144		- /* Code menu */
145		- .code_menu_files {
146		- border:1px solid #E5E5E5;
147		- border-bottom:none;
148		- background-color:white;
149		- font-weight:bold;
150		- }
151		- .code_menu_files a {
152		- color:#333
153		- }
154		- % end
155		-
	139	+ <div class="container">
	140	+ %= include '/include/project_header';
	141	+ %= include '/include/code_menu', display => 'files';
156	142	%= include '/include/page_path', type => 'blob', Path => $blob;
157	143
158	144	<div class="blob_header">
159	145	<div class="htop">
160		- <b><%= $commit_log->{author} %></b>
161		- <span class="hauthor_date"><%= $commit_log->{author_date} %></span>
162		- <a class="hcomment" href="<%= url_for("/$user/$project/commit/$rev") %>">
	146	+ <%= $commit_log->{author} %>
	147	+ <span class="muted"><%= $commit_log->{author_date} %></span>
	148	+ <a href="<%= url_for("/$user/$project/commit/$rev") %>">
163	149	<%= $commit->{title} %>
164	150	</a>
165	151	</div>

...	...	@@ -1,66 +1,5 @@
1	1	%= stylesheet begin
2		-
3		- /* Reset */
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;
47		- }
48		-
49		- /* Link */
50		- a {
51		- text-decoration:none;
52		- }
53		- a.ubar:hover {
54		- text-decoration:underline;
55		- }
56		-
57		- /* Main panel */
58		- .main_panel {
59		- width:900px;
60		- margin:5px auto;
61		- min-height:300px;
62		- }
63		-
	2	+
64	3	/* Diff */
65	4	table.diff_tree {
66	5	font-family: monospace;

...	...	@@ -4,103 +4,32 @@
4	4	my $display = stash('display') \|\| '';
5	5	%>
6	6
7		-%= stylesheet begin
8		- /* Code menu */
9		- .code_menu {
10		- margin-top:7px;
11		- margin-bottom:15px;
12		- height:30px;
13		- overflow:hidden;
14		- }
15		- .code_menu .cleft {
16		- width:700px;
17		- float:left;
18		- overflow:hidden;
19		- }
20		- .code_menu .ccurrent_rev {
21		- float:left;
22		- padding:5px 10px 10px 10px;
23		- }
24		- .code_menu .ccurrent_rev_button {
25		- border:1px solid #E5E5E5;
26		- }
27		- .code_menu .cleft li {
28		- float:left;
29		- padding:5px 10px;
30		- }
31		- .code_menu .cright {
32		- text-align:right;
33		- overflow:hidden;
34		- height:27px;
35		- }
36		- .code_menu .cright li {
37		- float:right;
38		- padding:5px 10px;
39		- height:27px;
40		- }
41		- .code_menu .cunder {
42		- border-top:1px solid #E5E5E5;
43		- margin-top:-1px;
44		- }
45		- .code_menu a {
46		- color:#666;
47		- }
48		- .code_menu .ccount {
49		- display:inline-block;
50		- font-weight:normal;
51		- border:1px solid #CCC;
52		- background-color:#EEE;
53		- padding:2px;
54		- padding-left:5px;
55		- padding-right:5px;
56		- border-radius:9px;
57		- font-size:75%;
58		- }
59		-
60		- % if ($display) {
61		- /* Code menu */
62		- .code_menu .c<%= $display %> {
63		- border:1px solid #E5E5E5;
64		- border-bottom:none;
65		- background-color:white;
66		- font-weight:bold;
67		- }
68		- .code_menu .c<%= $display %> a {
69		- color:#333
70		- }
	7	+<ul class="nav nav-tabs">
	8	+ % if (defined(my $rev = stash('rev'))) {
	9	+ <li style="margin-right:10px">
	10	+ <button class="btn">
	11	+ <i class="icon-share-alt"></i><span class="muted">branch</span> <b><%= $rev %></b>
	12	+ </button>
	13	+ </li>
71	14	% }
72		-
73		-% end
74		-
75		-<div class="code_menu">
76		- <ul class="cleft">
77		-
78		- % if (defined(my $rev = stash('rev'))) {
79		- <li class="ccurrent_rev">
80		- <div class="ccurrent_rev_button">
81		- branch <b><%= $rev %></b>
82		- </div>
83		- </li>
	15	+ <li class="<%= $display eq 'files' ? 'active' : '' %>">
	16	+ <a href="<%= url_for("/$user/$project") %>">Files</a>
	17	+ </li>
	18	+ <li class="<%= $display eq 'commits' ? 'active' : '' %>">
	19	+ <a href="<%= url_for("/$user/$project/commits/master") %>">Commits</a>
	20	+ </li>
	21	+ <li class="<%= $display eq 'branches' ? 'active' : '' %>">
	22	+ <a href="<%= url_for("/$user/$project/branches") %>">Branches</a>
	23	+ % if ($display eq 'branches') {
	24	+ <span><%= $branches_count %></span>
84	25	% }
85		- <li class="cfiles"><a href="<%= url_for("/$user/$project") %>">Files</a></li>
86		- <li class="ccommits"><a href="<%= url_for("/$user/$project/commits/master") %>">Commits</a>
87		- </li>
88		- <li class="cbranches">
89		- <a href="<%= url_for("/$user/$project/branches") %>">Branches</a>
90		- % if ($display eq 'branches') {
91		- <span class="ccount"><%= $branches_count %></span>
	26	+ </li>
	27	+ <li class="<%= $display eq 'tags' ? 'active' : '' %>">
	28	+ <a href="<%= url_for("/$user/$project/tags") %>">
	29	+ Tags
	30	+ % if ($display eq 'tags') {
	31	+ <span><%= $tags_count %></span>
92	32	% }
93		- </li>
94		- </ul>
95		- <ul class="cright">
96		- <li class="ctags">
97		- <a href="<%= url_for("/$user/$project/tags") %>">
98		- Tags
99		- % if ($display eq 'tags') {
100		- <span class="ccount"><%= $tags_count %></span>
101		- % }
102		- </a>
103		- </li>
104		- </ul>
105		- <div class="cunder"></div>
106		-</div>
	33	+ </a>
	34	+ </li>
	35	+</ul>

...	...	@@ -73,9 +73,9 @@
73	73	<h4 style="margin-top:0px">
74	74	<%= $desc %>
75	75	</h4>
76		-
	76	+
77	77	<div class="breadcrumb" style="background-color:white;border:1px solid #ccc;padding:0 5px;">
78		- <a class="btn" href="<%= url_for("/$user/$project/archive/master.zip") %>">ZIP</a>
	78	+ <a class="btn" href="<%= url_for("/$user/$project/archive/master.zip") %>"><i class="icon-arrow-down"></i>ZIP</a>
79	79	<a class="btn corner-right-none" href="#" >HTTP</a><a class="btn corner-left-none corner-right-none" href="#">SSH</a><input type="text" style="border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0;margin-top:10px;">
80	80	<span>Read-only access</span>
81	81	</div>