Increase clickable area on files table links (#12553)

This commit is contained in:
silverwind 2020-08-23 21:05:17 +02:00 committed by GitHub
parent d2cee3eea6
commit dd8ec12188
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 35 deletions

View File

@ -148,7 +148,7 @@ func TestViewRepoWithSymlinks(t *testing.T) {
resp := session.MakeRequest(t, req, http.StatusOK) resp := session.MakeRequest(t, req, http.StatusOK)
htmlDoc := NewHTMLParser(t, resp.Body) htmlDoc := NewHTMLParser(t, resp.Body)
files := htmlDoc.doc.Find("#repo-files-table > TBODY > TR > TD.name > SPAN") files := htmlDoc.doc.Find("#repo-files-table > TBODY > TR > TD.name")
items := files.Map(func(i int, s *goquery.Selection) string { items := files.Map(func(i int, s *goquery.Selection) string {
cls, _ := s.Find("SVG").Attr("class") cls, _ := s.Find("SVG").Attr("class")
file := strings.Trim(s.Find("A").Text(), " \t\n") file := strings.Trim(s.Find("A").Text(), " \t\n")

View File

@ -45,41 +45,35 @@
<tr> <tr>
{{if $entry.IsSubModule}} {{if $entry.IsSubModule}}
<td> <td>
<span class="truncate"> {{svg "octicon-file-submodule" 16}}
{{svg "octicon-file-submodule" 16}} {{$refURL := $commit.RefURL AppUrl $.Repository.FullName}}
{{$refURL := $commit.RefURL AppUrl $.Repository.FullName}} {{if $refURL}}
{{if $refURL}} <a href="{{$refURL}}">{{$entry.Name}}</a> @ <a href="{{$refURL}}/commit/{{$commit.RefID}}">{{ShortSha $commit.RefID}}</a>
<a href="{{$refURL}}">{{$entry.Name}}</a> @ <a href="{{$refURL}}/commit/{{$commit.RefID}}">{{ShortSha $commit.RefID}}</a> {{else}}
{{else}} {{$entry.Name}} @ {{ShortSha $commit.RefID}}
{{$entry.Name}} @ {{ShortSha $commit.RefID}} {{end}}
{{end}}
</span>
</td> </td>
{{else}} {{else}}
<td class="name four wide"> <td class="name four wide">
<span class="truncate"> {{if $entry.IsDir}}
{{if $entry.IsDir}} {{$subJumpablePathName := $entry.GetSubJumpablePathName}}
{{$subJumpablePathName := $entry.GetSubJumpablePathName}} {{$subJumpablePath := SubJumpablePath $subJumpablePathName}}
{{$subJumpablePath := SubJumpablePath $subJumpablePathName}} {{svg "octicon-file-directory" 16}}
{{svg "octicon-file-directory" 16}} <a href="{{EscapePound $.TreeLink}}/{{EscapePound $subJumpablePathName}}" title="{{$subJumpablePathName}}">
<a href="{{EscapePound $.TreeLink}}/{{EscapePound $subJumpablePathName}}" title="{{$subJumpablePathName}}"> {{if eq (len $subJumpablePath) 2}}
{{if eq (len $subJumpablePath) 2}} <span class="jumpable-path">{{index $subJumpablePath 0}}</span>{{index $subJumpablePath 1}}
<span class="jumpable-path">{{index $subJumpablePath 0}}</span>{{index $subJumpablePath 1}} {{else}}
{{else}} {{index $subJumpablePath 0}}
{{index $subJumpablePath 0}} {{end}}
{{end}} </a>
</a> {{else}}
{{else}} {{svg (printf "octicon-%s" (EntryIcon $entry)) 16}}
{{svg (printf "octicon-%s" (EntryIcon $entry)) 16}} <a 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>
{{end}} {{end}}
<td class="message nine wide"> <td class="message nine wide">
<span class="truncate"> <a 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>
<td class="text right age three wide">{{TimeSince $commit.Committer.When $.Lang}}</td> <td class="text right age three wide">{{TimeSince $commit.Committer.When $.Lang}}</td>
</tr> </tr>

View File

@ -345,8 +345,8 @@
} }
td { td {
padding-top: 8px; padding-top: 0;
padding-bottom: 8px; padding-bottom: 0;
overflow: initial; overflow: initial;
&.name { &.name {
@ -361,14 +361,19 @@
width: 120px; width: 120px;
} }
.truncate { > a {
width: calc(100% - 8px); /* prevent overflow into adjacant cell */
display: inline-block; display: inline-block;
max-width: 100%; padding-top: 8px;
padding-bottom: 8px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: top;
white-space: nowrap; white-space: nowrap;
} }
> * {
vertical-align: middle;
}
} }
td.message .isSigned { td.message .isSigned {