I found part of the bug for mobile (the empty space on the side) - Still need to fix the profile picture and social media icons (as they create space).

Move the language button and its logic.

Modify the sidebar (add navigation buttons for mobile).

Fix the display bug for the Subscription list.
This commit is contained in:
PascalMarchesseault
2024-09-10 01:05:17 -04:00
parent 94950a3cba
commit 29b07b40ba
7 changed files with 118 additions and 63 deletions

View File

@@ -27,6 +27,7 @@
</div>
</div>
<div class="h-1.5" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"> ></div>
<!--Banner-->
<div class="relative">
<div>

View File

@@ -8,7 +8,7 @@
</div>
<div class="max-w-[800px] mx-auto">
<div class="w-full h-full mx-1">
<div class="w-full h-full ">
<content-list :creator-id="creator.id"
:contents="contents"
></content-list>

View File

@@ -9,9 +9,9 @@ const subscriptionStore = useSubscriptionStore()
<template v-if="Object.keys(subscriptionStore.subscriptions).length > 0">
<template v-for="subscription in subscriptionStore.subscriptions">
<RouterLink :to="`/@${subscription.creatorName}`">
<RouterLink class="capitalize" :to="`/@${subscription.creatorName}`">
<div class="flex items-center content-center font-sans font-semibold pt-2">
<div class="flex items-center content-center font-sans font-semibold pt-2 ">
<img :src="subscription.creatorPortraitUrl ? subscription.creatorPortraitUrl: '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png' "
alt="Profile Image"
class="rounded-full mx-2"
@@ -27,7 +27,7 @@ const subscriptionStore = useSubscriptionStore()
<template v-else>
<slot>
<span>Placeholder when there are no subscriptions</span>
<span>No subscriptions</span>
</slot>
</template>

View File

@@ -9,12 +9,14 @@
<!-- Logo-Name-Followers-->
<div class="flex flex-row relative z-20">
<div>
<img
class="rounded-full border-solid border-2 -mt-4 max-w-[80px] h-auto ml-2"
:src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture"
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
/>
<!-- bug space-->
<!-- <img-->
<!-- -->
<!-- class="rounded-full border-solid border-2 -mt-4 max-w-[80px] h-auto ml-2"-->
<!-- :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"-->
<!-- alt="Profile Picture"-->
<!-- :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"-->
<!-- />-->
</div>
<div class="flex flex-column text-white capitalize px-2 mt-1">