feat: finish profile popup

components/Guild/MemberEntry.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="member-item" @click.prevent="toggleModalPopup" tabindex="0">
+    <div class="member-item" @click.prevent="showModalPopup" tabindex="0">
         <Avatar :profile="props.member" class="member-avatar"/>
         <span class="member-display-name">{{ getDisplayName(props.member) }}</span>
     </div>
-    <ModalProfilePopup v-if="modalPopupVisible"
-        :profile="props.member"/>
+    <ModalProfilePopup v-if="modalPopupVisible" :profile="props.member"
+        :whendone="hideModalPopup"/>
 </template>
 
 <script lang="ts" setup>
@@ -17,8 +17,14 @@ const props = defineProps<{
 
 const modalPopupVisible = ref<boolean>(false);
 
-function toggleModalPopup() {
-    modalPopupVisible.value = !modalPopupVisible.value
+function showModalPopup() {
+    console.log("hello there")
+    modalPopupVisible.value = true
+}
+
+function hideModalPopup() {
+    console.log("gone")
+    modalPopupVisible.value = false
 }
 </script>
 

components/Modal/Base.vue

@@ -1,7 +1,7 @@
 <template>
   <dialog ref="dialog" class="modal" :class="props.obscure ? 'modal-obscure' : 'modal-regular'">
 	<span class="modal-exit-button-container" style="position: absolute; right: 2em; top: .2em; width: .5em; height: .5em;">
-		<Button text="✕" variant="stealth" :callback="() => dialog?.remove()" />
+		<Button text="✕" variant="stealth" :callback="onCloseButton" />
 	</span>
 	<div class="modal-content">
 		<h1 class="modal-title">{{ title }}</h1>
@@ -17,8 +17,6 @@ import Button from '~/components/UserInterface/Button.vue';
 const props = defineProps<ModalProps>();
 const dialog = ref<HTMLDialogElement>();
 
-console.log("props:", props);
-
 onMounted(() => {
   if (dialog.value) {
     dialog.value.showModal();
@@ -31,6 +29,15 @@ onMounted(() => {
   }
 });
 
+function onCloseButton () {
+  if (dialog.value) {
+    if (props.onCloseButton) {
+      props.onCloseButton()
+    }
+    
+    dialog.value.remove
+  }
+}
 
 </script>
 

components/Modal/ProfilePopup.vue

@@ -1,5 +1,5 @@
 <template>
-	<ModalBase :obscure="true">
+	<ModalBase :obscure="true" :onClose="props.whendone" :onCloseButton="props.whendone">
 		<div id="profile-container">
 			<div id="profile-header">
 				<div id="header-mask"></div>
@@ -15,7 +15,7 @@
 						{{ pronouns }}
 					</span>
 				</div>
-				<div id="status">Status goes here lorem ipsum or something</div>
+				<!-- <div id="status">Status goes here lorem ipsum or something</div> -->
 
 				<div v-if="me.uuid != uuid" id="action-buttons-container">
 					<Button text="Message" variant="normal" :callback="buttonSendMessage"></Button>
@@ -35,21 +35,21 @@
 					</div>
 				</div>
 			</div>
-			<VerticalSpacer />
+			<VerticalSpacer v-if="aboutMe" />
 
 			<div id="profile-footer">
 				<div id="dates">
 					<div v-if="registrationDate" class="date-entry">
-						<span class="date-entry-title">Registered At</span><br>
-						<span class="date-entry-value">{{ registrationDate }}</span>
+						<span class="date-entry-title">Registered at</span><br>
+						<span class="date-entry-value" :title="registrationDate.toLocaleTimeString()">{{ toDateString(registrationDate) }}</span>
 					</div>
 					<div v-if="joinDate" class="date-entry">
-						<span class="date-entry-title">Joined At</span><br>
-						<span class="date-entry-value">{{ joinDate }}</span>
+						<span class="date-entry-title">Joined at</span><br>
+						<span class="date-entry-value" :title="joinDate.toLocaleTimeString()">{{ toDateString(joinDate) }}</span>
 					</div>
 					<div v-if="friendsSince" class="date-entry">
 						<span class="date-entry-title">Friends Since</span><br>
-						<span class="date-entry-value">{{ friendsSince }}</span>
+						<span class="date-entry-value" :title="friendsSince.toLocaleTimeString()">{{ toDateString(friendsSince) }}</span>
 					</div>
 				</div>
 			</div>
@@ -65,22 +65,28 @@ import Button from '../UserInterface/Button.vue';
 const { addFriend, fetchMe } = useApi();
 
 const props = defineProps<ModalProps & {
-	profile: GuildMemberResponse
+	profile: GuildMemberResponse,
+	whendone: any
 }>();
 
 const friendsSinceRequest = await getFriendsSince(props.profile)
+const me = await fetchMe() as UserResponse
 
 const displayName = getDisplayName(props.profile)
 const username = getUsername(props.profile)
 const pronouns = getPronouns(props.profile)
 const aboutMe = getAboutMe(props.profile)
 
-const registrationDate = getRegistrationDate(props.profile)?.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })
-const joinDate = getGuildJoinDate(props.profile)?.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })
-const friendsSince = friendsSinceRequest?.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })
+const registrationDate = getRegistrationDate(props.profile)
+const joinDate = getGuildJoinDate(props.profile)
+const friendsSince = friendsSinceRequest
 
 const uuid = getUuid(props.profile)
-const me = await fetchMe() as UserResponse
+
+
+function toDateString(date: Date): string {
+	return date.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })
+}
 
 function buttonSendMessage() {
 	navigateTo(`/me/${uuid}`)
@@ -163,7 +169,6 @@ function buttonEditProfile() {
 }
 
 #username-and-pronouns {
-	margin-top: -0.2em;
 	font-size: .9em;
 	color: var(--secondary-text-color);
 }

components/UserInterface/HorizontalSpacer.vue

@@ -5,7 +5,7 @@
 <style scoped>
 .spacer {
   display: block;
-  width: 0.2dvh;
+  min-width: 0.2dvh;
   margin: 0.2dvh 0.8dvw;
   background-color: var(--padding-color);
 }

components/UserInterface/VerticalSpacer.vue

@@ -4,8 +4,8 @@
 
 <style scoped>
 .vertical-spacer {
-  height: 0.2dvh;
   display: block;
+  min-height: 0.2dvh;
   margin: 0.8dvh 0.2dvw;
   background-color: var(--padding-color);
 }

types/interfaces.ts

@@ -96,7 +96,8 @@ export interface ModalProps {
 	title?: string,
 	obscure?: boolean,
 	onClose?: () => void,
-	onCancel?: () => void
+	onCancel?: () => void,
+	onCloseButton?: () => void,
 }
 
 export interface ContextMenuItem {