Merge pull request kodadot#10573 from roiLeo/fix/collection/responsive

🔧 collection mobile
hassnian · Jul 13, 2024 · e5bffd8 · e5bffd8
2 parents 622198e + 38f0472
commit e5bffd8
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 44 deletions.
diff --git a/components/collection/CollectionHeader/CollectionBanner.vue b/components/collection/CollectionHeader/CollectionBanner.vue
@@ -1,22 +1,23 @@
 <template>
   <div
-    class="collection-banner"
+    class="collection-banner relative md:h-[560px] h-72 bg-no-repeat bg-cover bg-center border-b"
     :style="{ backgroundImage: `url(${bannerImageUrl})` }">
-    <div class="collection-banner-shadow"></div>
+    <div class="collection-banner-shadow absolute inset-0"></div>
 
     <section class="h-full py-8">
-      <div class="container is-fluid collection-banner-content">
+      <div
+        class="container is-fluid collection-banner-content flex flex-col md:flex-row items-start md:items-end md:justify-between h-full">
         <div class="lg:flex-1">
           <div class="flex flex-col items-start">
-            <div class="collection-banner-avatar">
+            <div class="collection-banner-avatar p-2.5 mb-4 md:mb-6">
               <BaseMediaItem
                 :src="collectionAvatar"
                 :image-component="NuxtImg"
                 :title="collectionName"
                 class="w-[5.5rem] h-[5.5rem] border" />
             </div>
             <h1
-              class="collection-banner-name"
+              class="collection-banner-name font-bold text-2xl md:text-[31px]"
               data-testid="collection-banner-name">
               {{ collectionName }}
             </h1>
@@ -119,38 +120,11 @@ useSeoMeta({
 @import '@/assets/styles/abstracts/variables';
 
 .collection-banner {
-  background-repeat: no-repeat;
-  background-size: cover;
-  height: 560px;
-  position: relative;
-  background-position: 50% 50%;
-  @apply border-b;
-
   &-shadow {
     background: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.2));
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  &-content {
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    height: 100%;
-
-    @include mobile {
-      flex-direction: column;
-      justify-content: flex-end;
-      align-items: flex-start;
-    }
   }
 
   &-avatar {
-    padding: 0.625rem;
-
     @include ktheme() {
       border: 1px solid theme('border-color');
       background-color: theme('background-color');
@@ -159,10 +133,6 @@ useSeoMeta({
   }
 
   &-name {
-    font-weight: 700;
-    font-size: 2rem;
-    margin-top: 1.5rem;
-
     @include ktheme() {
       color: theme('text-color-inverse');
       text-shadow:

diff --git a/components/collection/collectionInfoLine.vue b/components/collection/collectionInfoLine.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex mb-2 items-center whitespace-nowrap">
     <div class="text-k-grey pr-4 flex-grow">{{ title }}</div>
-    <div class="font-bold flex">
+    <div class="font-bold flex text-sm md:text-lg">
       <slot>
         <div>{{ value }}</div>
       </slot>

diff --git a/components/profile/ProfileBannerSkeleton.vue b/components/profile/ProfileBannerSkeleton.vue
@@ -6,11 +6,11 @@
       no-margin />
 
     <div
-      class="collection-banner-content flex items-end h-full pb-7 max-sm:mx-5 mx-12 2xl:mx-auto max-w-[89rem]">
+      class="collection-banner-content flex md:items-end items-center h-full md:pb-10 max-sm:mx-5 mx-12 2xl:mx-auto max-w-[89rem]">
       <div
         class="!rounded-full overflow-hidden p-2.5 bg-background-color border z-[10]">
         <NeoSkeleton
-          item-class="!h-[124px] !w-[124px] !rounded-full m-0"
+          item-class="md:!w-[124px] md:!h-[124px] !h-[78px] !w-[78px] !rounded-full m-0"
           no-margin />
       </div>
     </div>

diff --git a/components/profile/ProfileDetail.vue b/components/profile/ProfileDetail.vue
@@ -23,7 +23,7 @@
           : undefined,
       }">
       <div
-        class="collection-banner-content flex md:items-end items-center h-full md:pb-7 max-sm:mx-5 mx-12 2xl:mx-auto max-w-[89rem]">
+        class="collection-banner-content flex md:items-end items-center h-full md:pb-10 max-sm:mx-5 mx-12 2xl:mx-auto max-w-[89rem]">
         <div
           class="!rounded-full overflow-hidden p-2.5 bg-background-color border aspect-square">
           <BaseMediaItem
@@ -32,7 +32,10 @@
             :image-component="NuxtImg"
             :title="'User Avatar'"
             class="md:w-[124px] md:h-[124px] h-[78px] w-[78px] object-cover rounded-full" />
-          <Avatar v-else :value="id" :size="124" class="mb-[-7px]" />
+          <Avatar
+            v-else
+            :value="id"
+            class="md:w-[124px] md:h-[124px] h-[78px] w-[78px] mb-[-7px]" />
         </div>
       </div>
     </div>
@@ -43,7 +46,9 @@
 
       <div v-else class="flex flex-col gap-6">
         <!-- Identity Link -->
-        <h1 class="title is-4 md:is-3 mb-0" data-testid="profile-user-identity">
+        <h1
+          class="font-bold text-2xl md:text-[31px] mb-0"
+          data-testid="profile-user-identity">
           <span v-if="userProfile?.name">{{ userProfile.name }}</span>
           <Identity
             v-else

diff --git a/components/profile/ProfileSkeleton.vue b/components/profile/ProfileSkeleton.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-col gap-6">
-    <NeoSkeleton :width="180" :height="36" no-margin />
+    <NeoSkeleton :width="330" :height="36" no-margin />
 
     <div class="flex flex-wrap gap-3">
       <NeoSkeleton
-        :width="150"
+        :width="110"
         :height="40"
         no-margin
         border-radius="3rem"