Commit aef2122f81f08f13634dab56ab0913ef6d8efb02
Exists in
spb-stable
and in
2 other branches
Merge branch 'css-truncation' into 'master'
CSS truncation Use css truncation for event titles on dashboard. Fix vertical align of timestamps
Showing
6 changed files
with
36 additions
and
14 deletions
Show diff stats
app/assets/stylesheets/generic/common.scss
| @@ -71,12 +71,7 @@ pre { | @@ -71,12 +71,7 @@ pre { | ||
| 71 | } | 71 | } |
| 72 | 72 | ||
| 73 | .str-truncated { | 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 | /** FLASH message **/ | 77 | /** FLASH message **/ |
app/assets/stylesheets/main/mixins.scss
| @@ -123,3 +123,12 @@ | @@ -123,3 +123,12 @@ | ||
| 123 | margin-top: 0px; | 123 | margin-top: 0px; |
| 124 | margin-bottom: 15px; | 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 | +} |
app/assets/stylesheets/sections/events.scss
| @@ -45,6 +45,7 @@ | @@ -45,6 +45,7 @@ | ||
| 45 | padding: 12px 0px; | 45 | padding: 12px 0px; |
| 46 | border-bottom: 1px solid #eee; | 46 | border-bottom: 1px solid #eee; |
| 47 | .event-title { | 47 | .event-title { |
| 48 | + @include str-truncated(72%); | ||
| 48 | color: #333; | 49 | color: #333; |
| 49 | font-weight: normal; | 50 | font-weight: normal; |
| 50 | font-size: 14px; | 51 | font-size: 14px; |
| @@ -135,6 +136,12 @@ | @@ -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,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 | +} |
app/views/events/_event.html.haml
| 1 | - if event.proper? | 1 | - if event.proper? |
| 2 | .event-item{class: "#{event.body? ? "event-block" : "event-inline" }"} | 2 | .event-item{class: "#{event.body? ? "event-block" : "event-inline" }"} |
| 3 | - %span.cgray.pull-right | 3 | + .event-item-timestamp |
| 4 | #{time_ago_with_tooltip(event.created_at)} | 4 | #{time_ago_with_tooltip(event.created_at)} |
| 5 | 5 | ||
| 6 | = cache event do | 6 | = cache event do |
app/views/events/_event_last_push.html.haml
| 1 | - if show_last_push_widget?(event) | 1 | - if show_last_push_widget?(event) |
| 2 | .event-last-push | 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 | .pull-right | 11 | .pull-right |
| 11 | = link_to new_mr_path_from_push_event(event), title: "New Merge Request", class: "btn btn-create btn-small" do | 12 | = link_to new_mr_path_from_push_event(event), title: "New Merge Request", class: "btn btn-create btn-small" do |
app/views/events/event/_push.html.haml
| @@ -5,7 +5,7 @@ | @@ -5,7 +5,7 @@ | ||
| 5 | %strong= event.ref_name | 5 | %strong= event.ref_name |
| 6 | - else | 6 | - else |
| 7 | = link_to project_commits_path(event.project, event.ref_name) do | 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 | at | 9 | at |
| 10 | = link_to_project event.project | 10 | = link_to_project event.project |
| 11 | 11 |