Improve commits list UI

Dmitriy Zaporozhets
1 parent fa17712c
Showing 3 changed files with 58 additions and 75 deletions Show diff stats
app/assets/stylesheets/sections/commits.scss
app/views/projects/commits/_commit.html.haml
app/views/projects/commits/_commits.html.haml
@@ -345,46 +345,6 @@
 }
  
  
-/**
- * COMMIT ROW
- */
-.commit {
-  .browse_code_link_holder {
-    float: right;
-  }
-
-  .committed_ago {
-    float: right;
-    @extend .cgray;
-  }
-
-  .notes_count {
-    float: right;
-    margin-right: 10px;
-  }
-
-  code {
-    background: #FCEEC1;
-    color: $style_color;
-  }
-
-  .commit_short_id {
-    float: left;
-    @extend .lined;
-    min-width: 65px;
-    font-family: $monospace_font;
-  }
-
-  .row_title {
-    font-weight: bold;
-    color: #444;
-    &:hover {
-      color: #444;
-      text-decoration: underline;
-    }
-  }
-}
-
 .file-stats a {
   color: $style_color;
 }
@@ -472,24 +432,6 @@
   line-height: 2;
 }
  
-li.commit {
-  .avatar {
-    width: 24px;
-    top:-5px;
-    margin-right: 5px;
-    margin-left: 10px;
-  }
-
-  code {
-    padding: 2px 2px 0;
-    margin-top: -2px;
-    &:hover {
-      color: black;
-      border: 1px solid #ccc;
-    }
-  }
-}
-
 .commit-breadcrumb {
   padding: 0;
 }
@@ -506,8 +448,50 @@ li.commit {
   }
 }
  
-.commits-row {
-  padding-bottom: 10px;
-  margin-bottom: 10px;
-  border-bottom: 1px solid #DDD;
+.lists-separator {
+  margin: 10px 0;
+  border-top: 1px dashed #CCC;
+}
+
+/**
+ * COMMIT ROW
+ */
+li.commit {
+  padding: 8px;
+
+  .commit-row-title {
+    font-size: 14px;
+    margin-bottom: 2px;
+
+    .notes_count {
+      float: right;
+      margin-right: 10px;
+    }
+
+    .commit_short_id {
+      float: left;
+      min-width: 65px;
+      font-family: $monospace_font;
+    }
+
+    .commit-row-message {
+      color: #555;
+      font-weight: bolder;
+      &:hover {
+        color: #444;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .commit-row-info {
+    a {
+      color: #777;
+    }
+
+    .committed_ago {
+      float: right;
+      @extend .cgray;
+    }
+  }
 }
 %li.commit
-  .browse_code_link_holder
-    %p
-      %strong= link_to "Browse Code »", project_tree_path(project, commit), class: "right"
-  %p
+  .commit-row-title
     = link_to commit.short_id(8), project_commit_path(project, commit), class: "commit_short_id"
-    = commit_author_link(commit, avatar: true, size: 24)
     &nbsp;
-    = link_to_gfm truncate(commit.title, length: 70), project_commit_path(project, commit.id), class: "row_title"
-
-    %time.committed_ago{ datetime: commit.committed_date, title: commit.committed_date.stamp("Aug 21, 2011 9:23pm") }
-      = time_ago_in_words(commit.committed_date)
-      ago
-      &nbsp;
-
-    %span.notes_count
+    = link_to_gfm truncate(commit.title, length: 70), project_commit_path(project, commit.id), class: "commit-row-message"
+    = link_to "Browse Code »", project_tree_path(project, commit), class: "pull-right"
+    .notes_count
       - notes = project.notes.for_commit_id(commit.id)
       - if notes.any?
         %span.badge.badge-info
           %i.icon-comment
           = notes.count
+
+  .commit-row-info
+    = commit_author_link(commit, avatar: true, size: 16)
+    %time.committed_ago{ datetime: commit.committed_date, title: commit.committed_date.stamp("Aug 21, 2011 9:23pm") }
+      = time_ago_in_words(commit.committed_date)
+      ago
+      &nbsp;
@@ -8,3 +8,4 @@
     .span10
       %ul.well-list
         = render commits, project: @project
+  %hr.lists-separator
...	...	@@ -345,46 +345,6 @@
345	345	}
346	346
347	347
348		-/**
349		- * COMMIT ROW
350		- */
351		-.commit {
352		- .browse_code_link_holder {
353		- float: right;
354		- }
355		-
356		- .committed_ago {
357		- float: right;
358		- @extend .cgray;
359		- }
360		-
361		- .notes_count {
362		- float: right;
363		- margin-right: 10px;
364		- }
365		-
366		- code {
367		- background: #FCEEC1;
368		- color: $style_color;
369		- }
370		-
371		- .commit_short_id {
372		- float: left;
373		- @extend .lined;
374		- min-width: 65px;
375		- font-family: $monospace_font;
376		- }
377		-
378		- .row_title {
379		- font-weight: bold;
380		- color: #444;
381		- &:hover {
382		- color: #444;
383		- text-decoration: underline;
384		- }
385		- }
386		-}
387		-
388	348	.file-stats a {
389	349	color: $style_color;
390	350	}
...	...	@@ -472,24 +432,6 @@
472	432	line-height: 2;
473	433	}
474	434
475		-li.commit {
476		- .avatar {
477		- width: 24px;
478		- top:-5px;
479		- margin-right: 5px;
480		- margin-left: 10px;
481		- }
482		-
483		- code {
484		- padding: 2px 2px 0;
485		- margin-top: -2px;
486		- &:hover {
487		- color: black;
488		- border: 1px solid #ccc;
489		- }
490		- }
491		-}
492		-
493	435	.commit-breadcrumb {
494	436	padding: 0;
495	437	}
...	...	@@ -506,8 +448,50 @@ li.commit {
506	448	}
507	449	}
508	450
509		-.commits-row {
510		- padding-bottom: 10px;
511		- margin-bottom: 10px;
512		- border-bottom: 1px solid #DDD;
	451	+.lists-separator {
	452	+ margin: 10px 0;
	453	+ border-top: 1px dashed #CCC;
	454	+}
	455	+
	456	+/**
	457	+ * COMMIT ROW
	458	+ */
	459	+li.commit {
	460	+ padding: 8px;
	461	+
	462	+ .commit-row-title {
	463	+ font-size: 14px;
	464	+ margin-bottom: 2px;
	465	+
	466	+ .notes_count {
	467	+ float: right;
	468	+ margin-right: 10px;
	469	+ }
	470	+
	471	+ .commit_short_id {
	472	+ float: left;
	473	+ min-width: 65px;
	474	+ font-family: $monospace_font;
	475	+ }
	476	+
	477	+ .commit-row-message {
	478	+ color: #555;
	479	+ font-weight: bolder;
	480	+ &:hover {
	481	+ color: #444;
	482	+ text-decoration: underline;
	483	+ }
	484	+ }
	485	+ }
	486	+
	487	+ .commit-row-info {
	488	+ a {
	489	+ color: #777;
	490	+ }
	491	+
	492	+ .committed_ago {
	493	+ float: right;
	494	+ @extend .cgray;
	495	+ }
	496	+ }
513	497	}
...	...
1	1	%li.commit
2		- .browse_code_link_holder
3		- %p
4		- %strong= link_to "Browse Code »", project_tree_path(project, commit), class: "right"
5		- %p
	2	+ .commit-row-title
6	3	= link_to commit.short_id(8), project_commit_path(project, commit), class: "commit_short_id"
7		- = commit_author_link(commit, avatar: true, size: 24)
8	4
9		- = link_to_gfm truncate(commit.title, length: 70), project_commit_path(project, commit.id), class: "row_title"
10		-
11		- %time.committed_ago{ datetime: commit.committed_date, title: commit.committed_date.stamp("Aug 21, 2011 9:23pm") }
12		- = time_ago_in_words(commit.committed_date)
13		- ago
14		-
15		-
16		- %span.notes_count
	5	+ = link_to_gfm truncate(commit.title, length: 70), project_commit_path(project, commit.id), class: "commit-row-message"
	6	+ = link_to "Browse Code »", project_tree_path(project, commit), class: "pull-right"
	7	+ .notes_count
17	8	- notes = project.notes.for_commit_id(commit.id)
18	9	- if notes.any?
19	10	%span.badge.badge-info
20	11	%i.icon-comment
21	12	= notes.count
	13	+
	14	+ .commit-row-info
	15	+ = commit_author_link(commit, avatar: true, size: 16)
	16	+ %time.committed_ago{ datetime: commit.committed_date, title: commit.committed_date.stamp("Aug 21, 2011 9:23pm") }
	17	+ = time_ago_in_words(commit.committed_date)
	18	+ ago
	19	+
...	...
...	...	@@ -8,3 +8,4 @@
8	8	.span10
9	9	%ul.well-list
10	10	= render commits, project: @project
	11	+ %hr.lists-separator
...	...