94 lines
2.8 KiB
Vue
94 lines
2.8 KiB
Vue
<template>
|
|
<!-- 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="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>
|
|
<banner-actions></banner-actions>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile -->
|
|
<div v-if="isMobile">
|
|
<div class="shadow-lg rounded-2xl ">
|
|
<div class="relative z-20">
|
|
<div class="shadow-2xl flex items-center px-2 py-2"
|
|
:style="{ backgroundColor: branding.colors.primary, color: branding.colors.onPrimary }">
|
|
|
|
<router-link to="/@Hutopy">
|
|
<div class="flex items-center">
|
|
<HutopySvg></HutopySvg>
|
|
<div class="text-xl font-bold -ml-2 ">Hutopy</div>
|
|
</div>
|
|
</router-link>
|
|
|
|
<div class="flex-1"></div>
|
|
|
|
<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>
|
|
<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";
|
|
import HutopySvg from "@/views/svg/HutopySvg.vue";
|
|
|
|
|
|
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>
|
|
|
|
<style>
|
|
|
|
</style> |