Fix LowerBannerUI structure with subfiles and breakpoints.
This commit is contained in:
PascalMarchesseault
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<button
|
||||
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 mr-2"
|
||||
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 "
|
||||
@click="AboutUs = true"
|
||||
>
|
||||
<v-icon style="font-size: 35px; height: 35px; width: 55px;">
|
||||
|
||||
@@ -32,69 +32,12 @@
|
||||
alt="Profile Banner" style="max-height: 425px">
|
||||
</div>
|
||||
</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 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 -->
|
||||
<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-[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'}"
|
||||
/>
|
||||
</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>
|
||||
<!-- 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>
|
||||
|
||||
<div class="text-white text-2xl">
|
||||
{{ creator.about.title }}
|
||||
</div>
|
||||
|
||||
<creator-about :creator="creator"
|
||||
></creator-about>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<banner-actions :creator="creator" @content-posted="addContent"></banner-actions>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@@ -104,6 +47,7 @@ import CreatorAbout from "@/views/creators/CreatorAbout.vue";
|
||||
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
|
||||
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
|
||||
import DonationButton from "@/views/creators/DonationButton.vue";
|
||||
import BannerActions from "@/views/creators/banner/BannerActions.vue";
|
||||
|
||||
const props = defineProps({
|
||||
creator: {type: Object, required: true},
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-btn variant="text" icon @click="openDonationDialog()">
|
||||
<v-btn class="hover:scale-125" variant="text" icon @click="openDonationDialog()">
|
||||
<v-icon :class="['text-2xl', iconColorClass]">mdi-gift-outline</v-icon>
|
||||
</v-btn>
|
||||
|
||||
|
||||
34
src/views/creators/banner/BannerActions.vue
Normal file
34
src/views/creators/banner/BannerActions.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<script setup>
|
||||
import BannerActionsSm from "@/views/creators/banner/BannerActionsSm.vue";
|
||||
import BannerActionsMd from "@/views/creators/banner/BannerActionsMd.vue";
|
||||
import BannerActionsLg from "@/views/creators/banner/BannerActionsLg.vue";
|
||||
import BannerActionsXl from "@/views/creators/banner/BannerActionsXl.vue";
|
||||
|
||||
const props = defineProps({
|
||||
creator: { type: Object, required: true }
|
||||
});
|
||||
|
||||
const emits = defineEmits(['content-posted']);
|
||||
|
||||
function addContent(content) {
|
||||
emits('content-posted', content);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<banner-actions-sm class="d-sm-none" :creator="creator" @content-posted="addContent"></banner-actions-sm>
|
||||
|
||||
<div class="d-none d-sm-flex d-md-none">
|
||||
<banner-actions-md :creator="creator" @content-posted="addContent"></banner-actions-md>
|
||||
</div>
|
||||
|
||||
<div class="d-none d-md-flex d-lg-none">
|
||||
<banner-actions-lg :creator="creator" @content-posted="addContent"></banner-actions-lg>
|
||||
</div>
|
||||
|
||||
<div class="d-none d-lg-flex">
|
||||
<banner-actions-xl :creator="creator" @content-posted="addContent"></banner-actions-xl>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
72
src/views/creators/banner/BannerActionsLg.vue
Normal file
72
src/views/creators/banner/BannerActionsLg.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="relative w-full">
|
||||
<div class="rounded-b-2xl"
|
||||
:style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
|
||||
<div class="relative z-20">
|
||||
<div class="flex flex-row items-center py-2">
|
||||
<!--Logo & User Info-->
|
||||
<div>
|
||||
<div>
|
||||
<img
|
||||
class="rounded-full border-solid border-2 absolute z-20 max-w-[175px] ml-15 -mt-20"
|
||||
:src="creator.images.logo"
|
||||
alt="Profile Picture"
|
||||
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ml-60 text-white mr-10">
|
||||
<div>
|
||||
<p class="capitalize text-3xl font-bold ">{{ creator.name }}</p>
|
||||
<div>{{ creator.subscriberCount }} Abonnés</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<subscribe-button :creator="creator"></subscribe-button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center ml-4">
|
||||
<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>
|
||||
|
||||
<div class="flex ml-auto space-x-4 items-center">
|
||||
<publish-content-button :creator="creator"
|
||||
@content-posted="addContent"
|
||||
></publish-content-button>
|
||||
|
||||
<div class="text-white">
|
||||
{{ creator.about.title }}
|
||||
</div>
|
||||
|
||||
<creator-about :creator="creator"></creator-about>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
|
||||
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
|
||||
import DonationButton from "@/views/creators/DonationButton.vue";
|
||||
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
|
||||
|
||||
const props = defineProps({
|
||||
creator: {type: Object, required: true}
|
||||
});
|
||||
|
||||
const emits = defineEmits(['content-posted']);
|
||||
|
||||
function addContent(content) {
|
||||
emits('content-posted', content);
|
||||
}
|
||||
</script>
|
||||
70
src/views/creators/banner/BannerActionsMd.vue
Normal file
70
src/views/creators/banner/BannerActionsMd.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div class="rounded-b-2xl"
|
||||
:style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
|
||||
<div>
|
||||
|
||||
<!-- Logo-Name-Followers -->
|
||||
<div class="flex flex-row relative z-20">
|
||||
<div>
|
||||
<img
|
||||
class="absolute rounded-full border-solid border-2 max-w-[140px] h-auto ml-3 -mt-3"
|
||||
:src="creator.images.logo"
|
||||
alt="Profile Picture"
|
||||
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column text-white cap px-2 mt-1 w-full ml-40">
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
|
||||
<div>{{ creator.subscriberCount }} Abonnés</div>
|
||||
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="mt-1">{{ creator.about.title }}</div>
|
||||
<creator-about :creator="creator"></creator-about>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between mt-2">
|
||||
<subscribe-button :creator="creator"></subscribe-button>
|
||||
<div class="flex space-x-2">
|
||||
<publish-content-button :creator="creator"
|
||||
@content-posted="addContent"
|
||||
></publish-content-button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
|
||||
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
|
||||
import DonationButton from "@/views/creators/DonationButton.vue";
|
||||
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
|
||||
|
||||
const props = defineProps({
|
||||
creator: {type: Object, required: true}
|
||||
});
|
||||
|
||||
const emits = defineEmits(['content-posted']);
|
||||
|
||||
function addContent(content) {
|
||||
emits('content-posted', content);
|
||||
}
|
||||
</script>
|
||||
77
src/views/creators/banner/BannerActionsSm.vue
Normal file
77
src/views/creators/banner/BannerActionsSm.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div
|
||||
:style="{
|
||||
backgroundColor: creator.colors.bannerBottom || '#A30E79',
|
||||
borderBottom: `2px solid ${creator.colors.accent || '#000000'}`
|
||||
}">
|
||||
<div>
|
||||
|
||||
<!-- 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"
|
||||
alt="Profile Picture"
|
||||
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column text-white cap px-2 mt-1">
|
||||
<p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
|
||||
<div>{{ creator.subscriberCount }} Abonnés</div>
|
||||
</div>
|
||||
|
||||
<div class="flex ml-auto text-right text-white text-lg px-3 mt-2">
|
||||
<div class="mt-1">{{ creator.about.title }}</div>
|
||||
<creator-about :creator="creator"></creator-about>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Title-info-donation-->
|
||||
<div class="flex flex-row items-center justify-between w-full px-4">
|
||||
|
||||
<div>
|
||||
<subscribe-button :creator="creator"></subscribe-button>
|
||||
</div>
|
||||
|
||||
<div class="flex ml-auto space-x-4">
|
||||
<publish-content-button :creator="creator"
|
||||
@content-posted="addContent"
|
||||
></publish-content-button>
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
|
||||
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
|
||||
import DonationButton from "@/views/creators/DonationButton.vue";
|
||||
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
|
||||
|
||||
const props = defineProps({
|
||||
creator: {type: Object, required: true}
|
||||
});
|
||||
|
||||
const emits = defineEmits(['content-posted']);
|
||||
|
||||
function addContent(content) {
|
||||
emits('content-posted', content);
|
||||
}
|
||||
</script>
|
||||
72
src/views/creators/banner/BannerActionsXl.vue
Normal file
72
src/views/creators/banner/BannerActionsXl.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="relative w-full">
|
||||
<div class="rounded-b-2xl"
|
||||
:style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
|
||||
<div class="relative z-20">
|
||||
<div class="flex flex-row items-center py-2">
|
||||
<!--Logo & User Info-->
|
||||
<div>
|
||||
<div>
|
||||
<img
|
||||
class="rounded-full border-solid border-2 absolute z-20 max-w-[175px] ml-15 -mt-20"
|
||||
:src="creator.images.logo"
|
||||
alt="Profile Picture"
|
||||
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ml-60 text-white mr-10">
|
||||
<div>
|
||||
<p class="capitalize text-3xl font-bold ">{{ creator.name }}</p>
|
||||
<div>{{ creator.subscriberCount }} Abonnés</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<subscribe-button :creator="creator"></subscribe-button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center ml-4">
|
||||
<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>
|
||||
|
||||
<div class="flex ml-auto space-x-4 items-center">
|
||||
<publish-content-button :creator="creator"
|
||||
@content-posted="addContent"
|
||||
></publish-content-button>
|
||||
|
||||
<div class="text-white">
|
||||
{{ creator.about.title }}
|
||||
</div>
|
||||
|
||||
<creator-about :creator="creator"></creator-about>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
|
||||
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
|
||||
import DonationButton from "@/views/creators/DonationButton.vue";
|
||||
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
|
||||
|
||||
const props = defineProps({
|
||||
creator: {type: Object, required: true}
|
||||
});
|
||||
|
||||
const emits = defineEmits(['content-posted']);
|
||||
|
||||
function addContent(content) {
|
||||
emits('content-posted', content);
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user