Merge branch 'ui' of git.backyard.segmentfault.com:opensource/answer into ui

ui/README.md

@@ -27,8 +27,8 @@ corepack prepare pnpm@latest --activate
 clone the repo locally and run following command in your terminal:
 
 ```shell
-$ git clone `answer repo` answer
+$ git clone git@github.com:answerdev/answer.git answer
-$ cd answer
+$ cd answer/ui
 $ pnpm install
 $ pnpm run start
 ```

ui/src/common/interface.ts

@@ -301,6 +301,7 @@ export interface SearchResItem {
     answer_count: number;
     accepted: boolean;
     tags: TagBase[];
+    status?: string;
   };
 }
 export interface SearchRes extends ListResult<SearchResItem> {

ui/src/common/variable.scss

@@ -1 +1,2 @@
 $link-hover-decoration: none;
+$blue: #0033FF !default;

ui/src/components/Questions/index.tsx

@@ -144,6 +144,7 @@ const QuestionList: FC<Props> = ({ source }) => {
               <h5 className="text-wrap text-break">
                 <NavLink to={`/questions/${li.id}`} className="text-body">
                   {li.title}
+                  {li.status === 2 ? ` [${t('closed')}]` : ''}
                 </NavLink>
               </h5>
               <div className="d-flex align-items-center fs-14 text-secondary">

ui/src/i18n/locales/en.json

@@ -689,6 +689,7 @@
     "modified": "modified",
     "answered": "answered",
     "asked": "asked",
+    "closed": "closed",
     "follow_a_tag": "Follow a tag"
   },
   "personal": {

ui/src/index.scss

@@ -61,7 +61,7 @@ a {
 }
 
 .badge-tag:hover {
-  background: #9EC5FE;
+  background: #9ec5fe;
 }
 
 .divide-line {
@@ -70,7 +70,6 @@ a {
 
 .page-wrap {
   min-height: calc(100vh - 148px);
-  overflow-y: auto;
 }
 
 .btn-no-border,

ui/src/pages/Questions/Ask/components/SearchQuestion/index.tsx

@@ -30,7 +30,12 @@ const SearchQuestion = ({ similarQuestions }) => {
                   key={item.id}
                   href={`/questions/${item.id}`}
                   target="_blank">
-                  <span className="text-wrap text-break">{item.title}</span>
+                  <span className="text-wrap text-break">
+                    {item.title}
+                    {item.status === 'closed'
+                      ? ` [${t('closed', { keyPrefix: 'question' })}]`
+                      : null}
+                  </span>
                   {item.accepted_answer ? (
                     <span className="ms-3 text-success">
                       <Icon type="bi" name="check-circle-fill" />

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

@@ -269,12 +269,12 @@ const Ask = () => {
       <PageTitle title={pageTitle} />
       <Container className="pt-4 mt-2 mb-5">
         <Row className="justify-content-center">
-          <Col sm={12} md={10}>
+          <Col xxl={10} md={12}>
             <h3 className="mb-4">{isEdit ? t('edit_title') : t('title')}</h3>
           </Col>
         </Row>
         <Row className="justify-content-center">
-          <Col sm={12} md={7} className="mb-4 mb-md-0">
+          <Col xxl={7} lg={8} sm={12} className="mb-4 mb-md-0">
             <Form noValidate onSubmit={handleSubmit}>
               {isEdit && (
                 <Form.Group controlId="revision" className="mb-3">
@@ -421,7 +421,7 @@ const Ask = () => {
               )}
             </Form>
           </Col>
-          <Col sm={12} md={3}>
+          <Col xxl={3} lg={4} sm={12}>
             {focusType === 'title' && (
               <Card className="mb-4">
                 <Card.Header>{t('how_to_ask.title')}</Card.Header>

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

@@ -50,6 +50,9 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer }) => {
       <h1 className="fs-3 mb-3 text-wrap text-break">
         <Link className="text-body" reloadDocument to={`/questions/${data.id}`}>
           {data.title}
+          {data.status === 2
+            ? ` [${t('closed', { keyPrefix: 'question' })}]`
+            : ''}
         </Link>
       </h1>
       <div className="d-flex align-items-center fs-14 mb-3 text-secondary">

ui/src/pages/Questions/Detail/index.scss

@@ -1,6 +1,11 @@
-.fmt img {
+.fmt {
+  img {
     max-width: 100%;
   }
+  p {
+    word-break: break-all;
+  }
+}
 
 .answer-item {
   border-top: 1px solid rgba(33, 37, 41, 0.25);

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

@@ -109,7 +109,7 @@ const Index = () => {
       <PageTitle title={question?.title} />
       <Container className="pt-4 mt-2 mb-5">
         <Row className="justify-content-center">
-          <Col lg={7}>
+          <Col xxl={7} lg={8} sm={12}>
             {question?.operation?.operation_type && (
               <Alert data={question.operation} />
             )}
@@ -156,7 +156,7 @@ const Index = () => {
               />
             )}
           </Col>
-          <Col lg={3}>
+          <Col xxl={3} lg={4} sm={12}>
             <RelatedQuestions id={question?.id || ''} />
           </Col>
         </Row>

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

@@ -123,12 +123,12 @@ const Ask = () => {
       <PageTitle title={t('edit_answer', { keyPrefix: 'page_title' })} />
       <Container className="pt-4 mt-2 mb-5 edit-answer-wrap">
         <Row className="justify-content-center">
-          <Col sm={12} md={10}>
+          <Col xxl={10} md={12}>
             <h3 className="mb-4">{t('title')}</h3>
           </Col>
         </Row>
         <Row className="justify-content-center">
-          <Col sm={12} md={7} className="mb-4 mb-md-0">
+          <Col xxl={7} lg={8} sm={12} className="mb-4 mb-md-0">
             <a href={`/questions/${qid}`} target="_blank" rel="noreferrer">
               <h5 className="mb-3">{data?.question.title}</h5>
             </a>
@@ -216,7 +216,7 @@ const Ask = () => {
               </div>
             </Form>
           </Col>
-          <Col sm={12} md={3}>
+          <Col xxl={3} lg={4} sm={12}>
             <Card className="mb-4">
               <Card.Header>{t('how_to_ask.title')}</Card.Header>
               <Card.Body>

ui/src/pages/Questions/index.tsx

@@ -26,10 +26,10 @@ const Questions: FC = () => {
       <PageTitle title={pageTitle} suffix={slogan} />
       <Container className="pt-4 mt-2 mb-5">
         <Row className="justify-content-center">
-          <Col lg={7}>
+          <Col xxl={7} lg={8} sm={12}>
             <QuestionList source="questions" />
           </Col>
-          <Col lg={3}>
+          <Col xxl={3} lg={4} sm={12}>
             <FollowingTags />
             <HotQuestions />
           </Col>

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

@@ -1,5 +1,6 @@
 import { memo, FC } from 'react';
 import { ListGroupItem, Badge } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
 
 import { Icon, Tag, FormatTime, BaseUserCard } from '@answer/components';
 import type { SearchResItem } from '@answer/common/interface';
@@ -8,6 +9,8 @@ interface Props {
   data: SearchResItem;
 }
 const Index: FC<Props> = ({ data }) => {
+  const { t } = useTranslation('translation', { keyPrefix: 'question' });
+  console.log('t: ', t);
   if (!data?.object_type) {
     return null;
   }
@@ -24,6 +27,9 @@ const Index: FC<Props> = ({ data }) => {
           className="h5 mb-0 text-body text-break"
           href={`/questions/${data.object.id}`}>
           {data.object.title}
+          {data.object.status === 'closed'
+            ? ` [${t('closed', { keyPrefix: 'question' })}]`
+            : null}
         </a>
       </div>
       <div className="d-flex flex-wrap align-items-center fs-14 text-secondary mb-2">
@@ -51,10 +57,6 @@ const Index: FC<Props> = ({ data }) => {
             )}
             <span>{data.object?.answer_count}</span>
           </div>
-          {/* <div className="d-flex align-items-center">
-            <Icon name="eye-fill fs-6 me-1" />
-            <span> 0</span>
-          </div> */}
         </div>
       </div>
 

ui/src/pages/Search/index.tsx

@@ -32,7 +32,7 @@ const Index = () => {
       <PageTitle title={pageTitle} />
       <Container className="pt-4 mt-2 mb-5">
         <Row className="justify-content-center">
-          <Col lg={7} className="mb-3">
+          <Col xxl={7} lg={8} sm={12} className="mb-3">
             <Head data={extra} />
 
             <ListGroup variant="flush" className="mb-5">
@@ -53,7 +53,7 @@ const Index = () => {
               />
             </div>
           </Col>
-          <Col lg={3}>
+          <Col xxl={3} lg={4} sm={12}>
             <Tips />
           </Col>
         </Row>

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

@@ -58,7 +58,7 @@ const Questions: FC = () => {
       <PageTitle title={pageTitle} />
       <Container className="pt-4 mt-2 mb-5">
         <Row className="justify-content-center">
-          <Col lg={7}>
+          <Col xxl={7} lg={8} sm={12}>
             <div className="tag-box mb-5">
               <h3 className="mb-3">
                 <Link
@@ -90,7 +90,7 @@ const Questions: FC = () => {
             </div>
             <QuestionList source="tag" />
           </Col>
-          <Col lg={3}>
+          <Col xxl={3} lg={4} sm={12}>
             <FollowingTags />
             <HotQuestions />
           </Col>

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

@@ -147,12 +147,12 @@ const Ask = () => {
       <PageTitle title={t('edit_tag', { keyPrefix: 'page_title' })} />
       <Container className="pt-4 mt-2 mb-5 edit-answer-wrap">
         <Row className="justify-content-center">
-          <Col sm={12} md={10}>
+          <Col xxl={10} md={12}>
             <h3 className="mb-4">{t('title')}</h3>
           </Col>
         </Row>
         <Row className="justify-content-center">
-          <Col sm={12} md={7} className="mb-4 mb-md-0">
+          <Col xxl={7} lg={8} sm={12} className="mb-4 mb-md-0">
             <Form noValidate onSubmit={handleSubmit}>
               <Form.Group controlId="revision" className="mb-3">
                 <Form.Label>{t('form.fields.revision.label')}</Form.Label>
@@ -248,7 +248,7 @@ const Ask = () => {
               </div>
             </Form>
           </Col>
-          <Col sm={12} md={3}>
+          <Col xxl={3} lg={4} sm={12}>
             <Card className="mb-4">
               <Card.Header>{t('how_to_format.title')}</Card.Header>
               <Card.Body>

ui/src/pages/Tags/index.tsx

@@ -53,9 +53,9 @@ const Tags = () => {
       <PageTitle title={t('tags', { keyPrefix: 'page_title' })} />
       <Container className="py-3 my-3">
         <Row className="mb-4 d-flex justify-content-center">
-          <Col lg={10}>
+          <Col xxl={10} sm={12}>
             <h3 className="mb-4">{t('title')}</h3>
-            <div className="d-flex justify-content-between align-items-center">
+            <div className="d-flex justify-content-between align-items-center flex-wrap">
               <Form>
                 <Form.Group controlId="formBasicEmail">
                   <Form.Control
@@ -94,10 +94,16 @@ const Tags = () => {
             </div>
           </Col>
 
-          <Col className="mt-4" lg={10}>
+          <Col className="mt-4" xxl={10} sm={12}>
             <Row>
               {tags?.list?.map((tag) => (
-                <Col key={tag.slug_name} lg={3} md={4} className="mb-4">
+                <Col
+                  key={tag.slug_name}
+                  xs={12}
+                  lg={3}
+                  md={4}
+                  sm={6}
+                  className="mb-4">
                   <Card className="h-100">
                     <Card.Body className="d-flex flex-column align-items-start">
                       <Tag className="mb-3" href={`/tags/${tag.slug_name}`}>

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

@@ -69,7 +69,7 @@ const Notifications = () => {
       <PageTitle title={t('notifications', { keyPrefix: 'page_title' })} />
       <Container className="pt-4 mt-2 mb-5">
         <Row className="justify-content-center">
-          <Col xs={12} lg={7}>
+          <Col xxl={7} lg={8} sm={12}>
             <h3 className="mb-4">{t('title')}</h3>
             <div className="d-flex justify-content-between mb-3">
               <ButtonGroup size="sm">
@@ -120,7 +120,7 @@ const Notifications = () => {
               </div>
             )}
           </Col>
-          <Col xs={12} lg={3} />
+          <Col xxl={3} lg={4} sm={12} />
         </Row>
       </Container>
     </>

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

@@ -27,6 +27,9 @@ const Index: FC<Props> = ({ visible, tabName, data }) => {
                   tabName === 'questions' ? item.question_id : item.id
                 }`}>
                 {item.title}
+                {tabName === 'questions' && item.status === 'closed'
+                  ? ` [${t('closed', { keyPrefix: 'question' })}]`
+                  : null}
               </a>
             </h6>
             <div className="d-flex align-items-center fs-14 text-secondary mb-2">

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

@@ -57,10 +57,10 @@ const Personal: FC = () => {
         {userInfo?.info?.status !== 'normal' && userInfo?.info?.status_msg && (
           <Alert data={userInfo?.info.status_msg} />
         )}
-        <Col lg={7}>
+        <Col xxl={7} lg={8} sm={12}>
           <UserInfo data={userInfo?.info} />
         </Col>
-        <Col lg={3} className="d-flex justify-content-end">
+        <Col xxl={3} lg={4} sm={12} className="d-flex justify-content-end">
           {isSelf && (
             <div>
               <Button
@@ -78,7 +78,7 @@ const Personal: FC = () => {
         <Col lg={10}>
           <NavBar tabName={tabName} slug={username} isSelf={isSelf} />
         </Col>
-        <Col lg={7}>
+        <Col xxl={7} lg={8} sm={12}>
           <Overview
             visible={tabName === 'overview'}
             introduction={userInfo?.info?.bio_html}
@@ -111,7 +111,7 @@ const Personal: FC = () => {
             </div>
           )}
         </Col>
-        <Col lg={3}>
+        <Col xxl={3} lg={4} sm={12}>
           <h5 className="mb-3">Stats</h5>
           {userInfo?.info && (
             <>