Skip to content

Commit

Permalink
fix: remove extra template tags creating render issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@dyersituations
dyersituations committed Aug 14, 2024
1 parent 6f71180 commit 153fee4
Show file tree
Hide file tree
Showing 4 changed files with 223 additions and 231 deletions.
292 changes: 145 additions & 147 deletions src/components/Checkout/DonationItem.vue
View file
Original file line number Diff line number Diff line change
@@ -1,193 +1,191 @@
<template>
<!-- DO NOT REMOVE basket-donation-item class -->
<div class="basket-donation-item">
<template>
<div class="tw-flex tw-flex-col md:tw-flex-row tw-pb-5">
<!-- donation image -->
<div class="tw-hidden md:tw-block tw-flex-none md:tw-mr-3 lg:tw-mr-4.5">
<img
class="tw-bg-brand-100 tw-border tw-border-gray-300 tw-w-12 tw-h-12 tw-p-1 tw-rounded"
:src="leafHeartUrl"
alt="donation line item image"
data-testid="basket-donation-image"
>
</div>
<div class="tw-flex tw-flex-col md:tw-flex-row tw-pb-5">
<!-- donation image -->
<div class="tw-hidden md:tw-block tw-flex-none md:tw-mr-3 lg:tw-mr-4.5">
<img
class="tw-bg-brand-100 tw-border tw-border-gray-300 tw-w-12 tw-h-12 tw-p-1 tw-rounded"
:src="leafHeartUrl"
alt="donation line item image"
data-testid="basket-donation-image"
>
</div>

<!-- donation text -->
<div class="tw-flex-auto">
<div class="tw-mb-0.5">
<div class="tw-flex tw-items-center tw-justify-between">
<div>
<div class="tw-w-full tw-flex">
<h2
class="tw-flex-1 md:tw-flex-grow tw-text-h3"
data-testid="basket-donation-title"
>
{{ basketDonationHeader }}
</h2>
</div>
<div
v-show="!editDonation"
class="md:tw-hidden"
<!-- donation text -->
<div class="tw-flex-auto">
<div class="tw-mb-0.5">
<div class="tw-flex tw-items-center tw-justify-between">
<div>
<div class="tw-w-full tw-flex">
<h2
class="tw-flex-1 md:tw-flex-grow tw-text-h3"
data-testid="basket-donation-title"
>
{{ basketDonationHeader }}
</h2>
</div>
<div
v-show="!editDonation"
class="md:tw-hidden"
>
<button
class="donation-amount"
data-testid="basket-donation-edit-button-mobile-amount"
v-kv-track-event="['basket', 'Edit Donation']"
@click="enterEditDonation"
title="Edit Donation"
>
<button
class="donation-amount"
data-testid="basket-donation-edit-button-mobile-amount"
v-kv-track-event="['basket', 'Edit Donation']"
@click="enterEditDonation"
{{ formattedAmount }}
<kv-material-icon
role="img"
aria-label="Edit Donation"
title="Edit Donation"
>
{{ formattedAmount }}
<kv-material-icon
role="img"
aria-label="Edit Donation"
title="Edit Donation"
class="edit-donation tw-text-action
class="edit-donation tw-text-action
tw-w-3.5
tw-h-3.5
tw-py-0.5
tw-hidden md:tw-inline-block
"
name="pencil"
:icon="mdiPencil"
/>
</button>
<button
class="donation-amount md:tw-hidden tw-flex-none tw-align-middle"
data-testid="basket-donation-edit-button-mobile-pencil"
v-kv-track-event="['basket', 'Edit Donation']"
@click="enterEditDonation"
name="pencil"
:icon="mdiPencil"
/>
</button>
<button
class="donation-amount md:tw-hidden tw-flex-none tw-align-middle"
data-testid="basket-donation-edit-button-mobile-pencil"
v-kv-track-event="['basket', 'Edit Donation']"
@click="enterEditDonation"
title="Edit Donation"
>
<kv-material-icon
role="img"
aria-label="Edit Donation"
title="Edit Donation"
>
<kv-material-icon
role="img"
aria-label="Edit Donation"
title="Edit Donation"
class="edit-donation tw-text-action
class="edit-donation tw-text-action
tw-w-3.5
tw-h-3.5
tw-py-0.5
md:tw-hidden"
name="pencil"
:icon="mdiPencil"
/>
</button>
</div>
</div>
<div class="tw-block md:tw-hidden tw-flex-none md:tw-mr-3 lg:tw-mr-4.5">
<img
class="tw-w-7 tw-h-7 tw-rounded"
:src="leafHeartUrl"
alt="donation line item image"
data-testid="basket-donation-image"
>
name="pencil"
:icon="mdiPencil"
/>
</button>
</div>
</div>

<div>
<div
class="donation-tagline tw-my-1 tw-max-w-2xl"
data-testid="basket-donation-tagline"
<div class="tw-block md:tw-hidden tw-flex-none md:tw-mr-3 lg:tw-mr-4.5">
<img
class="tw-w-7 tw-h-7 tw-rounded"
:src="leafHeartUrl"
alt="donation line item image"
data-testid="basket-donation-image"
>
<p
class="tw-text-base"
>
{{ basketDonationTagline }}
</p>
</div>
<button
class="tw-flex tw-items-center tw-text-base tw-text-link"
data-testid="basket-donation-info-lightbox"
@click="triggerDefaultLightbox"
v-kv-track-event="['basket', 'Donation Info Lightbox', 'Open Lightbox']"
</div>
</div>

<div>
<div
class="donation-tagline tw-my-1 tw-max-w-2xl"
data-testid="basket-donation-tagline"
>
<p
class="tw-text-base"
>
{{ donationDetailsLink }}
<kv-material-icon
class="tw-ml-0.5 tw-w-2 tw-h-2"
:icon="mdiArrowRight"
/>
</button>
{{ basketDonationTagline }}
</p>
</div>
<button
class="tw-flex tw-items-center tw-text-base tw-text-link"
data-testid="basket-donation-info-lightbox"
@click="triggerDefaultLightbox"
v-kv-track-event="['basket', 'Donation Info Lightbox', 'Open Lightbox']"
>
{{ donationDetailsLink }}
<kv-material-icon
class="tw-ml-0.5 tw-w-2 tw-h-2"
:icon="mdiArrowRight"
/>
</button>
</div>
</div>
</div>

<!-- donation total -->
<div
class="
<!-- donation total -->
<div
class="
tw-flex-none
tw-w-full
md:tw-w-auto
md:tw-ml-3
lg:tw-ml-4.5
tw-mt-1.5
md:tw-mt-0"
>
<div
v-show="!editDonation"
class="tw-hidden md:tw-block tw-text-right"
>
<div
v-show="!editDonation"
class="tw-hidden md:tw-block tw-text-right"
<button
class="donation-amount"
data-testid="basket-donation-edit-button-combined"
v-kv-track-event="['basket', 'Edit Donation']"
@click="enterEditDonation"
title="Edit Donation"
>
<button
class="donation-amount"
data-testid="basket-donation-edit-button-combined"
v-kv-track-event="['basket', 'Edit Donation']"
@click="enterEditDonation"
{{ formattedAmount }}
<kv-material-icon
role="img"
aria-label="Edit Donation"
title="Edit Donation"
>
{{ formattedAmount }}
<kv-material-icon
role="img"
aria-label="Edit Donation"
title="Edit Donation"
class="edit-donation tw-text-action
class="edit-donation tw-text-action
tw-w-3.5
tw-h-3.5
tw-py-0.5
tw-align-bottom
"
name="pencil"
:icon="mdiPencil"
/>
</button>
</div>
<div v-show="editDonation" class="small-12 columns donation-amount-input-wrapper">
<kv-text-input
class="donation-amount-input"
data-testid="basket-donation-edit-input"
name="donation"
id="donation"
v-model="amount"
@blur="validateInput"
@keyup.enter.prevent="updateDonation()"
name="pencil"
:icon="mdiPencil"
/>
<kv-button
variant="secondary"
class="update-donation-inline-button"
data-testid="basket-donation-edit-submit"
@click="updateDonation()"
>
Update
</kv-button>
<button
class="show-for-medium remove-wrapper"
@click="updateLoanAmount('remove')"
data-testid="basket-donation-remove"
>
<kv-material-icon
class="remove-x tw-text-tertiary"
name="small-x"
:from-sprite="true"
title="Remove donation"
/>
</button>
</div>
<donate-repayments
v-if="hasLoans"
@updating-totals="$emit('updating-totals', $event)"
@refreshtotals="$emit('refreshtotals')"
</button>
</div>
<div v-show="editDonation" class="small-12 columns donation-amount-input-wrapper">
<kv-text-input
class="donation-amount-input"
data-testid="basket-donation-edit-input"
name="donation"
id="donation"
v-model="amount"
@blur="validateInput"
@keyup.enter.prevent="updateDonation()"
/>
<kv-button
variant="secondary"
class="update-donation-inline-button"
data-testid="basket-donation-edit-submit"
@click="updateDonation()"
>
Update
</kv-button>
<button
class="show-for-medium remove-wrapper"
@click="updateLoanAmount('remove')"
data-testid="basket-donation-remove"
>
<kv-material-icon
class="remove-x tw-text-tertiary"
name="small-x"
:from-sprite="true"
title="Remove donation"
/>
</button>
</div>
<donate-repayments
v-if="hasLoans"
@updating-totals="$emit('updating-totals', $event)"
@refreshtotals="$emit('refreshtotals')"
/>
</div>
</template>
</div>
<!-- Donation nudge lightbox -->
<donation-nudge-lightbox
ref="nudgeLightbox"
Expand Down
4 changes: 1 addition & 3 deletions src/components/Checkout/OrderTotals.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,9 +186,7 @@
v-if="isCorporateCampaign"
class="tw-w-auto tw-text-right tw-flex-1"
>
<template>
You'll pay:
</template>
You'll pay:
</div>
<div
class="tw-pl-2"
Expand Down
28 changes: 13 additions & 15 deletions src/components/LoanCards/NewHomePageLoanCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,24 +94,22 @@
<div v-if="!isLoading" class="tw-flex-auto tw-mb-2">
<figure>
<figcaption class="tw-flex">
<template>
<div class="tw-flex-auto tw-text-left">
<p
class="tw-text-h3 tw-m-0 progress-text tw-mb-2 tw-mt-2"
data-testid="bp-summary-amount-to-go"
>
{{ Math.floor(fundraisingPercent) }}% FUNDED
</p>
</div>
<div class="tw-flex-auto tw-text-left">
<p
class="tw-flex-auto tw-text-right progress-text tw-mb-2 tw-mt-2"
data-testid="bp-summary-timeleft"
class="tw-text-h3 tw-m-0 progress-text tw-mb-2 tw-mt-2"
data-testid="bp-summary-amount-to-go"
>
<span lass="tw-text-h3 tw-block tw-m-0">
{{ $filters.numeral(loanAmount, '$0,0[.]00') }}
</span>
{{ Math.floor(fundraisingPercent) }}% FUNDED
</p>
</template>
</div>
<p
class="tw-flex-auto tw-text-right progress-text tw-mb-2 tw-mt-2"
data-testid="bp-summary-timeleft"
>
<span lass="tw-text-h3 tw-block tw-m-0">
{{ $filters.numeral(loanAmount, '$0,0[.]00') }}
</span>
</p>
</figcaption>
<kv-progress-bar
v-if="!isLoading"
Expand Down
Loading

0 comments on commit 153fee4

Please sign in to comment.