Merge branch 'ui' into 'main'

rename component and fix style import

See merge request opensource/answer!72

ui/src/components/Header/index.scss

@@ -1,4 +1,5 @@
-@import '~bootstrap/scss/bootstrap-utilities';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
 #header {
   background: linear-gradient(180deg, #0033FF 0%, rgba(0, 51, 255, 0.95) 100%);
   --bs-navbar-padding-y: 0.75rem;

ui/src/components/Header/index.tsx

@@ -56,9 +56,9 @@ const Header: FC = () => {
   useEffect(() => {
     const collapse = document.querySelector('#navBarContent');
     if (collapse && collapse.classList.contains('show')) {
-      const toogle = document.querySelector('#navBarToggle') as HTMLElement;
-      if (toogle) {
-        toogle?.click();
+      const toggle = document.querySelector('#navBarToggle') as HTMLElement;
+      if (toggle) {
+        toggle?.click();
       }
     }
   }, [location.pathname]);

ui/src/components/QueryGroup/index.tsx

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 
 interface Props {
   data;
-  i18nkeyPrefix: string;
+  i18nKeyPrefix: string;
   currentSort: string;
   sortKey?: string;
   className?: string;
@@ -17,13 +17,13 @@ const Index: FC<Props> = ({
   data = [],
   currentSort = '',
   sortKey = 'order',
-  i18nkeyPrefix = '',
+  i18nKeyPrefix = '',
   className = '',
 }) => {
   const [searchParams, setUrlSearchParams] = useSearchParams();
 
   const { t } = useTranslation('translation', {
-    keyPrefix: i18nkeyPrefix,
+    keyPrefix: i18nKeyPrefix,
   });
 
   const handleParams = (order): string => {

ui/src/components/QuestionList/index.tsx

@@ -32,7 +32,7 @@ const QuestionLastUpdate = ({ q }) => {
   if (q.update_time > q.edit_time) {
     // question answered
     return (
-      <>
+      <div className="d-flex">
         <BaseUserCard
           data={q.last_answered_user_info}
           showAvatar={false}
@@ -44,14 +44,14 @@ const QuestionLastUpdate = ({ q }) => {
           className="text-secondary mx-1"
           preFix={t('answered')}
         />
-      </>
+      </div>
     );
   }
 
   if (q.edit_time > q.update_time) {
     // question modified
     return (
-      <>
+      <div className="d-flex">
         <BaseUserCard
           data={q.update_user_info}
           showAvatar={false}
@@ -63,13 +63,13 @@ const QuestionLastUpdate = ({ q }) => {
           className="text-secondary mx-1"
           preFix={t('modified')}
         />
-      </>
+      </div>
     );
   }
 
   // default: asked
   return (
-    <>
+    <div className="d-flex">
       <BaseUserCard data={q.user_info} showAvatar={false} className="me-1" />
       •
       <FormatTime
@@ -77,7 +77,7 @@ const QuestionLastUpdate = ({ q }) => {
         preFix={t('asked')}
         className="text-secondary mx-1"
       />
-    </>
+    </div>
   );
 };
 
@@ -115,7 +115,7 @@ const QuestionList: FC<Props> = ({ source }) => {
           <QueryGroup
             data={QuestionOrderKeys}
             currentSort={curOrder}
-            i18nkeyPrefix="question"
+            i18nKeyPrefix="question"
           />
         </Col>
       </Row>
@@ -131,31 +131,33 @@ const QuestionList: FC<Props> = ({ source }) => {
                   {li.status === 2 ? ` [${t('closed')}]` : ''}
                 </NavLink>
               </h5>
-              <div className="d-flex align-items-center fs-14 text-secondary">
+              <div className="d-flex flex-column flex-md-row align-items-md-center fs-14 text-secondary">
                 <QuestionLastUpdate q={li} />
-                <span className="ms-3">
-                  <Icon name="hand-thumbs-up-fill" />
-                  <em className="fst-normal mx-1">{li.vote_count}</em>
-                </span>
-                <span
-                  className={`ms-3 ${
-                    li.accepted_answer_id >= 1 ? 'text-success' : ''
-                  }`}>
-                  <Icon
-                    name={
-                      li.accepted_answer_id >= 1
-                        ? 'check-circle-fill'
-                        : 'chat-square-text-fill'
-                    }
-                  />
-                  <em className="fst-normal mx-1">{li.answer_count}</em>
-                </span>
-                <span className="summary-stat ms-3">
-                  <Icon name="eye-fill" />
-                  <em className="fst-normal mx-1">{li.view_count}</em>
-                </span>
+                <div className="ms-0 ms-md-3 mt-2 mt-md-0">
+                  <span>
+                    <Icon name="hand-thumbs-up-fill" />
+                    <em className="fst-normal mx-1">{li.vote_count}</em>
+                  </span>
+                  <span
+                    className={`ms-3 ${
+                      li.accepted_answer_id >= 1 ? 'text-success' : ''
+                    }`}>
+                    <Icon
+                      name={
+                        li.accepted_answer_id >= 1
+                          ? 'check-circle-fill'
+                          : 'chat-square-text-fill'
+                      }
+                    />
+                    <em className="fst-normal mx-1">{li.answer_count}</em>
+                  </span>
+                  <span className="summary-stat ms-3">
+                    <Icon name="eye-fill" />
+                    <em className="fst-normal mx-1">{li.view_count}</em>
+                  </span>
+                </div>
               </div>
-              <div className="question-tags mx-n1">
+              <div className="question-tags mx-n1 mt-2">
                 {Array.isArray(li.tags)
                   ? li.tags.map((tag) => {
                       return (

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

@@ -85,7 +85,7 @@ const Answers: FC = () => {
           data={answerFilterItems}
           currentSort={curFilter}
           sortKey="status"
-          i18nkeyPrefix="admin.answers"
+          i18nKeyPrefix="admin.answers"
         />
 
         <Form.Control

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

@@ -62,7 +62,7 @@ const Flags: FC = () => {
           data={flagFilterKeys}
           currentSort={curFilter}
           sortKey="status"
-          i18nkeyPrefix="admin.flags"
+          i18nKeyPrefix="admin.flags"
         />
 
         <Form.Select

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

@@ -104,7 +104,7 @@ const Questions: FC = () => {
           data={questionFilterItems}
           currentSort={curFilter}
           sortKey="status"
-          i18nkeyPrefix="admin.questions"
+          i18nKeyPrefix="admin.questions"
         />
 
         <Form.Control

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

@@ -67,7 +67,7 @@ const Users: FC = () => {
           data={UserFilterKeys}
           currentSort={curFilter}
           sortKey="filter"
-          i18nkeyPrefix="admin.users"
+          i18nKeyPrefix="admin.users"
         />
 
         <Form.Control

ui/src/pages/Questions/Detail/components/AnswerHead/index.tsx

@@ -34,7 +34,7 @@ const Index: FC<Props> = ({ count = 0, order = 'default' }) => {
       <QueryGroup
         data={sortBtns}
         currentSort={order === 'updated' ? 'newest' : 'score'}
-        i18nkeyPrefix="question_detail.answers"
+        i18nKeyPrefix="question_detail.answers"
       />
     </div>
   );

ui/src/pages/Questions/index.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import { PageTitle, FollowingTags } from '@answer/components';
 
-import QuestionList from '@/components/Questions';
+import QuestionList from '@/components/QuestionList';
 import HotQuestions from '@/components/HotQuestions';
 import { siteInfoStore } from '@/stores';
 

ui/src/pages/Search/components/SearchHead/index.tsx

@@ -22,7 +22,7 @@ const Index: FC<Props> = ({ sort, count = 0 }) => {
         data={sortBtns}
         currentSort={sort}
         sortKey="order"
-        i18nkeyPrefix="search.sort_btns"
+        i18nKeyPrefix="search.sort_btns"
       />
     </ListGroupItem>
   );

ui/src/pages/Tags/Detail/index.tsx

@@ -7,7 +7,7 @@ import * as Type from '@answer/common/interface';
 import { PageTitle, FollowingTags } from '@answer/components';
 import { useTagInfo, useFollow } from '@answer/api';
 
-import QuestionList from '@/components/Questions';
+import QuestionList from '@/components/QuestionList';
 import HotQuestions from '@/components/HotQuestions';
 
 const Questions: FC = () => {

ui/src/pages/Tags/index.tsx

@@ -60,7 +60,7 @@ const Tags = () => {
                 data={sortBtns}
                 currentSort={sort || 'popular'}
                 sortKey="sort"
-                i18nkeyPrefix="tags.sort_buttons"
+                i18nKeyPrefix="tags.sort_buttons"
               />
             </div>
           </Col>

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

@@ -32,7 +32,7 @@ const Index: FC<Props> = ({
         <QueryGroup
           data={sortBtns}
           currentSort={sort}
-          i18nkeyPrefix="personal"
+          i18nKeyPrefix="personal"
         />
       )}
     </div>