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

Fix LowerBannerUI structure with subfiles and breakpoints.

Browse Source
This commit is contained in:
PascalMarchesseault
2024-08-19 15:48:46 -04:00
parent 53fac86338
commit 16203613c0
8 changed files with 333 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/views/creators/CreatorBanner.vue
View File

@@ -32,69 +32,12 @@
alt="Profile Banner" style="max-height: 425px">
</div>
</div>
</div>
</div>
<!-- Actions Button & image profile -->
<div class="relative bottom-4 w-full">
<div class="bg-gray-800 py-4 relative shadow-lg min-h-24 md:rounded-b-none lg:rounded-b-2xl"
:style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
<div class="flex flex-col items-center lg:flex-row lg:items-center lg:justify-between">
<!-- Profile Image Wrapper -->
<div class="relative flex justify-center lg:w-auto lg:justify-start">
<!-- Profile Image -->
<div class="absolute lg:ml-72 transform -translate-y-1/2 lg:-translate-y-1/2 z-20">
<img
class="rounded-full border-solid border-2 z-20 lg:max-w-[175px] max-w-[175px] sm:max-w-[125px] h-auto"
:src="creator.images.logo"
alt="Profile Picture"
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
/>
</div>
</div>
<!-- User Info -->
<div class="mt-2 flex flex-col items-center lg:items-start lg:ml-64">
<div class="text-3xl font-bold text-center lg:text-left md:mt-24 lg:mt-0 sm:mt-24 mt-24 text-white cap ">
<p class="capitalize ">{{ creator.name }} </p>
<div class="text-lg text-white">{{ creator.subscriberCount }} Abonnés</div>
</div>
</div>
<div class="px-6 mt-2">
<subscribe-button :creator="creator"></subscribe-button>
</div>
<donation-button :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>
<div class="flex flex-row align-center">
</div>
<!-- Buttons -->
<div class="flex flex-wrap items-center mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4">
<publish-content-button :creator="creator"
@content-posted="addContent"
></publish-content-button>
<div class="text-white text-2xl">
{{ creator.about.title }}
</div>
<creator-about :creator="creator"
></creator-about>
</div>
</div>
</div>
</div>
<banner-actions :creator="creator" @content-posted="addContent"></banner-actions>
</div>
</template>
@@ -104,6 +47,7 @@ import CreatorAbout from "@/views/creators/CreatorAbout.vue";
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
import DonationButton from "@/views/creators/DonationButton.vue";
import BannerActions from "@/views/creators/banner/BannerActions.vue";
const props = defineProps({
creator: {type: Object, required: true},