Update IdentityTotalCard responsive styles

pshenmic · Dec 12, 2024 · 2688fac · 2688fac
1 parent 3e7e714
commit 2688fac
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 16 deletions.
diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js
@@ -171,6 +171,8 @@ function Identity ({ identifier }) {
 
   console.log('identity', identity)
 
+  console.log('showPublicKeys', showPublicKeys)
+
   return (
     <PageDataContainer
       className={'IdentityPage'}
@@ -224,9 +226,9 @@ function Identity ({ identifier }) {
               </div>
             </div>
 
-            <HorisontalSeparator className={'ValidatorCard__Separator'}/>
+            <HorisontalSeparator className={'IdentityTotalCard__Separator'}/>
 
-            <div>
+            <div className={'IdentityTotalCard__CommonLines'}>
               <InfoLine
                 className={'IdentityTotalCard__InfoLine'}
                 title={'Revision'}
@@ -246,7 +248,7 @@ function Identity ({ identifier }) {
                 title={'Identities names'}
                 value={identity.data?.aliases?.length
                   ? <AliasesList aliases={identity.data?.aliases}/>
-                  : <ValueContainer className={'ValidatorCard__ZeroListBadge'}>none</ValueContainer>
+                  : <ValueContainer className={'IdentityTotalCard__ZeroListBadge'}>none</ValueContainer>
                 }
                 loading={identity.loading}
                 error={identity.error || (!identity.loading && identity.data?.aliases === undefined)}
@@ -271,7 +273,9 @@ function Identity ({ identifier }) {
               <PublicKeys
                 publicKeys={identity.data?.publicKeys}
                 show={showPublicKeys}
-                className={'IdentityTotalCard__PublicKeysListContainer IdentityTotalCard__PublicKeysListContainer--Mobile'}
+                className={`IdentityTotalCard__PublicKeysListContainer IdentityTotalCard__PublicKeysListContainer--Mobile ${showPublicKeys
+                  ? ' IdentityTotalCard__PublicKeysListContainer--Opened'
+                  : ' IdentityTotalCard__PublicKeysListContainer--Hidden'}`}
               />
             </div>
           </div>
@@ -283,7 +287,9 @@ function Identity ({ identifier }) {
         <PublicKeys
           publicKeys={identity.data?.publicKeys}
           show={showPublicKeys}
-          className={'IdentityTotalCard__PublicKeysListContainer IdentityTotalCard__PublicKeysListContainer--Desktop'}
+          className={`IdentityTotalCard__PublicKeysListContainer IdentityTotalCard__PublicKeysListContainer--Desktop ${showPublicKeys
+            ? ' IdentityTotalCard__PublicKeysListContainer--Opened'
+            : ' IdentityTotalCard__PublicKeysListContainer--Hidden'}`}
         />
       </div>
 

diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss
@@ -2,11 +2,12 @@
 @import '../../../styles/variables.scss';
 
 .IdentityTotalCard {
+  $gap: 14px;
   @include mixins.EntityCard();
   @include mixins.InfoContainerPadding(padding, 0px, true);
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: $gap;
 
   &__Title {
     .Alias__Name, .Alias__Domain {
@@ -44,6 +45,12 @@
     gap: 40px;
   }
 
+  &__CommonLines {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+
   &__Column {
     position: relative;
     width: 50%;
@@ -85,6 +92,12 @@
   }
 
   &__PublicKeysListContainer {
+    transition: .3s !important;
+
+    &--Hidden {
+      margin-top: -$gap !important;
+    }
+
     &--Mobile {
       display: none !important;
     }
@@ -119,23 +132,21 @@
   }
 
   @media screen and (max-width: $breakpoint-md) {
+    $gap: 12px;
+
     &__ContentContainer {
       flex-direction: column;
     }
 
-    &__Column {
-      position: static;
-    }
-
-    &__Column {
-      width: 100%;
-    }
-
-    &__InfoLine {
-      flex-wrap: wrap;
+    &__ContentContainer, &__CommonLines {
+      gap: $gap;
     }
 
     &__PublicKeysListContainer {
+      &--Hidden {
+        margin-top: -$gap !important;
+      }
+
       &--Mobile {
         display: block !important;
       }
@@ -144,6 +155,18 @@
         display: none !important;
       }
     }
+
+    &__Column {
+      position: static;
+    }
+
+    &__Column {
+      width: 100%;
+    }
+
+    &__InfoLine {
+      flex-wrap: wrap;
+    }
   }
 
   @media screen and (max-width: $breakpoint-sm) {