mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-10-31 11:35:03 +01: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:
		
							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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user