From a9cceb0597105fab89a145e55b0e5c7f8f1330f4 Mon Sep 17 00:00:00 2001 From: Hester Gong Date: Fri, 24 Mar 2023 15:11:23 +0800 Subject: [PATCH] Fix long project name display in issue list and in related dropdown (#23653) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR is to fix the second problem mentioned in #23625, along with the long texts problem in `issue-item-bottom-row` of `issuelist.tmpl` Main changes are: 1. Add `max-width` to the search dropdowns in issue list and make the possible long texts inside to show ellipsis if texts are long 2. Adjust the conditions in [issuelist.tmpl](https://github.com/go-gitea/gitea/blob/1d35fa0e784dffcadacb2322a3d7ac3ec2ff89b2/templates/shared/issuelist.tmpl#L146-L167) to fix the problem as mentioned by the [comment](https://github.com/go-gitea/gitea/issues/23625#issuecomment-1479281060) 3. Use `word-break: break-word;` in `issue-item-bottom-row` to break the possible long texts. After the PR issuelist in repo (similar for pr list): 截屏2023-03-23 17 42 40 dropdowns with long name (Here take reference from github to deal with the long names cases: show ellipsis with no title, because all these options are clickable, and it might not be necessary to add titles to them ): 截屏2023-03-23 17 43 50 截屏2023-03-23 17 43 56 issue page (similar for pr page): 截屏2023-03-23 17 45 37 on PC: 截屏2023-03-23 17 47 20 截屏2023-03-23 17 46 40 --- templates/repo/issue/list.tmpl | 8 ++++---- templates/repo/search_name.tmpl | 2 +- templates/shared/issuelist.tmpl | 18 +++++++++++------- web_src/css/helpers.css | 1 + web_src/css/repository.css | 3 ++- web_src/css/shared/issuelist.css | 1 + 6 files changed, 20 insertions(+), 13 deletions(-) diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl index 726ef25cfe8ad..38ed3873ba4c8 100644 --- a/templates/repo/issue/list.tmpl +++ b/templates/repo/issue/list.tmpl @@ -99,8 +99,8 @@ {{.locale.Tr "repo.issues.new.open_projects"}} {{range .OpenProjects}} - - {{svg .IconName 18 "gt-mr-3"}}{{.Title}} + + {{svg .IconName 18 "gt-mr-3 gt-shrink-0"}}{{.Title}} {{end}} {{end}} @@ -131,7 +131,7 @@ {{.locale.Tr "repo.issues.filter_poster_no_select"}} {{range .Posters}} - + {{avatar $.Context .}}{{template "repo/search_name" .}} {{end}} @@ -151,7 +151,7 @@ {{.locale.Tr "repo.issues.filter_assginee_no_select"}} {{range .Assignees}} - + {{avatar $.Context .}}{{template "repo/search_name" .}} {{end}} diff --git a/templates/repo/search_name.tmpl b/templates/repo/search_name.tmpl index 468f6c394cd83..5a481761cc8f4 100644 --- a/templates/repo/search_name.tmpl +++ b/templates/repo/search_name.tmpl @@ -1 +1 @@ -{{.Name}}{{if IsShowFullName}} {{.FullName}}{{end}} +{{.Name}}{{if IsShowFullName}} {{.FullName}}{{end}} diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl index 40ddb4dab03a5..2720f7e26b2a6 100644 --- a/templates/shared/issuelist.tmpl +++ b/templates/shared/issuelist.tmpl @@ -143,13 +143,15 @@ {{end}} + {{if or .TotalTrackedTime .Assignees .NumComments}}
+ {{if .TotalTrackedTime}}
- {{if .TotalTrackedTime}} {{svg "octicon-clock" 16 "gt-mr-2"}} {{.TotalTrackedTime | Sec2Time}} - {{end}}
+ {{end}} + {{if .Assignees}}
{{range .Assignees}} @@ -157,14 +159,16 @@ {{end}}
+ {{end}} + {{if .NumComments}}
- {{if .NumComments}} - - {{svg "octicon-comment" 16 "gt-mr-2"}}{{.NumComments}} - - {{end}} + + {{svg "octicon-comment" 16 "gt-mr-2"}}{{.NumComments}} +
+ {{end}}
+ {{end}} {{end}} {{if .IssueIndexerUnavailable}} diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 4756d31becff8..7c7d576db95e4 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -197,6 +197,7 @@ .gt-content-center { align-content: center !important; } +.gt-shrink-0 { flex-shrink: 0 !important; } .gt-whitespace-nowrap { white-space: nowrap !important; } @media (max-width: 767px) { diff --git a/web_src/css/repository.css b/web_src/css/repository.css index eb555abec8443..34c76b15c9b2d 100644 --- a/web_src/css/repository.css +++ b/web_src/css/repository.css @@ -143,7 +143,8 @@ .repository .filter.menu .menu { max-height: 500px; - overflow-x: auto; + max-width: 300px; + overflow-x: hidden; right: 0 !important; left: auto !important; } diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css index 6e2cc737e7d90..ebb1ca989b87f 100644 --- a/web_src/css/shared/issuelist.css +++ b/web_src/css/shared/issuelist.css @@ -84,6 +84,7 @@ .issue.list > .item .desc a { color: inherit; + word-break: break-word; } .issue.list > .item .desc .time-since,