From 3e044d2c9fea7c197aa0476e2c9735320c112e03 Mon Sep 17 00:00:00 2001 From: silverwind <me@silverwind.io> Date: Wed, 16 Aug 2023 02:08:23 +0200 Subject: [PATCH] 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"> --- templates/repo/editor/cherry_pick.tmpl | 2 +- templates/repo/editor/edit.tmpl | 2 +- templates/repo/editor/patch.tmpl | 2 +- templates/repo/editor/upload.tmpl | 2 +- templates/repo/home.tmpl | 2 +- web_src/css/modules/breadcrumb.css | 11 ++++++++--- web_src/js/features/repo-editor.js | 4 ++-- 7 files changed, 15 insertions(+), 10 deletions(-) diff --git a/templates/repo/editor/cherry_pick.tmpl b/templates/repo/editor/cherry_pick.tmpl index 828addb75a..59948f2837 100644 --- a/templates/repo/editor/cherry_pick.tmpl +++ b/templates/repo/editor/cherry_pick.tmpl @@ -18,7 +18,7 @@ {{.locale.Tr "repo.editor.cherry_pick" $shalink | Str2html}} {{end}} <a class="section" href="{{$.RepoLink}}">{{.Repository.FullName}}</a> - <div class="divider">:</div> + <div class="breadcrumb-divider">:</div> <a class="section" href="{{$.BranchLink}}">{{.BranchName}}</a> <span>{{.locale.Tr "repo.editor.or"}} <a href="{{$shaurl}}">{{.locale.Tr "repo.editor.cancel_lower"}}</a></span> </div> diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl index 988b11911d..3b5a63f3aa 100644 --- a/templates/repo/editor/edit.tmpl +++ b/templates/repo/editor/edit.tmpl @@ -13,7 +13,7 @@ {{$n := len .TreeNames}} {{$l := Eval $n "-" 1}} {{range $i, $v := .TreeNames}} - <div class="divider"> / </div> + <div class="breadcrumb-divider">/</div> {{if eq $i $l}} <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> diff --git a/templates/repo/editor/patch.tmpl b/templates/repo/editor/patch.tmpl index 581a80e827..1f948fbb19 100644 --- a/templates/repo/editor/patch.tmpl +++ b/templates/repo/editor/patch.tmpl @@ -11,7 +11,7 @@ <div class="ui breadcrumb field {{if .Err_TreePath}}error{{end}}"> {{.locale.Tr "repo.editor.patching"}} <a class="section" href="{{$.RepoLink}}">{{.Repository.FullName}}</a> - <div class="divider">:</div> + <div class="breadcrumb-divider">:</div> <a class="section" href="{{$.BranchLink}}">{{.BranchName}}</a> <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> diff --git a/templates/repo/editor/upload.tmpl b/templates/repo/editor/upload.tmpl index d9408c9eee..bfb6f150c1 100644 --- a/templates/repo/editor/upload.tmpl +++ b/templates/repo/editor/upload.tmpl @@ -11,7 +11,7 @@ {{$n := len .TreeNames}} {{$l := Eval $n "-" 1}} {{range $i, $v := .TreeNames}} - <div class="divider"> / </div> + <div class="breadcrumb-divider">/</div> {{if eq $i $l}} <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> diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index aaa1a1b974..7eb4ba4636 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -113,7 +113,7 @@ <span class="breadcrumb repo-path gt-ml-2"> <a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a> {{- range $i, $v := .TreeNames -}} - <span class="divider">/</span> + <span class="breadcrumb-divider">/</span> {{- if eq $i $l -}} <span class="active section" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</span> {{- else -}} diff --git a/web_src/css/modules/breadcrumb.css b/web_src/css/modules/breadcrumb.css index 67830e562a..ca488c2150 100644 --- a/web_src/css/modules/breadcrumb.css +++ b/web_src/css/modules/breadcrumb.css @@ -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); - margin-left: 3px; - margin-right: 3px; } .breadcrumb > * { diff --git a/web_src/js/features/repo-editor.js b/web_src/js/features/repo-editor.js index b7937cf006..c48c3fdfde 100644 --- a/web_src/js/features/repo-editor.js +++ b/web_src/js/features/repo-editor.js @@ -114,7 +114,7 @@ export function initRepoEditor() { if (i < parts.length - 1) { if (value.length) { $(`<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 { $(this).val(value); @@ -132,7 +132,7 @@ export function initRepoEditor() { // Jump back to last directory once the filename is empty if (e.code === 'Backspace' && getCursorPosition($(this)) === 0 && $section.length > 0) { e.preventDefault(); - const $divider = $('.breadcrumb div.divider'); + const $divider = $('.breadcrumb .breadcrumb-divider'); const value = $section.last().find('a').text(); $(this).val(value + $(this).val()); this.setSelectionRange(value.length, value.length);