Fix ellipsis in files table (#12617)
Turns out text ellispsis does not work in combination with flexbox and while wrapping in a display:block can help in some cases, I could not get this to work properly so this changes the truncate to inline-block again and reduces the clickable area to just vertical expansion from the links.
This commit is contained in:
parent
e25d4867be
commit
f8601f3f09
2 changed files with 7 additions and 6 deletions
|
@ -49,7 +49,7 @@
|
|||
{{svg "octicon-file-submodule" 16}}
|
||||
{{$refURL := $commit.RefURL AppUrl $.Repository.FullName}}
|
||||
{{if $refURL}}
|
||||
<a class="flex-0" href="{{$refURL}}">{{$entry.Name}}</a><span class="at">@</span><a class="flex-1" href="{{$refURL}}/commit/{{$commit.RefID}}">{{ShortSha $commit.RefID}}</a>
|
||||
<a href="{{$refURL}}">{{$entry.Name}}</a><span class="at">@</span><a href="{{$refURL}}/commit/{{$commit.RefID}}">{{ShortSha $commit.RefID}}</a>
|
||||
{{else}}
|
||||
{{$entry.Name}}<span class="at">@</span>{{ShortSha $commit.RefID}}
|
||||
{{end}}
|
||||
|
@ -58,7 +58,7 @@
|
|||
{{$subJumpablePathName := $entry.GetSubJumpablePathName}}
|
||||
{{$subJumpablePath := SubJumpablePath $subJumpablePathName}}
|
||||
{{svg "octicon-file-directory" 16}}
|
||||
<a class="flex-1" href="{{EscapePound $.TreeLink}}/{{EscapePound $subJumpablePathName}}" title="{{$subJumpablePathName}}">
|
||||
<a href="{{EscapePound $.TreeLink}}/{{EscapePound $subJumpablePathName}}" title="{{$subJumpablePathName}}">
|
||||
{{if eq (len $subJumpablePath) 2}}
|
||||
<span class="jumpable-path">{{index $subJumpablePath 0}}</span>{{index $subJumpablePath 1}}
|
||||
{{else}}
|
||||
|
@ -67,14 +67,14 @@
|
|||
</a>
|
||||
{{else}}
|
||||
{{svg (printf "octicon-%s" (EntryIcon $entry)) 16}}
|
||||
<a class="flex-1" href="{{EscapePound $.TreeLink}}/{{EscapePound $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
|
||||
<a href="{{EscapePound $.TreeLink}}/{{EscapePound $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</span>
|
||||
</td>
|
||||
<td class="message nine wide">
|
||||
<span class="truncate">
|
||||
<a class="flex-1" href="{{$.RepoLink}}/commit/{{$commit.ID}}" title="{{$commit.Summary}}">{{$commit.Summary | RenderEmoji}}</a>
|
||||
<a href="{{$.RepoLink}}/commit/{{$commit.ID}}" title="{{$commit.Summary}}">{{$commit.Summary | RenderEmoji}}</a>
|
||||
</span>
|
||||
</td>
|
||||
<td class="text right age three wide">{{TimeSince $commit.Committer.When $.Lang}}</td>
|
||||
|
|
|
@ -362,12 +362,13 @@
|
|||
}
|
||||
|
||||
.truncate {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
Reference in a new issue