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
commit ae3b43cdac5d3deab7ff4131698e1be60d2c6319 Author: hgaol <[email protected]> AuthorDate: Thu Apr 25 23:07:48 2024 +0800 update: add style for admin/Answers and Timeline pages --- ui/src/pages/Admin/Answers/index.tsx | 6 ++---- ui/src/pages/Admin/Questions/index.tsx | 2 +- ui/src/pages/Admin/index.scss | 18 +++++++++++++++--- ui/src/pages/Timeline/components/Item/index.tsx | 3 +-- ui/src/pages/{Admin => Timeline}/index.scss | 19 +++++++++++++------ ui/src/pages/Timeline/index.tsx | 6 ++++-- 6 files changed, 36 insertions(+), 18 deletions(-) diff --git a/ui/src/pages/Admin/Answers/index.tsx b/ui/src/pages/Admin/Answers/index.tsx index 091fe2db..ad66e3d5 100644 --- a/ui/src/pages/Admin/Answers/index.tsx +++ b/ui/src/pages/Admin/Answers/index.tsx @@ -96,7 +96,7 @@ const Answers: FC = () => { <Table responsive> <thead> <tr> - <th>{t('post')}</th> + <th className="min-w-15">{t('post')}</th> <th style={{ width: '11%' }}>{t('votes')}</th> <th style={{ width: '14%' }}>{t('created')}</th> <th style={{ width: '11%' }}>{t('status')}</th> @@ -127,9 +127,7 @@ const Answers: FC = () => { className="ms-2 text-success" /> )} - <div - className="text-truncate-2 small" - style={{ maxWidth: '30rem' }}> + <div className="text-truncate-2 small max-w-30"> {escapeRemove(li.description)} </div> </td> diff --git a/ui/src/pages/Admin/Questions/index.tsx b/ui/src/pages/Admin/Questions/index.tsx index 906885b5..b2f4b38c 100644 --- a/ui/src/pages/Admin/Questions/index.tsx +++ b/ui/src/pages/Admin/Questions/index.tsx @@ -94,7 +94,7 @@ const Questions: FC = () => { <Table responsive> <thead> <tr> - <th className="post-column">{t('post')}</th> + <th className="min-w-15">{t('post')}</th> <th style={{ width: '8%' }}>{t('votes')}</th> <th style={{ width: '8%' }}>{t('answers')}</th> <th style={{ width: '15%' }}>{t('created')}</th> diff --git a/ui/src/pages/Admin/index.scss b/ui/src/pages/Admin/index.scss index 5a78d5f3..27a9af01 100644 --- a/ui/src/pages/Admin/index.scss +++ b/ui/src/pages/Admin/index.scss @@ -22,8 +22,20 @@ padding-bottom: 1.5rem; } -.table { - .post-column { - min-width: 15rem; +.min-w-15 { + min-width: 15rem; +} + +.max-w-30 { + max-width: 30rem; +} + +@media screen and (max-width: 768px) { + .max-w-30 { + max-width: 15rem; } } + +.table tr th { + white-space: nowrap; +} diff --git a/ui/src/pages/Timeline/components/Item/index.tsx b/ui/src/pages/Timeline/components/Item/index.tsx index 5c26732a..e327ed32 100644 --- a/ui/src/pages/Timeline/components/Item/index.tsx +++ b/ui/src/pages/Timeline/components/Item/index.tsx @@ -70,7 +70,7 @@ const Index: FC<Props> = ({ data, isAdmin, objectInfo, revisionList }) => { <br /> {data.cancelled_at > 0 && <FormatTime time={data.cancelled_at} />} </td> - <td> + <td className="text-nowrap"> {(data.activity_type === 'rollback' || data.activity_type === 'edited' || data.activity_type === 'asked' || @@ -139,7 +139,6 @@ const Index: FC<Props> = ({ data, isAdmin, objectInfo, revisionList }) => { </td> </tr> <tr className={isOpen ? '' : 'd-none'}> - {/* <td /> */} <td colSpan={5} className="p-0 py-5"> <Row className="justify-content-center"> <Col xxl={8}> diff --git a/ui/src/pages/Admin/index.scss b/ui/src/pages/Timeline/index.scss similarity index 81% copy from ui/src/pages/Admin/index.scss copy to ui/src/pages/Timeline/index.scss index 5a78d5f3..5748d053 100644 --- a/ui/src/pages/Admin/index.scss +++ b/ui/src/pages/Timeline/index.scss @@ -17,13 +17,20 @@ * under the License. */ -.admin-container { - padding-top: 1.5rem; - padding-bottom: 1.5rem; +.min-w-15 { + min-width: 15rem; } -.table { - .post-column { - min-width: 15rem; +.max-w-30 { + max-width: 30rem; +} + +@media screen and (max-width: 768px) { + .max-w-30 { + max-width: 15rem; } } + +.table tr th { + white-space: nowrap; +} diff --git a/ui/src/pages/Timeline/index.tsx b/ui/src/pages/Timeline/index.tsx index 0a7816fa..66c7b03c 100644 --- a/ui/src/pages/Timeline/index.tsx +++ b/ui/src/pages/Timeline/index.tsx @@ -31,6 +31,8 @@ import * as Type from '@/common/interface'; import HistoryItem from './components/Item'; +import './index.scss'; + const Index: FC = () => { const { t } = useTranslation('translation', { keyPrefix: 'timeline' }); const { qid = '', aid = '', tid = '' } = useParams(); @@ -116,13 +118,13 @@ const Index: FC = () => { onChange={(e) => handleSwitch(e.target.checked)} /> )} - <Table hover> + <Table hover responsive> <thead> <tr> <th style={{ width: '20%' }}>{t('datetime')}</th> <th style={{ width: '15%' }}>{t('type')}</th> <th style={{ width: '19%' }}>{t('by')}</th> - <th>{t('comment')}</th> + <th className="min-w-15">{t('comment')}</th> </tr> </thead> <tbody>
