Fix file table overflows (#12603)
- Fix overflow regression from https://github.com/go-gitea/gitea/pull/12553. - Fix submodule columns stretching the table - Refactor template to share more HTML nodes - Introduce CSS helper classes Co-authored-by: zeripath <art27@cantab.net> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
parent
69b3dd6362
commit
7d14d6c1c1
|
@ -148,7 +148,7 @@ func TestViewRepoWithSymlinks(t *testing.T) {
|
|||
resp := session.MakeRequest(t, req, http.StatusOK)
|
||||
|
||||
htmlDoc := NewHTMLParser(t, resp.Body)
|
||||
files := htmlDoc.doc.Find("#repo-files-table > TBODY > TR > TD.name")
|
||||
files := htmlDoc.doc.Find("#repo-files-table > TBODY > TR > TD.name > SPAN.truncate")
|
||||
items := files.Map(func(i int, s *goquery.Selection) string {
|
||||
cls, _ := s.Find("SVG").Attr("class")
|
||||
file := strings.Trim(s.Find("A").Text(), " \t\n")
|
||||
|
|
|
@ -43,37 +43,39 @@
|
|||
{{$entry := index $item 0}}
|
||||
{{$commit := index $item 1}}
|
||||
<tr>
|
||||
{{if $entry.IsSubModule}}
|
||||
<td>
|
||||
{{svg "octicon-file-submodule" 16}}
|
||||
{{$refURL := $commit.RefURL AppUrl $.Repository.FullName}}
|
||||
{{if $refURL}}
|
||||
<a href="{{$refURL}}">{{$entry.Name}}</a> @ <a href="{{$refURL}}/commit/{{$commit.RefID}}">{{ShortSha $commit.RefID}}</a>
|
||||
<td class="name four wide">
|
||||
<span class="truncate">
|
||||
{{if $entry.IsSubModule}}
|
||||
{{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>
|
||||
{{else}}
|
||||
{{$entry.Name}}<span class="at">@</span>{{ShortSha $commit.RefID}}
|
||||
{{end}}
|
||||
{{else}}
|
||||
{{$entry.Name}} @ {{ShortSha $commit.RefID}}
|
||||
{{if $entry.IsDir}}
|
||||
{{$subJumpablePathName := $entry.GetSubJumpablePathName}}
|
||||
{{$subJumpablePath := SubJumpablePath $subJumpablePathName}}
|
||||
{{svg "octicon-file-directory" 16}}
|
||||
<a class="flex-1" href="{{EscapePound $.TreeLink}}/{{EscapePound $subJumpablePathName}}" title="{{$subJumpablePathName}}">
|
||||
{{if eq (len $subJumpablePath) 2}}
|
||||
<span class="jumpable-path">{{index $subJumpablePath 0}}</span>{{index $subJumpablePath 1}}
|
||||
{{else}}
|
||||
{{index $subJumpablePath 0}}
|
||||
{{end}}
|
||||
</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>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</td>
|
||||
{{else}}
|
||||
<td class="name four wide">
|
||||
{{if $entry.IsDir}}
|
||||
{{$subJumpablePathName := $entry.GetSubJumpablePathName}}
|
||||
{{$subJumpablePath := SubJumpablePath $subJumpablePathName}}
|
||||
{{svg "octicon-file-directory" 16}}
|
||||
<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}}
|
||||
{{index $subJumpablePath 0}}
|
||||
{{end}}
|
||||
</a>
|
||||
{{else}}
|
||||
{{svg (printf "octicon-%s" (EntryIcon $entry)) 16}}
|
||||
<a href="{{EscapePound $.TreeLink}}/{{EscapePound $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
|
||||
{{end}}
|
||||
</td>
|
||||
{{end}}
|
||||
</span>
|
||||
</td>
|
||||
<td class="message nine wide">
|
||||
<a href="{{$.RepoLink}}/commit/{{$commit.ID}}" title="{{$commit.Summary}}">{{$commit.Summary | RenderEmoji}}</a>
|
||||
<span class="truncate">
|
||||
<a class="flex-1" 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>
|
||||
</tr>
|
||||
|
|
|
@ -361,14 +361,23 @@
|
|||
width: 120px;
|
||||
}
|
||||
|
||||
> a {
|
||||
width: calc(100% - 8px); /* prevent overflow into adjacant cell */
|
||||
display: inline-block;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
.truncate {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.at {
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
> * {
|
||||
|
|
|
@ -0,0 +1,6 @@
|
|||
.flex-0 {
|
||||
flex: 0;
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
|
@ -1,5 +1,6 @@
|
|||
@import "~font-awesome/css/font-awesome.css";
|
||||
|
||||
@import "./helpers.less";
|
||||
@import "./features/gitgraph.less";
|
||||
@import "./features/animations.less";
|
||||
@import "./markdown/mermaid.less";
|
||||
|
|
Loading…
Reference in New Issue