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

Update Ui - Presentation Page added logo

Browse Source
This commit is contained in:
PascalMarchesseault
2024-12-11 00:34:00 -05:00
parent 6960ab5576
commit 8a201a2a7d
5 changed files with 65 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
<template>
<!-- PC -->
<div v-if="!isMobile" >
<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>
@@ -16,7 +16,6 @@
</div>
</div>
</div>
<!-- Actions - Lower Part -->
<banner-actions></banner-actions>
</div>
</div>
@@ -25,30 +24,28 @@
<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 "
<div class="min-h-8 shadow-2xl flex items-center px-2 py-2 borde "
: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>
<div class="flex items-center">
<HutopySvg></HutopySvg>
<div class="text-xl font-bold -ml-2 ">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 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>
@@ -60,8 +57,7 @@
>
</div>
</div>
</div>
<!-- Actions - Lower Part -->
</div>
<banner-actions></banner-actions>
</div>
</div>
@@ -69,24 +65,30 @@
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import {ref, onMounted, onBeforeUnmount} from "vue";
import BannerActions from "@/views/creators/BannerActions.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
import HutopySvg from "@/views/svg/HutopySvg.vue";
const branding = useBrandingStore();
const isMobile = ref(false);
function updateIsMobile() {
isMobile.value = window.innerWidth <= 640;
isMobile.value = window.innerWidth <= 640;
}
onMounted(() => {
updateIsMobile();
window.addEventListener("resize", updateIsMobile);
updateIsMobile();
window.addEventListener("resize", updateIsMobile);
});
onBeforeUnmount(() => {
window.removeEventListener("resize", updateIsMobile);
});
</script>
</script>
<style>
</style>