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}}
<tbody>
<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>
</tr>
</tbody>

View file

@ -62,7 +62,7 @@ Discourse.ComposerController = Discourse.Controller.extend({
if(topic) {
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",
"callback": function(){
composer.set('topic', topic);
@ -73,7 +73,7 @@ Discourse.ComposerController = Discourse.Controller.extend({
}
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",
"callback": function(){
composerController.save(true);

View file

@ -489,6 +489,12 @@ table {
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 {
font-size: 13px;
font-weight: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&.btn-reply-here {
@include linear-gradient(#ddd, #ddd);

View file

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