diff options
| -rw-r--r-- | templates/repo/branch_dropdown.tmpl | 4 | ||||
| -rw-r--r-- | templates/repo/issue/branch_selector_field.tmpl | 6 | ||||
| -rw-r--r-- | templates/repo/issue/view_title.tmpl | 2 | ||||
| -rw-r--r-- | templates/shared/issuelist.tmpl | 15 | ||||
| -rw-r--r-- | web_src/css/base.css | 2 | ||||
| -rw-r--r-- | web_src/css/repo.css | 20 | ||||
| -rw-r--r-- | web_src/css/repo/issue-list.css | 6 | ||||
| -rw-r--r-- | web_src/js/components/RepoBranchTagSelector.vue | 4 |
8 files changed, 29 insertions, 30 deletions
diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl index 6c2e08a985..7b39830df8 100644 --- a/templates/repo/branch_dropdown.tmpl +++ b/templates/repo/branch_dropdown.tmpl @@ -71,7 +71,7 @@ {{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}} <div class="ui dropdown custom"> <button class="branch-dropdown-button gt-ellipsis ui basic small compact button tw-flex tw-m-0"> - <span class="text tw-flex tw-items-center tw-mr-1"> + <span class="text tw-flex tw-items-center tw-mr-1 gt-ellipsis"> {{if .release}} {{ctx.Locale.Tr "repo.release.compare"}} {{else}} @@ -80,7 +80,7 @@ {{else}} {{svg "octicon-git-branch"}} {{end}} - <strong ref="dropdownRefName" class="tw-ml-2">{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}</strong> + <strong ref="dropdownRefName" class="tw-ml-2 tw-inline-block gt-ellipsis">{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}</strong> {{end}} </span> {{svg "octicon-triangle-down" 14 "dropdown icon"}} diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl index b8ac9a6194..ed0d58cf27 100644 --- a/templates/repo/issue/branch_selector_field.tmpl +++ b/templates/repo/issue/branch_selector_field.tmpl @@ -5,9 +5,9 @@ {{$.CsrfTokenHtml}} </form> {{/* TODO: share this branch selector dropdown with the same in repo page */}} -<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating filter select-branch dropdown" data-no-results="{{ctx.Locale.Tr "no_results_found"}}"> +<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating filter select-branch dropdown tw-max-w-full" data-no-results="{{ctx.Locale.Tr "no_results_found"}}"> <div class="ui basic small button"> - <span class="text branch-name">{{if .Reference}}{{$.RefEndName}}{{else}}{{ctx.Locale.Tr "repo.issues.no_ref"}}{{end}}</span> + <span class="text branch-name gt-ellipsis">{{if .Reference}}{{$.RefEndName}}{{else}}{{ctx.Locale.Tr "repo.issues.no_ref"}}{{end}}</span> {{if .HasIssuesOrPullsWritePermission}}{{svg "octicon-triangle-down" 14 "dropdown icon"}}{{end}} </div> <div class="menu"> @@ -37,7 +37,7 @@ <div class="item text small" data-id="" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div> {{end}} {{range .Branches}} - <div class="item" data-id="refs/heads/{{.}}" data-name="{{.}}" data-id-selector="#ref_selector">{{.}}</div> + <div class="item" data-id="refs/heads/{{.}}" data-name="{{.}}" data-id-selector="#ref_selector" title="{{.}}">{{.}}</div> {{else}} <div class="item">{{ctx.Locale.Tr "no_results_found"}}</div> {{end}} diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl index b78ff55cda..fccf8cca91 100644 --- a/templates/repo/issue/view_title.tmpl +++ b/templates/repo/issue/view_title.tmpl @@ -41,7 +41,7 @@ {{else}} <div class="ui green label issue-state-label">{{svg "octicon-issue-opened"}} {{ctx.Locale.Tr "repo.issues.open_title"}}</div> {{end}} - <div class="tw-ml-2"> + <div class="tw-ml-2 tw-flex-1 tw-break-anywhere"> {{if .Issue.IsPull}} {{$headHref := .HeadTarget}} {{if .HeadBranchLink}} diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl index 1c0dfcc551..16c650ee3e 100644 --- a/templates/shared/issuelist.tmpl +++ b/templates/shared/issuelist.tmpl @@ -88,18 +88,21 @@ </div> {{end}} {{if and .Milestone (ne $.listType "milestone")}} - <a class="milestone flex-text-inline" {{if $.RepoLink}}href="{{$.RepoLink}}/milestone/{{.Milestone.ID}}"{{else}}href="{{.Repo.Link}}/milestone/{{.Milestone.ID}}"{{end}}> - {{svg "octicon-milestone" 14}}{{.Milestone.Name}} + <a class="milestone flex-text-inline tw-max-w-[300px]" {{if $.RepoLink}}href="{{$.RepoLink}}/milestone/{{.Milestone.ID}}"{{else}}href="{{.Repo.Link}}/milestone/{{.Milestone.ID}}"{{end}}> + {{svg "octicon-milestone" 14}} + <span class="gt-ellipsis">{{.Milestone.Name}}</span> </a> {{end}} {{if .Project}} - <a class="project flex-text-inline" href="{{.Project.Link ctx}}"> - {{svg .Project.IconName 14}}{{.Project.Title}} + <a class="project flex-text-inline tw-max-w-[300px]" href="{{.Project.Link ctx}}"> + {{svg .Project.IconName 14}} + <span class="gt-ellipsis">{{.Project.Title}}</span> </a> {{end}} {{if .Ref}} - <a class="ref flex-text-inline" {{if $.RepoLink}}href="{{index $.IssueRefURLs .ID}}"{{else}}href="{{.Repo.Link}}{{index $.IssueRefURLs .ID}}"{{end}}> - {{svg "octicon-git-branch" 14}}{{index $.IssueRefEndNames .ID}} + <a class="ref flex-text-inline tw-max-w-[300px]" {{if $.RepoLink}}href="{{index $.IssueRefURLs .ID}}"{{else}}href="{{.Repo.Link}}{{index $.IssueRefURLs .ID}}"{{end}}> + {{svg "octicon-git-branch" 14}} + <span class="gt-ellipsis">{{index $.IssueRefEndNames .ID}}</span> </a> {{end}} {{$tasks := .GetTasks}} diff --git a/web_src/css/base.css b/web_src/css/base.css index 8ded4aa883..7e781aa97b 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -342,6 +342,8 @@ a.label, .ui.dropdown .menu > .item { color: var(--color-text); + overflow: hidden; + text-overflow: ellipsis; } .ui.dropdown .menu > .item:hover { diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 0f6bf482b5..8d1f60d158 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -50,6 +50,11 @@ width: 300px; } +.issue-content-right .dropdown > .menu { + max-width: 270px; + min-width: 0; +} + @media (max-width: 767.98px) { .issue-content-left, .issue-content-right { @@ -57,11 +62,6 @@ } } -.repository .issue-content-right .menu { - overflow-x: auto; - max-height: 500px; -} - .repository .issue-content-right .ui.list .dependency { padding: 0; white-space: nowrap; @@ -113,11 +113,6 @@ left: 0; } -.repository .filter.menu .ui.dropdown .menu .item { - overflow: hidden; - text-overflow: ellipsis; -} - .repository .select-label .desc { padding-left: 23px; } @@ -672,6 +667,7 @@ td .commit-summary { font-size: 14px !important; padding: 7px 10px !important; border-radius: var(--border-radius-medium) !important; + flex-shrink: 0; } .issue-state-label .svg { @@ -1170,10 +1166,6 @@ td .commit-summary { font-size: 14px; } -.repository .ui.dropdown.filter > .menu { - margin-top: 1px; -} - .repository.branches .commit-divergence .bar-group { position: relative; float: left; diff --git a/web_src/css/repo/issue-list.css b/web_src/css/repo/issue-list.css index 77905956f0..1e0f82ce27 100644 --- a/web_src/css/repo/issue-list.css +++ b/web_src/css/repo/issue-list.css @@ -39,7 +39,7 @@ } #issue-list .flex-item-body .branches .branch { - background-color: var(--color-secondary-alpha-40); + background-color: var(--color-secondary-alpha-50); border-radius: var(--border-radius); padding: 0 4px; } @@ -48,7 +48,9 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - max-width: 10em; + max-width: 200px; + display: inline-block; + vertical-align: top; } #issue-list .flex-item-body .checklist progress { diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue index 4e977ab185..c13af14dea 100644 --- a/web_src/js/components/RepoBranchTagSelector.vue +++ b/web_src/js/components/RepoBranchTagSelector.vue @@ -248,12 +248,12 @@ export default sfc; // activate IDE's Vue plugin <template> <div class="ui dropdown custom"> <button class="branch-dropdown-button gt-ellipsis ui basic small compact button tw-flex tw-m-0" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible"> - <span class="text tw-flex tw-items-center tw-mr-1"> + <span class="text tw-flex tw-items-center tw-mr-1 gt-ellipsis"> <template v-if="release">{{ textReleaseCompare }}</template> <template v-else> <svg-icon v-if="isViewTag" name="octicon-tag"/> <svg-icon v-else name="octicon-git-branch"/> - <strong ref="dropdownRefName" class="tw-ml-2">{{ refNameText }}</strong> + <strong ref="dropdownRefName" class="tw-ml-2 tw-inline-block gt-ellipsis">{{ refNameText }}</strong> </template> </span> <svg-icon name="octicon-triangle-down" :size="14" class-name="dropdown icon"/> |