improved design ・ dd93a08 ・ Gitprep

- improved design;
- Browse files
- Yuki Kimoto commited on 2012-11-27
- 1 parent a6ad307
  
  commit dd93a0838b1a99b091434a85d8f0c53e8ddf4159

Showing 3 changed files with 104 additions and 24 deletions

+60 -8

templates/css/common.html.ep

@@ -1,30 +1,82 @@
 %= stylesheet begin
+  /* reset */
+  * {
+    margin:0;
+    padding:0;
+  }
+  
   /* Header */
   .header {
-    background-color:#ccffff;
+    background-color:#F8F8FF;
     margin-bottom:10px;
     border-bottom:1px solid blue;
     height:40px;
   }
-  .header li{
+  .header_panel {
+    width:900px;
+    height:40px;
+    margin:auto;
+  }
+  .header_left {
     float:left;
-    padding: 10px 20px;
+    width:400px;
+  }
+  .header_right {
+    
+  }
+  .header_home {
+    padding:10px;
+  }
+  .header_user {
+    float:right;
+    padding:10px;
   }
+  .header_new_rep {
+    float:right;
+    padding:10px;
+  }
+  .header_account_set {
+    float:right;
+    padding:10px;
+  }
+  .header_signout {
+    float:right;
+    padding:10px;
+ }
   
   /* Main panel */
   .main_panel {
     width:900px;
-    margin: 5px auto;
+    margin:5px auto;
+  }
+  
+  /* Main menu */
+  .main_menu {
+    border:1px solid gray;
+    border-left:none;
+    list-style-type: none;
+    height:40px;
+    padding-left:0px;
+    background-color:#F5F5F5;
+  }
+  .main_menu li {
+    text-align:center;
+    padding:10px 0px;
+    float:left;
+    width:124px;
+    display:block;
+    border-left:1px solid gray;
+    height:20px;
   }
   
   /* Source tree */
   .tree {
     width:100%;
-    margin: 5px auto;
+    margin:5px auto;
     border:2px solid gray;
   }
   .tree_header {
-    background-color: #ccffff;
+    background-color: #F8F8FF;
     border-bottom: 1px solid gray;
     padding: 10px;
   }
@@ -41,7 +93,7 @@
   .tree_body {
     font-size:80%;
     width: 100%;
-    background-color: #ccffff;
+    background-color: #F8F8FF;
     padding:0;
     border-top: 1px solid blue;
     border-left: 1px solid blue;
@@ -54,7 +106,7 @@
   
   /* Footer */
   .footer {
-    background-color:#ccffff;
+    background-color:#F8F8FF;
     margin-top:10px;
     padding:10px;
     border-top:1px solid blue;

+13 -7

templates/include/new_header.html.ep

View

@@ -2,12 +2,18 @@
 
 % end
 <div class="header">
-  <ul>
-    <li><a href="<%= url_for('/') %>">Home</a></li>
-    <li><a href="<%= url_for("/$user") %>"><%= $user %></a></li>
-    <li><a href="<%= url_for("/new") %>">Create a new repo</a></li>
-    <li><a href="<%= url_for("/setting/profile") %>">Account setting</a></li>
-    <li><a href="<%= url_for("/logout") %>">Sign out</a></li>
-  </ul>
+  <div class="header_panel">
+    <div class="header_left">
+      <div class="header_home"><a href="<%= url_for('/') %>">Home</a></div>
+    </div>
+    <div class="header_right">
+      <div class="header_signout"><a href="<%= url_for("/logout") %>">Sign out</a></div>
+      <div class="header_account_set">
+        <a href="<%= url_for("/setting/profile") %>">Account setting</a>
+      </div>
+      <div class="header_new_rep"><a href="<%= url_for("/new") %>">Create a new repo</a></div>
+      <div class="header_user"><a href="<%= url_for("/$user") %>"><%= $user %></a></div>
+    </div>
+  </div>
 </div>
 <div style="clear:both"/>

+31 -9

templates/main/repository.html.ep

View

@@ -4,34 +4,54 @@
   %= include '/include/new_header';
   
   %= stylesheet begin
-
+    
+    /* User and repository name */
+    .user_rep {
+      font-size:140%;
+      font-weight:bold;
+      margin-top:15px;
+      margin-bottom:15px;
+    }
+    
+    /* Repository description */
+    .description {
+      padding:10px;
+      border:1px solid gray;
+      margin-top:-1px;
+    }
+    
     /* Git URL */
     .git_url {
       border: 1px solid gray;
       padding: 10px;
+      margin-top:-1px;
     }
     .git_url_zip {
       padding:5px;
       float:left;
       border:1px solid gray;
       margin-right:5px;
+      background-color:#F5F5F5;
     }
     .git_url_http {
       padding:5px;
       float:left;
       border:1px solid gray;
+      background-color:#F5F5F5;
     }
     .git_url_ssh {
       padding:5px;
       float:left;
       border:1px solid gray;
       border-left:none;
+      background-color:#F5F5F5;
     }
     .git_url_git {
       padding:5px;
       float:left;
       border:1px solid gray;
       border-left:none;
+      background-color:#F5F5F5;
     }
     .git_url_text {
       padding:5px;
@@ -48,7 +68,9 @@
     /* Code menu */
     .code_menu {
       border-bottom:1px solid black;
-      margin-bottom:20px;
+      padding-top:7px;
+      padding-bottom:7px;
+      margin-bottom:15px;
       height:30px;
     }
     .code_menu_left {
@@ -114,21 +136,23 @@
   % end
 
   <div class="main_panel">
-    <div>
+    <div class="user_rep">
       <a href="<%= url_for("/$user") %>"><%= $user %></a>
       /
       <a href="<%= url_for %>"><%= $repository %>
     </div>
     
-    <ul id="menu-item">
+    <ul class="main_menu">
       <li>Code</li>
-      <li>Issues</li>
+      <li>Network</li>
+      <li>Pull Requests 0</li>
+      <li>Issues 1</li>
       <li>Wiki</li>
+      <li>Graphs</li>
       <li>Admin</li>
     </ul>
-    <div style="clear:both"></div>
 
-    <div>Project description</div>
+    <div class="description">Project description</div>
     
     <div class="git_url">
       <div class="git_url_zip">ZIP</div>
@@ -151,7 +175,6 @@
         <div class="code_menu_tags">Tags</div>
       </div>
     </div>
-    <div style="clear:both"></div>
     
     <div class="commit_number">
       <div class="commit_number_left">
@@ -159,7 +182,6 @@
       </div>
       <div class="commit_number_right">Commit number</div>
     </div>
-    <div style="clear"></div>
     
     <div class="tree">
       <div class="tree_header">

...	...	@@ -1,30 +1,82 @@
1	1	%= stylesheet begin
	2	+ /* reset */
	3	+ * {
	4	+ margin:0;
	5	+ padding:0;
	6	+ }
	7	+
2	8	/* Header */
3	9	.header {
4		- background-color:#ccffff;
	10	+ background-color:#F8F8FF;
5	11	margin-bottom:10px;
6	12	border-bottom:1px solid blue;
7	13	height:40px;
8	14	}
9		- .header li{
	15	+ .header_panel {
	16	+ width:900px;
	17	+ height:40px;
	18	+ margin:auto;
	19	+ }
	20	+ .header_left {
10	21	float:left;
11		- padding: 10px 20px;
	22	+ width:400px;
	23	+ }
	24	+ .header_right {
	25	+
	26	+ }
	27	+ .header_home {
	28	+ padding:10px;
	29	+ }
	30	+ .header_user {
	31	+ float:right;
	32	+ padding:10px;
12	33	}
	34	+ .header_new_rep {
	35	+ float:right;
	36	+ padding:10px;
	37	+ }
	38	+ .header_account_set {
	39	+ float:right;
	40	+ padding:10px;
	41	+ }
	42	+ .header_signout {
	43	+ float:right;
	44	+ padding:10px;
	45	+ }
13	46
14	47	/* Main panel */
15	48	.main_panel {
16	49	width:900px;
17		- margin: 5px auto;
	50	+ margin:5px auto;
	51	+ }
	52	+
	53	+ /* Main menu */
	54	+ .main_menu {
	55	+ border:1px solid gray;
	56	+ border-left:none;
	57	+ list-style-type: none;
	58	+ height:40px;
	59	+ padding-left:0px;
	60	+ background-color:#F5F5F5;
	61	+ }
	62	+ .main_menu li {
	63	+ text-align:center;
	64	+ padding:10px 0px;
	65	+ float:left;
	66	+ width:124px;
	67	+ display:block;
	68	+ border-left:1px solid gray;
	69	+ height:20px;
18	70	}
19	71
20	72	/* Source tree */
21	73	.tree {
22	74	width:100%;
23		- margin: 5px auto;
	75	+ margin:5px auto;
24	76	border:2px solid gray;
25	77	}
26	78	.tree_header {
27		- background-color: #ccffff;
	79	+ background-color: #F8F8FF;
28	80	border-bottom: 1px solid gray;
29	81	padding: 10px;
30	82	}
...	...	@@ -41,7 +93,7 @@
41	93	.tree_body {
42	94	font-size:80%;
43	95	width: 100%;
44		- background-color: #ccffff;
	96	+ background-color: #F8F8FF;
45	97	padding:0;
46	98	border-top: 1px solid blue;
47	99	border-left: 1px solid blue;
...	...	@@ -54,7 +106,7 @@
54	106
55	107	/* Footer */
56	108	.footer {
57		- background-color:#ccffff;
	109	+ background-color:#F8F8FF;
58	110	margin-top:10px;
59	111	padding:10px;
60	112	border-top:1px solid blue;

...	...	@@ -2,12 +2,18 @@
2	2
3	3	% end
4	4	<div class="header">
5		- <ul>
6		- <li><a href="<%= url_for('/') %>">Home</a></li>
7		- <li><a href="<%= url_for("/$user") %>"><%= $user %></a></li>
8		- <li><a href="<%= url_for("/new") %>">Create a new repo</a></li>
9		- <li><a href="<%= url_for("/setting/profile") %>">Account setting</a></li>
10		- <li><a href="<%= url_for("/logout") %>">Sign out</a></li>
11		- </ul>
	5	+ <div class="header_panel">
	6	+ <div class="header_left">
	7	+ <div class="header_home"><a href="<%= url_for('/') %>">Home</a></div>
	8	+ </div>
	9	+ <div class="header_right">
	10	+ <div class="header_signout"><a href="<%= url_for("/logout") %>">Sign out</a></div>
	11	+ <div class="header_account_set">
	12	+ <a href="<%= url_for("/setting/profile") %>">Account setting</a>
	13	+ </div>
	14	+ <div class="header_new_rep"><a href="<%= url_for("/new") %>">Create a new repo</a></div>
	15	+ <div class="header_user"><a href="<%= url_for("/$user") %>"><%= $user %></a></div>
	16	+ </div>
	17	+ </div>
12	18	</div>
13	19	<div style="clear:both"/>

...	...	@@ -4,34 +4,54 @@
4	4	%= include '/include/new_header';
5	5
6	6	%= stylesheet begin
7		-
	7	+
	8	+ /* User and repository name */
	9	+ .user_rep {
	10	+ font-size:140%;
	11	+ font-weight:bold;
	12	+ margin-top:15px;
	13	+ margin-bottom:15px;
	14	+ }
	15	+
	16	+ /* Repository description */
	17	+ .description {
	18	+ padding:10px;
	19	+ border:1px solid gray;
	20	+ margin-top:-1px;
	21	+ }
	22	+
8	23	/* Git URL */
9	24	.git_url {
10	25	border: 1px solid gray;
11	26	padding: 10px;
	27	+ margin-top:-1px;
12	28	}
13	29	.git_url_zip {
14	30	padding:5px;
15	31	float:left;
16	32	border:1px solid gray;
17	33	margin-right:5px;
	34	+ background-color:#F5F5F5;
18	35	}
19	36	.git_url_http {
20	37	padding:5px;
21	38	float:left;
22	39	border:1px solid gray;
	40	+ background-color:#F5F5F5;
23	41	}
24	42	.git_url_ssh {
25	43	padding:5px;
26	44	float:left;
27	45	border:1px solid gray;
28	46	border-left:none;
	47	+ background-color:#F5F5F5;
29	48	}
30	49	.git_url_git {
31	50	padding:5px;
32	51	float:left;
33	52	border:1px solid gray;
34	53	border-left:none;
	54	+ background-color:#F5F5F5;
35	55	}
36	56	.git_url_text {
37	57	padding:5px;
...	...	@@ -48,7 +68,9 @@
48	68	/* Code menu */
49	69	.code_menu {
50	70	border-bottom:1px solid black;
51		- margin-bottom:20px;
	71	+ padding-top:7px;
	72	+ padding-bottom:7px;
	73	+ margin-bottom:15px;
52	74	height:30px;
53	75	}
54	76	.code_menu_left {
...	...	@@ -114,21 +136,23 @@
114	136	% end
115	137
116	138	<div class="main_panel">
117		- <div>
	139	+ <div class="user_rep">
118	140	<a href="<%= url_for("/$user") %>"><%= $user %></a>
119	141	/
120	142	<a href="<%= url_for %>"><%= $repository %>
121	143	</div>
122	144
123		- <ul id="menu-item">
	145	+ <ul class="main_menu">
124	146	<li>Code</li>
125		- <li>Issues</li>
	147	+ <li>Network</li>
	148	+ <li>Pull Requests 0</li>
	149	+ <li>Issues 1</li>
126	150	<li>Wiki</li>
	151	+ <li>Graphs</li>
127	152	<li>Admin</li>
128	153	</ul>
129		- <div style="clear:both"></div>
130	154
131		- <div>Project description</div>
	155	+ <div class="description">Project description</div>
132	156
133	157	<div class="git_url">
134	158	<div class="git_url_zip">ZIP</div>
...	...	@@ -151,7 +175,6 @@
151	175	<div class="code_menu_tags">Tags</div>
152	176	</div>
153	177	</div>
154		- <div style="clear:both"></div>
155	178
156	179	<div class="commit_number">
157	180	<div class="commit_number_left">
...	...	@@ -159,7 +182,6 @@
159	182	</div>
160	183	<div class="commit_number_right">Commit number</div>
161	184	</div>
162		- <div style="clear"></div>
163	185
164	186	<div class="tree">
165	187	<div class="tree_header">