Skip to content

Commit f4585d3

Browse files
wjames111wjames111
committed
Attempt to fix layout shift.
1 parent 6faf93e commit f4585d3

File tree

2 files changed

+97
-100
lines changed

2 files changed

+97
-100
lines changed

‎src/app/branded/step-1/branded-checkout-step-1.tpl.html‎

Lines changed: 95 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -3,109 +3,114 @@
33
submission-error="$ctrl.submissionError"
44
submission-error-status="$ctrl.submissionErrorStatus">
55
</checkout-error-messages>
6-
<div class="panel">
7-
<div class="panel-body give-loading-overlay-parent">
8-
<loading ng-if="$ctrl.loadingProductConfig">
9-
<translate>Loading gift details...</translate>
10-
</loading>
11-
<product-config-form
12-
code="$ctrl.code"
13-
is-edit="$ctrl.isEdit"
14-
item-config="$ctrl.itemConfig"
15-
default-frequency="$ctrl.defaultFrequency"
16-
uri="$ctrl.item.uri"
17-
submitted="$ctrl.submitted"
18-
on-state-change="$ctrl.onGiftConfigStateChange(state)"
19-
disable-session-restart="true"
20-
ng-if="!$ctrl.loadingProductConfig && !$ctrl.errorLoadingProductConfig"
21-
hide-quarterly="$ctrl.hideQuarterly"
22-
hide-annual="$ctrl.hideAnnual"
23-
use-v3="$ctrl.useV3">
24-
</product-config-form>
25-
<div ng-if="$ctrl.errorLoadingProductConfig" class="alert alert-danger" role="alert">
26-
<p translate='LOADING_ERROR' translate-values="{loadData: '$ctrl.loadData()'}" translate-compile></p>
27-
</div>
28-
</div>
29-
</div>
6+
<loading ng-if="$ctrl.loading || $ctrl.loadingProductConfig || $ctrl.errorLoadingProductConfig">
7+
<translate>{{'LOADING_GIFT_DETAILS'}}</translate>
8+
</loading>
309
<div ng-if="!$ctrl.loadingProductConfig && !$ctrl.errorLoadingProductConfig">
3110
<div class="panel">
32-
<div class="panel-body">
33-
<h3 ng-if="!$ctrl.useV3" class="panel-name" translate>{{'YOUR_INFORMATION'}}</h3>
34-
<contact-info
11+
<div class="panel-body give-loading-overlay-parent">
12+
<loading ng-if="$ctrl.loadingProductConfig">
13+
<translate>Loading gift details...</translate>
14+
</loading>
15+
<product-config-form
16+
code="$ctrl.code"
17+
is-edit="$ctrl.isEdit"
18+
item-config="$ctrl.itemConfig"
19+
default-frequency="$ctrl.defaultFrequency"
20+
uri="$ctrl.item.uri"
3521
submitted="$ctrl.submitted"
36-
on-submit="$ctrl.onContactInfoSubmit(success)"
37-
donor-details="$ctrl.donorDetails"
38-
radio-station-api-url="$ctrl.radioStationApiUrl"
22+
on-state-change="$ctrl.onGiftConfigStateChange(state)"
23+
disable-session-restart="true"
24+
ng-if="!$ctrl.loadingProductConfig && !$ctrl.errorLoadingProductConfig"
25+
hide-quarterly="$ctrl.hideQuarterly"
26+
hide-annual="$ctrl.hideAnnual"
3927
use-v3="$ctrl.useV3">
40-
</contact-info>
28+
</product-config-form>
29+
<div ng-if="$ctrl.errorLoadingProductConfig" class="alert alert-danger" role="alert">
30+
<p translate='LOADING_ERROR' translate-values="{loadData: '$ctrl.loadData()'}" translate-compile></p>
31+
</div>
4132
</div>
4233
</div>
43-
<div class="panel">
44-
<div class="panel-body">
45-
<h3 class="panel-name" translate>{{'PAYMENT'}}</h3>
46-
<checkout-step-2 hide-buttons="true"
47-
submitted="$ctrl.submitted"
48-
on-state-change="$ctrl.onPaymentStateChange(state)"
49-
mailing-address="$ctrl.donorDetails.mailingAddress"
50-
default-payment-type="$ctrl.defaultPaymentType"
51-
hide-payment-type-options="$ctrl.hidePaymentTypeOptions"
52-
branded-checkout-item="$ctrl.showCoverFees === 'true' ? $ctrl.itemConfig : undefined">
53-
</checkout-step-2>
34+
<div>
35+
<div class="panel">
36+
<div class="panel-body">
37+
<h3 ng-if="!$ctrl.useV3" class="panel-name" translate>{{'YOUR_INFORMATION'}}</h3>
38+
<contact-info
39+
submitted="$ctrl.submitted"
40+
on-submit="$ctrl.onContactInfoSubmit(success)"
41+
donor-details="$ctrl.donorDetails"
42+
radio-station-api-url="$ctrl.radioStationApiUrl"
43+
use-v3="$ctrl.useV3">
44+
</contact-info>
45+
</div>
5446
</div>
55-
</div>
56-
<div class="panel" ng-if="$ctrl.premiumCode">
57-
<div class="panel-body">
58-
<h3 class="panel-name" translate>{{'CHOOSE_RESOURCE'}}</h3>
59-
<div class="row text-left">
60-
<div class="col-sm-3">
61-
<div class="row">
62-
<label class="radio-inline">
63-
<input
64-
type="radio"
65-
name="premiumSelect"
66-
ng-model="$ctrl.premiumSelected"
67-
ng-value="true"
68-
ng-change="$ctrl.onSelectPremiumOption()">
69-
{{$ctrl.premiumName}}
70-
</label>
47+
<div class="panel">
48+
<div class="panel-body">
49+
<h3 class="panel-name" translate>{{'PAYMENT'}}</h3>
50+
<checkout-step-2 hide-buttons="true"
51+
submitted="$ctrl.submitted"
52+
on-state-change="$ctrl.onPaymentStateChange(state)"
53+
mailing-address="$ctrl.donorDetails.mailingAddress"
54+
default-payment-type="$ctrl.defaultPaymentType"
55+
hide-payment-type-options="$ctrl.hidePaymentTypeOptions"
56+
branded-checkout-item="$ctrl.showCoverFees === 'true' ? $ctrl.itemConfig : undefined">
57+
</checkout-step-2>
58+
</div>
59+
</div>
60+
<div class="panel" ng-if="$ctrl.premiumCode">
61+
<div class="panel-body">
62+
<h3 class="panel-name" translate>{{'CHOOSE_RESOURCE'}}</h3>
63+
<div class="row text-left">
64+
<div class="col-sm-3">
65+
<div class="row">
66+
<label class="radio-inline">
67+
<input
68+
type="radio"
69+
name="premiumSelect"
70+
ng-model="$ctrl.premiumSelected"
71+
ng-value="true"
72+
ng-change="$ctrl.onSelectPremiumOption()">
73+
{{$ctrl.premiumName}}
74+
</label>
75+
</div>
76+
<div class="row">
77+
<label class="radio-inline">
78+
<input
79+
type="radio"
80+
name="premiumSelect"
81+
ng-model="$ctrl.premiumSelected"
82+
ng-value="false"
83+
ng-change="$ctrl.onSelectPremiumOption()">
84+
<translate>{{'NO_THANK_YOU'}}</translate>
85+
</label>
86+
</div>
7187
</div>
72-
<div class="row">
73-
<label class="radio-inline">
74-
<input
75-
type="radio"
76-
name="premiumSelect"
77-
ng-model="$ctrl.premiumSelected"
78-
ng-value="false"
79-
ng-change="$ctrl.onSelectPremiumOption()">
80-
<translate>{{'NO_THANK_YOU'}}</translate>
81-
</label>
88+
<div ng-if="$ctrl.premiumImageUrl" class="col-sm-4">
89+
<img class="premium-thumbnail" ng-src="{{$ctrl.premiumImageUrl}}" />
8290
</div>
8391
</div>
84-
<div ng-if="$ctrl.premiumImageUrl" class="col-sm-4">
85-
<img class="premium-thumbnail" ng-src="{{$ctrl.premiumImageUrl}}" />
86-
</div>
8792
</div>
8893
</div>
89-
</div>
90-
<div class="panel">
91-
<div class="panel-body text-right">
92-
<div class="checkout-cta pull-right" ng-if="$ctrl.useV3">
93-
<recaptcha-wrapper
94-
action="'branded_checkout'"
95-
on-success="$ctrl.submit"
96-
component-instance="$ctrl"
97-
button-id="'submitOrderButton'"
98-
button-type="'submit'"
99-
button-classes="'btn btn-primary btn-lg btn-block'"
100-
button-disabled="$ctrl.errorLoadingProductConfig || !$ctrl.canSubmitOrder()"
101-
button-label="'SUBMIT_GIFT'"></recaptcha-wrapper>
102-
</div>
94+
<div class="panel">
95+
<div class="panel-body text-right">
96+
<div class="checkout-cta pull-right" ng-if="$ctrl.useV3">
97+
<recaptcha-wrapper
98+
action="'branded_checkout'"
99+
on-success="$ctrl.submit"
100+
component-instance="$ctrl"
101+
button-id="'submitOrderButton'"
102+
button-type="'submit'"
103+
button-classes="'btn btn-primary btn-lg btn-block'"
104+
button-disabled="$ctrl.errorLoadingProductConfig || !$ctrl.canSubmitOrder()"
105+
button-label="'SUBMIT_GIFT'"></recaptcha-wrapper>
106+
</div>
103107

104-
<button ng-if="!$ctrl.useV3" class="btn btn-primary"
105-
ng-click="$ctrl.submit()"
106-
ng-disabled="$ctrl.errorLoadingProductConfig"
107-
translate>{{'CONTINUE'}}</button>
108-
</div>
108+
<button ng-if="!$ctrl.useV3" class="btn btn-primary"
109+
ng-click="$ctrl.submit()"
110+
ng-disabled="$ctrl.errorLoadingProductConfig"
111+
translate>{{'CONTINUE'}}</button>
112+
</div>
113+
</div>
109114
</div>
110115
</div>
111116
<loading type="fixed" ng-if="$ctrl.loadingAndSubmitting">

‎src/app/productConfig/productConfigForm/productConfigForm.tpl.html‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ <h4 id="product-config-header" class="give-gift-header" translate>
1212
{{'GIVE_GIFT_HEADER'}}
1313
</h4>
1414
</div>
15-
<div class="col-sm-6" ng-if="!$ctrl.loading && !$ctrl.errorLoading">
15+
<div class="col-sm-6" >
1616
<div class="give-modal-recipient">
1717
<img class="recipient-image" desig-src="{{$ctrl.productData.designationNumber}}" campaign-page="{{$ctrl.itemConfig['campaign-page']}}">
1818
<span class="recipient-title" ng-bind-html="$ctrl.itemConfig['jcr-title']"></span>
@@ -21,14 +21,6 @@ <h4 id="product-config-header" class="give-gift-header" translate>
2121
</div>
2222
</div>
2323

24-
<loading ng-if="$ctrl.loading">
25-
<translate>{{'LOADING_GIFT_DETAILS'}}</translate>
26-
</loading>
27-
28-
<div ng-if="$ctrl.errorLoading" class="alert alert-danger" role="alert">
29-
<p translate='LOADING_ERROR' translate-values="{loadData: '$ctrl.loadData()'}" translate-compile></p>
30-
</div>
31-
3224
<div class="panel panel-default panel-plain mt" ng-if="$ctrl.showGivingLinks">
3325
<div class="panel panel-default give-modal-panel">
3426
<h4 class="panel-title border-bottom-small" translate>
@@ -53,7 +45,7 @@ <h4 class="panel-title border-bottom-small" translate>
5345
</div>
5446
</div>
5547

56-
<div ng-if="!$ctrl.loading && !$ctrl.errorLoading && !$ctrl.showGivingLinks">
48+
<div ng-if="!$ctrl.errorLoading && !$ctrl.showGivingLinks">
5749
<div ng-class="{'give-selection-reverse-order': $ctrl.useV3}">
5850
<div class="panel panel-default panel-plain mt suggested-gift-amounts">
5951

0 commit comments

Comments
 (0)