This is an automated email from the ASF dual-hosted git repository. robin0716 pushed a commit to branch robin/test in repository https://gitbox.apache.org/repos/asf/incubator-answer.git
commit 9a026ee462c4ad9e34b5a4eb5da9361a66d38a03 Author: shuai <[email protected]> AuthorDate: Fri Sep 6 10:45:14 2024 +0800 fix: badge list style --- ui/src/components/CardBadge/index.scss | 10 ---------- ui/src/components/CardBadge/index.tsx | 9 +++++++-- ui/src/pages/Badges/Detail/index.tsx | 1 + ui/src/pages/Badges/index.tsx | 11 +++++++---- ui/src/pages/Users/Personal/components/Badges/index.tsx | 17 ++++++++++------- .../pages/Users/Personal/components/Overview/index.tsx | 12 +++++++----- 6 files changed, 32 insertions(+), 28 deletions(-) diff --git a/ui/src/components/CardBadge/index.scss b/ui/src/components/CardBadge/index.scss index 30c30cb1..c3021a74 100644 --- a/ui/src/components/CardBadge/index.scss +++ b/ui/src/components/CardBadge/index.scss @@ -18,19 +18,9 @@ */ .badge-card { - width: 194px; - margin: 12px; - .label { position: absolute; top: 1rem; right: 1rem; } } - - -@media screen and (max-width: 768px) { - .badge-card { - width: 163.5px; - } -} diff --git a/ui/src/components/CardBadge/index.tsx b/ui/src/components/CardBadge/index.tsx index 214e3f5d..3022ae12 100644 --- a/ui/src/components/CardBadge/index.tsx +++ b/ui/src/components/CardBadge/index.tsx @@ -50,7 +50,9 @@ const Index: FC<IProps> = ({ to={`/badges/${data.id}${urlSearchParams ? `?${urlSearchParams}` : ''}`}> <Card.Body> {Number(data?.earned_count) > 0 && badgePillType === 'earned' && ( - <Badge bg="success" className="label"> + <Badge + bg="success" + style={{ position: 'absolute', top: '1rem', right: '1rem' }}> {`${t('earned')}${ Number(data?.earned_count) > 1 ? ` ×${data.earned_count}` : '' }`} @@ -58,7 +60,10 @@ const Index: FC<IProps> = ({ )} {badgePillType === 'count' && Number(data?.earned_count) > 1 && ( - <Badge pill bg="secondary" className="label"> + <Badge + pill + bg="secondary" + style={{ position: 'absolute', top: '1rem', right: '1rem' }}> ×{data.earned_count} </Badge> )} diff --git a/ui/src/pages/Badges/Detail/index.tsx b/ui/src/pages/Badges/Detail/index.tsx index cb85a8b8..d9337840 100644 --- a/ui/src/pages/Badges/Detail/index.tsx +++ b/ui/src/pages/Badges/Detail/index.tsx @@ -64,6 +64,7 @@ const Index = () => { <div className="pt-4 mb-5"> <h3 className="mb-4">{t('title')}</h3> {isHeaderLoading ? <HeaderLoader /> : <BadgeDetail data={badgeInfo} />} + <Loader /> <Row> {isSkeletonShow ? ( <Loader /> diff --git a/ui/src/pages/Badges/index.tsx b/ui/src/pages/Badges/index.tsx index 73cb77b0..9ca6d9a0 100644 --- a/ui/src/pages/Badges/index.tsx +++ b/ui/src/pages/Badges/index.tsx @@ -18,6 +18,7 @@ */ import { useTranslation } from 'react-i18next'; +import { Row, Col } from 'react-bootstrap'; import { CardBadge } from '@/components'; import { usePageTags } from '@/hooks'; @@ -37,15 +38,17 @@ const Index = () => { <h3 className="mb-4">{t('title')}</h3> {badgesList?.map((item) => { return ( - <div key={item.group_name} className="mb-5"> + <div key={item.group_name} className="mb-4"> <h5 className="mb-4">{item.group_name}</h5> - <div className="d-flex flex-wrap" style={{ margin: '-12px' }}> + <Row> {item.badges?.map((badge) => { return ( - <CardBadge data={badge} key={badge.id} showAwardedCount /> + <Col sm={6} md={4} lg={3} key={badge.id} className="mb-4"> + <CardBadge data={badge} showAwardedCount /> + </Col> ); })} - </div> + </Row> </div> ); })} diff --git a/ui/src/pages/Users/Personal/components/Badges/index.tsx b/ui/src/pages/Users/Personal/components/Badges/index.tsx index 4243ba9e..d49b85cd 100644 --- a/ui/src/pages/Users/Personal/components/Badges/index.tsx +++ b/ui/src/pages/Users/Personal/components/Badges/index.tsx @@ -18,6 +18,7 @@ */ import { FC } from 'react'; +import { Row, Col } from 'react-bootstrap'; import * as Type from '@/common/interface'; import { CardBadge } from '@/components'; @@ -33,17 +34,19 @@ const Index: FC<IProps> = ({ data, visible, username }) => { return null; } return ( - <div className="d-flex flex-wrap" style={{ margin: '-12px' }}> + <Row> {data.map((item) => { return ( - <CardBadge - data={item} - urlSearchParams={`username=${username}`} - badgePillType="count" - /> + <Col sm={6} md={4} lg={3} key={item.id} className="mb-4"> + <CardBadge + data={item} + urlSearchParams={`username=${username}`} + badgePillType="count" + /> + </Col> ); })} - </div> + </Row> ); }; diff --git a/ui/src/pages/Users/Personal/components/Overview/index.tsx b/ui/src/pages/Users/Personal/components/Overview/index.tsx index 7f937f68..3c1f590e 100644 --- a/ui/src/pages/Users/Personal/components/Overview/index.tsx +++ b/ui/src/pages/Users/Personal/components/Overview/index.tsx @@ -80,11 +80,13 @@ const Index: FC<Props> = ({ visible, introduction, data, username }) => { <div className="d-flex flex-wrap" style={{ margin: '-12px' }}> {recentBadges?.list?.map((item) => { return ( - <CardBadge - data={item} - urlSearchParams={`username=${username}`} - badgePillType="count" - /> + <Col sm={6} md={4} lg={3} key={item.id} className="mb-4"> + <CardBadge + data={item} + urlSearchParams={`username=${username}`} + badgePillType="count" + /> + </Col> ); })} </div>
