mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/CookieWarning
synced 2024-09-23 18:28:35 +00:00
Redesign mobile CookieWarning banner
Based on design input from Reading web team (Nirzar). Bug: T146077 Change-Id: I99aa74842486c4c397462dd51f55c272ae17ad07
This commit is contained in:
Florian Schmidt
parent
1143f1e20d
commit
9b342e875b
|
|
@ -91,10 +91,12 @@
|
|||
},
|
||||
"ext.CookieWarning.styles": {
|
||||
"position": "top",
|
||||
"styles": "resources/ext.CookieWarning/ext.CookieWarning.less",
|
||||
"styles": "resources/ext.CookieWarning/ext.CookieWarning.less"
|
||||
},
|
||||
"ext.CookieWarning.mobile.styles": {
|
||||
"styles": "resources/ext.CookieWarning/ext.CookieWarning.mobile.less",
|
||||
"targets": [
|
||||
"mobile",
|
||||
"desktop"
|
||||
"mobile"
|
||||
]
|
||||
},
|
||||
"ext.CookieWarning.geolocation": {
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ class CookieWarningHooks {
|
|||
// if a "more information" URL was configured, add a link to it in the cookiewarning
|
||||
// information bar
|
||||
if ( $moreLink ) {
|
||||
$moreLink = Html::element(
|
||||
$moreLink = ' ' . Html::element(
|
||||
'a',
|
||||
[ 'href' => $moreLink ],
|
||||
$sk->msg( 'cookiewarning-moreinfo-label' )->text()
|
||||
|
|
@ -60,29 +60,39 @@ class CookieWarningHooks {
|
|||
if ( !isset( $tpl->data['headelement'] ) ) {
|
||||
$tpl->data['headelement'] = '';
|
||||
}
|
||||
$form = Html::openElement( 'form', [ 'method' => 'POST' ] ) .
|
||||
Html::submitButton(
|
||||
$sk->msg( 'cookiewarning-ok-label' )->text(),
|
||||
[
|
||||
'name' => 'disablecookiewarning',
|
||||
'class' => 'mw-cookiewarning-dismiss'
|
||||
]
|
||||
) .
|
||||
Html::closeElement( 'form' );
|
||||
|
||||
$cookieImage = Html::openElement( 'div', [ 'class' => 'mw-cookiewarning-cimage' ] ) .
|
||||
'🍪' .
|
||||
Html::closeElement( 'div' );
|
||||
|
||||
$isMobile = ExtensionRegistry::getInstance()->isLoaded( 'MobileFrontend' ) &&
|
||||
MobileContext::singleton()->shouldDisplayMobileView();
|
||||
$tpl->data['headelement'] .= Html::openElement(
|
||||
'div',
|
||||
[ 'class' => 'mw-cookiewarning-container' ]
|
||||
) .
|
||||
( $isMobile ? $form : '' ) .
|
||||
Html::openElement(
|
||||
'div',
|
||||
[ 'class' => 'mw-cookiewarning-text' ]
|
||||
) .
|
||||
( $isMobile ? $cookieImage : '' ) .
|
||||
Html::element(
|
||||
'span',
|
||||
[],
|
||||
$sk->msg( 'cookiewarning-info' )->text()
|
||||
) .
|
||||
$moreLink .
|
||||
Html::openElement( 'form', [ 'method' => 'POST' ] ) .
|
||||
Html::submitButton(
|
||||
$sk->msg( 'cookiewarning-ok-label' )->text(),
|
||||
[
|
||||
'name' => 'disablecookiewarning',
|
||||
'class' => 'mw-cookiewarning-dismiss'
|
||||
]
|
||||
) .
|
||||
Html::closeElement( 'form' ) .
|
||||
( !$isMobile ? $form : '' ) .
|
||||
Html::closeElement( 'div' ) .
|
||||
Html::closeElement( 'div' );
|
||||
}
|
||||
|
|
@ -123,7 +133,14 @@ class CookieWarningHooks {
|
|||
public static function onBeforePageDisplay( OutputPage $out ) {
|
||||
if ( self::showWarning( $out->getContext() ) ) {
|
||||
$conf = self::getConfig();
|
||||
$moduleStyles = [ 'ext.CookieWarning.styles' ];
|
||||
if (
|
||||
ExtensionRegistry::getInstance()->isLoaded( 'MobileFrontend' ) &&
|
||||
MobileContext::singleton()->shouldDisplayMobileView()
|
||||
) {
|
||||
$moduleStyles = [ 'ext.CookieWarning.mobile.styles' ];
|
||||
} else {
|
||||
$moduleStyles = [ 'ext.CookieWarning.styles' ];
|
||||
}
|
||||
$modules = [ 'ext.CookieWarning' ];
|
||||
if (
|
||||
$conf->get( 'CookieWarningGeoIPLookup' ) === 'js' &&
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
.mw-cookiewarning-text {
|
||||
span {
|
||||
margin-right: 1em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
form {
|
||||
|
|
|
|||
69
resources/ext.CookieWarning/ext.CookieWarning.mobile.less
Normal file
69
resources/ext.CookieWarning/ext.CookieWarning.mobile.less
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
@import 'minerva.variables';
|
||||
@import 'minerva.mixins';
|
||||
|
||||
@cookieWarningFontSize: 12px;
|
||||
|
||||
.mw-cookiewarning-container {
|
||||
background-color: #ffffff;
|
||||
padding: 16px;
|
||||
font-family: HelveticaNeue;
|
||||
font-size: @cookieWarningFontSize;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
|
||||
.mw-cookiewarning-cimage {
|
||||
width: 28px;
|
||||
height: 100%;
|
||||
font-size: 28px;
|
||||
margin-right: 15px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
/* borrowed from mediawiki/core Login Button, following `ButtonWidget (progressive)` from OOjs UI */
|
||||
.mw-cookiewarning-dismiss {
|
||||
height: 32px;
|
||||
background-color: #f8f9fa;
|
||||
color: #36c;
|
||||
}
|
||||
.mw-cookiewarning-dismiss:hover {
|
||||
background-color: #fff;
|
||||
border-color: #859ecc;
|
||||
box-shadow: none;
|
||||
}
|
||||
.mw-cookiewarning-dismiss:active {
|
||||
background-color: #eff3fa;
|
||||
color: #2a4b8d;
|
||||
border-color: #2a4b8d;
|
||||
}
|
||||
.mw-cookiewarning-dismiss:focus {
|
||||
border-color: #36c;
|
||||
box-shadow: inset 0 0 0 1px #36c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and ( min-width: @deviceWidthTablet ) {
|
||||
.mw-cookiewarning-container {
|
||||
max-width: @contentMaxWidthTablet / @cookieWarningFontSize * 16;
|
||||
margin: 0 @contentPaddingTablet;
|
||||
line-height: @contentPaddingTablet;
|
||||
|
||||
.mw-cookiewarning-cimage {
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and ( min-width: @wgMFDeviceWidthDesktop ) {
|
||||
.mw-cookiewarning-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: @contentMaxWidthTablet / @cookieWarningFontSize * 16;
|
||||
}
|
||||
}
|
||||
|
|
@ -76,21 +76,21 @@ class CookieWarningHooksTest extends MediaWikiLangTestCase {
|
|||
'http://google.de',
|
||||
false,
|
||||
false,
|
||||
'<a href="http://google.de">More information</a>',
|
||||
' <a href="http://google.de">More information</a>',
|
||||
],
|
||||
[
|
||||
true,
|
||||
'',
|
||||
'http://google.de',
|
||||
false,
|
||||
'<a href="http://google.de">More information</a>',
|
||||
' <a href="http://google.de">More information</a>',
|
||||
],
|
||||
[
|
||||
true,
|
||||
'',
|
||||
false,
|
||||
'http://google.de',
|
||||
'<a href="http://google.de">More information</a>',
|
||||
' <a href="http://google.de">More information</a>',
|
||||
],
|
||||
// the config should be the used, if set (no matter if the messages are used or not)
|
||||
[
|
||||
|
|
@ -98,21 +98,21 @@ class CookieWarningHooksTest extends MediaWikiLangTestCase {
|
|||
'http://google.de',
|
||||
false,
|
||||
'http://google123.de',
|
||||
'<a href="http://google.de">More information</a>',
|
||||
' <a href="http://google.de">More information</a>',
|
||||
],
|
||||
[
|
||||
true,
|
||||
'http://google.de',
|
||||
'http://google1234.de',
|
||||
'http://google123.de',
|
||||
'<a href="http://google.de">More information</a>',
|
||||
' <a href="http://google.de">More information</a>',
|
||||
],
|
||||
[
|
||||
true,
|
||||
'',
|
||||
'http://google.de',
|
||||
'http://google123.de',
|
||||
'<a href="http://google.de">More information</a>',
|
||||
' <a href="http://google.de">More information</a>',
|
||||
],
|
||||
];
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue