Use separate class for tippy targets (#20742)
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:
parent
58de07e5fd
commit
d751e35d81
|
@ -86,7 +86,7 @@
|
|||
<span class="sr-mobile-only">{{.locale.Tr "active_stopwatch"}}</span>
|
||||
</span>
|
||||
</a>
|
||||
<div class="active-stopwatch-popup hide">
|
||||
<div class="active-stopwatch-popup tippy-target">
|
||||
<div class="df ac">
|
||||
<a class="stopwatch-link df ac" href="{{.ActiveStopwatch.IssueLink}}">
|
||||
{{svg "octicon-issue-opened" 16 "mr-3"}}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<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">
|
||||
{{range .Statuses}}
|
||||
<div class="ui item singular-status df">
|
||||
|
|
|
@ -120,7 +120,7 @@
|
|||
{{end}}
|
||||
</tbody>
|
||||
</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}}
|
||||
<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}}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -1315,7 +1315,7 @@ footer {
|
|||
}
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
display: none;
|
||||
|
||||
&.show-outdated {
|
||||
display: none !important;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue