Change Banner width
This commit is contained in:
PascalMarchesseault
@@ -1,97 +1,101 @@
|
||||
<template>
|
||||
<!-- Bannière-->
|
||||
<div class="relative bottom-4 z-20 m">
|
||||
<div class="relative flex flex-col">
|
||||
<!-- Social Network-->
|
||||
<div class="bg-opacity-50 flex flex-col md:flex-row items-center py-4 px-4 min-h-14"
|
||||
:style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
|
||||
<div class="w-full flex justify-between lg:justify-end gap-14 mt-2">
|
||||
<a
|
||||
v-for="socialNetwork in GetSocialsUrls()"
|
||||
:href="socialNetwork.url"
|
||||
target="_blank"
|
||||
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
|
||||
<v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
|
||||
<img v-if="socialNetwork.icon.includes('tiktok')" :src="socialNetwork.icon" class="w-9 h-9" alt="Tiktok">
|
||||
<img v-if="socialNetwork.icon.includes('websiteIcon')" :src="socialNetwork.icon" class="w-9 h-9"
|
||||
alt="Website">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Banner & user info-->
|
||||
<div class="relative">
|
||||
<!--Banner-->
|
||||
<div>
|
||||
<img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]"
|
||||
:src="creator.images.banner"
|
||||
alt="Profile Banner" style="max-height: 425px">
|
||||
</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"
|
||||
: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-[200px] max-w-[200px] h-auto"
|
||||
:src="creator.images.logo"
|
||||
alt="Profile Picture"
|
||||
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
|
||||
/>
|
||||
<div>
|
||||
<div class="relative z-20">
|
||||
<div class="relative flex flex-col">
|
||||
<!-- Social Network-->
|
||||
<div class="bg-opacity-50 flex flex-col md:flex-row items-center py-4 px-4 min-h-14"
|
||||
:style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
|
||||
<div class="w-full flex justify-between lg:justify-end gap-14 mt-2">
|
||||
<a
|
||||
v-for="socialNetwork in GetSocialsUrls()"
|
||||
:href="socialNetwork.url"
|
||||
target="_blank"
|
||||
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
|
||||
<v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
|
||||
<img v-if="socialNetwork.icon.includes('tiktok')" :src="socialNetwork.icon" class="w-9 h-9"
|
||||
alt="Tiktok">
|
||||
<img v-if="socialNetwork.icon.includes('websiteIcon')" :src="socialNetwork.icon" class="w-9 h-9"
|
||||
alt="Website">
|
||||
</a>
|
||||
</div>
|
||||
</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>
|
||||
<!--Banner & user info-->
|
||||
<div class="relative">
|
||||
<!--Banner-->
|
||||
<div>
|
||||
<img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]"
|
||||
:src="creator.images.banner"
|
||||
alt="Profile Banner" style="max-height: 425px">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-6 mt-2">
|
||||
<subscribe-button :creator="creator"></subscribe-button>
|
||||
</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"
|
||||
: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">
|
||||
|
||||
<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>
|
||||
<!-- 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-[200px] max-w-[200px] 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 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">
|
||||
</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>
|
||||
<publish-content-button :creator="creator"
|
||||
@content-posted="addContent"
|
||||
></publish-content-button>
|
||||
|
||||
<div class="text-white text-2xl">
|
||||
{{ creator.about.title }}
|
||||
<div class="text-white text-2xl">
|
||||
{{ creator.about.title }}
|
||||
</div>
|
||||
|
||||
<creator-about :creator="creator"
|
||||
></creator-about>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<creator-about :creator="creator"
|
||||
></creator-about>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
Reference in New Issue
Block a user