Merge branch 'ui-v0.3' into feat/ui-v0.4

i18n/en_US.yaml

@@ -724,6 +724,7 @@ ui:
       newest: Newest
       active: Active
       score: Score
+      more: More
     tips:
       title: Advanced Search Tips
       tag: '<1>[tag]</1> search withing a tag'

ui/src/components/QueryGroup/index.tsx

@@ -12,6 +12,7 @@ interface Props {
   sortKey?: string;
   className?: string;
   pathname?: string;
+  wrapClassName?: string;
 }
 const MAX_BUTTON_COUNT = 3;
 const Index: FC<Props> = ({
@@ -21,6 +22,7 @@ const Index: FC<Props> = ({
   i18nKeyPrefix = '',
   className = '',
   pathname = '',
+  wrapClassName = '',
 }) => {
   const [searchParams, setUrlSearchParams] = useSearchParams();
   const navigate = useNavigate();
@@ -51,7 +53,7 @@ const Index: FC<Props> = ({
     return (typeof btn === 'string' ? btn : btn.name) === currentSort;
   });
   return (
-    <ButtonGroup size="sm">
+    <ButtonGroup size="sm" className={wrapClassName}>
       {data.map((btn, index) => {
         const key = typeof btn === 'string' ? btn : btn.sort;
         const name = typeof btn === 'string' ? btn : btn.name;
@@ -62,7 +64,7 @@ const Index: FC<Props> = ({
             variant="outline-secondary"
             active={currentSort === name}
             className={classNames(
-              'text-capitalize',
+              'text-capitalize fit-content',
               data.length > MAX_BUTTON_COUNT &&
                 index > MAX_BUTTON_COUNT - 2 &&
                 'd-none d-md-block',

ui/src/components/QuestionList/index.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Row, Col, ListGroup } from 'react-bootstrap';
+import { ListGroup } from 'react-bootstrap';
 import { NavLink, useParams, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
@@ -103,23 +103,19 @@ const QuestionList: FC<Props> = ({ source }) => {
 
   return (
     <div>
-      <Row className="mb-3">
-        <Col className="d-flex align-items-center">
-          <h5 className="fs-5 text-nowrap mb-3 mb-md-0">
-            {source === 'questions'
-              ? t('all_questions')
-              : t('x_questions', { count })}
-          </h5>
-        </Col>
-        <Col>
-          <QueryGroup
-            data={QuestionOrderKeys}
-            currentSort={curOrder}
-            pathname={source === 'questions' ? '/questions' : ''}
-            i18nKeyPrefix="question"
-          />
-        </Col>
-      </Row>
+      <div className="mb-3 d-flex flex-wrap justify-content-between">
+        <h5 className="fs-5 text-nowrap mb-3 mb-md-0">
+          {source === 'questions'
+            ? t('all_questions')
+            : t('x_questions', { count })}
+        </h5>
+        <QueryGroup
+          data={QuestionOrderKeys}
+          currentSort={curOrder}
+          pathname={source === 'questions' ? '/questions' : ''}
+          i18nKeyPrefix="question"
+        />
+      </div>
       <ListGroup variant="flush" className="border-top border-bottom-0">
         {listData?.list?.map((li) => {
           return (

ui/src/i18n/locales/en_US.yaml

@@ -724,6 +724,7 @@ ui:
       newest: Newest
       active: Active
       score: Score
+      more: More
     tips:
       title: Advanced Search Tips
       tag: '<1>[tag]</1> search withing a tag'

ui/src/index.scss

@@ -141,6 +141,11 @@ a {
   background-color: #fff3cd80;
 }
 
+.fit-content {
+  height: fit-content;
+  flex: none;
+}
+
 // fix bug for React-Bootstrap Form.Text
 .form-text {
   display: inline-block;

ui/src/pages/Admin/Answers/index.tsx

@@ -110,10 +110,12 @@ const Answers: FC = () => {
         <thead>
           <tr>
             <th>{t('post')}</th>
-            <th>{t('votes')}</th>
-            <th>{t('created')}</th>
-            <th>{t('status')}</th>
-            {curFilter !== 'deleted' && <th>{t('action')}</th>}
+            <th style={{ width: '11%' }}>{t('votes')}</th>
+            <th style={{ width: '14%' }}>{t('created')}</th>
+            <th style={{ width: '11%' }}>{t('status')}</th>
+            {curFilter !== 'deleted' && (
+              <th style={{ width: '11%' }}>{t('action')}</th>
+            )}
           </tr>
         </thead>
         <tbody className="align-middle">
@@ -164,7 +166,10 @@ const Answers: FC = () => {
                 </td>
                 {curFilter !== 'deleted' && (
                   <td>
-                    <Button variant="link" onClick={() => handleChange(li.id)}>
+                    <Button
+                      variant="link"
+                      className="p-0 btn-no-border"
+                      onClick={() => handleChange(li.id)}>
                       {t('change')}
                     </Button>
                   </td>

ui/src/pages/Admin/Questions/index.tsx

@@ -126,12 +126,14 @@ const Questions: FC = () => {
       <Table>
         <thead>
           <tr>
-            <th style={{ width: '40%' }}>{t('post')}</th>
-            <th>{t('votes')}</th>
-            <th>{t('answers')}</th>
+            <th>{t('post')}</th>
+            <th style={{ width: '8%' }}>{t('votes')}</th>
+            <th style={{ width: '8%' }}>{t('answers')}</th>
             <th style={{ width: '20%' }}>{t('created')}</th>
-            <th>{t('status')}</th>
-            {curFilter !== 'deleted' && <th>{t('action')}</th>}
+            <th style={{ width: '9%' }}>{t('status')}</th>
+            {curFilter !== 'deleted' && (
+              <th style={{ width: '10%' }}>{t('action')}</th>
+            )}
           </tr>
         </thead>
         <tbody className="align-middle">
@@ -177,7 +179,10 @@ const Questions: FC = () => {
                 </td>
                 {curFilter !== 'deleted' && (
                   <td>
-                    <Button variant="link" onClick={() => handleChange(li.id)}>
+                    <Button
+                      variant="link"
+                      className="p-0 btn-no-border"
+                      onClick={() => handleChange(li.id)}>
                       {t('change')}
                     </Button>
                   </td>

ui/src/pages/Admin/Users/index.tsx

@@ -86,20 +86,22 @@ const Users: FC = () => {
       <Table>
         <thead>
           <tr>
-            <th style={{ width: '30%' }}>{t('name')}</th>
-            <th>{t('reputation')}</th>
+            <th>{t('name')}</th>
+            <th style={{ width: '12%' }}>{t('reputation')}</th>
             <th style={{ width: '20%' }}>{t('email')}</th>
-            <th className="text-nowrap" style={{ width: '20%' }}>
+            <th className="text-nowrap" style={{ width: '15%' }}>
               {t('created_at')}
             </th>
             {(curFilter === 'deleted' || curFilter === 'suspended') && (
-              <th className="text-nowrap" style={{ width: '15%' }}>
+              <th className="text-nowrap" style={{ width: '10%' }}>
                 {curFilter === 'deleted' ? t('delete_at') : t('suspend_at')}
               </th>
             )}
 
-            <th>{t('status')}</th>
-            {curFilter !== 'deleted' ? <th>{t('action')}</th> : null}
+            <th style={{ width: '10%' }}>{t('status')}</th>
+            {curFilter !== 'deleted' ? (
+              <th style={{ width: '10%' }}>{t('action')}</th>
+            ) : null}
           </tr>
         </thead>
         <tbody className="align-middle">
@@ -136,7 +138,7 @@ const Users: FC = () => {
                   <td>
                     {user.status !== 'deleted' && (
                       <Button
-                        className="px-2"
+                        className="p-0 btn-no-border"
                         variant="link"
                         onClick={() => handleClick(user)}>
                         {t('change')}

ui/src/pages/Install/index.tsx

@@ -63,7 +63,7 @@ const Index: FC = () => {
       errorMsg: '',
     },
     db_file: {
-      value: '',
+      value: '/data/answer.db',
       isInvalid: false,
       errorMsg: '',
     },
@@ -116,26 +116,6 @@ const Index: FC = () => {
     setStep((pre) => pre + 1);
   };
 
-  const submitDatabaseForm = () => {
-    const params = {
-      lang: formData.lang.value,
-      db_type: formData.db_type.value,
-      db_username: formData.db_username.value,
-      db_password: formData.db_password.value,
-      db_host: formData.db_host.value,
-      db_name: formData.db_name.value,
-      db_file: formData.db_file.value,
-    };
-    dbCheck(params)
-      .then(() => {
-        handleNext();
-      })
-      .catch((err) => {
-        console.log(err);
-        handleErr(err);
-      });
-  };
-
   const checkInstall = () => {
     const params = {
       lang: formData.lang.value,
@@ -155,6 +135,27 @@ const Index: FC = () => {
       });
   };
 
+  const submitDatabaseForm = () => {
+    const params = {
+      lang: formData.lang.value,
+      db_type: formData.db_type.value,
+      db_username: formData.db_username.value,
+      db_password: formData.db_password.value,
+      db_host: formData.db_host.value,
+      db_name: formData.db_name.value,
+      db_file: formData.db_file.value,
+    };
+    dbCheck(params)
+      .then(() => {
+        // handleNext();
+        checkInstall();
+      })
+      .catch((err) => {
+        console.log(err);
+        handleErr(err);
+      });
+  };
+
   const submitSiteConfig = () => {
     const params = {
       lang: formData.lang.value,
@@ -183,7 +184,11 @@ const Index: FC = () => {
       submitDatabaseForm();
     }
     if (step === 3) {
-      checkInstall();
+      if (errorData.msg) {
+        checkInstall();
+      } else {
+        handleNext();
+      }
     }
     if (step === 4) {
       submitSiteConfig();
@@ -198,7 +203,7 @@ const Index: FC = () => {
     if (tableExist) {
       setStep(7);
     } else {
-      setStep(2);
+      setStep(4);
     }
   };
 

ui/src/router/routes.ts

@@ -155,7 +155,7 @@ const routes: RouteNode[] = [
         path: 'users/change-email',
         page: 'pages/Users/ChangeEmail',
         guard: async () => {
-          return guard.notLogged();
+          return guard.notActivated();
         },
       },
       {