mediawiki-extensions-Popups/src/ui/templates/referencePreview/referencePreview.less
Thiemo Kreuz ac65bd3082 referencePreview: No event bubbling on inner child elements
This is relevant in case the HTML looks like this:
<… class="reference"><a><span>[</span>2<span>]</span></a></…>
The additional <span> cause many additional mouseover and mouseout
events. The code already tries to filter these duplicate events that
are all triggered on the same link, but gets confused, especially when
the multiple chains of events overlap each other in unexpected ways.
It's a timing issue. This change does not fix the fundamental issue,
but does make it much less painfull.

This patch also removes the > from the selector. This is in case the
HTML looks like this:
<… class="reference"><span><a>[2]</a></span></…>
The additional inner <span> would prevent any reference preview from
being shown.

Bug: T214693
Change-Id: If2554ba78072245c27a1f85c46f33e3c58582c1d
2019-05-09 13:23:45 +02:00

69 lines
1.6 KiB
Plaintext

// Don't do any event bubbling on childs like <a><span>[</span>2]</a>, see T214693
#mw-content-text .reference a[ href*='#' ] * {
pointer-events: none;
}
.mwe-popups.mwe-popups-type-reference {
.mwe-popups-title {
margin-top: @popupPadding;
.mw-ui-icon {
vertical-align: middle;
&.mw-ui-icon-element {
min-width: @iconSize;
width: @iconSize;
&:before {
margin: 0;
}
}
&.mw-ui-icon-reference-generic {
/* align narrow icon with the text */
margin-left: -2px;
}
}
}
.mwe-popups-extract {
margin-bottom: 2.75 * @lineHeight;
// Reference previews should have a "lighter" appearence than page previews, where the
// maximum is 7 lines.
max-height: 5 * @lineHeight;
// Reference previews can be smaller than page previews, where the minimum is 2 lines.
min-height: @lineHeight;
&:after {
width: 0;
}
.mwe-popups-fade {
position: absolute;
width: 100%;
height: @lineHeight;
background-color: transparent;
background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) );
background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) );
background-image: linear-gradient( rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) );
opacity: 0;
pointer-events: none; // Allows clicking "through" the element
.transition( opacity 250ms ease );
}
&.mwe-popups-fade-out .mwe-popups-fade {
opacity: 1;
}
.mw-parser-output {
max-height: inherit;
overflow: auto;
}
}
.mwe-popups-read-link {
// Same font size as the read link in disambiguation popups
font-size: 12px;
}
}