Merge pull request 'Port: Fix long branch name overflows (https://github.com/go-gitea/gitea/pull/30345)' (#3890) from 0ko/forgejo:fix-branch-overflow-2 into forgejo
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3890 Reviewed-by: Beowulf <beowulf@noreply.codeberg.org>
This commit is contained in:
		
				commit
				
					
						b6849b8e7d
					
				
			
		
					 8 changed files with 29 additions and 30 deletions
				
			
		| 
						 | 
				
			
			@ -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"}}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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 "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">
 | 
			
		||||
		<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 "repo.pulls.no_results"}}</div>
 | 
			
		||||
			{{end}}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -47,7 +47,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}}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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}}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -423,6 +423,8 @@ a.label,
 | 
			
		|||
 | 
			
		||||
.ui.dropdown .menu > .item {
 | 
			
		||||
  color: var(--color-text);
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
  text-overflow: ellipsis;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.dropdown .menu > .item:hover {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -666,6 +661,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 {
 | 
			
		||||
| 
						 | 
				
			
			@ -1186,10 +1182,6 @@ td .commit-summary {
 | 
			
		|||
  color: var(--color-text-light-2);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.repository .ui.dropdown.filter > .menu {
 | 
			
		||||
  margin-top: 1px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.repository.branches .commit-divergence .bar-group {
 | 
			
		||||
  position: relative;
 | 
			
		||||
  float: left;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -74,7 +74,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;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -83,7 +83,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 {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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"/>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue