Use ellipsis in dashboard referred topics table. Add .overflow-ellipsis css helper.

This commit is contained in:
Neil Lalonde 2013-07-30 14:45:03 -04:00
parent 16cd3e2a53
commit 277e4db2cb
5 changed files with 24 additions and 6 deletions

View file

@ -214,7 +214,13 @@
{{#each data in top_referred_topics.data}} {{#each data in top_referred_topics.data}}
<tbody> <tbody>
<tr> <tr>
<td class="title"><a href="/t/{{unbound data.topic_slug}}/{{unbound data.topic_id}}">{{shorten data.topic_title}}</a></td> <td class="title">
<div class="referred-topic-title">
<div class="overflow-ellipsis">
<a href="/t/{{unbound data.topic_slug}}/{{unbound data.topic_id}}">{{data.topic_title}}</a>
</div>
</div>
</td>
<td class="value">{{data.num_clicks}}</td> <td class="value">{{data.num_clicks}}</td>
</tr> </tr>
</tbody> </tbody>

View file

@ -62,7 +62,7 @@ Discourse.ComposerController = Discourse.Controller.extend({
if(topic) { if(topic) {
buttons.push({ buttons.push({
"label": I18n.t("composer.reply_here") + "<br/><div class='topic-title'>" + topic.get('title') + "</div>", "label": I18n.t("composer.reply_here") + "<br/><div class='topic-title overflow-ellipsis'>" + topic.get('title') + "</div>",
"class": "btn btn-reply-here", "class": "btn btn-reply-here",
"callback": function(){ "callback": function(){
composer.set('topic', topic); composer.set('topic', topic);
@ -73,7 +73,7 @@ Discourse.ComposerController = Discourse.Controller.extend({
} }
buttons.push({ buttons.push({
"label": I18n.t("composer.reply_original") + "<br/><div class='topic-title'>" + this.get('model.topic.title') + "</div>", "label": I18n.t("composer.reply_original") + "<br/><div class='topic-title overflow-ellipsis'>" + this.get('model.topic.title') + "</div>",
"class": "btn-primary btn-reply-on-original", "class": "btn-primary btn-reply-on-original",
"callback": function(){ "callback": function(){
composerController.save(true); composerController.save(true);

View file

@ -489,6 +489,12 @@ table {
width: 45px; width: 45px;
} }
} }
.referred-topic-title {
width: 410px;
@include medium-width { width: 360px; }
@include small-width { width: 320px; }
}
} }

View file

@ -279,9 +279,6 @@
.topic-title { .topic-title {
font-size: 13px; font-size: 13px;
font-weight: normal; font-weight: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
&.btn-reply-here { &.btn-reply-here {
@include linear-gradient(#ddd, #ddd); @include linear-gradient(#ddd, #ddd);

View file

@ -49,3 +49,12 @@
clear: both; clear: both;
} }
} }
// Overflow
// --------------------------------------------------
.overflow-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}