wikimedia/mediawiki-extensions-Echo
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo synced 2024-09-24 10:49:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Create chevron using pseudo elements

Browse source 
IE8+ supports the pseudo element. The world will not explode if
IE6 and 7 do not have the chevron.

This simplifies code by dropping the use of the pokey element

Note: I know we can drop using the image too but I decided not to do
that in this patch.

Change-Id: Ia9ac434461e63bc2cf8554060126995ac65a3531
This commit is contained in:
jdlrobson 2014-08-07 14:03:32 -07:00
parent bee2fe3af1
commit 106c2d2215
4 changed files with 19 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
modules/overlay/ext.echo.overlay.init.js
View file

@ -30,9 +30,6 @@
.hide()
.appendTo( $( '#pt-notifications' ) );
// Create the pokey (aka chevron)
$overlay.before( $( '<div>' ).addClass( 'mw-echo-overlay-pokey' ) );
mw.hook( 'ext.echo.overlay.beforeShowingOverlay' ).fire( $overlay );
// Show the notifications overlay
@ -55,7 +52,7 @@
} );
$( 'body' ).click( function ( e ) {
if ( ! $( e.target ).is( '.mw-echo-overlay, .mw-echo-overlay *, .mw-echo-overlay-pokey, #pt-notifications a' ) ) {
if ( ! $( e.target ).is( '.mw-echo-overlay, .mw-echo-overlay *, #pt-notifications a' ) ) {
mw.echo.overlay.removeOverlay();
}
} );

2
modules/overlay/ext.echo.overlay.js
View file

@ -402,7 +402,7 @@
} );
},
removeOverlay: function () {
$( '.mw-echo-overlay, .mw-echo-overlay-pokey' ).fadeOut( 'fast',
$( '.mw-echo-overlay' ).fadeOut( 'fast',
function () {
$( this ).remove();
}

17
modules/overlay/ext.echo.overlay.less
View file

@ -1,7 +1,8 @@
@offset: 200px;
.mw-echo-overlay {
position: absolute;
top: 30px;
left: -200px;
left: -@offset;
border: 1px solid silver;
background-color: #fff;
width: 450px;
@ -10,17 +11,21 @@
color: #6D6D6D;
z-index: 100;
box-shadow: 0 3px 8px rgba(50, 50, 50, 0.35);
}
.mw-echo-overlay-pokey {
/* @embed */
// IE8
&:before,
&::before {
content: '';
background-image: url('PokeyNorth.png');
background-repeat: no-repeat;
width: 21px;
height: 11px;
position: absolute;
z-index: 101;
top: 20px;
left: -5px;
top: -11px;
// subtract half the width from the offset and then add the left box shadow
left: @offset - 10px + 3px;
}
}

3
modules/overlay/ext.echo.overlay.modern.css
View file

@ -9,9 +9,6 @@ body #p-personal {
left: -20px;
top: 31px;
}
#p-personal .mw-echo-overlay-pokey {
left: -6px;
}
#p-personal #pt-notifications ul,
#p-personal #pt-notifications li {
text-transform: none;