(incubator-answer) branch test updated: fix: personal badges list style

[shuai]

This is an automated email from the ASF dual-hosted git repository.

shuai pushed a commit to branch test
in repository https://gitbox.apache.org/repos/asf/incubator-answer.git


The following commit(s) were added to refs/heads/test by this push:
     new 24b53d53 fix: personal badges list style
24b53d53 is described below

commit 24b53d53550e5a645638c8dd9fed4d58a8bb412a
Author: shuai <lishuail...@sifou.com>
AuthorDate: Fri Oct 18 14:24:47 2024 +0800

    fix: personal badges list style
---
 .../Users/Personal/components/Overview/index.tsx   | 45 ++++++++++------------
 1 file changed, 20 insertions(+), 25 deletions(-)

diff --git a/ui/src/pages/Users/Personal/components/Overview/index.tsx 
b/ui/src/pages/Users/Personal/components/Overview/index.tsx
index 3c1f590e..81ed7b32 100644
--- a/ui/src/pages/Users/Personal/components/Overview/index.tsx
+++ b/ui/src/pages/Users/Personal/components/Overview/index.tsx
@@ -49,35 +49,32 @@ const Index: FC<Props> = ({ visible, introduction, data, 
username }) => {
           dangerouslySetInnerHTML={{ __html: introduction }}
         />
       ) : (
-        <div className="mb-5">{t('about_me_empty')}</div>
+        <div className="text-center py-5 mb-5">{t('about_me_empty')}</div>
       )}
 
-      <Row
-        className={
-          data?.answer?.length > 0 || data?.question?.length > 0 ? 'mb-4' : ''
-        }>
-        <Col sm={12} md={6}>
-          <h5 className="mb-3">{t('top_answers')}</h5>
-          {data?.answer?.length > 0 ? (
-            <TopList data={data?.answer} type="answer" />
-          ) : (
-            <div className="mb-5">{t('content_empty')}</div>
+      <Row className="mb-4">
+        <Col sm={12} md={6} className="mb-4">
+          {data?.answer?.length > 0 && (
+            <>
+              <h5 className="mb-3">{t('top_answers')}</h5>
+              <TopList data={data?.answer} type="answer" />
+            </>
           )}
         </Col>
         <Col sm={12} md={6}>
-          <h5 className="mb-3">{t('top_questions')}</h5>
-          {data?.question?.length > 0 ? (
-            <TopList data={data?.question} type="question" />
-          ) : (
-            <div className="mb-5">{t('content_empty')}</div>
+          {data?.question?.length > 0 && (
+            <>
+              <h5 className="mb-3">{t('top_questions')}</h5>
+              <TopList data={data?.question} type="question" />
+            </>
           )}
         </Col>
       </Row>
 
-      <div className="mb-5">
-        <h5 className="mb-3">{t('recent_badges')}</h5>
-        {Number(recentBadges?.count) > 0 ? (
-          <div className="d-flex flex-wrap" style={{ margin: '-12px' }}>
+      {Number(recentBadges?.count) > 0 && (
+        <div className="mb-4">
+          <h5 className="mb-3">{t('recent_badges')}</h5>
+          <Row>
             {recentBadges?.list?.map((item) => {
               return (
                 <Col sm={6} md={4} lg={3} key={item.id} className="mb-4">
@@ -89,11 +86,9 @@ const Index: FC<Props> = ({ visible, introduction, data, 
username }) => {
                 </Col>
               );
             })}
-          </div>
-        ) : (
-          <div className="mb-5">{t('content_empty')}</div>
-        )}
-      </div>
+          </Row>
+        </div>
+      )}
     </div>
   );
 };