Use css truncation on dashboard

Dmitriy Zaporozhets
1 parent 7ad5fb53
Showing 6 changed files with 36 additions and 14 deletions Show diff stats
app/assets/stylesheets/generic/common.scss
app/assets/stylesheets/main/mixins.scss
app/assets/stylesheets/sections/events.scss
app/views/events/_event.html.haml
app/views/events/_event_last_push.html.haml
app/views/events/event/_push.html.haml
@@ -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 **/
@@ -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;
+}
@@ -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;
+  }
+}
 - 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
 - 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
@@ -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
...	...	@@ -71,12 +71,7 @@ pre {
71	71	}
72	72
73	73	.str-truncated {
74		- display: inline-block;
75		- overflow: hidden;
76		- text-overflow: ellipsis;
77		- vertical-align: top;
78		- white-space: nowrap;
79		- max-width: 82%;
	74	+ @include str-truncated;
80	75	}
81	76
82	77	/ FLASH message /
...	...
...	...	@@ -123,3 +123,12 @@
123	123	margin-top: 0px;
124	124	margin-bottom: 15px;
125	125	}
	126	+
	127	+@mixin str-truncated($max_width: "82%") {
	128	+ display: inline-block;
	129	+ overflow: hidden;
	130	+ text-overflow: ellipsis;
	131	+ vertical-align: top;
	132	+ white-space: nowrap;
	133	+ max-width: $max_width;
	134	+}
...	...
...	...	@@ -45,6 +45,7 @@
45	45	padding: 12px 0px;
46	46	border-bottom: 1px solid #eee;
47	47	.event-title {
	48	+ @include str-truncated(72%);
48	49	color: #333;
49	50	font-weight: normal;
50	51	font-size: 14px;
...	...	@@ -135,6 +136,12 @@
135	136	}
136	137	}
137	138	}
	139	+
	140	+ .event-item-timestamp {
	141	+ float: right;
	142	+ color: #999;
	143	+ line-height: 22px;
	144	+ }
138	145	}
139	146
140	147	/**
...	...	@@ -166,3 +173,13 @@
166	173	}
167	174	}
168	175	}
	176	+
	177	+/*
	178	+ * Last push widget
	179	+ */
	180	+.event-last-push {
	181	+ .event-last-push-text {
	182	+ @include str-truncated(75%);
	183	+ line-height: 24px;
	184	+ }
	185	+}
...	...
1	1	- if event.proper?
2	2	.event-item{class: "#{event.body? ? "event-block" : "event-inline" }"}
3		- %span.cgray.pull-right
	3	+ .event-item-timestamp
4	4	#{time_ago_with_tooltip(event.created_at)}
5	5
6	6	= cache event do
...	...
1	1	- if show_last_push_widget?(event)
2	2	.event-last-push
3		- %span You pushed to
4		- = link_to project_commits_path(event.project, event.ref_name) do
5		- %strong= truncate(event.ref_name, length: 28)
6		- at
7		- %strong= link_to_project event.project
8		- #{time_ago_with_tooltip(event.created_at)}
	3	+ .event-last-push-text
	4	+ %span You pushed to
	5	+ = link_to project_commits_path(event.project, event.ref_name) do
	6	+ %strong= event.ref_name
	7	+ at
	8	+ %strong= link_to_project event.project
	9	+ #{time_ago_with_tooltip(event.created_at)}
9	10
10	11	.pull-right
11	12	= link_to new_mr_path_from_push_event(event), title: "New Merge Request", class: "btn btn-create btn-small" do
...	...
...	...	@@ -5,7 +5,7 @@
5	5	%strong= event.ref_name
6	6	- else
7	7	= link_to project_commits_path(event.project, event.ref_name) do
8		- %strong= truncate(event.ref_name, length: 30)
	8	+ %strong= event.ref_name
9	9	at
10	10	= link_to_project event.project
11	11
...	...