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

Creator news summary - presentation design

Browse Source
This commit is contained in:
PascalMarchesseault
2024-09-19 16:22:06 -04:00
parent 8daef55cff
commit c56be8d1a1
4 changed files with 176 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/views/creators/banner/bannerlower/BannerActionsXl.vue
View File

@@ -63,16 +63,16 @@
</div>
</div>
<div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-2xl text-white"
<div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-md text-white"
:style="{ backgroundColor: creator.colors.bannerTop}">
<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-xl w-1/2 flex items-center justify-center"
<div class="rounded-tl-md w-1/2 flex items-center justify-center"
:style="{ backgroundColor: creator.colors.bannerBottom, opacity: 0.20 }">
</div>
<div class="rounded-tr-xl w-1/2 bg-cyan-100 flex items-center justify-center text-xl"
<div class="rounded-tr-md w-1/2 bg-cyan-100 flex items-center justify-center text-xl"
:style="{ backgroundColor: creator.colors.bannerBottom}">
<div class="absolute left-1">
<div class="flex flex-row items-center justify-center space-x-5">
@@ -105,15 +105,15 @@
</v-btn>
</div>
</div>
<!-- Section 1 - Prend 1/3 de la hauteur -->
<div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-2xl"
<div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-md"
:style="{ backgroundColor: creator.colors.bannerBottom,opacity: 0.80 }">
<textarea
rows="1"
placeholder="Message facultatif"
class="w-full p-2 border border-gray-300 rounded-b-2xl resize-none"
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>
@@ -122,61 +122,6 @@
</div>
</div>
</div>
<!-- <div class="flex flex-row ml-auto space-x-2.5">-->
<!-- <donation-button-banner-->
<!-- :color-border="creator.colors.menu"-->
<!-- :color-accent="creator.colors.accent"-->
<!-- :creator-id="creator.id"-->
<!-- :creator-name="creator.name"-->
<!-- :creator-logo="creator.images.logo"-->
<!-- iconColorClass="text-white">-->
<!-- </donation-button-banner>-->
<!-- <div class="flex flex-column">-->
<!-- &lt;!&ndash; Bouton abonnement affiché seulement si non abonné &ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
<!-- -->
<!-- &lt;!&ndash; Conteneur sticky &ndash;&gt;-->
<!-- <div v-show="isSticky" class=" sticky-header fixed top-14 left-0 right-0 w-full z-20"-->
<!-- :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79', borderBottom: '5px inset' + (creator.colors.menu || '#000') }">-->
<!-- <div class="shadow-3xl flex flex-row items-center py-2 px-2">-->
<!-- <div>-->
<!-- <img-->
<!-- class="max-w-[40px] max-h-[40px] ml-5 rounded-full"-->
<!-- :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"-->
<!-- alt="Profile Picture"-->
<!-- :style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"-->
<!-- />-->
<!-- </div>-->
<!-- <div class="ml-5 text-white">-->
<!-- <p class="capitalize text-2xl font-bold">{{ creator.name }}</p>-->
<!-- </div>-->
<!-- <div class="ml-auto flex flex-row space-x-2.5 mr-3 ">-->
<!-- -->
<!-- <donation-button-banner-slim -->
<!-- class=""-->
<!-- :color-border="creator.colors.menu"-->
<!-- :color-accent="creator.colors.accent"-->
<!-- :creator-id="creator.id"-->
<!-- :creator-name="creator.name"-->
<!-- :creator-logo="creator.images.logo"-->
<!-- >-->
<!-- </donation-button-banner-slim>-->
<!-- &lt;!&ndash; Afficher le bouton d'abonnement seulement si l'utilisateur n'est pas abonné &ndash;&gt;-->
<!-- <subscribe-button-slim-->
<!-- v-if="!isSubscribed"-->
<!-- :creator="creator"-->
<!-- :color-border="creator.colors.menu">-->
<!-- </subscribe-button-slim>-->
<!-- -->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
<div class="rounded-b-2xl min-h-10 px-36 flex flex-col items-center justify-center"