PC layout

src/components/Card.vue

@@ -13,6 +13,7 @@
         <div
             class="card-content"
             :class="{
+                'PC-layout': isPClayout,
                 'single-line': isSingleLine,
             }"
         >
@@ -48,6 +49,7 @@ import { Options, Vue } from 'vue-class-component';
         tips: String,
         isHavingContent: Boolean,
         isSingleLine: Boolean,
+        isPClayout: Boolean,
     },
 })
 export default class Card extends Vue {}
@@ -74,7 +76,7 @@ export default class Card extends Vue {}
         .card-content {
             @apply break-all mx-auto w-full h-full;
             > .content-wrapper {
-                @apply min-h-20 h-full;
+                @apply min-h-20;
 
                 &:not(.content) {
                     @apply flex;
@@ -86,6 +88,9 @@ export default class Card extends Vue {}
                     @apply w-max px-4 pb-4;
                 }
             }
+            &.PC-layout {
+                @apply overflow-y-auto max-h-36;
+            }
             .body-tips {
                 @apply flex w-full justify-center items-center;
             }

src/components/Profile.vue

@@ -1,24 +1,25 @@
 <template>
-    <div class="profile-container flex flex-col justify-start items-start gap-y-2">
-        <div class="w-full pr-8 flex flex-row font-medium text-lg justify-between items-end leading-5">
-            <div class="w-24 h-24">
-                <ImgHolder class="w-24 h-24" :is-rounded="true" :is-border="false" :src="avatar" />
-            </div>
-            <div class="stats-container" @click="toFollowersPage">
-                <div class="stats-number">
-                    {{ followers.length }}
-                </div>
-                <div class="stats-type">Followers</div>
+    <div class="profile-container grid grid-cols-3 md:grid-cols-4 items-center md:justify-start gap-2">
+        <div class="col-span-1 md:row-span-3 w-24 h-24 md:w-40 md:h-40">
+            <ImgHolder class="w-24 h-24 md:w-40 md:h-40" :is-rounded="true" :is-border="false" :src="avatar" />
+        </div>
+        <div class="col-span-1 md:order-2 stats-container leading-5" @click="toFollowersPage">
+            <div class="stats-number">
+                {{ followers.length }}
             </div>
-            <div class="stats-container" @click="toFollowingsPage">
-                <div class="stats-number">
-                    {{ followings.length }}
-                </div>
-                <div class="stats-type">Followings</div>
+            <div class="stats-type">Followers</div>
+        </div>
+        <div class="col-span-1 md:order-2 stats-container leading-5" @click="toFollowingsPage">
+            <div class="stats-number">
+                {{ followings.length }}
             </div>
+            <div class="stats-type">Followings</div>
         </div>
-        <span class="font-bold text-2xl">{{ username }}</span>
-        <div @click="emitClickAddress" class="inline-block relative align-middle">
+        <span class="col-span-full md:col-span-2 md:order-0 font-bold text-2xl">{{ username }}</span>
+        <div
+            @click="emitClickAddress"
+            class="col-span-full md:col-span-1 md:row-start-3 md:col-start-2 inline-block relative align-middle"
+        >
             <LinkButton v-if="rns">
                 <span>{{ rns }}{{ suffix }}</span>
             </LinkButton>
@@ -27,12 +28,48 @@
             </LinkButton>
             <Tooltip v-show="isShowingTooltip" :text="$props.clickAddressNotice" view-type="options" />
         </div>
-        <LinkButton v-if="website">
-            <span>{{ website }}</span>
-        </LinkButton>
-        <div class="bio w-full font-medium text-lg whitespace-pre-line">
+        <div class="col-span-full md:col-span-1 md:row-start-3 md:col-start-3" v-if="website">
+            <LinkButton>
+                <span>{{ website }}</span>
+            </LinkButton>
+        </div>
+        <div class="bio col-span-full md:order-5 md:my-2 font-medium text-lg whitespace-pre-line">
             {{ bio }}
         </div>
+        <div class="col-span-full md:col-span-1 md:col-start-4 md:row-start-1">
+            <Button
+                size="sm"
+                class="w-full text-lg mb-4 md:m-0 duration-200"
+                v-if="!isOwner"
+                v-bind:class="[
+                    isFollowing
+                        ? 'bg-secondary-btn text-secondary-btn-text shadow-secondary-btn'
+                        : 'bg-primary-btn text-primary-btn-text shadow-primary-btn',
+                ]"
+                @click="emitAction"
+            >
+                <span>{{ isFollowing ? 'Following' : 'Follow' }}</span>
+                <i class="bx bx-sm no-underline" v-bind:class="[isFollowing ? 'bx-check' : 'bx-plus']"></i>
+            </Button>
+
+            <div class="flex mb-4 h-13 gap-2 mt-2 md:m-0" v-else>
+                <Button
+                    size="lg"
+                    class="text-lg bg-secondary-btn text-secondary-btn-text shadow-secondary-btn flex-1 truncate"
+                    @click="emitSetUp"
+                >
+                    <span>Edit Profile</span>
+                    <i class="bx bx-pencil bx-sm"></i>
+                </Button>
+                <Button
+                    size="lg"
+                    class="w-13 text-lg bg-primary-btn text-primary-btn-text shadow-primary-btn"
+                    @click="emitLogout"
+                >
+                    <i class="bx bx-log-out bx-sm"></i>
+                </Button>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -43,9 +80,10 @@ import LinkButton from '@/components/LinkButton.vue';
 import Vue3Autocounter from 'vue3-autocounter';
 import config from '@/config';
 import Tooltip from '@/components/Tooltip.vue';
+import Button from '@/components/Button.vue';
 
 @Options({
-    components: { Tooltip, ImgHolder, Vue3Autocounter, LinkButton },
+    components: { Tooltip, ImgHolder, Vue3Autocounter, LinkButton, Button },
     props: {
         avatar: String,
         username: String,
@@ -56,35 +94,55 @@ import Tooltip from '@/components/Tooltip.vue';
         bio: String,
         rns: String,
         clickAddressNotice: String,
+        isOwner: Boolean,
+        isFollowing: Boolean,
     },
-    emits: ['share', 'clickAddress'],
+    emits: ['share', 'clickAddress', 'action', 'toSetupPage', 'logout'],
 })
 export default class Profile extends Vue {
     address!: String;
     rns!: String;
     website!: String;
     suffix: string = '.' + config.subDomain.rootDomain;
     isShowingTooltip: boolean = false;
+    isOwner!: Boolean;
+    isFollowing!: Boolean;
 
-    public toFollowersPage() {
+    toFollowersPage() {
         this.$router.push((config.subDomain.isSubDomainMode ? '' : `/${this.rns || this.address}`) + `/followers`);
     }
-    public toFollowingsPage() {
+    toFollowingsPage() {
         this.$router.push((config.subDomain.isSubDomainMode ? '' : `/${this.rns || this.address}`) + `/followings`);
     }
 
-    public filter(address: string) {
+    filter(address: string) {
         return `${address.slice(0, 6)}...${address.slice(-4)}`;
     }
 
-    public toExternalLink() {
+    toNFTsPage() {
+        this.$router.push(`/${this.rns || this.address}/nfts`);
+    }
+
+    toExternalLink() {
         window.open(`${this.website}`);
     }
 
     emitShare() {
         this.$emit('share');
     }
 
+    emitAction() {
+        this.$emit('action');
+    }
+
+    emitSetUp() {
+        this.$emit('toSetupPage');
+    }
+
+    emitLogout() {
+        this.$emit('logout');
+    }
+
     emitClickAddress() {
         this.$emit('clickAddress');
         this.isShowingTooltip = true;

src/views/Accounts.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="h-screen bg-account-bg overflow-y-auto">
-        <div class="px-4 pt-8 pb-32 max-w-md m-auto">
+        <div class="px-4 pt-8 pb-32 max-w-screen-lg m-auto">
             <div class="header flex justify-between items-center pb-4">
                 <Button
                     size="sm"
@@ -19,8 +19,8 @@
                     @click="toPublicPage(rss3Profile.address)"
                 />
             </div>
-            <div class="account-list">
-                <div class="flex flex-col gap-y-4" :class="{ 'pb-16': isOwner }">
+            <div class="max-w-md m-auto">
+                <div class="flex flex-col gap-y-4">
                     <div
                         class="account-wrapper flex flex-row justify-between items-center"
                         v-for="item in accounts"

src/views/EditProfile.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="h-screen bg-body-bg text-body-text overflow-y-auto">
-        <div class="px-4 py-9 max-w-md m-auto pb-20">
+        <div class="px-4 py-9 max-w-screen-lg m-auto pb-20">
             <div class="text-center mb-4 relative">
                 <Button
                     size="sm"
@@ -13,33 +13,37 @@
                     Edit Profile
                 </h1>
             </div>
-            <AvatarEditor class="m-auto mb-4" size="lg" :url="profile.avatar" ref="avatar" />
-            <LinkButton
-                class="m-auto mb-4"
-                :class="{
-                    'cursor-default': rns,
-                }"
-                @click="toSetupRNS"
-            >
-                <span>{{ rns ? rns : 'Claim Your RNS' }}</span>
-            </LinkButton>
-            <Input class="mb-4 w-full" :is-single-line="true" placeholder="Username" v-model="profile.name" />
-            <Input class="mb-4 w-full" :is-single-line="false" placeholder="Bio" v-model="profile.bio" />
-
-            <div class="px-4 py-4 flex gap-5 fixed left-0 right-0 max-w-md m-auto w-full">
-                <Button
-                    size="lg"
-                    class="flex-1 text-lg bg-secondary-btn text-secondary-btn-text shadow-secondary-btn"
-                    @click="back"
-                    ><span>Discard</span></Button
+            <section class="max-w-md m-auto">
+                <AvatarEditor class="m-auto mb-4" size="lg" :url="profile.avatar" ref="avatar" />
+                <LinkButton
+                    class="m-auto mb-4"
+                    :class="{
+                        'cursor-default': rns,
+                    }"
+                    @click="toSetupRNS"
                 >
-                <Button
-                    size="lg"
-                    class="flex-1 text-lg bg-primary-btn text-primary-btn-text shadow-primary-btn"
-                    @click="save"
-                    ><span>Save</span></Button
-                >
-            </div>
+                    <span>{{ rns ? rns : 'Claim Your RNS' }}</span>
+                </LinkButton>
+                <Input class="mb-4 w-full" :is-single-line="true" placeholder="Username" v-model="profile.name" />
+                <!-- The input of Personal link -->
+                <Input class="mb-4 w-full" :is-single-line="true" placeholder="Personal link" />
+                <Input class="mb-4 w-full" :is-single-line="false" placeholder="Bio" v-model="profile.bio" />
+
+                <div class="px-4 py-4 flex gap-5 fixed left-0 right-0 max-w-md m-auto w-full">
+                    <Button
+                        size="lg"
+                        class="flex-1 text-lg bg-secondary-btn text-secondary-btn-text shadow-secondary-btn"
+                        @click="back"
+                        ><span>Discard</span></Button
+                    >
+                    <Button
+                        size="lg"
+                        class="flex-1 text-lg bg-primary-btn text-primary-btn-text shadow-primary-btn"
+                        @click="save"
+                        ><span>Save</span></Button
+                    >
+                </div>
+            </section>
 
             <LoadingContainer v-show="isLoading" />
 
@@ -131,7 +135,6 @@ export default class EditProfile extends Vue {
         }
 
         const profile = await (<IRSS3>this.rss3).profile.get();
-        console.log(profile);
         this.profile.avatar = profile?.avatar?.[0] || config.defaultAvatar;
         this.profile.name = profile?.name || '';
         this.profile.bio = profile?.bio || '';

src/views/Followers.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="h-screen bg-body-bg overflow-y-auto">
-        <div class="px-4 pt-8 pb-20 max-w-md m-auto">
-            <div class="header flex justify-between items-center pb-4">
+        <div class="px-4 pt-8 pb-20 max-w-screen-lg m-auto">
+            <div class="flex justify-between items-center pb-4">
                 <Button
                     size="sm"
                     class="w-10 h-10 bg-secondary-btn text-secondary-btn-text shadow-secondary-btn"
@@ -19,7 +19,7 @@
                     @click="toPublicPage(rns, ethAddress)"
                 />
             </div>
-            <div class="follow-list flex flex-col gap-y-4">
+            <div class="flex flex-col gap-y-4 max-w-md m-auto">
                 <FollowerCard
                     class="w-auto cursor-pointer"
                     v-for="item in followerList"
@@ -58,8 +58,8 @@ interface Profile {
     components: { ImgHolder, Button, FollowerCard },
 })
 export default class Followers extends Vue {
-    public followerList: Array<Profile> = [];
-    public rss3Profile: Profile = {
+    followerList: Array<Profile> = [];
+    rss3Profile: Profile = {
         avatar: config.defaultAvatar,
         username: '',
         address: '',
@@ -195,7 +195,7 @@ export default class Followers extends Vue {
         }
     }
 
-    public back() {
+    back() {
         this.$router.push(config.subDomain.isSubDomainMode ? '/' : `/${this.rns || this.ethAddress}`);
     }
 

src/views/Followings.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="h-screen bg-body-bg overflow-y-auto">
-        <div class="px-4 pt-8 pb-20 max-w-md m-auto">
-            <div class="header flex justify-between items-center pb-4">
+        <div class="px-4 pt-8 pb-20 max-w-screen-lg m-auto">
+            <div class="flex justify-between items-center pb-4">
                 <Button
                     size="sm"
                     class="w-10 h-10 bg-secondary-btn text-secondary-btn-text shadow-secondary-btn"
@@ -19,7 +19,7 @@
                     @click="toPublicPage(rns, ethAddress)"
                 />
             </div>
-            <div class="follow-list flex flex-col gap-y-4">
+            <div class="flex flex-col gap-y-4 max-w-md m-auto">
                 <FollowerCard
                     class="w-auto cursor-pointer"
                     v-for="item in followingList"
@@ -58,8 +58,8 @@ interface Profile {
     components: { ImgHolder, Button, FollowerCard },
 })
 export default class Followings extends Vue {
-    public followingList: Array<Profile> = [];
-    public rss3Profile: Profile = {
+    followingList: Array<Profile> = [];
+    rss3Profile: Profile = {
         avatar: config.defaultAvatar,
         username: '',
         address: '',
@@ -195,7 +195,7 @@ export default class Followings extends Vue {
         }
     }
 
-    public back() {
+    back() {
         this.$router.push(config.subDomain.isSubDomainMode ? '/' : `/${this.rns || this.ethAddress}`);
     }