Adamw has submitted this change and it was merged.
Change subject: Updates based on feedback from iteration #1.
......................................................................
Updates based on feedback from iteration #1.
In this patch:
~Fixed background issue
~Form is less wide and tall
~Credit card/Billing address headers changed
~Address fields removed for FR
~Legal txt updated for FR
~Legal txt and more info links placed below form and aligned more
pleasingly as well as set to open in their own new windows
~Better classing so Peter can tweak more easily in the future if he wants
~Introduced labels and removed all but new, more helpful credit card
placeholders
~Form loading issue with bounce across screen fixed
~General padding/structure better
Forms: French labels shortened, fixed top margin.
Closed open divs and changed test definitions.
Change-Id: Ie3d91a208454389212ec5958baa3dc648159927f
---
M gateway_common/i18n/interface/en.json
M gateway_common/i18n/interface/fr.json
M tests/Adapter/WorldPay/WorldPayTestCase.php
M worldpay_gateway/forms/css/worldpay.css
M worldpay_gateway/forms/html/_name-email/default.html
M worldpay_gateway/forms/html/_personal-information/US.html
M worldpay_gateway/forms/html/_personal-information/default.html
M worldpay_gateway/forms/html/_wp_ott_form/default.html
M worldpay_gateway/forms/html/worldpay.html
M worldpay_gateway/forms/js/worldpay.js
10 files changed, 229 insertions(+), 359 deletions(-)
Approvals:
Adamw: Looks good to me, approved
jenkins-bot: Verified
diff --git a/gateway_common/i18n/interface/en.json
b/gateway_common/i18n/interface/en.json
index 6b49405..cf6571a 100644
--- a/gateway_common/i18n/interface/en.json
+++ b/gateway_common/i18n/interface/en.json
@@ -281,7 +281,7 @@
"donate_interface-select-year-of-expiration": "Select year of expiration",
"donate_interface-expires-question": "Expires?",
"donate_interface-expires": "Expires",
- "donate_interface-card-security-code": "Card security code",
+ "donate_interface-card-security-code": "Security code",
"donate_interface-cvv": "CVV",
"donate_interface-cvv-number-abbreviated": "CVV #",
"donate_interface-cvv2": "CVV2",
diff --git a/gateway_common/i18n/interface/fr.json
b/gateway_common/i18n/interface/fr.json
index 4d23e65..e6211e4 100644
--- a/gateway_common/i18n/interface/fr.json
+++ b/gateway_common/i18n/interface/fr.json
@@ -393,7 +393,7 @@
"donate_interface-email-unsub-warning": "Cela vous désabonnera des
courriels de la Fondation Wikimédia qui vous sont envoyés en tant que donateur.
Vous pourriez encore recevoir des courriels à cette adresse si elle reste
associée à un compte d’un de nos projets. Si vous avez des questions, veuillez
nous contacter par courriel adressé à <a
href=\"mailto:donati...@wikimedia.org\";>donati...@wikimedia.org</a>.",
"donate_interface-faqs": "Foire aux questions",
"donate_interface-tax-info": "Informations sur les conditions de
déductibilité fiscale",
- "donate_interface-informationsharing": "En faisant un don, vous
partagez vos données personnelles avec la Fondation Wikimédia, l’organisation à
but non lucratif qui héberge Wikipédia et les autres projets Wikimédia, ainsi
qu’avec ses prestataires situés aux États-Unis et ailleurs, conformément à
notre politique en matière de gestion des données personnelles des donateurs.
Nous ne vendons ni n’échangeons vos données personnelles. Pour plus
d’informations, vous pouvez lire <a
href=\"//wikimediafoundation.org/wiki/Donor_policy/fr\">notre politique en
matière de gestion des données personnelles des donateurs</a>.",
+ "donate_interface-informationsharing": "En faisant ce don, vous
acceptez notre politique de confidentialité en matière de donation ainsi que de
partager vos données personnelles avec la Fondation Wikipedia et ses
prestataires de services situés aux Etats-Unis et ailleurs, dont les lois sur
la protection de la vie privée ne sont pas forcement équivalentes aux vôtres.",
"donate_interface-currency-change": "Changer ?",
"donate_interface-bank_transfer_message": "Veuillez noter que votre
relevé de compte mentionnera « <i>Global Collect</i> » en tant que bénéficiaire
de ce don. <i>Global Collect</i> est le prestataire autorisé à accepter et
traiter les paiements au nom de la Fondation Wikimédia. N’oubliez pas de
mentionner le numéro de référence fourni ici dans votre ordre de virement
bancaire et n’hésitez pas à adresser un courriel à <a
href=\"mailto:donati...@wikimedia.org\";>donati...@wikimedia.org</a>. si vous
avez toute question ou préoccupation.",
"donate_interface-globalcollect-proxy": "Veuillez noter que votre
relevé indiquera « <i>Global Collect</i> » comme bénéficiaire de ce don.
<i>Global Collect</i> est autorisé à accepter et prendre en charge les
paiements pour le compte de la Wikimedia Foundation.",
diff --git a/tests/Adapter/WorldPay/WorldPayTestCase.php
b/tests/Adapter/WorldPay/WorldPayTestCase.php
index bb42aba..699b0a6 100644
--- a/tests/Adapter/WorldPay/WorldPayTestCase.php
+++ b/tests/Adapter/WorldPay/WorldPayTestCase.php
@@ -177,23 +177,6 @@
'nodename' => 'input',
'value' => 'Nom',
),
- 'street' => array (
- 'nodename' => 'input',
- 'value' => '123 Rue Faux',
- ),
- 'city' => array (
- 'nodename' => 'input',
- 'value' => 'Versailles',
- ),
- 'zip' => array (
- 'nodename' => 'input',
- 'value' => '',
- ),
- 'country' => array (
- 'nodename' => 'select',
- 'value' => 'FR',
- 'selected' => 'FR'
- ),
);
$this->verifyFormOutput( 'TestingWorldPayGateway', $init,
$assertNodes, true );
diff --git a/worldpay_gateway/forms/css/worldpay.css
b/worldpay_gateway/forms/css/worldpay.css
index 5d7687b..838b4a1 100644
--- a/worldpay_gateway/forms/css/worldpay.css
+++ b/worldpay_gateway/forms/css/worldpay.css
@@ -1,86 +1,38 @@
-table#donation_amount {
- background-color:transparent;
- border:1px solid #AAAAAA;
- border-collapse:collapse;
- width: 600px;
+/* Get rid of the unwanted background */
+#mw-page-base {
+ display: none;
}
-table#donation_amount td {
- border:1px solid #AAAAAA;
+
+/* Move the form up */
+#mw-head-base {
+ height: 1em !important;
}
-table#donation_amount td.amount_header {
- background-color:#eef2f7;
- font-size:90%;
+
+/* Hiding various things */
+table {
+ background-color: transparent;
}
-table#donation_amount td.amount_data {
- background-color:#daf2db;
+div#content {
+ background-color: transparent !important;
+ background-image: none !important;
}
-div#payflowpro_gateway-donate-addl-info-text {
- font-size: 90%;
- line-height: 120%;
- padding-top: 12px;
+#footer {
+ background-image: none !important;
}
+h1#firstHeading, div#contentSub {
+ display: none;
+}
+
+/* areas shared with other gateways */
div#payflowpro_gateway-donate-submessage {
font-size: 90%;
line-height: 120%;
}
-#payflow-table-donor td.label, #payflow-table-comment td.label,
#payflow-table-cc td.label {
- white-space: nowrap;
- display: block;
- padding-right: 1em;
- text-align: right;
- width: 94px;
-}
-
-
-.payflow-cc-form-section {
- float: none;
- margin-right: 0em;
- margin-bottom: 1em;
-}
-
-#payflowpro_gateway-cc_form_container {
- width: 100%;
-}
-
-#payflowpro_gateway-cc_form_form {
- width: 475px;
- float: right;
- margin-left: 2em;
- padding-left: 2em;
- border-left: 1px solid #BBBBBB;
-}
-
-#payflowpro_gateway-cc_form_letter {
- height: 100%;
-}
-
-#payflowpro_gateway-cc_form_letter p {
- font-size: 1.125em;
- margin-bottom: 1.2em;
-}
-
#payflowpro_gateway-personal-info {
margin-right:0 !important;
}
-#payflowpro_gateway-donate-addl-info-secure-logos {
- float: left;
- margin-right: 2em;
-}
-
-#payflowpro_gateway-cc_form_letter_inside {
- padding-top: .5em;
-}
-
-#payflowpro_gateway-cc_otherways {
- padding-top: .5em;
- display: block;
-}
-#payflowpro_gateway-donate-addl-info {
- margin-top:2em !important;
- margin-bottom:1em !important;
-}
-
+/* appeal styles */
#appeal {
background-color:transparent;
border-color:transparent;
@@ -99,8 +51,6 @@
margin-bottom:1em;
padding:0.2em 0;
}
-#donate {
-}
#donate-head {
border:none;
font-size:1.5em;
@@ -113,169 +63,82 @@
margin-bottom:1em;
}
-/* Move the form up */
-#mw-head-base {
- height: 1em !important;
+/* Forms and form partials */
+/* TODO: move common rules to shared css */
+.formCol {
+ width:425px !important;
}
-
-/* Hiding content border */
-table {
- background-color: transparent;
-}
-div#content {
- background-color: transparent !important;
- background-image: none !important;
-}
-div#mw-head-base {
- background-image: none !important;
-}
-#footer {
- background-image: none !important;
-}
-
-/* Hiding stuff we don't need */
-h1#firstHeading, div#contentSub {
- display: none;
-}
-
-/* NEW STUFF */
#greenBackground, div.donor{
- padding:16px 24px;
- width:550px;
background-color:#CCE7CD;
border: none;
margin-bottom: 10px;
+ padding: 15px;
}
-p#informationsharing, p#monthlycancel {
- width: 100%;
- padding: 0 15px;
- font-size: 12px;
- text-align: center;
- line-height: 140%;
+#greenBackground input[type="text"] {
+ margin-bottom: 6px !important;
}
-/* TODO: move common rules to shared css */
-#moreinfolinks {
- width: 100%;
- margin: 1em 0;
- text-align: center;
+#step1header {
+ padding: 1em;
}
-ul#moreinfolinks li{
- list-style: none !important;
- list-style-image: none !important;
-}
-h3.amount_header {
- padding: 0 0 0.4em 0;
- margin-bottom: 0;
- font-weight: normal;
-}
-
-table#payflow-table-donor{
- /*margin-left: 10px;*/
-}
-
-#accountNumber {
- width: 240px;
- display: inline;
-}
-
-#cvc, #expiry {
- width: 105px;
- display: inline;
- margin-left: 2px;
-}
-
-.legalWell {
- background-color: rgba(255,255,255,0.3);
- padding: 2em;
- margin-top:1em;
+input.invalid {
+ border: 2px solid red !important;
}
.ccAreaHeader {
width: 100%;
}
-
-/* Form `s */
-#greenBackground input[type="text"] {
- margin-bottom:10px;
-}
-
-.payflowpro_gateway-table-donor {
-
-}
-
-#city.form-control, #emailAdd.form-control {
- width: 300px;
- display: inline;
-}
-
-#zip.form-control {
- width: 160px;
- display: inline;
-}
-
-input.halfwidth {
- width: 100px;
-}
-input.fullwidth {
- width: 400px;
-}
-
-input.invalid {
- border: 2px solid red !important;
-}
-
-input#city.halfwidth.state {
- width:100px;
-}
-input#zip.halfwidth.state {
- width:94px;
- margin-left: 0;
-}
select#state.us, select#state.au, select#state.ca, select#country {
- width: 160px;
height: 30px;
+ width: 100%;
line-height: 170%;
background: none;
margin-top: .2em;
background-color: #f5f5f5;
}
-#donate tr{
- padding: 1em;
+#paymentSubmitBtn {
+ margin: 10px 0 10px 0;
}
+#wpContainer {
+ margin-top: 6em;
+}
+#wpContainer label {
+ color: #333;
+ font-style: italic;
+ overflow: hidden;
+ margin-bottom: -1px;
+}
+#wpContainer h3.cc_header {
+ margin-top: 0 !important;
+}
+
+/* Legal text and informational links */
+p#informationsharing, p#monthlycancel {
+ width: 100%;
+ padding: 0;
+ font-size: 12px;
+ text-align: left;
+ line-height: 140%;
+}
+#wpContainer ul{
+ list-style-type: none !important;
+ margin:0;
+}
+ul#moreinfolinks li{
+ list-style: none !important;
+ list-style-image: none !important;
+ float: left;
+ clear: both;
+}
+#step1header{
+ background-color: #dff0d8;
+ height: 35px;
+}
+
+/* Error styles */
.ccError {
display: none;
color: red;
font-weight: bold;
font-size: 12px;
-}
-
-
-/* Specific element overrides */
-.personalInfo {
- padding: 15px;
-}
-.formControl {
- margin-left: 0;
-}
-#fname, #lname {
- width: 49%;
- display: inline;
-}
-#street {
- width: 100%;
-}
-#zip, #state {
- width: 50%;
- display: inline;
-}
-input#zip.ja {
- width: 268px;
-}
-select#state.ja {
- width:100%;
-}
-
-select#state.it {
- width: auto;
}
/* From Webitects */
@@ -290,3 +153,7 @@
.form .options-v { margin-top: 5px; }
.options-v li { padding-left: 25px; text-indent: -25px; }
+/* Bootstrap tweaks */
+.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7,
.col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+ padding: 0 3px 0 3px !important;
+}
diff --git a/worldpay_gateway/forms/html/_name-email/default.html
b/worldpay_gateway/forms/html/_name-email/default.html
index 667eba1..1d17a37 100644
--- a/worldpay_gateway/forms/html/_name-email/default.html
+++ b/worldpay_gateway/forms/html/_name-email/default.html
@@ -1,27 +1,27 @@
<div class="row-fluid">
- <div class="span12">
+ <div class="col-md-12">
<h3
class="cc_header">%donate_interface-cc-form-header-personal%<img
src="@script_path/extensions/DonationInterface/gateway_forms/includes/padlock.gif"
style="vertical-align:baseline;margin-left:8px;"></h3>
</div>
</div>
<div class="row-fluid">
- <div class="span12">
- <input class="halfwidth" value="@fname" type="text"
placeholder="%donate_interface-donor-fname%" id="fname">
- <input class="halfwidth leftmar" value="@lname" type="text"
placeholder="%donate_interface-donor-lname%" id="lname">
+ <div class="col-md-12">
+ <input class="form-control" value="@fname" type="text"
placeholder="%donate_interface-donor-fname%" id="fname">
+ <input class="form-control" value="@lname" type="text"
placeholder="%donate_interface-donor-lname%" id="lname">
</div>
</div>
<div class="row-fluid">
- <div class="span12"><span class="creditcard-error-msg"></span></div>
+ <div class="col-md-12"><span class="creditcard-error-msg"></span></div>
</div>
<tr style="display: none;">
- <div class="span12">
- <input type="hidden" value="@country" id="country" />
- <input type="hidden" value="XX" id="state"/>
- <input type="hidden" value="Springfield" id="city" />
- <input type="hidden" value="00000" id="postalcode" />
+ <div class="col-md-12">
+ <input class="form-control" type="hidden" value="@country"
id="country" />
+ <input class="form-control" type="hidden" value="XX"
id="state"/>
+ <input class="form-control" type="hidden" value="Springfield"
id="city" />
+ <input class="form-control" type="hidden" value="00000"
id="postalcode" />
</div>
</tr>
<div class="row-fluid">
- <div class="span12">
- <input class="fullwidth" value="@emailAdd" type="text"
title="%donate_interface-donor-email%"
placeholder="%donate_interface-donor-email%" id="emailAdd">
+ <div class="col-md-12">
+ <input class="form-control" value="@emailAdd" type="text"
title="%donate_interface-donor-email%"
placeholder="%donate_interface-donor-email%" id="emailAdd">
</div>
</div>
diff --git a/worldpay_gateway/forms/html/_personal-information/US.html
b/worldpay_gateway/forms/html/_personal-information/US.html
index d58e901..7b96ab7 100644
--- a/worldpay_gateway/forms/html/_personal-information/US.html
+++ b/worldpay_gateway/forms/html/_personal-information/US.html
@@ -1,31 +1,43 @@
<div class="row-fluid">
- <div class="span12">
- <h3
class="cc_header">%donate_interface-cc-form-header-personal%<img
src="@script_path/extensions/DonationInterface/gateway_forms/includes/padlock.gif"
style="vertical-align:baseline;margin-left:8px;"></h3>
+ <div class="col-md-12">
+ <h3 class="cc_header">%donate_interface-amount-legend%: <span
id="selected-amount">{% block donation-amount currency_code %}</span><img
src="@script_path/extensions/DonationInterface/gateway_forms/includes/padlock.gif"
style="vertical-align:baseline;margin-left:8px;"></h3>
</div>
</div>
<div class="row-fluid">
- <div class="span12">
- <input class="halfwidth" value="@fname" type="text"
placeholder="%donate_interface-donor-fname%" id="fname">
- <input class="halfwidth leftmar" value="@lname" type="text"
placeholder="%donate_interface-donor-lname%" id="lname">
+ <div class="col-md-6">
+ <label>%donate_interface-donor-fname%</label>
+ <input class="form-control" value="@fname" type="text"
id="fname">
+ </div>
+ <div class="col-md-6">
+ <label>%donate_interface-donor-lname%</label>
+ <input class="form-control" value="@lname" type="text"
id="lname">
</div>
</div>
<div class="row-fluid">
- <div class="span12"><span class="creditcard-error-msg"></span></div>
+ <div class="col-md-12"><span class="creditcard-error-msg"></span></div>
</div>
<div class="row-fluid">
- <div class="span12">
- <input class="fullwidth" value="@street" type="text"
title="%donate_interface-donor-street%"
placeholder="%donate_interface-donor-street%" id="street">
+ <div class="col-md-12">
+ <label>%donate_interface-donor-street%</label>
+ <input class="form-control" value="@street" type="text"
title="%donate_interface-donor-street%" id="street">
</div>
</div>
<div class="row-fluid">
- <div class="span12"><span class="creditcard-error-msg"></span></div>
+ <div class="col-md-12"><span class="creditcard-error-msg"></span></div>
</div>
<div class="row-fluid">
- <input class="halfwidth state" value="@city" type="text"
title="%donate_interface-donor-city%"
placeholder="%donate_interface-donor-city%" id="city">
-
- <input class="halfwidth state" value="@zip" type="text"
title="%donate_interface-postal%" placeholder="%donate_interface-donor-postal%"
id="zip">
+ <div class="col-md-6">
+ <label>%donate_interface-donor-city%</label>
+ <input class="form-control" value="@city" type="text"
title="%donate_interface-donor-city%" id="city">
+ </div>
+ <div class="col-md-6">
+ <label>%donate_interface-donor-postal%</label>
+ <input class="form-control" value="@zip" type="text"
title="%donate_interface-postal%" id="zip">
+ </div>
</div>
<div class="row-fluid">
+ <div class="col-md-4">
+ <label>State</label>
<select id="state" class="us" value="@state" >
<option>State</option>
<option value="AK">AK</option>
@@ -84,13 +96,16 @@
<option value="AE">AE</option>
<option value="AP">AP</option>
</select>
- <input class="fullwidth" value="@emailAdd" type="text"
title="%donate_interface-donor-email%"
placeholder="%donate_interface-donor-email%" id="emailAdd">
-
+ </div>
+ <div class="col-md-8">
+ <label>%donate_interface-donor-email%</label>
+ <input class="form-control" value="@emailAdd" type="text"
title="%donate_interface-donor-email%" id="emailAdd">
+ </div>
</div>
<div class="row-fluid">
<div style="display: none;">
- <div class="span12">
- <input type="hidden" value="US" id="country" />
+ <div class="col-md-12">
+ <input class="form-control" type="hidden" value="US"
id="country" />
</div>
</div>
</div>
diff --git a/worldpay_gateway/forms/html/_personal-information/default.html
b/worldpay_gateway/forms/html/_personal-information/default.html
index 212723f..3cb479f 100644
--- a/worldpay_gateway/forms/html/_personal-information/default.html
+++ b/worldpay_gateway/forms/html/_personal-information/default.html
@@ -1,37 +1,25 @@
<div class="row-fluid">
- <div class="span12">
- <h3
class="cc_header">%donate_interface-cc-form-header-personal%<img
src="@script_path/extensions/DonationInterface/gateway_forms/includes/padlock.gif"
style="vertical-align:baseline;margin-left:8px;"></h3>
+ <div class="col-md-12">
+ <h3 class="cc_header">%donate_interface-amount-legend%: <span
id="selected-amount">{% block donation-amount currency_code %}</span><img
src="@script_path/extensions/DonationInterface/gateway_forms/includes/padlock.gif"
style="vertical-align:baseline;margin-left:8px;"></h3>
</div>
</div>
<div class="row-fluid">
- <div class="span12">
- <input class="halfwidth" value="@fname" type="text"
placeholder="%donate_interface-donor-fname%" id="fname"><input class="halfwidth
pull-right" value="@lname" type="text"
placeholder="%donate_interface-donor-lname%" id="lname">
+ <div class="col-md-6">
+ <label>%donate_interface-donor-fname%</label>
+ <input class="form-control" value="@fname" type="text"
id="fname">
</div>
-</div>
-<div class="row-fluid">
- <div class="span12"><span class="creditcard-error-msg"></span></div>
-</div>
-<div class="row-fluid">
- <div class="span12">
- <input value="@street" type="text"
title="%donate_interface-donor-street%"
placeholder="%donate_interface-donor-street%" id="street">
- </div>
-</div>
-<div class="row-fluid">
- <div class="span12"><span class="creditcard-error-msg"></span></div>
-</div>
-<div class="row-fluid">
- <div class="span12">
- <input class="halfwidth" value="@city" type="text"
title="%donate_interface-donor-city%"
placeholder="%donate_interface-donor-city%" id="city"><input class="halfwidth
pull-right" value="@zip" type="text" title="%donate_interface-postal%"
placeholder="%donate_interface-donor-postal%" id="zip">
- <input type="hidden" value="XX" id="state" />
+ <div class="col-md-6">
+ <label>%donate_interface-donor-lname%</label>
+ <input class="form-control" value="@lname" type="text"
id="lname">
</div>
</div>
<div class="row-fluid">
- <div class="span12">
- <select id="country" class="txt" value="@country"
placeholder="%donate_interface-country%" height="27">
- <option value="">%donate_interface-select-country%</option>
- @select_country
- </select>
- <input value="@emailAdd" type="text"
title="%donate_interface-donor-email%"
placeholder="%donate_interface-donor-email%" id="emailAdd">
+ <div class="col-md-12"><span class="creditcard-error-msg"></span></div>
+</div>
+<div class="row-fluid">
+ <div class="col-md-12">
+ <label>%donate_interface-donor-email%</label>
+ <input class="form-control" value="@emailAdd" type="text"
title="%donate_interface-donor-email%" placeholder='"n...@email.com"'
id="emailAdd">
</div>
</div>
diff --git a/worldpay_gateway/forms/html/_wp_ott_form/default.html
b/worldpay_gateway/forms/html/_wp_ott_form/default.html
index 4e9a309..8f66a3a 100644
--- a/worldpay_gateway/forms/html/_wp_ott_form/default.html
+++ b/worldpay_gateway/forms/html/_wp_ott_form/default.html
@@ -1,48 +1,50 @@
<div class="row-fluid">
- <input type="hidden" value="@wp_one_time_token" name="OTT"
id="wp_one_time_token"/>
- <h3 class="ccAreaHeader">%donate_interface-card-legend%</h3>
+ <div class="col-md-12">
+ <input type="hidden" value="@wp_one_time_token" name="OTT"
id="wp_one_time_token"/>
+ <h3 class="ccAreaHeader">
+ <div class="row-fluid">
+ <span class="pull-left">
+ <img alt="MasterCard"
src="@script_path/extensions/DonationInterface/gateway_forms/includes/card-mastercard.png"
/>
+ <img alt="Visa"
src="@script_path/extensions/DonationInterface/gateway_forms/includes/card-visa.png"
/>
+ </span>
+ </div>
+ </h3>
+ </div>
</div>
<div class="row-fluid">
+ <div class="col-md-6">
+ <label>%donate_interface-donor-card-num%</label>
<input type="text" id="accountNumber" class="form-control"
pattern="\d*"
autocomplete="off"
- placeholder="%donate_interface-donor-card-num%"/>
- <span id="smCC">
+ placeholder='"1111 1111 1111 1111"'/>
+ </div>
+
+ <span id="smCC">
+ <div class="col-md-3">
+ <label>%donate_interface-card-expiration%</label>
<input type="text" class="form-control" id="expiry"
pattern="\d*" autocomplete="off"
-
placeholder="%donate_interface-card-expiration%"/>
+ placeholder='"05/2015"'/>
+ </div>
+ <div class="col-md-3">
+ <label>%donate_interface-cvv%</label>
<input type="text" class="form-control" id="cvc"
pattern="\d*"
autocomplete="off"
-
placeholder="%donate_interface-card-security-code%"/>
- </span>
+ placeholder='"123"'/>
+ </div>
+ </span>
+</div>
+
+<div class="row-fluid">
+ <div class="col-md-12">
<div class="ccError ccNumberError">•
%donate_interface-error-msg-card-num%</div>
<div class="ccError ccExpiryError">•
%donate_interface-error-msg-expiration%</div>
<div class="ccError ccCVCError">•
%donate_interface-error-msg-cvv%</div>
+ </div>
</div>
-
-<div class="legalWell">
- <div class="row-fluid">
- <p
id="informationsharing">%donate_interface-informationsharing|url%</p>
- </div>
- <div class="row-fluid">
- <table id="moreinfolinks">
- <tr>
- <td><a
-
href="https://wikimediafoundation.org/wiki/Special:LandingCheck?landing_page=Problems_donating&basic=true&country=@country&language=@language&uselang=@language";>%donate_interface-problemsdonating%</a></td>
-
- <td><a
-
href="https://wikimediafoundation.org/wiki/Special:LandingCheck?basic=true&landing_page=Ways_to_Give&language=@language&uselang=@language&country=@country";>%donate_interface-otherways-short%</a></td>
- </tr>
- <tr>
- <td><a
-
href="https://wikimediafoundation.org/wiki/Special:LandingCheck?basic=true&landing_page=FAQ&language=@language&uselang=@language&country=@country";>%donate_interface-faqs%</a>
- </td>
- <td><a
-
href="https://wikimediafoundation.org/wiki/Special:LandingCheck?basic=true&landing_page=Tax_Deductibility&language=@language&uselang=@language&country=@country";>%donate_interface-tax-info%</a></td>
- </tr>
- </table>
- </div>
- <div class="row-fluid">
- <input class="btn btn-info btn-large
form-control" id="paymentSubmitBtn" type="button"
value="%donate_interface-continue%" />
- </div>
+<div class="row-fluid">
+ <div class="col-md-12">
+ <input class="btn btn-info btn-large form-control"
id="paymentSubmitBtn" type="button" value="%donate_interface-continue%" />
+ </div>
</div>
diff --git a/worldpay_gateway/forms/html/worldpay.html
b/worldpay_gateway/forms/html/worldpay.html
index 702495f..1ae5b5b 100644
--- a/worldpay_gateway/forms/html/worldpay.html
+++ b/worldpay_gateway/forms/html/worldpay.html
@@ -18,37 +18,35 @@
var actionURL = "@action";
var scriptPath = "@script_path";
</script>
-<div class="container">
+<div class="container" id="wpContainer">
<div class="row-fluid">
+
<div class="col-md-6" id="appeal" valign="top">
{{LanguageSwitch|2011FR/@appeal/text|@language}}
</div>
- <div class="col-md-6">
- <div id="donate" class="row-fluid" valign="top">
- <div class="col-md-12" id="greenBackground">
- @noscript
- <p id="topError"
class="creditcard-error-msg"></p>
- <div class="row-fluid">
+ <div class="col-md-6">
+ <div class="row-fluid" id="donate">
+ <div class="col-md-12">
+
+ <div class="row-fluid formCol"
id="greenBackground">
+ @noscript
+ <p id="topError"
class="creditcard-error-msg"></p>
+
<form name="payment"
method="post" action="@wp_process_url" novalidate>
<div
id="payflowpro_gateway_gateway-personal-info">
-
- <div
class="personalInfo">
- <div
id="step1header" class="alert alert-success">
-
<h3 class="amount_header">%donate_interface-amount-legend%: <span
-
id="selected-amount">{% block donation-amount currency_code
%}</span></h3>
- </div>
+ <div
class="row-fluid">
+ <span
class="personalInfo">
{%
block personal-information country %}
-
- {% block
wp_ott_form country %}
+ {%
block wp_ott_form country %}
+ </span>
</div>
- <div
id="payment" class="gainlayout" style="height: 0;text-align: center;"></div>
-
- <div
class="mw-donate-submessage" id="payflowpro_gateway_gateway-donate-submessage">
- <img
-
src="@script_path/extensions/DonationInterface/gateway_forms/includes/padlock.gif"
+ <div
id="payment" class="row-fluid gainlayout" style="height: 0;text-align:
center;"></div>
+
+ <div
class="row-fluid mw-donate-submessage"
id="payflowpro_gateway_gateway-donate-submessage">
+ <img
src="@script_path/extensions/DonationInterface/gateway_forms/includes/padlock.gif"
style="vertical-align:baseline;margin-right:4px;">
%donate_interface-donate-click%
</div>
@@ -57,25 +55,50 @@
</div>
<!-- This should be
included in the personal_information templates -->
- <input type="hidden"
value="@utm_source" id="utm_source"/>
- <input type="hidden"
value="@utm_medium" id="utm_medium"/>
- <input type="hidden"
value="@utm_campaign" id="utm_campaign"/>
- <input type="hidden"
value="@language" id="language"/>
- <input type="hidden"
value="@referrer" id="referrer"/>
- <input type="hidden"
value="1" id="email-opt"/>
- <input type="hidden"
value="@token" id="token"/>
- <input type="hidden"
value="@order_id" id="order_id"/>
- <input type="hidden"
value="@contribution_tracking_id" id="contribution_tracking_id"/>
- <input type="hidden"
value="@data_hash" id="data_hash"/>
- <input type="hidden"
value="@owa_session" id="owa_session"/>
- <input type="hidden"
value="@owa_ref" id="owa_ref"/>
- <input type="hidden"
value="@gateway" id="gateway"/>
- <input type="hidden"
value="cc" id="payment_method"/>
+ <input
class="form-control" type="hidden" value="@utm_source" id="utm_source"/>
+ <input
class="form-control" type="hidden" value="@utm_medium" id="utm_medium"/>
+ <input
class="form-control" type="hidden" value="@utm_campaign" id="utm_campaign"/>
+ <input
class="form-control" type="hidden" value="@language" id="language"/>
+ <input
class="form-control" type="hidden" value="@referrer" id="referrer"/>
+ <input
class="form-control" type="hidden" value="1" id="email-opt"/>
+ <input
class="form-control" type="hidden" value="@token" id="token"/>
+ <input
class="form-control" type="hidden" value="@order_id" id="order_id"/>
+ <input
class="form-control" type="hidden" value="@contribution_tracking_id"
id="contribution_tracking_id"/>
+ <input
class="form-control" type="hidden" value="@data_hash" id="data_hash"/>
+ <input
class="form-control" type="hidden" value="@owa_session" id="owa_session"/>
+ <input
class="form-control" type="hidden" value="@owa_ref" id="owa_ref"/>
+ <input
class="form-control" type="hidden" value="@gateway" id="gateway"/>
+ <input
class="form-control" type="hidden" value="cc" id="payment_method"/>
</form>
+
</div>
+
</div>
- <span class="pull-right">@verisign_logo </span>
</div>
+
+ <div class="row-fluid formCol">
+ <div class="col-md-12">
+ <p
id="informationsharing">%donate_interface-informationsharing|url%</p>
+ </div>
+ </div>
+
+ <div class="row-fluid formCol">
+ <div class="col-md-6 pull-left">
+ <ul id="moreinfolinks">
+ <li><a
href="https://wikimediafoundation.org/wiki/Special:LandingCheck?landing_page=Problems_donating&basic=true&country=@country&language=@language&uselang=@language";
target="blank">%donate_interface-problemsdonating%</a></li>
+ <li><a
href="https://wikimediafoundation.org/wiki/Special:LandingCheck?basic=true&landing_page=Ways_to_Give&language=@language&uselang=@language&country=@country";
target="blank">%donate_interface-otherways-short%</a></li>
+ <li><a
href="https://wikimediafoundation.org/wiki/Special:LandingCheck?basic=true&landing_page=FAQ&language=@language&uselang=@language&country=@country";
target="blank">%donate_interface-faqs%</a></li>
+ <li><a
href="https://wikimediafoundation.org/wiki/Special:LandingCheck?basic=true&landing_page=Tax_Deductibility&language=@language&uselang=@language&country=@country";
target="blank">%donate_interface-tax-info%</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 formCol">
+ <span class="pull-right">@verisign_logo
</span>
+ </div>
+ </div>
+
+
+
</div>
+
</div>
</div>
diff --git a/worldpay_gateway/forms/js/worldpay.js
b/worldpay_gateway/forms/js/worldpay.js
index fc8ec36..7329e18 100644
--- a/worldpay_gateway/forms/js/worldpay.js
+++ b/worldpay_gateway/forms/js/worldpay.js
@@ -22,14 +22,6 @@
*/
( function ( $, mw ) {
- //hack for janky form style. todo: standardize all forms so this can be
removed.
- //$('h3').removeClass('cc_header');
-
$('input').removeClass('halfwidth').removeClass('leftmar').addClass('form-control');
- $('#lname').addClass('pull-right');
- $('#zip').addClass('pull-right');
- $('#smCC').addClass('pull-right');
- $('#emailAdd').addClass('pull-right');
-
var $accountNumber = $( '#accountNumber' ),
$accountExpiry = $( '#expiry' ),
$accountCVC = $( '#cvc' );
--
To view, visit https://gerrit.wikimedia.org/r/126178
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ie3d91a208454389212ec5958baa3dc648159927f
Gerrit-PatchSet: 7
Gerrit-Project: mediawiki/extensions/DonationInterface
Gerrit-Branch: master
Gerrit-Owner: Ssmith <ssm...@wikimedia.org>
Gerrit-Reviewer: Adamw <awi...@wikimedia.org>
Gerrit-Reviewer: Katie Horn <kh...@wikimedia.org>
Gerrit-Reviewer: Mwalker <mwal...@wikimedia.org>
Gerrit-Reviewer: Siebrand <siebr...@kitano.nl>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
