CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-05 15:14:04 +00:00
Code Issues Packages Projects Releases Wiki 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 {
width:2px;
height:100px;
height:64px;
background-color: #DDDDDD;
position:inherit;
top:0px;
left:50%;
z-index:10;
}
#stripe-card {
margin: 15px 0;
}
@media only screen and (max-width: 999px) {
.hr {
@@ -31,13 +34,41 @@
.sepText {
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) {
.row.equal {
#stripe-elements {
display: flex;
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 {

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

@@ -74,7 +74,7 @@ var pretixstripe = {
// and submit
$form.get(0).submit();
});
} catch {
} catch (e) {
pretixstripe.paymentRequest = null;
}
} else {
@@ -112,15 +112,10 @@ var pretixstripe = {
pretixstripe.paymentRequest.canMakePayment().then(function(result) {
if (result) {
pretixstripe.paymentRequestButton.mount('#stripe-payment-request-button');
$('#stripe-payment-request-button').parent().hide();
$('#stripe-payment-request-button').parent().next("div").hide();
$('#stripe-elements .stripe-or').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 {
$('#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';
}
});

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

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