From baefdaf89db555dc098b1fac5f2f92757554c4eb Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 10 Aug 2022 15:42:31 +0200 Subject: [PATCH 1/2] Use separate class for tippy targets Previous solution that re-purposed the 'hide' class by making it !important had various unintended side-effects where jQuery .show() was not able to outweight it. Use a separate class to prevent these interactions. Fixes: https://github.com/go-gitea/gitea/issues/20747 --- templates/base/head_navbar.tmpl | 2 +- templates/repo/commit_statuses.tmpl | 2 +- templates/repo/view_file.tmpl | 2 +- web_src/js/modules/tippy.js | 7 ++++--- web_src/less/_base.less | 7 ++++++- 5 files changed, 13 insertions(+), 7 deletions(-) diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl index 5521a28a124e8..459beb5515128 100644 --- a/templates/base/head_navbar.tmpl +++ b/templates/base/head_navbar.tmpl @@ -86,7 +86,7 @@ {{.locale.Tr "active_stopwatch"}} -
+
{{svg "octicon-issue-opened" 16 "mr-3"}} diff --git a/templates/repo/commit_statuses.tmpl b/templates/repo/commit_statuses.tmpl index fe3598d755624..d45d8a1df69f6 100644 --- a/templates/repo/commit_statuses.tmpl +++ b/templates/repo/commit_statuses.tmpl @@ -1,5 +1,5 @@ {{template "repo/commit_status" .Status}} -
+
{{range .Statuses}}
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl index a25fe28c97f79..34ed859d40c2d 100644 --- a/templates/repo/view_file.tmpl +++ b/templates/repo/view_file.tmpl @@ -120,7 +120,7 @@ {{end}} -
+
{{if $.Permission.CanRead $.UnitTypeIssues}} {{.locale.Tr "repo.issues.context.reference_issue"}} {{end}} diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index 87f9e8a4b062a..6f3adadddc104 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -12,10 +12,11 @@ export function createTippy(target, opts = {}) { ...opts, }); - // for popups where content refers to a DOM element, we use the 'hide' class to initially hide - // the content, now we can remove it as the content has been removed from the DOM by tippy + // for popups where content refers to a DOM element, we use the 'tippy-target' class + // to initially hide the content, now we can remove it as the content has been removed + // from the DOM by tippy if (opts.content instanceof Element) { - opts.content.classList.remove('hide'); + opts.content.classList.remove('tippy-target'); } return instance; diff --git a/web_src/less/_base.less b/web_src/less/_base.less index f2711c4482c95..35271644f9755 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -1315,7 +1315,7 @@ footer { } .hide { - display: none !important; + display: none; &.show-outdated { display: none !important; @@ -1326,6 +1326,11 @@ footer { } } +// class to hide tippy targets on page load +.tippy-target { + display: none !important; +} + .center:not(.popup) { text-align: center; } From adf1574291cb643f815d82deee6b7e142f7f55e2 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 10 Aug 2022 16:19:10 +0200 Subject: [PATCH 2/2] move class to tippy.less --- web_src/less/_base.less | 5 ----- web_src/less/modules/tippy.less | 5 +++++ 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 35271644f9755..17e9ccfd35bf6 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -1326,11 +1326,6 @@ footer { } } -// class to hide tippy targets on page load -.tippy-target { - display: none !important; -} - .center:not(.popup) { text-align: center; } diff --git a/web_src/less/modules/tippy.less b/web_src/less/modules/tippy.less index 1fcd0372ce5a7..25dd7fc987ef7 100644 --- a/web_src/less/modules/tippy.less +++ b/web_src/less/modules/tippy.less @@ -1,5 +1,10 @@ /* styles are based on node_modules/tippy.js/dist/tippy.css */ +// class to hide tippy target elements on page load +.tippy-target { + display: none !important; +} + [data-tippy-root] { max-width: calc(100vw - 10px); }