This is an automated email from the ASF dual-hosted git repository. shuai pushed a commit to branch feat/1.4.3/ui in repository https://gitbox.apache.org/repos/asf/incubator-answer.git
commit e2c8d3656782d1c0a15be63205f89b292a1024d3 Author: shuai <[email protected]> AuthorDate: Thu Dec 12 12:23:51 2024 +0800 style: question list style optimization --- ui/src/components/Counts/index.tsx | 19 ++++----- ui/src/components/QuestionList/index.tsx | 66 +++++++++++++++++--------------- ui/src/index.scss | 4 ++ 3 files changed, 48 insertions(+), 41 deletions(-) diff --git a/ui/src/components/Counts/index.tsx b/ui/src/components/Counts/index.tsx index aefaad11..e83d1ee8 100644 --- a/ui/src/components/Counts/index.tsx +++ b/ui/src/components/Counts/index.tsx @@ -52,11 +52,10 @@ const Index: FC<Props> = ({ return ( <div className={classname('d-flex align-items-center', className)}> {showVotes && ( - <div className="d-flex align-items-center flex-shrink-0"> + <div className="d-flex align-items-center flex-shrink-0 text-body"> <Icon name="hand-thumbs-up-fill me-1" /> - <span> - {data.votes} {t('votes')} - </span> + <span className="fw-medium">{data.votes}</span> + <span className="ms-1">{t('votes')}</span> </div> )} @@ -70,16 +69,15 @@ const Index: FC<Props> = ({ {showAnswers && ( <div className={`d-flex flex-shrink-0 align-items-center ms-3 ${ - isAccepted ? 'text-success' : '' + isAccepted ? 'text-bg-success rounded-2 px-2 py-1 lh-1' : '' }`}> {isAccepted ? ( <Icon name="check-circle-fill me-1" /> ) : ( <Icon name="chat-square-text-fill me-1" /> )} - <span> - {data.answers} {t('answers')} - </span> + <span className="fw-medium">{data.answers}</span> + <span className="ms-1">{t('answers')}</span> </div> )} {showViews && ( @@ -95,9 +93,8 @@ const Index: FC<Props> = ({ : '', )}> <Icon name="bar-chart-fill" /> - <em className="fst-normal ms-1"> - {formatCount(data.views)} {t('views')} - </em> + <span className="fw-medium ms-1">{formatCount(data.views)}</span> + <span className="ms-1">{t('views')}</span> </span> )} </div> diff --git a/ui/src/components/QuestionList/index.tsx b/ui/src/components/QuestionList/index.tsx index c849de56..8796a975 100644 --- a/ui/src/components/QuestionList/index.tsx +++ b/ui/src/components/QuestionList/index.tsx @@ -94,7 +94,24 @@ const QuestionList: FC<Props> = ({ return ( <ListGroup.Item key={li.id} - className="bg-transparent py-3 px-0 border-start-0 border-end-0"> + className="bg-transparent py-3 px-2 border-start-0 border-end-0"> + <div className="d-flex flex-wrap text-secondary small mb-12"> + <BaseUserCard + data={li.operator} + className="me-1" + avatarClass="me-2" + /> + • + <FormatTime + time={ + curOrder === 'active' ? li.operated_at : li.created_at + } + className="text-secondary ms-1 flex-shrink-0" + preFix={ + curOrder === 'active' ? t(li.operation_type) : t('asked') + } + /> + </div> <h5 className="text-wrap text-break"> {li.pin === 2 && ( <Icon @@ -110,26 +127,24 @@ const QuestionList: FC<Props> = ({ {li.status === 2 ? ` [${t('closed')}]` : ''} </NavLink> </h5> - <div className="d-flex flex-wrap flex-column flex-md-row align-items-md-center small mb-2 text-secondary"> - <div className="d-flex flex-wrap me-0 me-md-3"> - <BaseUserCard - data={li.operator} - showAvatar={false} - className="me-1" - /> - • - <FormatTime - time={ - curOrder === 'active' ? li.operated_at : li.created_at - } - className="text-secondary ms-1 flex-shrink-0" - preFix={ - curOrder === 'active' - ? t(li.operation_type) - : t('asked') - } - /> - </div> + <p className="mb-2 small text-body text-truncate-2"> + {li.description} + </p> + + <div className="question-tags mb-2"> + {Array.isArray(li.tags) + ? li.tags.map((tag, index) => { + return ( + <Tag + key={tag.slug_name} + className={`${li.tags.length - 1 === index ? '' : 'me-1'}`} + data={tag} + /> + ); + }) + : null} + </div> + <div className="small text-secondary"> <Counts data={{ votes: li.vote_count, @@ -140,15 +155,6 @@ const QuestionList: FC<Props> = ({ className="mt-2 mt-md-0" /> </div> - <div className="question-tags m-n1"> - {Array.isArray(li.tags) - ? li.tags.map((tag) => { - return ( - <Tag key={tag.slug_name} className="m-1" data={tag} /> - ); - }) - : null} - </div> </ListGroup.Item> ); }) diff --git a/ui/src/index.scss b/ui/src/index.scss index 7e9b8a6f..bcbf3c7d 100644 --- a/ui/src/index.scss +++ b/ui/src/index.scss @@ -370,3 +370,7 @@ img[src=""] { .view-level3 { color: $orange-800; } + +.mb-12 { + margin-bottom: 12px; +}
