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

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

View file

@ -1,8 +1,10 @@
<template>
<ModalBase :obscure="true">
<div id="vertical-container">
<span id="cover-background"></span>
<Avatar :profile="props.profile" id="pfp"/>
<div id="profile-container">
<div id="profile-header">
<div id="header-mask"></div>
<Avatar :profile="props.profile" id="avatar"/>
</div>
</div>
</ModalBase>
</template>
@ -18,22 +20,43 @@ const props = defineProps<ModalProps & {
<style scoped>
#vertical-container {
display: flex;
flex-direction: column;
#profile-container {
position: relative;
height: 75dvh;
width: 75dvw;
display: flex;
flex-direction: column;
}
#cover-background {
#profile-header {
flex-shrink: 0;
min-height: 9em;
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);
/* top left and top right */
border-radius: var(--standard-radius) var(--standard-radius) 0 0;
border-radius: var(--standard-radius) var(--standard-radius) 0 0; /* top left and top right */
}
#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>