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

fix: style adjustment

This commit is contained in:
shuai 2022-11-09 10:22:52 +08:00
parent 8dda61d685
commit 6626f96614
3 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/components/QueryGroup/index.tsx
View File

@ -12,6 +12,7 @@ interface Props {
sortKey?: string; sortKey?: string;
className?: string; className?: string;
pathname?: string; pathname?: string;
wrapClassName?: string;
} }
const MAX_BUTTON_COUNT = 3; const MAX_BUTTON_COUNT = 3;
const Index: FC<Props> = ({ const Index: FC<Props> = ({
@ -21,6 +22,7 @@ const Index: FC<Props> = ({
i18nKeyPrefix = '', i18nKeyPrefix = '',
className = '', className = '',
pathname = '', pathname = '',
wrapClassName = '',
}) => { }) => {
const [searchParams, setUrlSearchParams] = useSearchParams(); const [searchParams, setUrlSearchParams] = useSearchParams();
const navigate = useNavigate(); const navigate = useNavigate();
@ -51,7 +53,7 @@ const Index: FC<Props> = ({
return (typeof btn === 'string' ? btn : btn.name) === currentSort; return (typeof btn === 'string' ? btn : btn.name) === currentSort;
}); });
return ( return (
<ButtonGroup size="sm"> <ButtonGroup size="sm" className={wrapClassName}>
{data.map((btn, index) => { {data.map((btn, index) => {
const key = typeof btn === 'string' ? btn : btn.sort; const key = typeof btn === 'string' ? btn : btn.sort;
const name = typeof btn === 'string' ? btn : btn.name; const name = typeof btn === 'string' ? btn : btn.name;
@ -62,7 +64,7 @@ const Index: FC<Props> = ({
variant="outline-secondary" variant="outline-secondary"
active={currentSort === name} active={currentSort === name}
className={classNames( className={classNames(
'text-capitalize', 'text-capitalize fit-content',
data.length > MAX_BUTTON_COUNT && data.length > MAX_BUTTON_COUNT &&
index > MAX_BUTTON_COUNT - 2 && index > MAX_BUTTON_COUNT - 2 &&
'd-none d-md-block', 'd-none d-md-block',

32
ui/src/components/QuestionList/index.tsx
View File

@ -1,5 +1,5 @@
import { FC } from 'react'; import { FC } from 'react';
import { Row, Col, ListGroup } from 'react-bootstrap'; import { ListGroup } from 'react-bootstrap';
import { NavLink, useParams, useSearchParams } from 'react-router-dom'; import { NavLink, useParams, useSearchParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -103,23 +103,19 @@ const QuestionList: FC<Props> = ({ source }) => {
return ( return (
<div> <div>
<Row className="mb-3"> <div className="mb-3 d-flex flex-wrap justify-content-between">
<Col className="d-flex align-items-center"> <h5 className="fs-5 text-nowrap mb-3 mb-md-0">
<h5 className="fs-5 text-nowrap mb-3 mb-md-0"> {source === 'questions'
{source === 'questions' ? t('all_questions')
? t('all_questions') : t('x_questions', { count })}
: t('x_questions', { count })} </h5>
</h5> <QueryGroup
</Col> data={QuestionOrderKeys}
<Col> currentSort={curOrder}
<QueryGroup pathname={source === 'questions' ? '/questions' : ''}
data={QuestionOrderKeys} i18nKeyPrefix="question"
currentSort={curOrder} />
pathname={source === 'questions' ? '/questions' : ''} </div>
i18nKeyPrefix="question"
/>
</Col>
</Row>
<ListGroup variant="flush" className="border-top border-bottom-0"> <ListGroup variant="flush" className="border-top border-bottom-0">
{listData?.list?.map((li) => { {listData?.list?.map((li) => {
return ( return (

5
ui/src/index.scss
View File

@ -141,6 +141,11 @@ a {
background-color: #fff3cd80; background-color: #fff3cd80;
} }
.fit-content {
height: fit-content;
flex: none;
}
// fix bug for React-Bootstrap Form.Text // fix bug for React-Bootstrap Form.Text
.form-text { .form-text {
display: inline-block; display: inline-block;