Version 1.0.0 - Frontend

src/components/UI/User.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="user-card">
-        <Avatar :avatar-url="user?.identity?.avatar" :user-id="user?.identity?.id" 
+    <div :class="{'user-card': !mobile, 'mobile': mobile}">
+        <Avatar :mobile="mobile" :avatar-url="user?.identity?.avatar" :user-id="user?.identity?.id" 
                 :isMod="user?.identity?.isMod"
         :isOwner="user?.identity?.isOwner"
         :isAdmin="user?.identity?.isAdmin"/>
@@ -23,6 +23,10 @@ const props = defineProps({
                 avatar: '96ecebdefe9fb9483b2e1b17a417ba32'
             }
         })
+    },
+    mobile: {
+        type: Boolean,
+        default: false
     }
 }); 
 
@@ -45,6 +49,31 @@ p {
     user-select: none;
 }
 
+.mobile {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    gap: 8px;
+    user-select: none;
+
+}
+
+.mobile .user-info {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.mobile .username {
+    font-size: 1.2em !important;
+}
+
+
+.mobile .global {
+    font-size: 1.6em !important;
+}
+
+
 .user-info {
     display: flex;
     gap: 5px    ;