jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CASH-132 donation block updates.

Browse source
This commit is contained in:
Bryan Mauger 2025-02-19 18:35:00 -05:00
parent 19eb891ca9
commit 91da7f8c45
2 changed files with 48 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
src/fmg-components/donation-block/donation-block.vue
View file

@ -1,12 +1,12 @@
<template>
<div class="donation-block">
<form ref="donationForm" id="donation-form" @submit.prevent="handleDonationAction">
<div class="row">
<div class="col">
<div class="row g-0">
<div class="col-12">
<p class="headline text-center" v-html="DonationHeadline"></p>
</div>
</div>
<div class="row-align d-flex">
<div class="row-align d-flex px-4">
<div>
<img class="w-100 mt-1 me-4" :src="LogoImage" />
</div>
@ -20,40 +20,42 @@
target="_blank" />
</div>
</div>
<div class="row">
<div class="col">
<div class="donation-slider my-4">
<input
name="amount"
id="one"
type="radio"
:value="donationValues[0]"
checked />
<label for="one" class="label">$1</label>
<input name="amount" id="three" type="radio" :value="donationValues[1]" />
<label for="three" class="label">$3</label>
<input name="amount" id="five" type="radio" :value="donationValues[2]" />
<label for="five" class="label">$5</label>
<div class="indicator-bar"></div>
<div class="px-4" :class="[showDonationSuccess ? 'hide-donation-block' : 'show-donation-block']">
<div class="row">
<div class="col-12">
<div class="donation-slider my-4">
<input
name="amount"
id="one"
type="radio"
:value="donationValues[0]"
checked />
<label for="one" class="label">$1</label>
<input name="amount" id="three" type="radio" :value="donationValues[1]" />
<label for="three" class="label">$3</label>
<input name="amount" id="five" type="radio" :value="donationValues[2]" />
<label for="five" class="label">$5</label>
<div class="indicator-bar"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<button
class="btn btn-secondary w-100 mb-2"
v-html="DonationAddButtonWidget"></button>
</div>
</div>
</div>
<div class="row">
<div class="col">
<button
class="btn btn-secondary w-100 mb-2"
v-html="DonationAddButtonWidget"></button>
</div>
</div>
<div class="row">
<div class="col">
<div class="row px-4">
<div class="col-12">
<div
v-if="showDonationSuccess"
class="d-flex justify-content-center align-items-center btn-success w-100 mb-2"
v-html="DonationThanksAlertWidget"></div>
</div>
</div>
<div class="row">
<div class="row px-4">
<div class="col">
<alert
v-if="showDonationError"
@ -62,7 +64,7 @@
</div>
</div>
<div class="row">
<div class="col">
<div class="col-12">
<p class="my-4 mx-0 text-center caption" v-html="DonationFooterText"></p>
</div>
</div>
@ -134,10 +136,26 @@ export default {
<style lang="scss" scoped>
.donation-block {
padding: 1rem;
padding: 1rem 0;
background-color: $gray-100;
border-radius: 0;
.hide-donation-block {
max-height: 0;
overflow: hidden;
margin-top: 1rem;
opacity: 0;
transition: all 250ms ease-in;
}
.show-donation-block {
max-height: 136px;
overflow: hidden;
margin-top: 0;
opacity: 1;
transition: all 250ms ease-in;
}
p {
&.headline {
font-family: AvertaBold;

2
src/layouts/confirmation/confirmation.vue
View file

@ -73,8 +73,6 @@
:showDonationError="showDonationError" />
</div>
<h3>donationAmount: {{ donationAmount }}</h3>
<!-- <button type="button" @click="addDonation(3)">
Add Donation of $3
</button> -->