CGM_Public/pretix_cgo
1
0
Fork 0
forked from CGM_Public/pretix_original
Code Pull Requests Actions Activity

Stripe: Smoother animation

Browse Source
This commit is contained in:
Raphael Michel
2018-08-15 09:55:39 +02:00
parent a4ced609cd
commit d9f5ee9d76
3 changed files with 51 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe.css
View File

@@ -13,13 +13,16 @@
.hr { .hr {
width:2px; width:2px;
height:100px; height:64px;
background-color: #DDDDDD; background-color: #DDDDDD;
position:inherit; position:inherit;
top:0px; top:0px;
left:50%; left:50%;
z-index:10; z-index:10;
} }
#stripe-card {
margin: 15px 0;
}
@media only screen and (max-width: 999px) { @media only screen and (max-width: 999px) {
.hr { .hr {
@@ -31,13 +34,41 @@
.sepText { .sepText {
left: 50%; left: 50%;
} }
#stripe-elements > div.hidden {
height: 0;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
display: block !important;
}
#stripe-elements .stripe-or {
height: 16px;
}
#stripe-elements .stripe-payment-request-button {
height: 40px;
}
#stripe-elements > div {
transition: height 0.3s ease-out, padding-top 0.3s ease-out, padding-bottom 0.3s ease-out;
}
} }
@media only screen and (min-width: 999px) { @media only screen and (min-width: 999px) {
.row.equal { #stripe-elements {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.stripe-card-holder {
flex-grow: 1;
}
#stripe-elements > div.hidden {
width: 0;
padding: 0;
overflow: hidden;
display: block !important;
}
#stripe-elements > div {
transition: width 0.3s ease-out, padding-left 0.3s ease-out, padding-right 0.3s ease-out;
}
} }
.vcenter { .vcenter {

9
src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe.js
View File

@@ -74,7 +74,7 @@ var pretixstripe = {
// and submit // and submit
$form.get(0).submit(); $form.get(0).submit();
}); });
} catch { } catch (e) {
pretixstripe.paymentRequest = null; pretixstripe.paymentRequest = null;
} }
} else { } else {
@@ -112,15 +112,10 @@ var pretixstripe = {
pretixstripe.paymentRequest.canMakePayment().then(function(result) { pretixstripe.paymentRequest.canMakePayment().then(function(result) {
if (result) { if (result) {
pretixstripe.paymentRequestButton.mount('#stripe-payment-request-button'); pretixstripe.paymentRequestButton.mount('#stripe-payment-request-button');
$('#stripe-payment-request-button').parent().hide(); $('#stripe-elements .stripe-or').removeClass("hidden");
$('#stripe-payment-request-button').parent().next("div").hide();
$('#stripe-payment-request-button').parent().removeClass("hidden"); $('#stripe-payment-request-button').parent().removeClass("hidden");
$('#stripe-payment-request-button').parent().next("div").removeClass("hidden");
$('#stripe-payment-request-button').parent().show(500);
$('#stripe-payment-request-button').parent().next("div").show(500);
} else { } else {
$('#stripe-payment-request-button').hide(); $('#stripe-payment-request-button').hide();
$('#stripe-card').parent().removeClass("col-md-5").addClass("col-md-12");
document.getElementById('stripe-payment-request-button').style.display = 'none'; document.getElementById('stripe-payment-request-button').style.display = 'none';
} }
}); });

32
src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form.html
View File

@@ -31,25 +31,25 @@
{% endif %} {% endif %}
<div class="row equal" id="stripe-elements"> <div class="row equal" id="stripe-elements">
<div class="col-md-5 vcenter hidden"> <div class="col-md-5 vcenter stripe-card-holder">
<div id="stripe-payment-request-button"> <div id="stripe-card" class="form-control">
<span class="fa fa-spinner fa-spin"></span> <span class="fa fa-spinner fa-spin"></span>
<!-- A Stripe Element will be inserted here. --> <!-- a Stripe Element will be inserted here. -->
</div>
</div> </div>
</div> <div class="col-md-1 hidden stripe-or">
<div class="col-md-1 hidden"> <div class="hr">
<div class="hr"> <div class="sep">
<div class="sep"> <div class="sepText">{% trans "OR" %}</div>
<div class="sepText">{% trans "OR" %}</div> </div>
</div> </div>
</div> </div>
</div> <div class="col-md-5 vcenter hidden stripe-payment-request-button-container">
<div class="col-md-5 vcenter"> <div id="stripe-payment-request-button">
<div id="stripe-card" class="form-control"> <span class="fa fa-spinner fa-spin"></span>
<span class="fa fa-spinner fa-spin"></span> <!-- A Stripe Element will be inserted here. -->
<!-- a Stripe Element will be inserted here. --> </div>
</div> </div>
</div>
</div> </div>
<p class="help-block"> <p class="help-block">