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

Need Ui tweaking - added small menu when scrolling

Browse Source
This commit is contained in:
PascalMarchesseault
2024-09-10 19:33:56 -04:00
parent 3e477e36a1
commit df223d219f
1 changed files with 65 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,33 +1,26 @@
<template>
<div class="relative w-full">
<div class="rounded-b-2xl pt-2 pb-1"
<div ref="mainContainer" class="rounded-b-2xl pt-2 pb-1"
:style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79', borderBottom: '5px inset' + (creator.colors.menu || '#000') }">
<div class="relative z-20">
<!-- Logo & User Info -->
<div class="relative z-20">
<div class="flex flex-row items-center py-2">
<!--Logo & User Info-->
<div>
<div>
<img
class="shadow-2xl rounded-full border-solid border-4 absolute z-20 max-w-[190px] ml-15 -mt-32"
:src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture"
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
/>
</div>
<img
class="shadow-2xl rounded-full border-solid border-4 absolute z-20 max-w-[190px] ml-15 -mt-32"
:src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture"
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
/>
</div>
<div class="ml-72 text-white mr-10">
<div>
<p class="capitalize text-4xl font-bold ">{{ creator.name }}</p>
<div class="text-2xl text-white flex flex-row align-center">
{{ creator.about.title }}
<creator-about class="px-2" :creator="creator"></creator-about>
</div>
<p class="capitalize text-4xl font-bold">{{ creator.name }}</p>
<div class="text-2xl text-white flex flex-row align-center">
{{ creator.about.title }}
<creator-about class="px-2" :creator="creator"></creator-about>
</div>
</div>
<div class="flex flex-row ml-auto space-x-2.5">
<donation-button-banner
:color-border="creator.colors.menu"
@@ -37,42 +30,75 @@
:creator-logo="creator.images.logo"
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>
<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>
</div>
</div>
<!-- &lt;!&ndash; a mettre dans le header&ndash;&gt;-->
<!-- <publish-content-button :creator="creator"-->
<!-- @content-posted="addContent"-->
<!-- ></publish-content-button>-->
<!-- 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>
<img
class="max-w-[40px] max-h-[40px] ml-5 rounded-full"
:src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture"
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
/>
</div>
<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
: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>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
const props = defineProps({
creator: {type: Object, required: true}
creator: { type: Object, required: true }
});
const emits = defineEmits(['content-posted']);
const isSticky = ref(false);
const mainContainer = ref(null);
function addContent(content) {
emits('content-posted', content);
}
onMounted(() => {
const observer = new IntersectionObserver(
([entry]) => {
isSticky.value = !entry.isIntersecting;
},
{ threshold: 0 }
);
if (mainContainer.value) {
observer.observe(mainContainer.value);
}
});
</script>
<style scoped>
.sticky-header {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>