From ba2450afc4ed7b94312fce31535414b9d1576a33 Mon Sep 17 00:00:00 2001
From: shuai <lishuailing@sifou.com>
Date: Fri, 14 Oct 2022 17:22:25 +0800
Subject: [PATCH] fix: question detail page styles change

---
 ui/src/components/UserCard/index.tsx          | 23 +++++++++++++++----
 .../Detail/components/Answer/index.tsx        |  4 ++--
 .../Detail/components/Question/index.tsx      | 11 +++++----
 ui/src/pages/Questions/Detail/index.scss      |  8 +++++++
 ui/src/pages/Questions/Detail/index.tsx       |  5 ++--
 5 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/ui/src/components/UserCard/index.tsx b/ui/src/components/UserCard/index.tsx
index 65e6eaf6..259ab8c5 100644
--- a/ui/src/components/UserCard/index.tsx
+++ b/ui/src/components/UserCard/index.tsx
@@ -1,6 +1,8 @@
 import { memo, FC } from 'react';
 import { Link } from 'react-router-dom';
 
+import classnames from 'classnames';
+
 import { Avatar, FormatTime } from '@answer/components';
 
 import { formatCount } from '@/utils';
@@ -9,20 +11,31 @@ interface Props {
   data: any;
   time: number;
   preFix: string;
+  className?: string;
 }
 
-const Index: FC<Props> = ({ data, time, preFix }) => {
+const Index: FC<Props> = ({ data, time, preFix, className = '' }) => {
   return (
-    <div className="d-flex">
+    <div className={classnames('d-flex', className)}>
       {data?.status !== 'deleted' ? (
         <Link to={`/users/${data?.username}`}>
-          <Avatar avatar={data?.avatar} size="40px" className="me-2" />
+          <Avatar
+            avatar={data?.avatar}
+            size="40px"
+            className="me-2 d-none d-md-block"
+          />
+
+          <Avatar
+            avatar={data?.avatar}
+            size="24px"
+            className="me-2 d-block d-md-none"
+          />
         </Link>
       ) : (
         <Avatar avatar={data?.avatar} size="40px" className="me-2" />
       )}
-      <div className="fs-14 text-secondary">
-        <div>
+      <div className="fs-14 text-secondary d-flex flex-row flex-md-column align-items-center align-items-md-start">
+        <div className="me-1 me-md-0">
           {data?.status !== 'deleted' ? (
             <Link to={`/users/${data?.username}`} className="me-1 text-break">
               {data?.display_name}
diff --git a/ui/src/pages/Questions/Detail/components/Answer/index.tsx b/ui/src/pages/Questions/Detail/components/Answer/index.tsx
index ebc9ddf2..b7bd25d8 100644
--- a/ui/src/pages/Questions/Detail/components/Answer/index.tsx
+++ b/ui/src/pages/Questions/Detail/components/Answer/index.tsx
@@ -102,7 +102,7 @@ const Index: FC<Props> = ({
       </div>
 
       <Row className="mt-4 mb-3">
-        <Col>
+        <Col className="mb-3 mb-md-0">
           <Operate
             qid={data.question_id}
             aid={data.id}
@@ -113,7 +113,7 @@ const Index: FC<Props> = ({
             callback={callback}
           />
         </Col>
-        <Col lg={3}>
+        <Col lg={3} className="mb-3 mb-md-0">
           {data.update_user_info?.username !== data.user_info?.username ? (
             <UserCard
               data={data?.update_user_info}
diff --git a/ui/src/pages/Questions/Detail/components/Question/index.tsx b/ui/src/pages/Questions/Detail/components/Question/index.tsx
index 2f21865e..8085b172 100644
--- a/ui/src/pages/Questions/Detail/components/Question/index.tsx
+++ b/ui/src/pages/Questions/Detail/components/Question/index.tsx
@@ -65,7 +65,8 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer }) => {
             : ''}
         </Link>
       </h1>
-      <div className="d-flex align-items-center fs-14 mb-2 text-secondary">
+
+      <div className="d-flex flex-wrap align-items-center fs-14 mb-3 text-secondary">
         <FormatTime
           time={data.create_time}
           preFix={t('Asked')}
@@ -90,7 +91,7 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer }) => {
           {followed ? 'Following' : 'Follow'}
         </Button>
       </div>
-      <div className="mb-2 mx-n1">
+      <div className="m-n1">
         {data?.tags?.map((item: any) => {
           return (
             <Tag
@@ -105,7 +106,7 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer }) => {
       <article
         ref={ref}
         dangerouslySetInnerHTML={{ __html: data?.html }}
-        className="fmt text-break text-wrap"
+        className="fmt text-break text-wrap mt-4"
       />
 
       <Actions
@@ -122,7 +123,7 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer }) => {
       />
 
       <Row className="mt-4 mb-3">
-        <Col lg={5}>
+        <Col lg={5} className="mb-3 mb-md-0">
           <Operate
             qid={data?.id}
             type="question"
@@ -133,7 +134,7 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer }) => {
             callback={initPage}
           />
         </Col>
-        <Col lg={3}>
+        <Col lg={3} className="mb-3 mb-md-0">
           {data.update_user_info?.username !== data.user_info?.username ? (
             <UserCard
               data={data?.user_info}
diff --git a/ui/src/pages/Questions/Detail/index.scss b/ui/src/pages/Questions/Detail/index.scss
index f5c74880..82cfdb01 100644
--- a/ui/src/pages/Questions/Detail/index.scss
+++ b/ui/src/pages/Questions/Detail/index.scss
@@ -1,3 +1,11 @@
 .answer-item {
   border-top: 1px solid rgba(33, 37, 41, 0.25);
 }
+
+@media screen and (max-width: 768px) {
+  .questionDetailPage {
+    h1.h3 {
+      font-size: calc(1.275rem + .3vw)!important;
+    }
+  }
+}
diff --git a/ui/src/pages/Questions/Detail/index.tsx b/ui/src/pages/Questions/Detail/index.tsx
index 7c2c2d6e..eb24fd15 100644
--- a/ui/src/pages/Questions/Detail/index.tsx
+++ b/ui/src/pages/Questions/Detail/index.tsx
@@ -116,9 +116,9 @@ const Index = () => {
   return (
     <>
       <PageTitle title={question?.title} />
-      <Container className="pt-4 mt-2 mb-5">
+      <Container className="pt-4 mt-2 mb-5 questionDetailPage">
         <Row className="justify-content-center">
-          <Col xxl={7} lg={8} sm={12}>
+          <Col xxl={7} lg={8} sm={12} className="mb-5 mb-md-0">
             {question?.operation?.operation_type && (
               <Alert data={question.operation} />
             )}
@@ -154,6 +154,7 @@ const Index = () => {
                 />
               </div>
             )}
+
             {!question?.operation?.operation_type && (
               <WriteAnswer
                 visible={answers.count === 0}