css refactor

Dmitriy Zaporozhets
1 parent ef088725
Showing 7 changed files with 141 additions and 221 deletions Show diff stats
app/assets/stylesheets/application.css
app/assets/stylesheets/commits.css.scss
app/assets/stylesheets/issues.css.scss
app/assets/stylesheets/projects.css.scss
app/views/notes/_form.html.haml
app/views/snippets/_form.html.haml
app/views/snippets/index.html.haml
@@ -8,3 +8,34 @@
  *= require_self
  *= require_tree .
 */
+
+/** COLORS **/
+.cgray { color:gray; }
+.cred { color:#D12F19; }
+.cgreen { color:#44aa22; }
+
+/** COMMON STYLES **/
+.left { 
+  float:left;
+}
+.right { 
+  float:right;
+}
+.width-50p{
+  width:50%;
+}
+.width-49p{
+  width:49%;
+}
+.width-30p{
+  width:30%;
+}
+.width-65p{
+  width:65%;
+}
+.append-bottom-10 { 
+  margin-bottom:10px;
+}
+.prepend-top-10 {
+  margin-top:10px;
+}
@@ -37,4 +37,6 @@
   }
 }
-
+pre.commit_message {
+  white-space: pre-wrap;
+}
@@ -10,14 +10,13 @@
   color: #444;
 }
-#issues-table-holder .issue:hover .action-links { display:block; }
-
 .issues_filter {
   margin-top:10px;
   .left { 
     margin-right:15px;
   }
 }
+
 .top_panel_issues{
   #issue_search_form {
     margin:5px 0;
@@ -36,3 +35,14 @@
     }
   }
 }
+
+/** ISSUES LIST **/
+.issue .action-links {
+  display:none; 
+  a { 
+    margin-left:10px;
+  }
+}
+.issue:hover .action-links { display:block; }
+
+
-// Place all the styles related to the Projects controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
-
+/** MIXINS **/
 @mixin round-borders-bottom($radius) {
   border-top: 1px solid #eaeaea;
   -moz-border-radius-bottomright: $radius;
@@ -29,18 +26,6 @@
   border-radius: $radius;
 }
-@mixin hover-color {
-  background-color:#FFFFCF;
-}
-
-@mixin panel-color {
-  background: #111 !important;
-  background: -webkit-gradient(linear,left top,left bottom,from(#333),to(#111)) !important;
-  background: -moz-linear-gradient(top,#333,#111) !important;
-  background: transparent 9 !important;
-}
-
-
 /** File stat **/
 .file_stats {
   margin-bottom:10px;
@@ -66,24 +51,16 @@
   @include round-borders-all(4px);
   padding: 4px 0px;
 }
+
 table.round-borders {
   float:left;
 }
-
-#content-container{
-  min-height:250px;
-  background: #fff;
-  @include round-borders-bottom(8px);
-  borders:2px solid #eaeaea;
-  border-top: none;
-  padding:20px;
-}
-
 a {
   color: #111;
 }
+/** FILE CONTENT VIEW **/
 .view_file_content{
   .old_line, .new_line {
     background:#ECECEC;
@@ -122,10 +99,34 @@ a {
   }
 }
-.back_small.button{
+td.code { 
+  width: 100%;
+  .highlight { 
+    margin-left: 55px;
+    overflow:auto;
+    overflow-y:hidden;
+  }
+}
+.highlight pre { 
+  white-space: pre;
+  word-wrap:normal;
+}
+.highlighttable tr:hover {
+  background:white;
+}
+table.highlighttable pre{ 
+  line-height:16px !important;
+  font-size:12px !important;
 }
+
+table.highlighttable .linenodiv pre {
+  text-align: right;
+  padding-right: 4px;
+}
+
+/** PROJECTS **/
 input.ssh_project_url {
   padding:5px;
   margin:0px;
@@ -149,38 +150,7 @@ input.ssh_project_url {
   clear: both;
 }
-.top_project_menu {
-  a {
-    border-right: 1px solid #FFFFFF;
-    box-shadow: -1px 0 #DDDDDD inset;
-    color: #666;
-    display: block;
-    font-size: 16px;
-    text-decoration: none;
-    line-height: 20px;
-    padding: 11px 26px 12px 24px;
-    text-shadow: 0 1px 0 #FFFFFF;
-    float:left;
-
-    &.current {
-      background-color: #FFFFFF;
-      color: #222222;
-    }
-  }
-}
-
-.top_bar {
-  margin-top:50px;
-  background-color: #F4F4F4;
-  @include round-borders-top(8px);
-  box-shadow: 0 1px #FFFFFF inset, 0 -1px #DDDDDD inset;
-  height: 43px;
-  overflow: hidden;
-  width:990px;
-}
-
 /** FORM INPUTS **/
-
 .user_new,
 .new_key,
 .new_issue,
@@ -202,7 +172,6 @@ input.ssh_project_url {
 }
 .input_button {
-  //@include round-borders-all(4px);
   padding:8px;
   font-size:14px;
   cursor:pointer;
@@ -214,7 +183,6 @@ input.ssh_project_url {
 }
 /** FLASH **/
-
 #flash_container {
   height:40px;
   position:fixed;
@@ -236,7 +204,6 @@ input.ssh_project_url {
 }
 /** Buttons **/
-
 .lbutton,
 .lite_button {
   display:block;
@@ -273,126 +240,10 @@ input.ssh_project_url {
   width: 60px;
 }
-.project_thumb {
-  margin:20px 0;
-  width: 250px;
-  float:left;
-  padding:20px;
-  text-align:center;
-  p, h4 {
-    text-align:left;
-  }
-  .lbutton {
-    float:left;
-  }
-}
-
 .handle:hover{
   cursor: move;
 }
-.handle{
-  width: 12px;
-  height: 12px;
-  padding: 10px;
-}
-
-
-.tag {
-  @include round-borders-all(4px);
-  padding:2px 4px;
-  border:none;
-  text-shadow:none;
-
-  &.high {
-    background: #D12F19;
-    color:white;
-  }
-
-  &.today {
-    background: #44aa22;
-    color:white;
-  }
-
-  &.yours {
-    background: #4466cc;
-    color:white;
-  }
-  &.normal {
-    background: #2c5ca6;
-    color:white;
-  }
-  &.notes {
-    background: #2c5c66;
-    color:white;
-  }
-}
-
-
-.left { 
-  float:left;
-}
-.right { 
-  float:right;
-}
-
-.width-50p{
-  width:50%;
-}
-.width-49p{
-  width:49%;
-}
-.width-30p{
-  width:30%;
-}
-.width-65p{
-  width:65%;
-}
-pre.commit_message {
-  white-space: pre-wrap;
-}
-
-#container { 
-/*  min-height:100%;*/
-}
-.ui-selectmenu{
-  @include round-borders-all(4px);
-  margin-right:10px;
-  font-size:1.5em;
-  height:auto;
-  font-weight:bold;
-  .ui-selectmenu-status { 
-    padding:3px 10px;
-  }
-}
-
-td.code { 
-  width: 100%;
-  .highlight { 
-    margin-left: 55px;
-    overflow:auto;
-    overflow-y:hidden;
-  }
-}
-.highlight pre { 
-  white-space: pre;
-  word-wrap:normal;
-}
-
-.highlighttable tr:hover {
-  background:white;
-}
-table.highlighttable pre{ 
-  line-height:16px !important;
-  font-size:12px !important;
-}
-
-
-table.highlighttable .linenodiv pre {
-  text-align: right;
-  padding-right: 4px;
-}
-
 .project-refs-form { 
   span {
     background: none !important;
@@ -408,11 +259,6 @@ table.highlighttable .linenodiv pre {
 .filter .left { margin-right:15px; }
-
-.cgray { color:gray; }
-.cred { color:#D12F19; }
-.cgreen { color:#44aa22; }
-
 body.project-page table .commit { 
   a.tree-commit-link { 
     color:gray;
@@ -422,50 +268,80 @@ body.project-page table .commit {
   }
 }
-
-.snippet .action-links,
-#issues-table-holder .issue .action-links {
-  display:none; 
-  a { 
-    margin-left:10px;
-  }
-}
- 
-.snippet:hover .action-links { display:block; }
-
-
-
 /** NEW PROJECT **/
 .new-project-hodler { 
-  .icon span { 
-    background-position: -31px -70px;
-  }
-  td {
-    border-bottom: 1px solid #DEE2E3;
-  }
+  .icon span { background-position: -31px -70px; }
+  td { border-bottom: 1px solid #DEE2E3; }
 }
-//.message .note-title p { margin-bottom:0px; }
-
+/** Feed entry **/
 .commit,
 .snippet,
 .message { 
   .title { 
     color:#666;
-    a { 
-      color:#666 !important;
-    }
-    p { 
-      margin-top:0px;
-    }
-  }
-
-  .author { 
-    color: #999
+    a { color:#666 !important; }
+    p { margin-top:0px; }
   }
+  .author { color: #999 }
 }
-/** UI autocomplete **/
+/** JQuery UI **/
 .ui-autocomplete { @include round-borders-all(5px); }
 .ui-menu-item { cursor: pointer }
+.ui-selectmenu{
+  @include round-borders-all(4px);
+  margin-right:10px;
+  font-size:1.5em;
+  height:auto;
+  font-weight:bold;
+  .ui-selectmenu-status { 
+    padding:3px 10px;
+  }
+}
+/** Snippets **/
+.new_snippet textarea, 
+.edit_snippet textarea { 
+  height:300px;
+  padding: 8px;
+  width: 95%;
+}
+.snippet .action-links {
+  display:none; 
+  a { 
+    margin-left:10px;
+  }
+}
+.snippet:hover .action-links { display:block; }
+
+/** ISSUES TAGS **/
+.tag {
+  @include round-borders-all(4px);
+  padding:2px 4px;
+  border:none;
+  text-shadow:none;
+
+  &.high {
+    background: #D12F19;
+    color:white;
+  }
+
+  &.today {
+    background: #44aa22;
+    color:white;
+  }
+
+  &.yours {
+    background: #4466cc;
+    color:white;
+  }
+  &.normal {
+    background: #2c5ca6;
+    color:white;
+  }
+  &.notes {
+    background: #2c5c66;
+    color:white;
+  }
+}
@@ -28,4 +28,4 @@
     .clear
     %br
-    = f.submit 'Add note', :class => "lbutton vm", :id => "submit_note"
+    = f.submit 'Add note', :class => "button", :id => "submit_note"
@@ -19,7 +19,8 @@
         %td{:colspan => 2}
           = f.label :content, "Code"
           %br
-          = f.text_area :content, :style => "height:240px;width:932px;"
+          %br
+          = f.text_area :content
     .actions.prepend-top
-      = f.submit 'Save', :class => "lbutton vm"
+      = f.submit 'Save', :class => "button"
 %div
   - if can? current_user, :write_snippet, @project
-    .left= link_to 'New Snippet', new_project_snippet_path(@project), :class => "lbutton vm"
+    = link_to 'New Snippet', new_project_snippet_path(@project), :class => "button append-bottom-10"
   %table.round-borders#snippets-table
     %thead
	@@ -8,3 +8,34 @@		@@ -8,3 +8,34 @@
8	*= require_self	8	*= require_self
9	*= require_tree .	9	*= require_tree .
10	*/	10	*/
		11	+
		12	+/ COLORS /
		13	+.cgray { color:gray; }
		14	+.cred { color:#D12F19; }
		15	+.cgreen { color:#44aa22; }
		16	+
		17	+/ COMMON STYLES /
		18	+.left {
		19	+ float:left;
		20	+}
		21	+.right {
		22	+ float:right;
		23	+}
		24	+.width-50p{
		25	+ width:50%;
		26	+}
		27	+.width-49p{
		28	+ width:49%;
		29	+}
		30	+.width-30p{
		31	+ width:30%;
		32	+}
		33	+.width-65p{
		34	+ width:65%;
		35	+}
		36	+.append-bottom-10 {
		37	+ margin-bottom:10px;
		38	+}
		39	+.prepend-top-10 {
		40	+ margin-top:10px;
		41	+}
	@@ -37,4 +37,6 @@		@@ -37,4 +37,6 @@
37	}	37	}
38	}	38	}
39		39
40	-	40	+pre.commit_message {
		41	+ white-space: pre-wrap;
		42	+}
1	-// Place all the styles related to the Projects controller here.
2	-// They will automatically be included in application.css.
3	-// You can use Sass (SCSS) here: http://sass-lang.com/
4	-	1	+/ MIXINS /
5	@mixin round-borders-bottom($radius) {	2	@mixin round-borders-bottom($radius) {
6	border-top: 1px solid #eaeaea;	3	border-top: 1px solid #eaeaea;
7	-moz-border-radius-bottomright: $radius;	4	-moz-border-radius-bottomright: $radius;
	@@ -29,18 +26,6 @@		@@ -29,18 +26,6 @@
29	border-radius: $radius;	26	border-radius: $radius;
30	}	27	}
31		28
32	-@mixin hover-color {
33	- background-color:#FFFFCF;
34	-}
35	-
36	-@mixin panel-color {
37	- background: #111 !important;
38	- background: -webkit-gradient(linear,left top,left bottom,from(#333),to(#111)) !important;
39	- background: -moz-linear-gradient(top,#333,#111) !important;
40	- background: transparent 9 !important;
41	-}
42	-
43	-
44	/ File stat /	29	/ File stat /
45	.file_stats {	30	.file_stats {
46	margin-bottom:10px;	31	margin-bottom:10px;
	@@ -66,24 +51,16 @@		@@ -66,24 +51,16 @@
66	@include round-borders-all(4px);	51	@include round-borders-all(4px);
67	padding: 4px 0px;	52	padding: 4px 0px;
68	}	53	}
		54	+
69	table.round-borders {	55	table.round-borders {
70	float:left;	56	float:left;
71	}	57	}
72		58
73	-
74	-#content-container{
75	- min-height:250px;
76	- background: #fff;
77	- @include round-borders-bottom(8px);
78	- borders:2px solid #eaeaea;
79	- border-top: none;
80	- padding:20px;
81	-}
82	-
83	a {	59	a {
84	color: #111;	60	color: #111;
85	}	61	}
86		62
		63	+/ FILE CONTENT VIEW /
87	.view_file_content{	64	.view_file_content{
88	.old_line, .new_line {	65	.old_line, .new_line {
89	background:#ECECEC;	66	background:#ECECEC;
	@@ -122,10 +99,34 @@ a {		@@ -122,10 +99,34 @@ a {
122	}	99	}
123	}	100	}
124		101
125	-.back_small.button{	102	+td.code {
		103	+ width: 100%;
		104	+ .highlight {
		105	+ margin-left: 55px;
		106	+ overflow:auto;
		107	+ overflow-y:hidden;
		108	+ }
		109	+}
		110	+.highlight pre {
		111	+ white-space: pre;
		112	+ word-wrap:normal;
		113	+}
126		114
		115	+.highlighttable tr:hover {
		116	+ background:white;
		117	+}
		118	+table.highlighttable pre{
		119	+ line-height:16px !important;
		120	+ font-size:12px !important;
127	}	121	}
128		122
		123	+
		124	+table.highlighttable .linenodiv pre {
		125	+ text-align: right;
		126	+ padding-right: 4px;
		127	+}
		128	+
		129	+/ PROJECTS /
129	input.ssh_project_url {	130	input.ssh_project_url {
130	padding:5px;	131	padding:5px;
131	margin:0px;	132	margin:0px;
	@@ -149,38 +150,7 @@ input.ssh_project_url {		@@ -149,38 +150,7 @@ input.ssh_project_url {
149	clear: both;	150	clear: both;
150	}	151	}
151		152
152	-.top_project_menu {
153	- a {
154	- border-right: 1px solid #FFFFFF;
155	- box-shadow: -1px 0 #DDDDDD inset;
156	- color: #666;
157	- display: block;
158	- font-size: 16px;
159	- text-decoration: none;
160	- line-height: 20px;
161	- padding: 11px 26px 12px 24px;
162	- text-shadow: 0 1px 0 #FFFFFF;
163	- float:left;
164	-
165	- &.current {
166	- background-color: #FFFFFF;
167	- color: #222222;
168	- }
169	- }
170	-}
171	-
172	-.top_bar {
173	- margin-top:50px;
174	- background-color: #F4F4F4;
175	- @include round-borders-top(8px);
176	- box-shadow: 0 1px #FFFFFF inset, 0 -1px #DDDDDD inset;
177	- height: 43px;
178	- overflow: hidden;
179	- width:990px;
180	-}
181	-
182	/ FORM INPUTS /	153	/ FORM INPUTS /
183	-
184	.user_new,	154	.user_new,
185	.new_key,	155	.new_key,
186	.new_issue,	156	.new_issue,
	@@ -202,7 +172,6 @@ input.ssh_project_url {		@@ -202,7 +172,6 @@ input.ssh_project_url {
202	}	172	}
203		173
204	.input_button {	174	.input_button {
205	- //@include round-borders-all(4px);
206	padding:8px;	175	padding:8px;
207	font-size:14px;	176	font-size:14px;
208	cursor:pointer;	177	cursor:pointer;
	@@ -214,7 +183,6 @@ input.ssh_project_url {		@@ -214,7 +183,6 @@ input.ssh_project_url {
214	}	183	}
215		184
216	/ FLASH /	185	/ FLASH /
217	-
218	#flash_container {	186	#flash_container {
219	height:40px;	187	height:40px;
220	position:fixed;	188	position:fixed;
	@@ -236,7 +204,6 @@ input.ssh_project_url {		@@ -236,7 +204,6 @@ input.ssh_project_url {
236	}	204	}
237		205
238	/ Buttons /	206	/ Buttons /
239	-
240	.lbutton,	207	.lbutton,
241	.lite_button {	208	.lite_button {
242	display:block;	209	display:block;
	@@ -273,126 +240,10 @@ input.ssh_project_url {		@@ -273,126 +240,10 @@ input.ssh_project_url {
273	width: 60px;	240	width: 60px;
274	}	241	}
275		242
276	-.project_thumb {
277	- margin:20px 0;
278	- width: 250px;
279	- float:left;
280	- padding:20px;
281	- text-align:center;
282	- p, h4 {
283	- text-align:left;
284	- }
285	- .lbutton {
286	- float:left;
287	- }
288	-}
289	-
290	.handle:hover{	243	.handle:hover{
291	cursor: move;	244	cursor: move;
292	}	245	}
293		246
294	-.handle{
295	- width: 12px;
296	- height: 12px;
297	- padding: 10px;
298	-}
299	-
300	-
301	-.tag {
302	- @include round-borders-all(4px);
303	- padding:2px 4px;
304	- border:none;
305	- text-shadow:none;
306	-
307	- &.high {
308	- background: #D12F19;
309	- color:white;
310	- }
311	-
312	- &.today {
313	- background: #44aa22;
314	- color:white;
315	- }
316	-
317	- &.yours {
318	- background: #4466cc;
319	- color:white;
320	- }
321	- &.normal {
322	- background: #2c5ca6;
323	- color:white;
324	- }
325	- &.notes {
326	- background: #2c5c66;
327	- color:white;
328	- }
329	-}
330	-
331	-
332	-.left {
333	- float:left;
334	-}
335	-.right {
336	- float:right;
337	-}
338	-
339	-.width-50p{
340	- width:50%;
341	-}
342	-.width-49p{
343	- width:49%;
344	-}
345	-.width-30p{
346	- width:30%;
347	-}
348	-.width-65p{
349	- width:65%;
350	-}
351	-pre.commit_message {
352	- white-space: pre-wrap;
353	-}
354	-
355	-#container {
356	-/* min-height:100%;*/
357	-}
358	-.ui-selectmenu{
359	- @include round-borders-all(4px);
360	- margin-right:10px;
361	- font-size:1.5em;
362	- height:auto;
363	- font-weight:bold;
364	- .ui-selectmenu-status {
365	- padding:3px 10px;
366	- }
367	-}
368	-
369	-td.code {
370	- width: 100%;
371	- .highlight {
372	- margin-left: 55px;
373	- overflow:auto;
374	- overflow-y:hidden;
375	- }
376	-}
377	-.highlight pre {
378	- white-space: pre;
379	- word-wrap:normal;
380	-}
381	-
382	-.highlighttable tr:hover {
383	- background:white;
384	-}
385	-table.highlighttable pre{
386	- line-height:16px !important;
387	- font-size:12px !important;
388	-}
389	-
390	-
391	-table.highlighttable .linenodiv pre {
392	- text-align: right;
393	- padding-right: 4px;
394	-}
395	-
396	.project-refs-form {	247	.project-refs-form {
397	span {	248	span {
398	background: none !important;	249	background: none !important;
	@@ -408,11 +259,6 @@ table.highlighttable .linenodiv pre {		@@ -408,11 +259,6 @@ table.highlighttable .linenodiv pre {
408		259
409	.filter .left { margin-right:15px; }	260	.filter .left { margin-right:15px; }
410		261
411	-
412	-.cgray { color:gray; }
413	-.cred { color:#D12F19; }
414	-.cgreen { color:#44aa22; }
415	-
416	body.project-page table .commit {	262	body.project-page table .commit {
417	a.tree-commit-link {	263	a.tree-commit-link {
418	color:gray;	264	color:gray;
	@@ -422,50 +268,80 @@ body.project-page table .commit {		@@ -422,50 +268,80 @@ body.project-page table .commit {
422	}	268	}
423	}	269	}
424		270
425	-
426	-.snippet .action-links,
427	-#issues-table-holder .issue .action-links {
428	- display:none;
429	- a {
430	- margin-left:10px;
431	- }
432	-}
433	-
434	-.snippet:hover .action-links { display:block; }
435	-
436	-
437	-
438	/ NEW PROJECT /	271	/ NEW PROJECT /
439	.new-project-hodler {	272	.new-project-hodler {
440	- .icon span {
441	- background-position: -31px -70px;
442	- }
443	- td {
444	- border-bottom: 1px solid #DEE2E3;
445	- }	273	+ .icon span { background-position: -31px -70px; }
		274	+ td { border-bottom: 1px solid #DEE2E3; }
446	}	275	}
447		276
448	-//.message .note-title p { margin-bottom:0px; }
449	-	277	+/ Feed entry /
450	.commit,	278	.commit,
451	.snippet,	279	.snippet,
452	.message {	280	.message {
453	.title {	281	.title {
454	color:#666;	282	color:#666;
455	- a {
456	- color:#666 !important;
457	- }
458	- p {
459	- margin-top:0px;
460	- }
461	- }
462	-
463	- .author {
464	- color: #999	283	+ a { color:#666 !important; }
		284	+ p { margin-top:0px; }
465	}	285	}
		286	+ .author { color: #999 }
466	}	287	}
467		288
468	-/ UI autocomplete /	289	+/ JQuery UI /
469	.ui-autocomplete { @include round-borders-all(5px); }	290	.ui-autocomplete { @include round-borders-all(5px); }
470	.ui-menu-item { cursor: pointer }	291	.ui-menu-item { cursor: pointer }
		292	+.ui-selectmenu{
		293	+ @include round-borders-all(4px);
		294	+ margin-right:10px;
		295	+ font-size:1.5em;
		296	+ height:auto;
		297	+ font-weight:bold;
		298	+ .ui-selectmenu-status {
		299	+ padding:3px 10px;
		300	+ }
		301	+}
471		302
		303	+/ Snippets /
		304	+.new_snippet textarea,
		305	+.edit_snippet textarea {
		306	+ height:300px;
		307	+ padding: 8px;
		308	+ width: 95%;
		309	+}
		310	+.snippet .action-links {
		311	+ display:none;
		312	+ a {
		313	+ margin-left:10px;
		314	+ }
		315	+}
		316	+.snippet:hover .action-links { display:block; }
		317	+
		318	+/ ISSUES TAGS /
		319	+.tag {
		320	+ @include round-borders-all(4px);
		321	+ padding:2px 4px;
		322	+ border:none;
		323	+ text-shadow:none;
		324	+
		325	+ &.high {
		326	+ background: #D12F19;
		327	+ color:white;
		328	+ }
		329	+
		330	+ &.today {
		331	+ background: #44aa22;
		332	+ color:white;
		333	+ }
		334	+
		335	+ &.yours {
		336	+ background: #4466cc;
		337	+ color:white;
		338	+ }
		339	+ &.normal {
		340	+ background: #2c5ca6;
		341	+ color:white;
		342	+ }
		343	+ &.notes {
		344	+ background: #2c5c66;
		345	+ color:white;
		346	+ }
		347	+}
	@@ -28,4 +28,4 @@		@@ -28,4 +28,4 @@
28		28
29	.clear	29	.clear
30	%br	30	%br
31	- = f.submit 'Add note', :class => "lbutton vm", :id => "submit_note"	31	+ = f.submit 'Add note', :class => "button", :id => "submit_note"
1	%div	1	%div
2	- if can? current_user, :write_snippet, @project	2	- if can? current_user, :write_snippet, @project
3	- .left= link_to 'New Snippet', new_project_snippet_path(@project), :class => "lbutton vm"	3	+ = link_to 'New Snippet', new_project_snippet_path(@project), :class => "button append-bottom-10"
4		4
5	%table.round-borders#snippets-table	5	%table.round-borders#snippets-table
6	%thead	6	%thead