MediaWiki:Centralnotice-template-Leichte Sprache Banner iPad: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 1: | Zeile 1: | ||
< | <style type="text/css">{{MediaWiki:WMDE_FR2015/Resources/DesktopBanner.css}}</style> | ||
<style> | <style type="text/css">{{MediaWiki:WMDE_FR2015/Resources/icon.css}}</style> | ||
/ | <style type="text/css">{{MediaWiki:WMDE_FR2015/Resources/wlightbox.css}}</style> | ||
. | <script type="text/javascript">{{MediaWiki:WMDE_FR2016/Resources/BannerValues.js}}</script> | ||
. | <script type="text/javascript">{{MediaWiki:WMDE_FR2016/Resources/DesktopBanner.js | ||
| donations-date-base = ' + window.GlobalBannerSettings['donations-date-base'] + ' | |||
| donations-collected-base = ' + window.GlobalBannerSettings['donations-collected-base'] + ' | |||
} | | donators-base = ' + window.GlobalBannerSettings['donators-base'] + ' | ||
| appr-donations-per-minute = ' + window.GlobalBannerSettings['appr-donations-per-minute'] + ' | |||
| appr-donators-per-minute = ' + window.GlobalBannerSettings['appr-donators-per-minute'] + ' | |||
}} | |||
</script> | |||
<script type="text/javascript">{{MediaWiki:WMDE_FR2016/Resources/CountCampaignDays.js | |||
| campaign-start-date = 2016-11-09 | |||
}} | |||
</script> | |||
<script type="text/javascript">{{MediaWiki:WMDE_FR2015/Resources/CustomDayName.js}}</script> | |||
<script type="text/javascript">{{MediaWiki:WMDE_FR2016/Resources/wlightbox.js}}</script> | |||
<style type="text/css"> | |||
#WMDE_Banner-facts { | |||
background-color:#2b8156; | |||
} | |||
#WMDE_Banner_info { | |||
color: #ffffff; | |||
} | |||
#WMDE_Banner-text { | |||
text-align:left; | |||
color: #ffffff; | |||
} | |||
- | |||
} | |||
#WMDE_Banner-text-salute { | |||
color: #ffffff; | |||
font-size: 17px; | |||
font-weight: bold; | |||
font- | line-height: 1.2em; | ||
- | margin: 4px 10px 4px 35px; | ||
- | text-align: justify; | ||
margin-bottom: 0; | |||
} | padding-bottom: 0; | ||
} | |||
#WMDE_BannerForm-wrapper { | |||
- | background-color: #ffffff; | ||
padding: 0 10px; | |||
} | |||
# | #WMDE_Banner-form fieldset { | ||
width: 95%; | |||
border: 0; | |||
margin: 0 auto; | |||
padding: 0 0.5em 0.5em 0.5em; | |||
} | } | ||
# | #WMDE_Banner-frequency ul, | ||
#WMDE_Banner-amounts ul, | |||
#WMDE_Banner-payment ul { | |||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
display: table; | |||
margin: 0 0 0.3em; | |||
padding: 0; | |||
list-style: none; | |||
} | } | ||
# | #WMDE_Banner-form legend { | ||
display: none; | |||
width: 100%; | width: 100%; | ||
margin- | margin: 0; | ||
padding: 0 0 0.3em 0; | |||
text-align: center; | |||
font-size: .9em; | |||
color: rgba(0,0,0,0.42); | |||
} | } | ||
/* --- Common Button Styles --- */ | |||
.WMDE_Banner-btn { | |||
background: #f8f9fa; | |||
border: 1px solid #9aa0a7; | |||
border-radius: 2px; | |||
padding: 11px 0; | |||
width: 100%; | |||
cursor: pointer; | |||
display: inline-block; | |||
margin: 0 1px; | |||
text-align: center; | |||
font-weight: bold; | |||
} | } | ||
. | .WMDE_Banner-btn:hover { | ||
background-color: #ffffff; | |||
color: #444444; | |||
border-color: #a2a9b1; | |||
} | } | ||
.WMDE_Banner-btn.checked { | |||
background: #2a4b8d; | |||
border-color: #7d8389; | |||
color: #ffffff; | |||
} | } | ||
#WMDE_Banner-payment .btn-payment-type { | |||
background: #f8f9fa; | |||
font-size: 0.9em; | |||
color: #3366cc; | |||
} | } | ||
/* --- Frequency Buttons --- */ | |||
#WMDE_Banner-frequency li { | |||
display: table-cell; | |||
width: 33%; | |||
padding: 0 2% 0 0; | |||
vertical-align: top; | |||
} | } | ||
body.rtl #WMDE_Banner-frequency li { padding: 0 0 0 2%; } | |||
#WMDE_Banner-frequency label { | |||
width: 100%; | |||
display: block; | display: block; | ||
font-size: .9em; | |||
} | } | ||
@media (min- | /*@media (min-width : 1100px) { #WMDE_Banner-frequency label { font-size: .95em; } }*/ | ||
@media (min-width : 1200px) { | |||
/*#WMDE_Banner-frequency label { | |||
font-size: 1em; | |||
} | }*/ | ||
@media (min-width : | /*#WMDE_Banner-payment .WMDE_Banner-btn { | ||
min-height: 2em !important; | |||
font-size: | |||
} | } | ||
.WMDE_Banner-btn { | |||
padding: 4px 0; | |||
}*/ | |||
} | } | ||
#WMDE_Banner-frequency input[type="radio"] { | |||
border: 0; | |||
clip: rect(0 0 0 0); | |||
height: 1px; | |||
margin: -1px; | |||
overflow: hidden; | |||
padding: 0; | |||
position: absolute; | position: absolute; | ||
width: 1px; | |||
} | } | ||
/* --- Amount Buttons --- */ | |||
#WMDE_Banner-amounts legend { | |||
display: block; | |||
} | } | ||
#WMDE_Banner-amounts li { | |||
display: table-cell; | |||
width: 23%; | |||
height: 100%; | |||
height | |||
clear: none; | clear: none; | ||
padding: 0 2% 0 0; | |||
vertical-align: top; | |||
font-weight: bold; | |||
} | } | ||
body.rtl #WMDE_Banner-amounts li { | |||
body.rtl | padding: 0 0 0 2%; | ||
} | } | ||
/* Chrome specific - need to be floated for height 100% to work */ | |||
@media screen and (-webkit-min-device-pixel-ratio:0) { | |||
/* | #WMDE_Banner-amounts li { float: left; } | ||
@media ( | body.rtl #WMDE_Banner-amounts li { float: right; } | ||
body.rtl | |||
} | } | ||
#WMDE_Banner-amounts li input[type="radio"] { | |||
border: 0; | border: 0; | ||
clip: rect(0 0 0 0); | clip: rect(0 0 0 0); | ||
Zeile 265: | Zeile 185: | ||
} | } | ||
#WMDE_Banner-amounts label { | |||
font-size: .9em; | |||
text-transform: none; | |||
font-size: | |||
text- | |||
} | } | ||
/*@media (min-width : 800px) { #WMDE_Banner-amounts .predefined_amount { font-size: 1em; } } | |||
@media (min-width : 1100px) { #WMDE_Banner-amounts .predefined_amount { font-size: 1.1em; } }*/ | |||
/* --- Other Amount --- */ | |||
# | #amount_custom .WMDE_Banner-btn { | ||
display: inline-block; | |||
height: 100%; | |||
width: 100%; | |||
padding: 0.2em 0 0.4em 0; | |||
} | } | ||
#amount_custom label { | |||
display: block; | |||
height: auto; | |||
margin-bottom: 0.2em; | |||
font-size: .7em; | |||
line-height: 1; | |||
cursor: pointer; | |||
} | } | ||
#amount_custom input { | |||
width: 85%; | |||
# | font-size: .9em; | ||
padding: 11px .4em; | |||
text-align: center; | text-align: center; | ||
border: 1px solid #9aa0a7; | |||
border | margin: 0 1px; | ||
} | } | ||
# | #amount_custom .checked input { | ||
background: #2a4b8d; | |||
color: # | color: #ffffff; | ||
} | } | ||
# | #amount_custom input:hover { | ||
color: # | box-shadow: 0 0 0 1px #3366cc inset; | ||
background-color: #ffffff; | |||
color: #444444; | |||
border-color: #a2a9b1; | |||
} | } | ||
/* --- Payment method Buttons --- */ | |||
#WMDE_Banner-payment { | |||
padding-bottom: 0.25em; | |||
} | } | ||
#WMDE_Banner-payment ul li { | |||
display: table-cell; | |||
padding: 0 2% 0 0; | |||
vertical-align: top; | |||
width: 50%; | |||
margin-bottom: 4px; | |||
} | } | ||
body.rtl #WMDE_Banner-payment ul li { | |||
padding: 0 0 0 2%; | |||
} | } | ||
#WMDE_Banner-window button { | |||
width: 100%; | width: 100%; | ||
height: 100%; | |||
font-size: .9em; | font-size: .9em; | ||
float: none; | |||
font-family: inherit; | |||
} | } | ||
. | @media all and (min-width: 1px) and (max-width: 900px), all and (min-width: 1050px) and (max-width: 1200px) { | ||
#WMDE_Banner-payment .btn-payment-type { | |||
min-height: 4em; | |||
} | |||
} | } | ||
@media all and (min-width: 1px) and (max-width: 1050px) { | |||
#WMDE_Banner-payment ul { | |||
margin: 0; | |||
width: 100%; | width: 100%; | ||
} | |||
} | |||
#WMDE_Banner-payment ul li { | |||
display: block; | display: block; | ||
width: 100%; | width: 100%; | ||
} | |||
} | } | ||
#WMDE_Banner div.active { | |||
text-decoration: underline; | |||
border-bottom: none; | |||
background: transparent; | |||
} | } | ||
. | #WMDE_Banner .highlight { | ||
background-color: #ffdd5b; | |||
color: #000000; | |||
color: # | |||
} | } | ||
/* --- Donation meter --- */ | |||
#WMDE_Banner #donationMeterWrapper { | |||
margin: 0 10px 10px 35px; | |||
} | } | ||
#WMDE_Banner-close { | |||
background-image: url('//upload.wikimedia.org/wikipedia/commons/c/cb/Close_x_-_black.png'); | |||
background-color: transparent; | |||
background-size: 12px auto; | |||
} | } | ||
#application-of-funds-link { | |||
cursor: pointer; | |||
margin-left: 1.5em; | |||
} | } | ||
#application-of-funds-link:hover { | |||
text-decoration: underline; | |||
} | } | ||
#info-application-of-funds { | |||
width: 720px; | |||
margin-top: -5px; | |||
} | } | ||
#info-application-of-funds hr { | |||
margin: 1.4em 0; | |||
margin: | |||
} | } | ||
#info-application-of-funds-footer { | |||
font-size: 0.8em; | |||
} | } | ||
#info-application-of-funds-footer div { | |||
width: 49%; | |||
display: inline-block; | |||
-- | |||
width: | |||
display: block | |||
text-align: center; | text-align: center; | ||
} | } | ||
# | #info-application-of-funds-footer a { | ||
color: #3366cc; | |||
} | } | ||
</style> | |||
<div id="WMDE_Banner"> | |||
<div style="box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);"> | |||
} | <form id="WMDE_Banner-form" method="post" name="donationForm" | ||
action="https://spenden.wikimedia.de/donation/new?piwik_campaign={{{CampaignName}}}&piwik_kwd={{{BannerName}}}"> | |||
<table id="WMDE_Banner-facts"> | |||
<tbody> | |||
<tr> | |||
<td> | |||
<table style="height: 100%" id="WMDE_Banner-message-wrapper"> | |||
<tbody> | |||
<tr> | |||
<td style="height: 1%" valign="top"> | |||
<p id="WMDE_Banner-text-salute">{{{banner-text-salutation}}}</p> | |||
<p id="WMDE_Banner-text">{{{banner-text}}}</p> | |||
</td> | |||
</tr> | |||
<tr> | |||
<td style="vertical-align:middle;" valign="center"> | |||
{{MediaWiki:WMDE_FR2016/Resources/ProgressBar | |||
| size=32 | |||
| tip-type=round | |||
| minFillWidth=100 | |||
| border-color=#FFDD5B | |||
| fill-color=#FFDD5B | |||
| background-color=#000000 | |||
| text-color-inner=#000000 | |||
| text-color-outer=#FFFFFF | |||
| margin=40px 0 | |||
| text-inner-left=Nur noch <span id="numDaysLeft">1 Tag</span> | |||
}} | |||
</td> | |||
</tr> | |||
<tr> | |||
<td style="height: 1%; vertical-align: bottom;"> | |||
<div id="WMDE_Banner_info"> | |||
<div style="float: right;"> | |||
<span id="application-of-funds-link" data-href="#info-application-of-funds">Wohin geht meine Spende?</span> | |||
</div> | |||
<div> | |||
<span class="binfo-ucase">Spendenkonto</span> | |||
<span>Wikimedia Foerdergesellschaft</span> | |||
<span>BIC</span> | |||
<span class="binfo-bold">BFSWDE33BER</span> | |||
<span>IBAN <span class="binfo-bold" style="margin: 0 0 0 10px;">DE33 1002 0500 0001 1947 00</span></span> | |||
</div> | |||
</div> | |||
</td> | |||
</tr> | |||
</tbody> | |||
</table> | |||
</td> | |||
<td id="WMDE_BannerForm-wrapper"> | |||
<fieldset id="WMDE_Banner-frequency" class="cf"> | |||
<div style="padding-top: 0.5em;" class="interval-options"> | |||
<ul> | |||
<li> | |||
<input type="radio" id="interval_multiple" /> | |||
<label class="WMDE_Banner-btn donation-frequency" for="interval_onetime"> | |||
<input type="radio" id="interval_onetime"> | |||
einmalig | |||
</label> | |||
</li> | |||
<li> | |||
<label class="WMDE_Banner-btn donation-interval" for="interval1"> | |||
<input type="radio" id="interval1" name="interval" value="1"> | |||
monatlich | |||
</label> | |||
</li> | |||
<li> | |||
<label class="WMDE_Banner-btn donation-interval" for="interval12"> | |||
<input type="radio" id="interval12" name="interval" value="12"> | |||
jährlich | |||
</label> | |||
</li> | |||
</ul> | |||
</div> | |||
</fieldset> | |||
<fieldset id="WMDE_Banner-amounts" class="cf"> | |||
<ul> | |||
<li id="amount_total_1"> | |||
<input type="radio" name="betrag_auswahl" id="field-amount_total_1" value="5"> | |||
<label id="amount_label_1" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_1">5 €</label> | |||
</li> | |||
<li id="amount_total_2"> | |||
<input type="radio" name="betrag_auswahl" id="field-amount_total_2" value="15"> | |||
<label id="amount_label_2" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_2">15 €</label> | |||
</li> | |||
<li id="amount_total_3"> | |||
<input type="radio" name="betrag_auswahl" id="field-amount_total_3" value="25"> | |||
<label id="amount_label_3" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_3">25 €</label> | |||
</li> | |||
<li id="amount_total_4"> | |||
<input type="radio" name="betrag_auswahl" id="field-amount_total_4" value="50"> | |||
<label id="amount_label_4" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_4">50 €</label> | |||
</li> | |||
</ul> | |||
<ul> | |||
<li id="amount_total_5"> | |||
<input type="radio" name="betrag_auswahl" id="field-amount_total_5" value="75"> | |||
<label id="amount_label_5" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_5">75 €</label> | |||
</li> | |||
<li id="amount_total_6"> | |||
<input type="radio" name="betrag_auswahl" id="field-amount_total_6" value="100"> | |||
<label id="amount_label_6" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_6">100 €</label> | |||
</li> | |||
<li id="amount_total_7"> | |||
<input type="radio" name="betrag_auswahl" id="field-amount_total_7" value="250"> | |||
<label id="amount_label_7" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_7">250 €</label> | |||
</li> | |||
<li id="amount_custom"> | |||
<input type="text" name="amountGiven" id="amount-other-input" size="3" autocomplete="off" value="" placeholder="anderer"> | |||
</li> | |||
</ul> | |||
</fieldset> | |||
<fieldset id="WMDE_Banner-payment" class="cf"> | |||
<ul> | |||
<li> | |||
<button class="WMDE_Banner-btn btn-payment-type" onclick="$('#zahlweise').val('BEZ');"> | |||
Lastschrift | |||
</button> | |||
</li> | |||
<li> | |||
<button class="WMDE_Banner-btn btn-payment-type" onclick="$('#zahlweise').val('UEB');"> | |||
Überweisung | |||
</button> | |||
. | </li> | ||
</ul> | |||
<ul> | |||
<li> | |||
<button class="WMDE_Banner-btn btn-payment-type" onclick="$('#zahlweise').val('MCP');"> | |||
Kreditkarte | |||
</button> | |||
</li> | |||
<li> | |||
<button class="WMDE_Banner-btn btn-payment-type" onclick="$('#zahlweise').val('PPL');"> | |||
PayPal | |||
</button> | |||
</li> | |||
</ul> | |||
</fieldset> | |||
<span id="WMDE_Banner-close" style="position: absolute; right: 0;"> </span> | |||
</td> | |||
</ | |||
< | </tr> | ||
</tbody> | |||
</table> | |||
<div id=" | <input type="hidden" id="periode" name="periode" value="0"/> | ||
<input type="hidden" id="intervalType" name="intervalType" value="0"/> | |||
<input type="hidden" id="impCount" name="impCount" value=""/> | |||
<input type="hidden" id="bImpCount" name="bImpCount" value=""/> | |||
<input type="hidden" id="zahlweise" name="zahlweise" value=""/> | |||
</form> | |||
</div> | |||
<img id="WMDE_Banner-close-ct" src="//upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" border="0" height="0" width="0"> | |||
</div> | |||
<div class="wlightbox-contents"> | |||
<div id="donationperiodInfo"> | |||
<div class="container"><ul class="checks"> | |||
<li>Jederzeit und ab sofort kündbar. Eine formlose E-Mail genügt.</li> | |||
<li>Betrag und Zahlungsintervall problemlos änderbar.</li> | |||
<li>Vergrößerte Planungssicherheit und Nachhaltigkeit.</li> | |||
<li>Automatischer Versand der Zuwendungsbestätigung. </li> | |||
<li>Auf Wunsch Versand unseres Tätigkeitsberichts.</li> | |||
</ul> | |||
</div> | |||
</div> | |||
</div> | |||
<div id=" | <div class="wlightbox-contents"> | ||
<div id="info-application-of-funds"> | |||
<div class="wlightbox-title clearfix"> | |||
<span class="icon-bar-chart wlightbox-icon"></span>Wohin geht meine Spende? | |||
<a href="http://wikimedia.de/wiki/Transparenz" target="_blank"><span class="logo-itz-white f-right no-margin"></span></a> | |||
</div> | |||
<p> | |||
<img src="//upload.wikimedia.org/wikipedia/commons/8/8a/WMDE-application-of-funds-diagram-2017.png" /> | |||
</p> | |||
<div> | |||
<img src="//upload.wikimedia.org/wikipedia/commons/0/00/WMDE-application-of-funds-2017.svg" /> | |||
</div> | </div> | ||
< | <hr/> | ||
<div id="info-application-of-funds-footer"> | |||
<div> | |||
< | <a id="link-wmf-annual-plan" href="https://meta.wikimedia.org/wiki/Wikimedia_Foundation_Annual_Plan/2016-2017/Final" target="_blank">Erfahren Sie mehr zum Jahresplan<br>der Wikimedia Foundation</a> | ||
</div> | </div> | ||
<div> | |||
<div | <a id="link-wmde-annual-plan" href="https://meta.wikimedia.org/wiki/Wikimedia_Deutschland/Jahresplanung_2017/Ziele,_Indikatoren_und_Wirtschaftsplan" target="_blank">Erfahren Sie mehr zum Jahresplan<br>von Wikimedia Deutschland</a> | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | |||
</div> | |||
<script type="text/javascript"> | |||
$( '#interval_onetime' ).off( 'click' ).on( 'click', function () { | |||
$( '#interval_multiple' ).prop( 'checked', false ); | |||
$( '.donation-interval' ).removeClass( 'checked' ); | |||
} ); | |||
$( '#WMDE_Banner-frequency' ).find( 'label' ).click( function () { | |||
$( '#WMDE_Banner-frequency' ).find( 'label' ).removeClass( 'checked' ); | |||
$( this ).addClass( 'checked' ); | |||
} ); | |||
$( '.donation-interval' ).click( function () { | |||
$( '.donation-interval' ).removeClass( 'checked' ); | |||
$( this ).addClass( 'checked' ); | |||
$( '.donation-frequency' ).removeClass( 'checked' ); | |||
$( '#interval_onetime' ).prop( 'checked', false ); | |||
$( '#interval_multiple' ).prop( 'checked', 'checked' ); | |||
}); | |||
$( '#WMDE_Banner-amounts' ).find( 'label' ).click( function () { | |||
$( '#WMDE_Banner-amounts' ).find( 'label' ).removeClass( 'checked' ); | |||
$( '#amount-other-input' ).parent().removeClass( 'checked' ); | |||
$( this ).addClass( 'checked' ); | |||
} ); | |||
$( '#amount-other-input' ).click( function () { | |||
$( '#WMDE_Banner-amounts' ).find( 'label' ).removeClass( 'checked' ); | |||
$( this ).parent().addClass( 'checked' ); | |||
} ); | |||
} | |||
{{ | function addSpace() { | ||
if ( !$( '#WMDE_Banner' ).is( ':visible' ) ) { | |||
return; | |||
} | |||
var bannerHeight = $( 'div#WMDE_Banner' ).height(), | |||
skin = getSkin(); | |||
switch ( skin ) { | |||
case 'vector': | |||
$( '#mw-panel' ).animate( {'top':bannerHeight + 160},1000 ); | |||
$( '#mw-head' ).animate( {'top':bannerHeight},1000 ); | |||
$( '#mw-page-base' ).animate( {'padding-top':bannerHeight},1000); | |||
case 'minerva': | |||
$( '#mw-mf-viewport' ).animate( {'top':bannerHeight},1000 ); | |||
break; | |||
} | |||
} | |||
function addSpaceInstantly() { | |||
$('# | if ( !$( '#WMDE_Banner' ).is( ':visible' ) ) { | ||
$('# | return; | ||
} | |||
var bannerHeight = $( 'div#WMDE_Banner' ).height(), | |||
skin = getSkin(); | |||
switch ( skin ) { | |||
case 'vector': | |||
$( '#mw-panel' ).css( { top: bannerHeight + 160 } ); | |||
$( '#mw-head' ).css( { top: bannerHeight } ); | |||
$( '#mw-page-base' ).css( { paddingTop: bannerHeight } ); | |||
case 'minerva': | |||
$( '#mw-mf-viewport' ).css( { top: bannerHeight } ); | |||
break; | |||
} | |||
} | |||
function displayBanner() { | |||
if ( !showBanner ) { | |||
return; | |||
} | } | ||
var bannerElement = $( '#WMDE_Banner' ), | |||
bannerHeight = bannerElement.height(); | |||
$( 'body' ).prepend( $( '#centralNotice' ) ); | |||
bannerElement.css( 'top', -bannerHeight ); | |||
bannerElement.css( 'display', 'block' ); | |||
addSpace(); | |||
bannerElement.animate( { top: 0 }, 1000 ); | |||
setTimeout( function () { | |||
Banner.progressBar.animateProgressBar(); | |||
}, 1000 ); | |||
$( window ).resize( function () { | |||
$( | addSpaceInstantly(); | ||
calculateLightboxPosition(); | |||
Banner.progressBar.setProgressBarSize.apply( Banner.progressBar ); | |||
} | } ); | ||
} | |||
$( | function calculateLightboxPosition() { | ||
$( '#wlightbox' ).css( { right: ( $('body').width() - 750 ) / 2 + 'px', top: '20px', top: ( $( '#WMDE_Banner' ).height() + 20 ) + 'px' } ); | |||
} | |||
var | function addMiniBanner() { | ||
/* add the "nag" bar. Has to be done after we show the main banner (to get its height) */ | |||
var bigBannerHeight = $('#WMDE_Banner').height(); | |||
$( | $( window ).scroll( function () { | ||
if ( $( window ).scrollTop() <= bigBannerHeight ) { | |||
$( '#WMDE_Banner-nag' ).finish(); | |||
$( '#WMDE_Banner-nag' ).css( 'display', 'none' ); | |||
} else { | |||
// only show mini banner if no lightbox is visible | |||
if ( !$( '#wlightbox' ).is(':visible') ) { | |||
$( '#WMDE_Banner-nag' ).delay( 1500 ).slideDown(); | |||
} | } | ||
} | |||
}); | }); | ||
$( ' | $( '#WMDE_Banner-nag-close' ).click( function ( event ) { | ||
$( '#WMDE_Banner-nag' ).remove(); | |||
event.stopPropagation(); | |||
}); | }); | ||
$( ' | $( '#WMDE_Banner-nag' ).click( function () { | ||
window.scrollTo( 0, 0 ); | |||
}); | }); | ||
} | |||
$( document ).ready( function() { | |||
var lightboxOpened = false; | |||
$( '#WMDE_Banner-payment button' ).click( function( e ) { | |||
}); | return validateForm(); | ||
} ); | |||
$('. | $( '#interval_onetime' ).off( 'click' ) // remove handler from common-banner.js | ||
.on( 'click', function () { | |||
$( '#interval_multiple' ).prop( 'checked', false ); | |||
}); | $(".donation-interval").removeClass("checked"); | ||
} ); | |||
var impCount = increaseImpCount(); | |||
$( '#impCount' ).val( impCount ); | |||
var bannerImpCount = increaseBannerImpCount( "{{{banner}}}" ); | |||
$( '#bImpCount' ).val( bannerImpCount ); | |||
if ( mw.config.get( 'wgAction' ) === "view" ) { | |||
setTimeout( displayBanner, 7500 ); | |||
} | |||
if ( mw.config.get( 'wgUserName' ) !== null ) { | |||
$( '#wikilogin' ).val( 'yes' ); | |||
} | |||
} | |||
$( 'span#numDaysLeft' ).text( getDaysRemaining() ); | |||
$( 'span#weekday' ).text( getCurrentDayName( getCurrentGermanDay ) ); | |||
if ( getCurrentDayName( getCurrentGermanDay ) !== getCurrentGermanDay() ) { | |||
$( '#weekdayPrepPhrase' ).text( 'am heutigen' ); | |||
} | } | ||
$( 'span#campaignDay' ).text( getCampaignDayString() ); | |||
$( 'span#donorsValue' ).html( addPointsToNum( Math.floor( getApprDonatorsRaw() ) ) ); | |||
$( '.bannerImpressions').text( window.GlobalBannerSettings[ 'milion-impressions-per-day' ] ); | |||
$( '#campaignDaySentence' ).text( getCampaignDaySentence() ); | |||
if ( | if ( getDaysSinceCampaignStart() < 1 ) { | ||
$( '#donationRemaining' ).text( 'Unser Spendenziel: ' + ( GlobalBannerSettings.goalSum / 1000000 ).toFixed( 1 ).replace( '.', ',' ) + ' Mio. €' ); | |||
$( '#donationText' ).html( '' ); | |||
} | } | ||
}); | $( '#application-of-funds-link' ).wlightbox( { container: $( '#mw-page-base' ), right: ( $('body').width() - 750 ) / 2 + 'px', top: function() { return ( $( '#WMDE_Banner' ).height() + 20 ) + 'px'; } } ); | ||
$( '#application-of-funds-link' ).click( function ( e ) { | |||
$( '#WMDE_Banner-close-ct' ).attr( 'src', 'https://tracking.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/application-of-funds-lightbox-opened/{{{BannerName}}}&rec=1' ); | |||
} ); | |||
$( '#link-wmf-annual-plan' ).click( function ( e ) { | |||
$( '#WMDE_Banner-close-ct' ).attr( 'src', 'https://tracking.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/wmf-annual-plan/{{{BannerName}}}&rec=1' ); | |||
} ); | |||
$( '#link-wmde-annual-plan' ).click( function ( e ) { | |||
$( '#WMDE_Banner-close-ct' ).attr( 'src', 'https://tracking.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/wmde-annual-plan/{{{BannerName}}}&rec=1' ); | |||
} ); | |||
} ); | |||
</script> | </script> |
Version vom 10. September 2018, 16:28 Uhr
<style type="text/css">MediaWiki:WMDE FR2015/Resources/DesktopBanner.css</style> <style type="text/css">MediaWiki:WMDE FR2015/Resources/icon.css</style> <style type="text/css">MediaWiki:WMDE FR2015/Resources/wlightbox.css</style> <script type="text/javascript">MediaWiki:WMDE FR2016/Resources/BannerValues.js</script> <script type="text/javascript">MediaWiki:WMDE FR2016/Resources/DesktopBanner.js </script> <script type="text/javascript">MediaWiki:WMDE FR2016/Resources/CountCampaignDays.js </script> <script type="text/javascript">MediaWiki:WMDE FR2015/Resources/CustomDayName.js</script> <script type="text/javascript">MediaWiki:WMDE FR2016/Resources/wlightbox.js</script> <style type="text/css">
#WMDE_Banner-facts { background-color:#2b8156; }
#WMDE_Banner_info { color: #ffffff; }
#WMDE_Banner-text { text-align:left; color: #ffffff; }
#WMDE_Banner-text-salute { color: #ffffff; font-size: 17px; font-weight: bold; line-height: 1.2em; margin: 4px 10px 4px 35px; text-align: justify; margin-bottom: 0; padding-bottom: 0; }
- WMDE_BannerForm-wrapper {
background-color: #ffffff; padding: 0 10px; }
- WMDE_Banner-form fieldset {
width: 95%; border: 0; margin: 0 auto; padding: 0 0.5em 0.5em 0.5em;
}
- WMDE_Banner-frequency ul,
- WMDE_Banner-amounts ul,
- WMDE_Banner-payment ul {
width: 100%; height: 100%; display: table; margin: 0 0 0.3em; padding: 0; list-style: none;
}
- WMDE_Banner-form legend {
display: none; width: 100%; margin: 0; padding: 0 0 0.3em 0; text-align: center; font-size: .9em; color: rgba(0,0,0,0.42);
}
/* --- Common Button Styles --- */
.WMDE_Banner-btn {
background: #f8f9fa; border: 1px solid #9aa0a7; border-radius: 2px; padding: 11px 0; width: 100%; cursor: pointer; display: inline-block; margin: 0 1px; text-align: center; font-weight: bold;
}
.WMDE_Banner-btn:hover {
background-color: #ffffff; color: #444444; border-color: #a2a9b1;
}
.WMDE_Banner-btn.checked {
background: #2a4b8d; border-color: #7d8389; color: #ffffff;
}
- WMDE_Banner-payment .btn-payment-type {
background: #f8f9fa; font-size: 0.9em; color: #3366cc;
}
/* --- Frequency Buttons --- */
- WMDE_Banner-frequency li {
display: table-cell; width: 33%; padding: 0 2% 0 0; vertical-align: top;
} body.rtl #WMDE_Banner-frequency li { padding: 0 0 0 2%; }
- WMDE_Banner-frequency label {
width: 100%; display: block; font-size: .9em;
}
/*@media (min-width : 1100px) { #WMDE_Banner-frequency label { font-size: .95em; } }*/ @media (min-width : 1200px) {
/*#WMDE_Banner-frequency label { font-size: 1em; }*/ /*#WMDE_Banner-payment .WMDE_Banner-btn { min-height: 2em !important; } .WMDE_Banner-btn { padding: 4px 0; }*/
}
- WMDE_Banner-frequency input[type="radio"] {
border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
/* --- Amount Buttons --- */
- WMDE_Banner-amounts legend {
display: block;
}
- WMDE_Banner-amounts li {
display: table-cell; width: 23%; height: 100%; clear: none; padding: 0 2% 0 0; vertical-align: top; font-weight: bold;
} body.rtl #WMDE_Banner-amounts li {
padding: 0 0 0 2%;
}
/* Chrome specific - need to be floated for height 100% to work */ @media screen and (-webkit-min-device-pixel-ratio:0) {
#WMDE_Banner-amounts li { float: left; } body.rtl #WMDE_Banner-amounts li { float: right; }
}
- WMDE_Banner-amounts li input[type="radio"] {
border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
- WMDE_Banner-amounts label {
font-size: .9em; text-transform: none;
}
/*@media (min-width : 800px) { #WMDE_Banner-amounts .predefined_amount { font-size: 1em; } } @media (min-width : 1100px) { #WMDE_Banner-amounts .predefined_amount { font-size: 1.1em; } }*/
/* --- Other Amount --- */
- amount_custom .WMDE_Banner-btn {
display: inline-block; height: 100%; width: 100%; padding: 0.2em 0 0.4em 0;
}
- amount_custom label {
display: block; height: auto; margin-bottom: 0.2em; font-size: .7em; line-height: 1; cursor: pointer;
}
- amount_custom input {
width: 85%; font-size: .9em; padding: 11px .4em; text-align: center; border: 1px solid #9aa0a7; margin: 0 1px;
}
- amount_custom .checked input {
background: #2a4b8d; color: #ffffff;
}
- amount_custom input:hover {
box-shadow: 0 0 0 1px #3366cc inset; background-color: #ffffff; color: #444444; border-color: #a2a9b1;
}
/* --- Payment method Buttons --- */
- WMDE_Banner-payment {
padding-bottom: 0.25em;
}
- WMDE_Banner-payment ul li {
display: table-cell; padding: 0 2% 0 0; vertical-align: top; width: 50%; margin-bottom: 4px;
} body.rtl #WMDE_Banner-payment ul li {
padding: 0 0 0 2%;
}
- WMDE_Banner-window button {
width: 100%; height: 100%; font-size: .9em; float: none; font-family: inherit;
}
@media all and (min-width: 1px) and (max-width: 900px), all and (min-width: 1050px) and (max-width: 1200px) {
#WMDE_Banner-payment .btn-payment-type { min-height: 4em; }
}
@media all and (min-width: 1px) and (max-width: 1050px) {
#WMDE_Banner-payment ul { margin: 0; width: 100%; }
#WMDE_Banner-payment ul li { display: block; width: 100%; }
}
- WMDE_Banner div.active {
text-decoration: underline; border-bottom: none; background: transparent;
}
- WMDE_Banner .highlight {
background-color: #ffdd5b; color: #000000;
}
/* --- Donation meter --- */
- WMDE_Banner #donationMeterWrapper {
margin: 0 10px 10px 35px;
}
- WMDE_Banner-close {
background-image: url('//upload.wikimedia.org/wikipedia/commons/c/cb/Close_x_-_black.png'); background-color: transparent; background-size: 12px auto;
}
- application-of-funds-link {
cursor: pointer; margin-left: 1.5em;
}
- application-of-funds-link:hover {
text-decoration: underline;
}
- info-application-of-funds {
width: 720px; margin-top: -5px;
}
- info-application-of-funds hr {
margin: 1.4em 0;
}
- info-application-of-funds-footer {
font-size: 0.8em;
}
- info-application-of-funds-footer div {
width: 49%; display: inline-block; text-align: center;
}
- info-application-of-funds-footer a {
color: #3366cc;
}
</style>
<form id="WMDE_Banner-form" method="post" name="donationForm" action="https://spenden.wikimedia.de/donation/new?piwik_campaign={{{CampaignName}}}&piwik_kwd={{{BannerName}}}"><tbody> </tbody>
<tbody>
</tbody>
|
<fieldset id="WMDE_Banner-frequency" class="cf"> </fieldset> <fieldset id="WMDE_Banner-amounts" class="cf">
</fieldset> <fieldset id="WMDE_Banner-payment" class="cf">
</fieldset>
|
<input type="hidden" id="periode" name="periode" value="0"/> <input type="hidden" id="intervalType" name="intervalType" value="0"/> <input type="hidden" id="impCount" name="impCount" value=""/> <input type="hidden" id="bImpCount" name="bImpCount" value=""/> <input type="hidden" id="zahlweise" name="zahlweise" value=""/> </form>
<img id="WMDE_Banner-close-ct" src="//upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" border="0" height="0" width="0">
- Jederzeit und ab sofort kündbar. Eine formlose E-Mail genügt.
- Betrag und Zahlungsintervall problemlos änderbar.
- Vergrößerte Planungssicherheit und Nachhaltigkeit.
- Automatischer Versand der Zuwendungsbestätigung.
- Auf Wunsch Versand unseres Tätigkeitsberichts.
Wohin geht meine Spende?
<a href="http://wikimedia.de/wiki/Transparenz" target="_blank"></a>
<img src="//upload.wikimedia.org/wikipedia/commons/8/8a/WMDE-application-of-funds-diagram-2017.png" />
<img src="//upload.wikimedia.org/wikipedia/commons/0/00/WMDE-application-of-funds-2017.svg" />
<script type="text/javascript">
$( '#interval_onetime' ).off( 'click' ).on( 'click', function () { $( '#interval_multiple' ).prop( 'checked', false ); $( '.donation-interval' ).removeClass( 'checked' ); } );
$( '#WMDE_Banner-frequency' ).find( 'label' ).click( function () { $( '#WMDE_Banner-frequency' ).find( 'label' ).removeClass( 'checked' ); $( this ).addClass( 'checked' ); } );
$( '.donation-interval' ).click( function () { $( '.donation-interval' ).removeClass( 'checked' ); $( this ).addClass( 'checked' ); $( '.donation-frequency' ).removeClass( 'checked' ); $( '#interval_onetime' ).prop( 'checked', false ); $( '#interval_multiple' ).prop( 'checked', 'checked' ); });
$( '#WMDE_Banner-amounts' ).find( 'label' ).click( function () { $( '#WMDE_Banner-amounts' ).find( 'label' ).removeClass( 'checked' ); $( '#amount-other-input' ).parent().removeClass( 'checked' ); $( this ).addClass( 'checked' ); } );
$( '#amount-other-input' ).click( function () { $( '#WMDE_Banner-amounts' ).find( 'label' ).removeClass( 'checked' ); $( this ).parent().addClass( 'checked' ); } );
function addSpace() { if ( !$( '#WMDE_Banner' ).is( ':visible' ) ) { return; } var bannerHeight = $( 'div#WMDE_Banner' ).height(), skin = getSkin();
switch ( skin ) { case 'vector': $( '#mw-panel' ).animate( {'top':bannerHeight + 160},1000 ); $( '#mw-head' ).animate( {'top':bannerHeight},1000 ); $( '#mw-page-base' ).animate( {'padding-top':bannerHeight},1000); case 'minerva': $( '#mw-mf-viewport' ).animate( {'top':bannerHeight},1000 ); break; } }
function addSpaceInstantly() { if ( !$( '#WMDE_Banner' ).is( ':visible' ) ) { return; } var bannerHeight = $( 'div#WMDE_Banner' ).height(), skin = getSkin();
switch ( skin ) { case 'vector': $( '#mw-panel' ).css( { top: bannerHeight + 160 } ); $( '#mw-head' ).css( { top: bannerHeight } ); $( '#mw-page-base' ).css( { paddingTop: bannerHeight } ); case 'minerva': $( '#mw-mf-viewport' ).css( { top: bannerHeight } ); break; } }
function displayBanner() { if ( !showBanner ) { return; } var bannerElement = $( '#WMDE_Banner' ), bannerHeight = bannerElement.height(); $( 'body' ).prepend( $( '#centralNotice' ) ); bannerElement.css( 'top', -bannerHeight ); bannerElement.css( 'display', 'block' ); addSpace(); bannerElement.animate( { top: 0 }, 1000 ); setTimeout( function () { Banner.progressBar.animateProgressBar(); }, 1000 );
$( window ).resize( function () { addSpaceInstantly(); calculateLightboxPosition(); Banner.progressBar.setProgressBarSize.apply( Banner.progressBar ); } ); }
function calculateLightboxPosition() { $( '#wlightbox' ).css( { right: ( $('body').width() - 750 ) / 2 + 'px', top: '20px', top: ( $( '#WMDE_Banner' ).height() + 20 ) + 'px' } ); }
function addMiniBanner() { /* add the "nag" bar. Has to be done after we show the main banner (to get its height) */ var bigBannerHeight = $('#WMDE_Banner').height();
$( window ).scroll( function () { if ( $( window ).scrollTop() <= bigBannerHeight ) { $( '#WMDE_Banner-nag' ).finish(); $( '#WMDE_Banner-nag' ).css( 'display', 'none' ); } else { // only show mini banner if no lightbox is visible if ( !$( '#wlightbox' ).is(':visible') ) { $( '#WMDE_Banner-nag' ).delay( 1500 ).slideDown(); } } });
$( '#WMDE_Banner-nag-close' ).click( function ( event ) { $( '#WMDE_Banner-nag' ).remove(); event.stopPropagation(); });
$( '#WMDE_Banner-nag' ).click( function () { window.scrollTo( 0, 0 ); }); }
$( document ).ready( function() { var lightboxOpened = false; $( '#WMDE_Banner-payment button' ).click( function( e ) { return validateForm(); } );
$( '#interval_onetime' ).off( 'click' ) // remove handler from common-banner.js .on( 'click', function () { $( '#interval_multiple' ).prop( 'checked', false ); $(".donation-interval").removeClass("checked"); } ); var impCount = increaseImpCount(); $( '#impCount' ).val( impCount ); var bannerImpCount = increaseBannerImpCount( "{{{banner}}}" ); $( '#bImpCount' ).val( bannerImpCount );
if ( mw.config.get( 'wgAction' ) === "view" ) { setTimeout( displayBanner, 7500 ); } if ( mw.config.get( 'wgUserName' ) !== null ) { $( '#wikilogin' ).val( 'yes' ); }
$( 'span#numDaysLeft' ).text( getDaysRemaining() ); $( 'span#weekday' ).text( getCurrentDayName( getCurrentGermanDay ) ); if ( getCurrentDayName( getCurrentGermanDay ) !== getCurrentGermanDay() ) { $( '#weekdayPrepPhrase' ).text( 'am heutigen' ); } $( 'span#campaignDay' ).text( getCampaignDayString() ); $( 'span#donorsValue' ).html( addPointsToNum( Math.floor( getApprDonatorsRaw() ) ) ); $( '.bannerImpressions').text( window.GlobalBannerSettings[ 'milion-impressions-per-day' ] ); $( '#campaignDaySentence' ).text( getCampaignDaySentence() );
if ( getDaysSinceCampaignStart() < 1 ) { $( '#donationRemaining' ).text( 'Unser Spendenziel: ' + ( GlobalBannerSettings.goalSum / 1000000 ).toFixed( 1 ).replace( '.', ',' ) + ' Mio. €' ); $( '#donationText' ).html( ); }
$( '#application-of-funds-link' ).wlightbox( { container: $( '#mw-page-base' ), right: ( $('body').width() - 750 ) / 2 + 'px', top: function() { return ( $( '#WMDE_Banner' ).height() + 20 ) + 'px'; } } ); $( '#application-of-funds-link' ).click( function ( e ) { $( '#WMDE_Banner-close-ct' ).attr( 'src', 'https://tracking.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/application-of-funds-lightbox-opened/{{{BannerName}}}&rec=1' ); } );
$( '#link-wmf-annual-plan' ).click( function ( e ) { $( '#WMDE_Banner-close-ct' ).attr( 'src', 'https://tracking.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/wmf-annual-plan/{{{BannerName}}}&rec=1' ); } );
$( '#link-wmde-annual-plan' ).click( function ( e ) { $( '#WMDE_Banner-close-ct' ).attr( 'src', 'https://tracking.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/wmde-annual-plan/{{{BannerName}}}&rec=1' ); } );
} );
</script>