magic_rb/forgejo
Template
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo synced 2024-11-25 11:16:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix long branch name overflows (https://github.com/go-gitea/gitea/pull/30345)

Browse source 
Fixes: https://github.com/go-gitea/gitea/issues/27971
Fixes: https://github.com/go-gitea/gitea/pull/28010

<img width="689" alt="Screenshot 2024-04-09 at 00 19 57"
src="https://github.com/go-gitea/gitea/assets/115237/7c895a47-274f-40a6-a126-290658f1982d">

Also fixes a similar issue in issue list where CSS was there but not
active because of missing `display: block`.

<img width="372" alt="Screenshot 2024-04-09 at 00 18 25"
src="https://github.com/go-gitea/gitea/assets/115237/cfbee7cd-2e15-4ac7-96ce-020816f48798">

---
Little conflict in branch_selector_field (repo.pulls.no_results is renamed in Gitea)
And some weird conflict on new CSS rules added.
This commit is contained in:
silverwind 2024-04-16 10:52:45 +02:00 committed by 0ko
parent 8cfe353061
commit f6c1fd76f2
8 changed files with 29 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
templates/repo/branch_dropdown.tmpl
View file

@ -71,7 +71,7 @@
{{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}} {{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}}
<div class="ui dropdown custom"> <div class="ui dropdown custom">
<button class="branch-dropdown-button gt-ellipsis ui basic small compact button tw-flex tw-m-0"> <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}} {{if .release}}
{{ctx.Locale.Tr "repo.release.compare"}} {{ctx.Locale.Tr "repo.release.compare"}}
{{else}} {{else}}
@ -80,7 +80,7 @@
{{else}} {{else}}
{{svg "octicon-git-branch"}} {{svg "octicon-git-branch"}}
{{end}} {{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}} {{end}}
</span> </span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}

6
templates/repo/issue/view_content/sidebar/branch_selector_field.tmpl
View file

@ -5,9 +5,9 @@
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}
</form> </form>
{{/* TODO: share this branch selector dropdown with the same in repo page */}} {{/* 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 "repo.pulls.no_results"}}"> <div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating filter select-branch dropdown tw-max-w-full" data-no-results="{{ctx.Locale.Tr "repo.pulls.no_results"}}">
<div class="ui basic small button"> <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}} {{if .HasIssuesOrPullsWritePermission}}{{svg "octicon-triangle-down" 14 "dropdown icon"}}{{end}}
</div> </div>
<div class="menu"> <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> <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}} {{end}}
{{range .Branches}} {{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}} {{else}}
<div class="item">{{ctx.Locale.Tr "repo.pulls.no_results"}}</div> <div class="item">{{ctx.Locale.Tr "repo.pulls.no_results"}}</div>
{{end}} {{end}}

2
templates/repo/issue/view_title.tmpl
View file

@ -47,7 +47,7 @@
{{else}} {{else}}
<div class="ui green label issue-state-label">{{svg "octicon-issue-opened"}} {{ctx.Locale.Tr "repo.issues.open_title"}}</div> <div class="ui green label issue-state-label">{{svg "octicon-issue-opened"}} {{ctx.Locale.Tr "repo.issues.open_title"}}</div>
{{end}} {{end}}
<div class="tw-ml-2"> <div class="tw-ml-2 tw-flex-1 tw-break-anywhere">
{{if .Issue.IsPull}} {{if .Issue.IsPull}}
{{$headHref := .HeadTarget}} {{$headHref := .HeadTarget}}
{{if .HeadBranchLink}} {{if .HeadBranchLink}}

15
templates/shared/issuelist.tmpl
View file

@ -88,18 +88,21 @@
</div> </div>
{{end}} {{end}}
{{if and .Milestone (ne $.listType "milestone")}} {{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}}> <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}}{{.Milestone.Name}} {{svg "octicon-milestone" 14}}
<span class="gt-ellipsis">{{.Milestone.Name}}</span>
</a> </a>
{{end}} {{end}}
{{if .Project}} {{if .Project}}
<a class="project flex-text-inline" href="{{.Project.Link ctx}}"> <a class="project flex-text-inline tw-max-w-[300px]" href="{{.Project.Link ctx}}">
{{svg .Project.IconName 14}}{{.Project.Title}} {{svg .Project.IconName 14}}
<span class="gt-ellipsis">{{.Project.Title}}</span>
</a> </a>
{{end}} {{end}}
{{if .Ref}} {{if .Ref}}
<a class="ref flex-text-inline" {{if $.RepoLink}}href="{{index $.IssueRefURLs .ID}}"{{else}}href="{{.Repo.Link}}{{index $.IssueRefURLs .ID}}"{{end}}> <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}}{{index $.IssueRefEndNames .ID}} {{svg "octicon-git-branch" 14}}
<span class="gt-ellipsis">{{index $.IssueRefEndNames .ID}}</span>
</a> </a>
{{end}} {{end}}
{{$tasks := .GetTasks}} {{$tasks := .GetTasks}}

2
web_src/css/base.css
View file

@ -423,6 +423,8 @@ a.label,
.ui.dropdown .menu > .item { .ui.dropdown .menu > .item {
color: var(--color-text); color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
} }
.ui.dropdown .menu > .item:hover { .ui.dropdown .menu > .item:hover {

20
web_src/css/repo.css
View file

@ -50,6 +50,11 @@
width: 300px; width: 300px;
} }
.issue-content-right .dropdown > .menu {
max-width: 270px;
min-width: 0;
}
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.issue-content-left, .issue-content-left,
.issue-content-right { .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 { .repository .issue-content-right .ui.list .dependency {
padding: 0; padding: 0;
white-space: nowrap; white-space: nowrap;
@ -113,11 +113,6 @@
left: 0; left: 0;
} }
.repository .filter.menu .ui.dropdown .menu .item {
overflow: hidden;
text-overflow: ellipsis;
}
.repository .select-label .desc { .repository .select-label .desc {
padding-left: 23px; padding-left: 23px;
} }
@ -666,6 +661,7 @@ td .commit-summary {
font-size: 14px !important; font-size: 14px !important;
padding: 7px 10px !important; padding: 7px 10px !important;
border-radius: var(--border-radius-medium) !important; border-radius: var(--border-radius-medium) !important;
flex-shrink: 0;
} }
.issue-state-label .svg { .issue-state-label .svg {
@ -1186,10 +1182,6 @@ td .commit-summary {
color: var(--color-text-light-2); color: var(--color-text-light-2);
} }
.repository .ui.dropdown.filter > .menu {
margin-top: 1px;
}
.repository.branches .commit-divergence .bar-group { .repository.branches .commit-divergence .bar-group {
position: relative; position: relative;
float: left; float: left;

6
web_src/css/repo/issue-list.css
View file

@ -74,7 +74,7 @@
} }
#issue-list .flex-item-body .branches .branch { #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); border-radius: var(--border-radius);
padding: 0 4px; padding: 0 4px;
} }
@ -83,7 +83,9 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 10em; max-width: 200px;
display: inline-block;
vertical-align: top;
} }
#issue-list .flex-item-body .checklist progress { #issue-list .flex-item-body .checklist progress {

4
web_src/js/components/RepoBranchTagSelector.vue
View file

@ -248,12 +248,12 @@ export default sfc; // activate IDE's Vue plugin
<template> <template>
<div class="ui dropdown custom"> <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"> <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-if="release">{{ textReleaseCompare }}</template>
<template v-else> <template v-else>
<svg-icon v-if="isViewTag" name="octicon-tag"/> <svg-icon v-if="isViewTag" name="octicon-tag"/>
<svg-icon v-else name="octicon-git-branch"/> <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> </template>
</span> </span>
<svg-icon name="octicon-triangle-down" :size="14" class-name="dropdown icon"/> <svg-icon name="octicon-triangle-down" :size="14" class-name="dropdown icon"/>