Use css truncation on dashboard

6 files changed, 36 insertions, 14 deletions

diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss
index 4e660d0b1e0..6ab6458ea0d 100644
--- a/app/assets/stylesheets/generic/common.scss
+++ b/app/assets/stylesheets/generic/common.scss
@@ -71,12 +71,7 @@ pre {
 }
 
 .str-truncated {
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  vertical-align: top;
-  white-space: nowrap;
-  max-width: 82%;
+  @include str-truncated;
 }
 
 /** FLASH message **/
diff --git a/app/assets/stylesheets/main/mixins.scss b/app/assets/stylesheets/main/mixins.scss
index 8143cfa2c81..747676620b3 100644
--- a/app/assets/stylesheets/main/mixins.scss
+++ b/app/assets/stylesheets/main/mixins.scss
@@ -123,3 +123,12 @@
   margin-top: 0px;
   margin-bottom: 15px;
 }
+
+@mixin str-truncated($max_width: "82%") {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+  white-space: nowrap;
+  max-width: $max_width;
+}
diff --git a/app/assets/stylesheets/sections/events.scss b/app/assets/stylesheets/sections/events.scss
index b68f882220e..05361976efc 100644
--- a/app/assets/stylesheets/sections/events.scss
+++ b/app/assets/stylesheets/sections/events.scss
@@ -45,6 +45,7 @@
   padding: 12px 0px;
   border-bottom: 1px solid #eee;
   .event-title {
+    @include str-truncated(72%);
     color: #333;
     font-weight: normal;
     font-size: 14px;
@@ -135,6 +136,12 @@
       }
     }
   }
+
+  .event-item-timestamp {
+    float: right;
+    color: #999;
+    line-height: 22px;
+  }
 }
 
 /**
@@ -166,3 +173,13 @@
     }
   }
 }
+
+/*
+ * Last push widget
+ */
+.event-last-push {
+  .event-last-push-text {
+    @include str-truncated(75%);
+    line-height: 24px;
+  }
+}
diff --git a/app/views/events/_event.html.haml b/app/views/events/_event.html.haml
index 8cf26671e3b..61383315373 100644
--- a/app/views/events/_event.html.haml
+++ b/app/views/events/_event.html.haml
@@ -1,6 +1,6 @@
 - if event.proper?
   .event-item{class: "#{event.body? ? "event-block" : "event-inline" }"}
-    %span.cgray.pull-right
+    .event-item-timestamp
       #{time_ago_with_tooltip(event.created_at)}
 
     = cache event do
diff --git a/app/views/events/_event_last_push.html.haml b/app/views/events/_event_last_push.html.haml
index 6db05a1a5a6..4c9a39bcc27 100644
--- a/app/views/events/_event_last_push.html.haml
+++ b/app/views/events/_event_last_push.html.haml
@@ -1,11 +1,12 @@
 - if show_last_push_widget?(event)
   .event-last-push
-    %span You pushed to
-    = link_to project_commits_path(event.project, event.ref_name) do
-      %strong= truncate(event.ref_name, length: 28)
-    at
-    %strong= link_to_project event.project
-    #{time_ago_with_tooltip(event.created_at)}
+    .event-last-push-text
+      %span You pushed to
+      = link_to project_commits_path(event.project, event.ref_name) do
+        %strong= event.ref_name
+      at
+      %strong= link_to_project event.project
+      #{time_ago_with_tooltip(event.created_at)}
 
     .pull-right
       = link_to new_mr_path_from_push_event(event), title: "New Merge Request", class: "btn btn-create btn-small" do
diff --git a/app/views/events/event/_push.html.haml b/app/views/events/event/_push.html.haml
index f181df23eb4..1bca64c7d50 100644
--- a/app/views/events/event/_push.html.haml
+++ b/app/views/events/event/_push.html.haml
@@ -5,7 +5,7 @@
     %strong= event.ref_name
   - else
     = link_to project_commits_path(event.project, event.ref_name) do
-      %strong= truncate(event.ref_name, length: 30)
+      %strong= event.ref_name
   at
   = link_to_project event.project