(refs #1282) Fix text-ellipsis which does't work

This commit is contained in:
Shunsuke Tadokoro
2016-12-12 21:08:05 +09:00
parent 2488ab9bd4
commit e7fc5f1753
2 changed files with 18 additions and 10 deletions

View File

@@ -143,7 +143,7 @@
<i class="octicon octicon-file-text"></i> <i class="octicon octicon-file-text"></i>
} }
</td> </td>
<td class="content-name"> <td class="ellipsis-cell" style="width: 20%; min-width: 160px;">
@if(file.isDirectory){ @if(file.isDirectory){
@if(file.linkUrl.isDefined){ @if(file.linkUrl.isDefined){
<a href="@file.linkUrl"> <a href="@file.linkUrl">
@@ -164,10 +164,10 @@
<a href="@helpers.url(repository)/blob@{(branch :: pathList).map(helpers.encodeRefName).mkString("/", "/", "/")}@{helpers.encodeRefName(file.name)}">@file.name</a> <a href="@helpers.url(repository)/blob@{(branch :: pathList).map(helpers.encodeRefName).mkString("/", "/", "/")}@{helpers.encodeRefName(file.name)}">@file.name</a>
} }
</td> </td>
<td class="mute"> <td class="ellipsis-cell" style="width: 70%;">
<a href="@helpers.url(repository)/commit/@file.commitId" class="commit-message shorten-text" title="@file.message">@helpers.link(file.message, repository)</a> <a href="@helpers.url(repository)/commit/@file.commitId" class="commit-message" title="@file.message">@helpers.link(file.message, repository)</a>
</td> </td>
<td style="text-align: right;">@gitbucket.core.helper.html.datetimeago(file.time, false)</td> <td style="width: 10%; min-width: 125px; text-align: right;">@gitbucket.core.helper.html.datetimeago(file.time, false)</td>
</tr> </tr>
} }
</table> </table>

View File

@@ -174,12 +174,6 @@ span.error {
font-weight: normal; font-weight: normal;
} }
.shorten-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
a.commit-message, a.commit-id, a.username, a.issue-comment-count { a.commit-message, a.commit-id, a.username, a.issue-comment-count {
color: #333333; color: #333333;
} }
@@ -299,6 +293,20 @@ th.box-header .octicon {
display: inline; display: inline;
} }
td.ellipsis-cell {
position: relative;
}
td.ellipsis-cell > * {
position: absolute;
left: 0;
right: 0;
padding-right: 5px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
img.avatar { img.avatar {
border-radius: 4px; border-radius: 4px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;