From 7d14d6c1c13f1eac4b9456c5db4c3594bc4dc237 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 26 Aug 2020 17:52:44 +0200
Subject: [PATCH] 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>
---
integrations/repo_test.go | 2 +-
templates/repo/view_list.tmpl | 58 ++++++++++++++++++-----------------
web_src/less/_repository.less | 19 +++++++++---
web_src/less/helpers.less | 6 ++++
web_src/less/index.less | 1 +
5 files changed, 52 insertions(+), 34 deletions(-)
create mode 100644 web_src/less/helpers.less
diff --git a/integrations/repo_test.go b/integrations/repo_test.go
index 3121b5135f..c1652aeb1d 100644
--- a/integrations/repo_test.go
+++ b/integrations/repo_test.go
@@ -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")
diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
index db810890f5..36c3024d1d 100644
--- a/templates/repo/view_list.tmpl
+++ b/templates/repo/view_list.tmpl
@@ -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>
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index c149cc4fe4..26423ff29f 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -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;
}
> * {
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
new file mode 100644
index 0000000000..d854d28807
--- /dev/null
+++ b/web_src/less/helpers.less
@@ -0,0 +1,6 @@
+.flex-0 {
+ flex: 0;
+}
+.flex-1 {
+ flex: 1;
+}
diff --git a/web_src/less/index.less b/web_src/less/index.less
index 92b25e1db1..bcc0d54d87 100644
--- a/web_src/less/index.less
+++ b/web_src/less/index.less
@@ -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";