Merge pull request #374 from answerdev/feat/1.1.0/ui

Feat/1.1.0/UI

i18n/en_US.yaml

@@ -1168,14 +1168,6 @@ ui:
     accepted: Accepted
     answered: answered
     asked: asked
-    rank_type:
-      upvote: upvote
-      upvoted: upvoted
-      downvote: downvote
-      downvoted: downvoted
-      edit: edit
-      accept: accept
-      accepted: accepted
     downvoted: downvoted
     mod_short: Mod
     mod_long: Moderators

ui/src/common/sideNavLayout.scss

@@ -1,28 +1,17 @@
+// .flex-auto {
+//   max-width: 70%;
+// }
 .page-right-side {
   flex: none;
   width: 30%;
 }
 
-.line {
-  position: absolute;
-  top: 0;
-  right: 12px;
-  width: 1px;
-  height: 100%;
-  background-color: var(--bs-gray-300);
-  min-height: calc(100vh - 62px - 74px);
-}
-
 // lg
 @media screen and (max-width: 1199.9px) {
+  // .flex-auto {
+  //   max-width: 100%;
+  // }
   .page-right-side {
     width: 100%;
   }
 }
-
-// md
-@media screen and (max-width: 991.9px) {
-  .line {
-    display: none;
-  }
-}

ui/src/components/Editor/utils/index.ts

@@ -94,13 +94,17 @@ export function htmlRender(el: HTMLElement | null) {
 
     el.querySelectorAll('.language-mermaid').forEach((pre) => {
       const flag = Date.now();
-      mermaid.render(`theGraph${flag}`, pre.textContent, function (svgCode) {
+      mermaid.render(
-        const p = document.createElement('p');
+        `theGraph${flag}`,
-        p.className = 'text-center';
+        pre.textContent || '',
-        p.innerHTML = svgCode;
+        function (svgCode) {
+          const p = document.createElement('p');
+          p.className = 'text-center';
+          p.innerHTML = svgCode;
 
-        pre.parentNode?.replaceChild(p, pre);
+          pre.parentNode?.replaceChild(p, pre);
-      });
+        },
+      );
     });
   });
   import('katex/contrib/auto-render/auto-render').then(

ui/src/components/SideNav/index.scss

@@ -14,6 +14,15 @@
     color: black;
     background-color: var(--bs-gray-200);
   }
+  .side-nav-right-line {
+    position: absolute;
+    top: 0;
+    right: 12px;
+    width: 1px;
+    height: 100%;
+    background-color: var(--bs-gray-300);
+    min-height: calc(100vh - 62px - 74px);
+  }
 }
 
 @media screen and (max-width: 991.9px) {
@@ -21,5 +30,8 @@
     .nav {
       max-width: 100%;
     }
+    .side-nav-right-line {
+      display: none;
+    }
   }
 }

ui/src/components/SideNav/index.tsx

@@ -66,7 +66,7 @@ const Index: FC = () => {
           </>
         ) : null}
       </Nav>
-      <div className="line" />
+      <div className="side-nav-right-line" />
     </Col>
   );
 };

ui/src/pages/Users/Personal/components/Reputation/index.tsx

@@ -1,6 +1,5 @@
 import { FC, memo } from 'react';
 import { ListGroup, ListGroupItem } from 'react-bootstrap';
-import { useTranslation } from 'react-i18next';
 
 import { FormatTime } from '@/components';
 import { pathFactory } from '@/router/pathFactory';
@@ -11,7 +10,6 @@ interface Props {
 }
 
 const Index: FC<Props> = ({ visible, data }) => {
-  const { t } = useTranslation('translation', { keyPrefix: 'personal' });
   if (!visible || !data?.length) {
     return null;
   }
@@ -48,9 +46,7 @@ const Index: FC<Props> = ({ visible, data }) => {
                 {item.title}
               </a>
               <div className="d-flex align-items-center small text-secondary">
-                <span>
+                <span>{item.rank_type}</span>
-                  {t(item.rank_type, { keyPrefix: 'personal.rank_type' })}
-                </span>
                 <span className="split-dot" />
                 <FormatTime time={item.created_at} className="me-4" />
               </div>