fix: optimize the user name is too long

This commit is contained in:
shuai 2023-08-21 17:19:38 +08:00
parent 80df5193c5
commit 8ffa3b3d0e
2 changed files with 11 additions and 8 deletions

View File

@ -30,9 +30,10 @@ const Index: FC<Props> = ({
const { t } = useTranslation('translation', { keyPrefix: 'counts' }); const { t } = useTranslation('translation', { keyPrefix: 'counts' });
return ( return (
<div className={classname('d-flex align-items-center', className)}> <div
className={classname('d-flex align-items-center flex-wrap', className)}>
{showVotes && ( {showVotes && (
<div className="d-flex align-items-center"> <div className="d-flex align-items-center flex-shrink-0">
<Icon name="hand-thumbs-up-fill me-1" /> <Icon name="hand-thumbs-up-fill me-1" />
<span> <span>
{data.votes} {t('votes')} {data.votes} {t('votes')}
@ -41,7 +42,7 @@ const Index: FC<Props> = ({
)} )}
{showAccepted && ( {showAccepted && (
<div className="d-flex align-items-center ms-3 text-success"> <div className="d-flex align-items-center ms-3 text-success flex-shrink-0">
<Icon name="check-circle-fill me-1" /> <Icon name="check-circle-fill me-1" />
<span>{t('accepted')}</span> <span>{t('accepted')}</span>
</div> </div>
@ -49,7 +50,7 @@ const Index: FC<Props> = ({
{showAnswers && ( {showAnswers && (
<div <div
className={`d-flex align-items-center ms-3 ${ className={`d-flex align-items-center ms-3 flex-shrink-0 ${
isAccepted ? 'text-success' : '' isAccepted ? 'text-success' : ''
}`}> }`}>
{isAccepted ? ( {isAccepted ? (
@ -63,7 +64,7 @@ const Index: FC<Props> = ({
</div> </div>
)} )}
{showViews && ( {showViews && (
<span className="summary-stat ms-3"> <span className="summary-stat ms-3 flex-shrink-0">
<Icon name="eye-fill" /> <Icon name="eye-fill" />
<em className="fst-normal ms-1"> <em className="fst-normal ms-1">
{data.views} {t('views')} {data.views} {t('views')}

View File

@ -84,8 +84,10 @@ const QuestionList: FC<Props> = ({
{li.status === 2 ? ` [${t('closed')}]` : ''} {li.status === 2 ? ` [${t('closed')}]` : ''}
</NavLink> </NavLink>
</h5> </h5>
<div className="d-flex flex-column flex-md-row align-items-md-center small mb-2 text-secondary"> <div
<div className="d-flex"> className="d-flex flex-column flex-md-row align-items-md-center small mb-2 text-secondary flex-wrap"
style={{ gap: '0.5rem' }}>
<div className="d-flex flex-shrink-0 me-0 me-md-3 flex-nowrap">
<BaseUserCard <BaseUserCard
data={li.operator} data={li.operator}
showAvatar={false} showAvatar={false}
@ -105,7 +107,7 @@ const QuestionList: FC<Props> = ({
views: li.view_count, views: li.view_count,
}} }}
isAccepted={li.accepted_answer_id >= 1} isAccepted={li.accepted_answer_id >= 1}
className="ms-0 ms-md-3 mt-2 mt-md-0" className="justify-content-start-end justify-content-md-end flex-fill"
/> />
</div> </div>
<div className="question-tags m-n1"> <div className="question-tags m-n1">