core
/
gitea
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
silverwind 2020-08-26 17:52:44 +02:00 committed by GitHub
parent 69b3dd6362
commit 7d14d6c1c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 52 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
integrations/repo_test.go
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") files := htmlDoc.doc.Find("#repo-files-table > TBODY > TR > TD.name > SPAN.truncate")
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")

20
templates/repo/view_list.tmpl
View File

@ -43,23 +43,22 @@
{{$entry := index $item 0}} {{$entry := index $item 0}}
{{$commit := index $item 1}} {{$commit := index $item 1}}
<tr> <tr>
<td class="name four wide">
<span class="truncate">
{{if $entry.IsSubModule}} {{if $entry.IsSubModule}}
<td>
{{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 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}} {{else}}
{{$entry.Name}} @ {{ShortSha $commit.RefID}} {{$entry.Name}}<span class="at">@</span>{{ShortSha $commit.RefID}}
{{end}} {{end}}
</td>
{{else}} {{else}}
<td class="name four wide">
{{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 class="flex-1" 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}}
@ -68,12 +67,15 @@
</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 class="flex-1" href="{{EscapePound $.TreeLink}}/{{EscapePound $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
{{end}} {{end}}
{{end}}
</span>
</td> </td>
{{end}}
<td class="message nine wide"> <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>
<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>

19
web_src/less/_repository.less
View File

@ -361,14 +361,23 @@
width: 120px; width: 120px;
} }
> a { .truncate {
width: calc(100% - 8px); /* prevent overflow into adjacant cell */ display: inline-flex;
display: inline-block; align-items: center;
padding-top: 8px;
padding-bottom: 8px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
width: 100%;
}
a {
padding-top: 8px;
padding-bottom: 8px;
}
.at {
margin-left: 3px;
margin-right: 3px;
} }
> * { > * {

6
web_src/less/helpers.less Normal file
View File

@ -0,0 +1,6 @@
.flex-0 {
flex: 0;
}
.flex-1 {
flex: 1;
}

1
web_src/less/index.less
View File

@ -1,5 +1,6 @@
@import "~font-awesome/css/font-awesome.css"; @import "~font-awesome/css/font-awesome.css";
@import "./helpers.less";
@import "./features/gitgraph.less"; @import "./features/gitgraph.less";
@import "./features/animations.less"; @import "./features/animations.less";
@import "./markdown/mermaid.less"; @import "./markdown/mermaid.less";