gorb/frontend
4
0
Fork 0
Code Issues 7 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

feat: manage to get the popup to render with correct positions

Browse source
This commit is contained in:
Twig 2025-07-18 11:00:25 +02:00
parent fe77b2c28d
commit 9d69dac77a
No known key found for this signature in database
2 changed files with 42 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

18
components/Guild/MemberEntry.vue
View file

@ -1,29 +1,25 @@
<template> <template>
<div class="member-item" @click.prevent="createProfileModal(props.member)" tabindex="0"> <div class="member-item" @click.prevent="toggleModalPopup" tabindex="0">
<Avatar :profile="props.member" class="member-avatar"/> <Avatar :profile="props.member" class="member-avatar"/>
<span class="member-display-name">{{ getDisplayName(props.member) }}</span> <span class="member-display-name">{{ getDisplayName(props.member) }}</span>
</div> </div>
<ModalProfilePopup v-if="modalPopupVisible"
:profile="props.member"/>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ModalProfilePopup } from '#components'; import { ModalProfilePopup } from '#components';
import { render } from 'vue';
import type { GuildMemberResponse } from '~/types/interfaces'; import type { GuildMemberResponse } from '~/types/interfaces';
const props = defineProps<{ const props = defineProps<{
member: GuildMemberResponse member: GuildMemberResponse
}>(); }>();
function createProfileModal(profile: GuildMemberResponse) { const modalPopupVisible = ref<boolean>(false);
const div = document.createElement("div");
const modal = h(ModalProfilePopup, {
profile: profile
});
document.body.appendChild(div);
render(modal, div);
}
function toggleModalPopup() {
modalPopupVisible.value = !modalPopupVisible.value
}
</script> </script>
<style> <style>

47
components/Modal/ProfilePopup.vue
View file

@ -1,8 +1,10 @@
<template> <template>
<ModalBase :obscure="true"> <ModalBase :obscure="true">
<div id="vertical-container"> <div id="profile-container">
<span id="cover-background"></span> <div id="profile-header">
<Avatar :profile="props.profile" id="pfp"/> <div id="header-mask"></div>
<Avatar :profile="props.profile" id="avatar"/>
</div>
</div> </div>
</ModalBase> </ModalBase>
</template> </template>
@ -18,22 +20,43 @@ const props = defineProps<ModalProps & {
<style scoped> <style scoped>
#vertical-container { #profile-container {
display: flex; position: relative;
flex-direction: column;
height: 75dvh; height: 75dvh;
width: 75dvw; width: 75dvw;
display: flex;
flex-direction: column;
} }
#cover-background { #profile-header {
flex-shrink: 0;
min-height: 9em;
width: 100%; width: 100%;
min-height: 6em; }
max-height: 6em;
#header-mask {
display: relative;
width: 100%;
min-height: 7em;
z-index: 0;
background-color: var(--primary-color); background-color: var(--primary-color);
/* top left and top right */ border-radius: var(--standard-radius) var(--standard-radius) 0 0; /* top left and top right */
border-radius: var(--standard-radius) var(--standard-radius) 0 0;
} }
#avatar {
display: block;
position: absolute;
left: 5.5em;
top: 3.5em;
z-index: 1;
width: 7em;
height: 7em;
border: .375em solid var(--accent-color);
}
</style> </style>