fix(DocPage): upd design

diplodoc-platform · Jan 17, 2024 · fa6dda6 · fa6dda6
1 parent c3a675c
commit fa6dda6
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 50 deletions.
diff --git a/src/components/ContributorAvatars/ContributorAvatars.scss b/src/components/ContributorAvatars/ContributorAvatars.scss
@@ -32,37 +32,13 @@ $avatarWrapperBigSize: 33px;
         margin: 0 $avatarBorder;
         @include disable-link-styles;
 
-        & > * {
-            @include contributors-text();
-        }
-
-        @media screen and (max-width: map-get($screenBreakpoints, 'sm')) {
-            &_onlyAuthor > *:last-child {
-                margin-left: 5px;
-            }
-
-            & > *:last-child,
-            & > .desktop {
-                display: none;
-            }
-
-            &_onlyAuthor > *:last-child {
-                display: block;
-            }
-
-            & > *:not(:last-child) {
-                margin-right: 0px;
-            }
+        a:hover,
+        a:active {
+            color: var(--g-color-text-link-hover);
         }
 
-        @media screen and (min-width: map-get($screenBreakpoints, 'sm')) {
-            & > .mobile {
-                display: none;
-            }
-
-            & > *:last-child {
-                margin-right: 0px;
-            }
+        & > * {
+            @include contributors-text();
         }
     }
 

diff --git a/src/components/ContributorAvatars/ContributorAvatars.tsx b/src/components/ContributorAvatars/ContributorAvatars.tsx
@@ -30,7 +30,7 @@ const ContributorAvatars: React.FC<ContributorAvatarsProps> = (props) => {
         return null;
     }
 
-    if (isAuthor && contributors.length === 1) {
+    if (contributors.length === 1) {
         return getOneAvatar(contributors[0], isAuthor, onlyAuthor);
     }
 
@@ -78,17 +78,7 @@ function getOneAvatar(
 
     return (
         <div className={b('one_contributor', wrapperModifiers)}>
-            <div className={'desktop'}>{getRedirectingAvatar(avatarData, contributor.url)} </div>
-            <div className={'mobile'}>
-                {isAuthor && onlyAuthor ? (
-                    getRedirectingAvatar(avatarData, contributor.url, true)
-                ) : (
-                    <AvatarWithDescription
-                        contributor={contributor}
-                        avatarSize={AvatarSizes.SMALL}
-                    />
-                )}
-            </div>
+            {getRedirectingAvatar(avatarData, contributor.url)}
             <div>
                 <Link href={contributor.url}>{getName(contributor, isAuthor)}</Link>
             </div>

diff --git a/src/components/Contributors/Contributors.scss b/src/components/Contributors/Contributors.scss
@@ -2,7 +2,6 @@
 
 .dc-contributors {
     display: flex;
-    margin: 0 0 32px;
 
     &__title {
         @include contributors-text();

diff --git a/src/components/DocPage/DocPage.scss b/src/components/DocPage/DocPage.scss
@@ -135,7 +135,7 @@
     }
 
     &__title {
-        margin-bottom: 8px;
+        margin-bottom: 12px;
 
         @include text-size(display-2);
     }
@@ -236,8 +236,17 @@
 
     &__page-contributors {
         display: flex;
-        & > div + div {
-            margin-left: 20px;
+        margin-bottom: 24px;
+        flex-wrap: wrap;
+
+        & > div {
+            margin-right: 20px;
+            margin-bottom: 8px;
+            line-height: 24px;
+        }
+
+        & > div:last-child {
+            margin-right: 0;
         }
     }
 

diff --git a/src/components/UpdatedAtDate/UpdatedAtDate.scss b/src/components/UpdatedAtDate/UpdatedAtDate.scss
@@ -2,9 +2,10 @@
 
 .dc-updated-at-date {
     display: flex;
-    margin: 0 0 32px;
-
     font-size: 13px;
     font-weight: 400;
-    align-self: center;
+
+    &__wrapper {
+        align-self: center;
+    }
 }
diff --git a/src/components/UpdatedAtDate/UpdatedAtDate.tsx b/src/components/UpdatedAtDate/UpdatedAtDate.tsx
@@ -24,7 +24,9 @@ const UpdatedAtDate: React.FC<UpdatedAtDateProps> = ({updatedAt}) => {
 
     return (
         <div className={b()}>
-            {t<string>('title')} {updatedAtFormatted}
+            <div className={b('wrapper')}>
+                {t<string>('title')} {updatedAtFormatted}
+            </div>
         </div>
     );
 };

diff --git a/src/i18n/ru.json b/src/i18n/ru.json
@@ -115,6 +115,6 @@
     "prev": "Предыдущая страница"
   },
   "updated-at-date": {
-    "title": "Обновлено"
+    "title": "Обновлена"
   }
 }