Added profilepic component and made userview more mobild friendly

DecentralCardGame · Jan 14, 2024 · ca5d6ff · ca5d6ff
1 parent ca27b60
commit ca5d6ff
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/elements/CCButton/RouterCCButton.vue b/src/components/elements/CCButton/RouterCCButton.vue
@@ -8,6 +8,7 @@
 
 <script setup lang="ts">
 import { ButtonType } from "@/components/elements/CCButton/ButtonType";
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -20,5 +21,4 @@ const props = withDefaults(
   }
 );
 
-import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
 </script>
diff --git a/src/components/elements/LoginComponent.vue b/src/components/elements/LoginComponent.vue
@@ -3,8 +3,9 @@
     class="text-white font-bold uppercase flex hover:underline my-auto"
     @click="tryLogin"
   >
-    <img
-      class="h-8 pr-4"
+    <ProfilePicComponent
+      class="h-8 w-8 mr-4"
+      size="8"
       :src="loggedIn ? loggedInProfilePic : Profile"
       alt="PP"
     />
@@ -20,6 +21,7 @@ import { useProfilePic } from "@/def-composables/useProfilePic";
 import { useLoggedIn } from "@/def-composables/useLoggedIn";
 import { useLogin } from "@/def-composables/useLogin";
 import { onMounted } from "vue";
+import ProfilePicComponent from "@/components/elements/ProfilePicComponent.vue";
 
 const { loggedInProfilePic } = useProfilePic();
 const { loggedIn } = useLoggedIn();

diff --git a/src/components/elements/ProfilePicComponent.vue b/src/components/elements/ProfilePicComponent.vue
@@ -0,0 +1,26 @@
+<template>
+  <div
+    :class="[
+      'overflow-hidden',
+      'rounded-full',
+      'w-' + props.size,
+      'h-' + props.size,
+    ]"
+  >
+    <img :src="src" class="-pt-[10%] w-[100%] object-contain" :alt="alt" />
+  </div>
+</template>
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    src: any;
+    size: number;
+    alt: string;
+  }>(),
+  {
+    src: {},
+    size: 64,
+    alt: "",
+  }
+);
+</script>
diff --git a/src/views/UserView/UserView.vue b/src/views/UserView/UserView.vue
@@ -1,12 +1,22 @@
 <template>
   <div class="flex bg-black text-white justify-center p-16">
-    <div class="text-center">
-      <div class="p-24">
-        <img :src="state.img" class="w-64" alt="Profile pic" />
+    <div class="text-center pr-24">
+      <div class="py-24">
+        <ProfilePicComponent :src="state.img" size="64" class="mx-auto h-64 w-64" alt="Profile pic" />
       </div>
       <UserViewHeadingContainer>
         <template v-slot:heading>Council status</template>
-        <template v-slot:body>{{ user.CouncilStatus }}</template>
+        <template v-slot:body>
+          <p>{{ user.CouncilStatus }}</p>
+          <BaseCCButton v-if="state.userIsUser" @click="state.user.CouncilStatus == 'unavailable' ? register() : deRegister()">
+            {{
+              state.user.CouncilStatus == "unavailable"
+                ? "Register for"
+                : "Deregister from"
+            }}
+            council
+          </BaseCCButton>
+        </template>
       </UserViewHeadingContainer>
       <div>
         <UserViewHeadingContainer v-for="coin in normalizeCoins(coins)">
@@ -18,14 +28,16 @@
       </div>
     </div>
     <div class="text-left">
-      <h1 class="text-4xl text-white font-bold pb-12">
+      <h1 class="text-5xl text-white font-bold pb-12">
         {{ state.userIsUser ? "My Account" : state.user.alias }}
       </h1>
-      <div class="grid grid-cols-3 gap-16">
+      <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-16">
         <UserViewHeadingContainer>
           <template v-slot:heading>Wallet</template>
           <template v-slot:body>
-            <b>Address</b> <br />{{ state.addr }}
+            <b>Address</b> <br />{{ state.addr }}<br />
+            <br />
+            <b>Alias</b> <br />{{ state.user.alias }}
           </template>
         </UserViewHeadingContainer>
         <UserViewHeadingContainer>
@@ -56,7 +68,7 @@
         <UserViewHeadingContainer>
           <template v-slot:heading>Recent Activity</template>
           <template v-slot:body>
-            <RouterCCButton :to="{name: 'Vote'}">Go to Voting</RouterCCButton>
+            <RouterCCButton :to="{ name: 'Vote' }">Go to Voting</RouterCCButton>
           </template>
         </UserViewHeadingContainer>
       </div>
@@ -79,6 +91,8 @@ import { useUser } from "@/def-composables/useUser";
 import { User } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/types/cardchain/cardchain/user";
 import UserViewHeadingContainer from "@/views/UserView/UserViewHeadingContainer.vue";
 import RouterCCButton from "@/components/elements/CCButton/RouterCCButton.vue";
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
+import ProfilePicComponent from "@/components/elements/ProfilePicComponent.vue";
 
 const { queryQUser, queryAllBalances } = useQuery();
 const { registerForCouncil, rewokeCouncilRegistration } = useTx();