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

Banner UI changes

Browse Source
This commit is contained in:
PascalMarchesseault
2024-08-18 13:34:07 -04:00
parent 616bbb9249
commit 53fac86338
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,10 +2,11 @@
<!-- Bannière-->
<div>
<div class="relative z-20">
<div class="relative flex flex-col">
<div>
<!-- Social Network-->
<div class="bg-opacity-50 flex flex-col md:flex-row items-center py-4 px-4 min-h-14"
<div class="py-4 px-4 min-h-14 md:rounded-t-none lg:rounded-t-2xl"
: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()"
@@ -26,7 +27,7 @@
<div class="relative">
<!--Banner-->
<div>
<img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]"
<img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.35)]"
:src="creator.images.banner"
alt="Profile Banner" style="max-height: 425px">
</div>
@@ -35,7 +36,7 @@
<!-- Actions Button & image profile -->
<div class="relative bottom-4 w-full">
<div class="bg-gray-800 py-4 relative shadow-lg min-h-24"
<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 -->
@@ -44,7 +45,7 @@
<!-- 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"
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'}"