Use unique class for breadcrumb divider (#26524)

Fix regression from https://github.com/go-gitea/gitea/pull/25539:
https://github.com/go-gitea/gitea/pull/26519#issuecomment-1678825200.

Before:
<img width="429" alt="Screenshot 2023-08-15 at 15 46 12"
src="https://github.com/go-gitea/gitea/assets/115237/a818f60a-77a2-48fe-8e6f-363d152ccb1e">

After:
<img width="424" alt="Screenshot 2023-08-15 at 15 46 19"
src="https://github.com/go-gitea/gitea/assets/115237/c90159e2-ced2-4a74-8a0f-a1b2b5d0b565">

<img width="605" alt="Screenshot 2023-08-15 at 15 56 11"
src="https://github.com/go-gitea/gitea/assets/115237/3ded6f57-86f4-422a-86cb-56dd2c216dee">
This commit is contained in:
silverwind 2023-08-16 02:08:23 +02:00 committed by GitHub
parent bc930f332f
commit 3e044d2c9f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 15 additions and 10 deletions

View file

@ -18,7 +18,7 @@
{{.locale.Tr "repo.editor.cherry_pick" $shalink | Str2html}} {{.locale.Tr "repo.editor.cherry_pick" $shalink | Str2html}}
{{end}} {{end}}
<a class="section" href="{{$.RepoLink}}">{{.Repository.FullName}}</a> <a class="section" href="{{$.RepoLink}}">{{.Repository.FullName}}</a>
<div class="divider">:</div> <div class="breadcrumb-divider">:</div>
<a class="section" href="{{$.BranchLink}}">{{.BranchName}}</a> <a class="section" href="{{$.BranchLink}}">{{.BranchName}}</a>
<span>{{.locale.Tr "repo.editor.or"}} <a href="{{$shaurl}}">{{.locale.Tr "repo.editor.cancel_lower"}}</a></span> <span>{{.locale.Tr "repo.editor.or"}} <a href="{{$shaurl}}">{{.locale.Tr "repo.editor.cancel_lower"}}</a></span>
</div> </div>

View file

@ -13,7 +13,7 @@
{{$n := len .TreeNames}} {{$n := len .TreeNames}}
{{$l := Eval $n "-" 1}} {{$l := Eval $n "-" 1}}
{{range $i, $v := .TreeNames}} {{range $i, $v := .TreeNames}}
<div class="divider"> / </div> <div class="breadcrumb-divider">/</div>
{{if eq $i $l}} {{if eq $i $l}}
<input id="file-name" value="{{$v}}" placeholder="{{$.locale.Tr "repo.editor.name_your_file"}}" data-editorconfig="{{$.EditorconfigJson}}" required autofocus> <input id="file-name" value="{{$v}}" placeholder="{{$.locale.Tr "repo.editor.name_your_file"}}" data-editorconfig="{{$.EditorconfigJson}}" required autofocus>
<span data-tooltip-content="{{$.locale.Tr "repo.editor.filename_help"}}">{{svg "octicon-info"}}</span> <span data-tooltip-content="{{$.locale.Tr "repo.editor.filename_help"}}">{{svg "octicon-info"}}</span>

View file

@ -11,7 +11,7 @@
<div class="ui breadcrumb field {{if .Err_TreePath}}error{{end}}"> <div class="ui breadcrumb field {{if .Err_TreePath}}error{{end}}">
{{.locale.Tr "repo.editor.patching"}} {{.locale.Tr "repo.editor.patching"}}
<a class="section" href="{{$.RepoLink}}">{{.Repository.FullName}}</a> <a class="section" href="{{$.RepoLink}}">{{.Repository.FullName}}</a>
<div class="divider">:</div> <div class="breadcrumb-divider">:</div>
<a class="section" href="{{$.BranchLink}}">{{.BranchName}}</a> <a class="section" href="{{$.BranchLink}}">{{.BranchName}}</a>
<span>{{.locale.Tr "repo.editor.or"}} <a href="{{$.BranchLink}}">{{.locale.Tr "repo.editor.cancel_lower"}}</a></span> <span>{{.locale.Tr "repo.editor.or"}} <a href="{{$.BranchLink}}">{{.locale.Tr "repo.editor.cancel_lower"}}</a></span>
<input type="hidden" id="tree_path" name="tree_path" value="" required> <input type="hidden" id="tree_path" name="tree_path" value="" required>

View file

@ -11,7 +11,7 @@
{{$n := len .TreeNames}} {{$n := len .TreeNames}}
{{$l := Eval $n "-" 1}} {{$l := Eval $n "-" 1}}
{{range $i, $v := .TreeNames}} {{range $i, $v := .TreeNames}}
<div class="divider"> / </div> <div class="breadcrumb-divider">/</div>
{{if eq $i $l}} {{if eq $i $l}}
<input type="text" id="file-name" value="{{$v}}" placeholder="{{$.locale.Tr "repo.editor.add_subdir"}}" autofocus> <input type="text" id="file-name" value="{{$v}}" placeholder="{{$.locale.Tr "repo.editor.add_subdir"}}" autofocus>
<span data-tooltip-content="{{$.locale.Tr "repo.editor.filename_help"}}">{{svg "octicon-info"}}</span> <span data-tooltip-content="{{$.locale.Tr "repo.editor.filename_help"}}">{{svg "octicon-info"}}</span>

View file

@ -113,7 +113,7 @@
<span class="breadcrumb repo-path gt-ml-2"> <span class="breadcrumb repo-path gt-ml-2">
<a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a> <a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a>
{{- range $i, $v := .TreeNames -}} {{- range $i, $v := .TreeNames -}}
<span class="divider">/</span> <span class="breadcrumb-divider">/</span>
{{- if eq $i $l -}} {{- if eq $i $l -}}
<span class="active section" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</span> <span class="active section" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</span>
{{- else -}} {{- else -}}

View file

@ -1,7 +1,12 @@
.breadcrumb .divider { .breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 3px;
}
.breadcrumb .breadcrumb-divider {
color: var(--color-text-light-2); color: var(--color-text-light-2);
margin-left: 3px;
margin-right: 3px;
} }
.breadcrumb > * { .breadcrumb > * {

View file

@ -114,7 +114,7 @@ export function initRepoEditor() {
if (i < parts.length - 1) { if (i < parts.length - 1) {
if (value.length) { if (value.length) {
$(`<span class="section"><a href="#">${htmlEscape(value)}</a></span>`).insertBefore($(this)); $(`<span class="section"><a href="#">${htmlEscape(value)}</a></span>`).insertBefore($(this));
$('<div class="divider"> / </div>').insertBefore($(this)); $('<div class="breadcrumb-divider">/</div>').insertBefore($(this));
} }
} else { } else {
$(this).val(value); $(this).val(value);
@ -132,7 +132,7 @@ export function initRepoEditor() {
// Jump back to last directory once the filename is empty // Jump back to last directory once the filename is empty
if (e.code === 'Backspace' && getCursorPosition($(this)) === 0 && $section.length > 0) { if (e.code === 'Backspace' && getCursorPosition($(this)) === 0 && $section.length > 0) {
e.preventDefault(); e.preventDefault();
const $divider = $('.breadcrumb div.divider'); const $divider = $('.breadcrumb .breadcrumb-divider');
const value = $section.last().find('a').text(); const value = $section.last().find('a').text();
$(this).val(value + $(this).val()); $(this).val(value + $(this).val());
this.setSelectionRange(value.length, value.length); this.setSelectionRange(value.length, value.length);