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

Hide everything that is not necessary for the first release.

Browse Source
This commit is contained in:
PascalMarchesseault
2024-12-09 23:56:57 -05:00
parent c69c6770e9
commit 6960ab5576
13 changed files with 533 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,10 @@
<template>
<div>
<div class="shadow-lg rounded-2xl mt-2 ">
<!-- PC -->
<div v-if="!isMobile" >
<div class="shadow-lg rounded-2xl mt-2">
<div class="relative z-20">
<div class="min-h-8 rounded-t-2xl shadow-lg" :style="{ backgroundColor: branding.colors.primary}"></div>
<!--Banner-->
<div class="min-h-8 rounded-t-2xl shadow-lg" :style="{ backgroundColor: branding.colors.primary }"></div>
<!-- Banner -->
<div class="relative">
<div>
<img
@@ -15,16 +16,77 @@
</div>
</div>
</div>
<!--actions - Lowerpart-->
<!-- Actions - Lower Part -->
<banner-actions></banner-actions>
</div>
</div>
<!-- Mobile -->
<div v-if="isMobile">
<div class="shadow-lg rounded-2xl ">
<div class="relative z-20">
<div class="min-h-8 shadow-lg flex items-center px-4 py-2 "
:style="{ backgroundColor: branding.colors.primary, color: branding.colors.onPrimary }">
<!-- Logo et texte Hutopy -->
<router-link to="/">
<div class="flex items-center gap-2">
<div class="text-xl font-bold">Hutopy</div>
</div>
</router-link>
<!-- Espace vide au centre -->
<div class="flex-1"></div>
<!-- Bouton Hamburger (visible uniquement sur mobile) -->
<router-link to="/login">
<button class="lg:hidden flex items-center justify-center mr-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
:stroke="branding.colors.onPrimary" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</router-link>
</div>
<!-- Banner -->
<div class="relative">
<div>
<img
class="w-full drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)]"
:src="branding.value.images.banner ? branding.value.images.banner : '/images/placeholders/banner.png'"
alt="Profile Banner"
style="max-height: 425px"
>
</div>
</div>
</div>
<!-- Actions - Lower Part -->
<banner-actions></banner-actions>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import BannerActions from "@/views/creators/BannerActions.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
const branding = useBrandingStore()
const branding = useBrandingStore();
const isMobile = ref(false);
function updateIsMobile() {
isMobile.value = window.innerWidth <= 640;
}
onMounted(() => {
updateIsMobile();
window.addEventListener("resize", updateIsMobile);
});
onBeforeUnmount(() => {
window.removeEventListener("resize", updateIsMobile);
});
</script>