p90524618
/
answer
mirror of https://gitee.com/answerdev/answer.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: responsive optimization

This commit is contained in:
robin 2022-10-14 17:30:16 +08:00
parent 6382c10e31
commit 868bdf09d4
1 changed files with 31 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
ui/src/components/Questions/index.tsx
View File

@ -32,7 +32,7 @@ const QuestionLastUpdate = ({ q }) => {
if (q.update_time > q.edit_time) { if (q.update_time > q.edit_time) {
// question answered // question answered
return ( return (
<> <div className="d-flex">
<BaseUserCard <BaseUserCard
data={q.last_answered_user_info} data={q.last_answered_user_info}
showAvatar={false} showAvatar={false}
@ -44,14 +44,14 @@ const QuestionLastUpdate = ({ q }) => {
className="text-secondary mx-1" className="text-secondary mx-1"
preFix={t('answered')} preFix={t('answered')}
/> />
</> </div>
); );
} }
if (q.edit_time > q.update_time) { if (q.edit_time > q.update_time) {
// question modified // question modified
return ( return (
<> <div className="d-flex">
<BaseUserCard <BaseUserCard
data={q.update_user_info} data={q.update_user_info}
showAvatar={false} showAvatar={false}
@ -63,13 +63,13 @@ const QuestionLastUpdate = ({ q }) => {
className="text-secondary mx-1" className="text-secondary mx-1"
preFix={t('modified')} preFix={t('modified')}
/> />
</> </div>
); );
} }
// default: asked // default: asked
return ( return (
<> <div className="d-flex">
<BaseUserCard data={q.user_info} showAvatar={false} className="me-1" /> <BaseUserCard data={q.user_info} showAvatar={false} className="me-1" />
• •
<FormatTime <FormatTime
@ -77,7 +77,7 @@ const QuestionLastUpdate = ({ q }) => {
preFix={t('asked')} preFix={t('asked')}
className="text-secondary mx-1" className="text-secondary mx-1"
/> />
</> </div>
); );
}; };
@ -131,31 +131,33 @@ const QuestionList: FC<Props> = ({ source }) => {
{li.status === 2 ? ` [${t('closed')}]` : ''} {li.status === 2 ? ` [${t('closed')}]` : ''}
</NavLink> </NavLink>
</h5> </h5>
<div className="d-flex align-items-center fs-14 text-secondary"> <div className="d-flex flex-column flex-md-row align-items-md-center fs-14 text-secondary">
<QuestionLastUpdate q={li} /> <QuestionLastUpdate q={li} />
<span className="ms-3"> <div className="ms-0 ms-md-3 mt-2 mt-md-0">
<Icon name="hand-thumbs-up-fill" /> <span>
<em className="fst-normal mx-1">{li.vote_count}</em> <Icon name="hand-thumbs-up-fill" />
</span> <em className="fst-normal mx-1">{li.vote_count}</em>
<span </span>
className={`ms-3 ${ <span
li.accepted_answer_id >= 1 ? 'text-success' : '' className={`ms-3 ${
}`}> li.accepted_answer_id >= 1 ? 'text-success' : ''
<Icon }`}>
name={ <Icon
li.accepted_answer_id >= 1 name={
? 'check-circle-fill' li.accepted_answer_id >= 1
: 'chat-square-text-fill' ? 'check-circle-fill'
} : 'chat-square-text-fill'
/> }
<em className="fst-normal mx-1">{li.answer_count}</em> />
</span> <em className="fst-normal mx-1">{li.answer_count}</em>
<span className="summary-stat ms-3"> </span>
<Icon name="eye-fill" /> <span className="summary-stat ms-3">
<em className="fst-normal mx-1">{li.view_count}</em> <Icon name="eye-fill" />
</span> <em className="fst-normal mx-1">{li.view_count}</em>
</span>
</div>
</div> </div>
<div className="question-tags mx-n1"> <div className="question-tags mx-n1 mt-2">
{Array.isArray(li.tags) {Array.isArray(li.tags)
? li.tags.map((tag) => { ? li.tags.map((tag) => {
return ( return (