mirror of
				https://gitee.com/gitea/gitea
				synced 2025-11-04 08:30:25 +08:00 
			
		
		
		
	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:
		@@ -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"}}
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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">
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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}}
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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;
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -1315,7 +1315,7 @@ footer {
 | 
				
			|||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.hide {
 | 
					.hide {
 | 
				
			||||||
  display: none !important;
 | 
					  display: none;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  &.show-outdated {
 | 
					  &.show-outdated {
 | 
				
			||||||
    display: none !important;
 | 
					    display: none !important;
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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);
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user