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

Add slim menu

Browse Source
This commit is contained in:
PascalMarchesseault
2024-09-11 15:41:44 -04:00
parent df223d219f
commit 13049e9d2a
3 changed files with 305 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,8 +31,15 @@
iconColorClass="text-white">
</donation-button-banner>
<div class="flex flex-column">
<subscribe-button :creator="creator" :color-border="creator.colors.menu"></subscribe-button>
<div class="font-bold text-white flex justify-end mr-5 py-1.5">{{ creator.subscriberCount }} {{ $t('banner.subscription') }}</div>
<!-- Bouton abonnement affiché seulement si non abonné -->
<subscribe-button
:creator="creator"
:color-border="creator.colors.menu">
</subscribe-button>
<div class="font-bold text-white flex justify-end mr-5 py-1.5">
{{ creator.subscriberCount }} {{ $t('banner.subscription') }}
</div>
</div>
</div>
</div>
@@ -42,7 +49,7 @@
<!-- Conteneur sticky -->
<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-2xl flex flex-row items-center py-2">
<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"
@@ -51,35 +58,53 @@
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
/>
</div>
<div class="ml-5 text-white">
<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">
<donation-button-banner
<div class="ml-auto flex flex-row space-x-2.5 ">
<donation-button-banner-slim
: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>
<subscribe-button :creator="creator" :color-border="creator.colors.menu"></subscribe-button>
>
</donation-button-banner-slim>
<!-- Afficher le bouton d'abonnement seulement si l'utilisateur n'est pas abonné -->
<subscribe-button-slim
v-if="!isSubscribed"
:creator="creator"
:color-border="creator.colors.menu">
</subscribe-button-slim>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ref, onMounted, computed } from 'vue';
import { useSubscriptionStore } from "@/stores/subscriptionStore.js";
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
import SubscribeButtonSlim from "@/views/creators/SubscribeButtonSlim.vue";
import DonationButtonBannerSlim from "@/views/creators/DonationButtonBannerSlim.vue";
const props = defineProps({
creator: { type: Object, required: true }
});
const subscriptionStore = useSubscriptionStore();
// Calculer si l'utilisateur est abonné
const isSubscribed = computed(() => subscriptionStore.isSubscribeTo(props.creator.id));
const isSticky = ref(false);
const mainContainer = ref(null);
@@ -97,8 +122,3 @@ onMounted(() => {
});
</script>
<style scoped>
.sticky-header {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>