jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change banner donation btn

Browse Source
This commit is contained in:
PascalMarchesseault
2024-11-02 01:15:22 -04:00
parent b170d485e7
commit 589b4ef47b
3 changed files with 55 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/views/creators/BannerActions.vue
View File

@@ -55,65 +55,18 @@
</div>
</div>
<div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-md text-white"
<div class="absolute bottom-6 right-8 z-30 shadow-2xl rounded-md text-white w-64 h-28 flex justify-center align-center"
:style="{ backgroundColor: brandingStore.colors.secondary}">
<div class="w-96 h-28 flex flex-col">
<!-- Section 3 et 4 - Prend 2/3 de la hauteur -->
<div class="flex flex-row flex-grow-[2] min-h-20">
<div class="rounded-tl-md w-1/2 flex items-center justify-center"
:style="{ backgroundColor: brandingStore.colors.primary, opacity: 0.20 }">
</div>
<div class="rounded-tr-md w-1/2 bg-cyan-100 flex items-center justify-center text-xl"
:style="{ backgroundColor: brandingStore.colors.secondary}">
<div class="absolute left-1">
<div class="flex flex-row items-center justify-center space-x-5">
<div class="flex flex-row items-center">
<div style="display: flex; align-items: center;">
<textarea class="text-3xl" rows="1" cols="6"
style="border: none; resize: none; text-align: right; outline: none;"
placeholder="0"></textarea>
<div class="px-1">$</div>
</div>
</div>
<div class="flex flex-col items-center space-y-2">
<v-btn
:style="{ backgroundColor: brandingStore.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
variant="tonal">+
</v-btn>
<v-btn
:style="{ backgroundColor: brandingStore.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
variant="tonal">-
</v-btn>
</div>
</div>
</div>
<v-btn variant="text"
height="80px"
width="200px"
style="font-size: 18px;">Je supporte
</v-btn>
</div>
</div>
<div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-md"
:style="{ backgroundColor: brandingStore.colors.secondary, opacity: 0.80 }">
<textarea
rows="1"
placeholder="Message facultatif"
class="w-full p-2 border border-gray-300 rounded-b-md resize-none"
style="max-height: 300px; overflow-y: hidden; outline: none;"
oninput="this.style.height = ''; this.style.height = Math.min(this.scrollHeight, 300) + 'px'"
></textarea>
</div>
</div>
<donation-button-banner
:creator-id="creatorId"
:creator-name="creatorName"
:on-success-url="successUrl"
:on-cancelled-url="cancelledUrl"></donation-button-banner>
</div>
</div>
</div>
</div>
@@ -150,6 +103,8 @@
import {ref, onMounted} from 'vue';
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
import DonationButton from "@/views/creators/DonationButton.vue";
const brandingStore = useBrandingStore()