github-mirror/gitea
2
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2024-11-29 20:45:38 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Use separate class for tippy targets (#20742)

Browse Source 
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.
This commit is contained in:
silverwind 2022-08-10 16:47:28 +02:00 committed by GitHub
parent 58de07e5fd
commit d751e35d81
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/base/head_navbar.tmpl
View File

@ -86,7 +86,7 @@
<span class="sr-mobile-only">{{.locale.Tr "active_stopwatch"}}</span> <span class="sr-mobile-only">{{.locale.Tr "active_stopwatch"}}</span>
</span> </span>
</a> </a>
<div class="active-stopwatch-popup hide"> <div class="active-stopwatch-popup tippy-target">
<div class="df ac"> <div class="df ac">
<a class="stopwatch-link df ac" href="{{.ActiveStopwatch.IssueLink}}"> <a class="stopwatch-link df ac" href="{{.ActiveStopwatch.IssueLink}}">
{{svg "octicon-issue-opened" 16 "mr-3"}} {{svg "octicon-issue-opened" 16 "mr-3"}}

2
templates/repo/commit_statuses.tmpl
View File

@ -1,5 +1,5 @@
<a class="ui link commit-statuses-trigger vm">{{template "repo/commit_status" .Status}}</a> <a class="ui link commit-statuses-trigger vm">{{template "repo/commit_status" .Status}}</a>
<div class="ui commit-statuses-popup commit-statuses hide"> <div class="ui commit-statuses-popup commit-statuses tippy-target">
<div class="ui relaxed list divided"> <div class="ui relaxed list divided">
{{range .Statuses}} {{range .Statuses}}
<div class="ui item singular-status df"> <div class="ui item singular-status df">

2
templates/repo/view_file.tmpl
View File

@ -120,7 +120,7 @@
{{end}} {{end}}
</tbody> </tbody>
</table> </table>
<div class="code-line-menu ui vertical pointing menu hide"> <div class="code-line-menu ui vertical pointing menu tippy-target">
{{if $.Permission.CanRead $.UnitTypeIssues}} {{if $.Permission.CanRead $.UnitTypeIssues}}
<a class="item ref-in-new-issue" href="{{.RepoLink}}/issues/new?body={{.Repository.HTMLURL}}{{printf "/src/commit/" }}{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}" rel="nofollow noindex">{{.locale.Tr "repo.issues.context.reference_issue"}}</a> <a class="item ref-in-new-issue" href="{{.RepoLink}}/issues/new?body={{.Repository.HTMLURL}}{{printf "/src/commit/" }}{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}" rel="nofollow noindex">{{.locale.Tr "repo.issues.context.reference_issue"}}</a>
{{end}} {{end}}

7
web_src/js/modules/tippy.js
View File

@ -12,10 +12,11 @@ export function createTippy(target, opts = {}) {
...opts, ...opts,
}); });
// for popups where content refers to a DOM element, we use the 'hide' class to initially hide // for popups where content refers to a DOM element, we use the 'tippy-target' class
// the content, now we can remove it as the content has been removed from the DOM by tippy // 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) { if (opts.content instanceof Element) {
opts.content.classList.remove('hide'); opts.content.classList.remove('tippy-target');
} }
return instance; return instance;

2
web_src/less/_base.less
View File

@ -1315,7 +1315,7 @@ footer {
} }
.hide { .hide {
display: none !important; display: none;
&.show-outdated { &.show-outdated {
display: none !important; display: none !important;

5
web_src/less/modules/tippy.less
View File

@ -1,5 +1,10 @@
/* styles are based on node_modules/tippy.js/dist/tippy.css */ /* 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] { [data-tippy-root] {
max-width: calc(100vw - 10px); max-width: calc(100vw - 10px);
} }