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

feat: use dynamic units, minor refactoring

Browse source
This commit is contained in:
JustTemmie 2025-06-11 17:42:35 +02:00
parent 22b43cde79
commit 5560680635
Signed by: justtemmie
SSH key fingerprint: SHA256:nBO+OwpTkd8LYhe38PIqdxmDvkIg9Vw2EbrRZM97dkU
12 changed files with 66 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

84
components/Userpopup.vue
View file

@ -1,84 +0,0 @@
<template>
<div id="profile-popup">
<img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
<div id="cover-colour"></div>
<div id="main-body">
<p id="display-name">
<strong>{{ props.user.display_name || "display_name" }}</strong>
</p>
<p id="username-and-pronouns">
{{ props.user.username || "username" }} - {{ props.user.pronouns || "un/defined" }}
</p>
<div id="about-me">
{{ props.user.about || "about me" }}
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import type { UserResponse } from '~/types/interfaces';
const { fetchMembers } = useApi();
const props = defineProps<{
user: UserResponse | any, // actually UserResponse | null but TS is yelling at me again
}>();
</script>
<style scoped>
#profile-popup {
min-width: 300px;
max-width: 300px;
border-radius: 8px;
position: relative;
display: flex;
flex-direction: column;
}
#cover-colour {
border-radius: 12px 12px 0 0;
min-height: 60px;
background-color: #442505;
}
#main-body {
border-radius: 0 0 12px 12px;
padding: 12px;
min-height: 280px;
background-color: #4b3018;
overflow-wrap: break-word;
hyphens: manual;
}
#avatar {
width: 96px;
height: 96px;
border: 5px solid #4b3018;
border-radius: 100%;
position: absolute;
left: 16px;
top: 16px;
}
#display-name {
margin-top: 60px;
margin-bottom: 0;
font-size: 28px;
}
#username-and-pronouns {
margin: 2px;
font-size: 16px;
}
#about-me {
background-color: #34200f;
border-radius: 12px;
margin-top: 32px;
padding: 16px;
font-size: 16px;
}
</style>