mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-23 18:50:06 +08:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

docs: improve resource page style (#48460)

Browse Source 
* docs: improve resource page style

* docs: improve resource page style

* docs: improve resource page style

* Update .dumi/theme/builtins/ResourceCards/index.tsx

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: afc163 <afc163@gmail.com>

---------

Signed-off-by: afc163 <afc163@gmail.com>
Co-authored-by: lijianan <574980606@qq.com>
This commit is contained in:
afc163 2024-04-16 10:31:13 +08:00 committed by GitHub
parent cd901207d6
commit e7d685d4d6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 41 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
.dumi/theme/builtins/ResourceCards/index.tsx
View File

@ -1,39 +1,27 @@
import React from 'react';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Col, Row, Tooltip } from 'antd';
import { Col, Row, Tooltip, Card, Typography } from 'antd';
import { createStyles } from 'antd-style';
import useLocale from '../../../hooks/useLocale';
const useStyle = createStyles(({ token, css }) => {
const { boxShadowSecondary } = token;
const { Paragraph } = Typography;
return {
card: css`
const useStyle = createStyles(({ token, css }) => ({
card: css`
position: relative;
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
list-style: none;
border: 1px solid ${token.colorSplit};
border-radius: ${token.borderRadiusXS}px;
cursor: pointer;
transition: box-shadow ${token.motionDurationSlow};
overflow: hidden;
&:hover {
box-shadow: ${boxShadowSecondary};
color: inherit;
.ant-card-cover {
overflow: hidden;
}
`,
image: css`
width: calc(100% + 2px);
max-width: none;
height: 184px;
margin: -1px -1px 0;
object-fit: cover;
`,
badge: css`
img {
transition: all ${token.motionDurationSlow} ease-out;
}
&:hover img {
transform: scale(1.3);
`,
badge: css`
position: absolute;
top: 8px;
right: 8px;
@ -42,25 +30,12 @@ const useStyle = createStyles(({ token, css }) => {
font-size: ${token.fontSizeSM}px;
line-height: 1;
background: rgba(0, 0, 0, 0.65);
border-radius: ${token.borderRadiusXS}px;
border-radius: ${token.borderRadiusLG}px;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
display: inline-flex;
column-gap: ${token.paddingXXS}px;
`,
title: css`
margin: ${token.margin}px ${token.marginMD}px ${token.marginXS}px;
opacity: 0.85;
font-size: ${token.fontSizeXL}px;
line-height: 28px;
`,
description: css`
margin: 0 ${token.marginMD}px ${token.marginMD}px;
opacity: 0.65;
font-size: ${token.fontSizeXL}px;
line-height: 22px;
`,
};
});
}));
export type Resource = {
title: string;
@ -91,38 +66,33 @@ const ResourceCard: React.FC<ResourceCardProps> = ({ resource }) => {
const { styles } = useStyle();
const [locale] = useLocale(locales);
const { title: titleStr, description, cover, src, official } = resource;
const { title, description, cover, src, official } = resource;
let coverColor: string | null = null;
let title: string = titleStr;
const titleMatch = titleStr.match(/(.*)(#[\dA-Fa-f]{6})/);
if (titleMatch) {
title = titleMatch[1].trim();
// eslint-disable-next-line prefer-destructuring
coverColor = titleMatch[2];
}
const badge = official ? (
<div className={styles.badge}>{locale.official}</div>
) : (
<Tooltip title={locale.thirdPartDesc}>
<div className={styles.badge}>
<ExclamationCircleOutlined />
{locale.thirdPart}
</div>
</Tooltip>
);
return (
<Col xs={24} sm={12} md={8} lg={6} style={{ padding: 12 }}>
<Col xs={24} sm={12} md={8} lg={6}>
<a className={styles.card} target="_blank" href={src} rel="noreferrer">
<img
className={styles.image}
src={cover}
alt={title}
style={coverColor ? { backgroundColor: coverColor } : {}}
/>
{official ? (
<div className={styles.badge}>{locale.official}</div>
) : (
<Tooltip title={locale.thirdPartDesc}>
<div className={styles.badge}>
<ExclamationCircleOutlined />
{locale.thirdPart}
</div>
</Tooltip>
)}
<p className={styles?.title}>{title}</p>
<p className={styles.description}>{description}</p>
<Card hoverable className={styles.card} cover={<img src={cover} alt={title} />}>
<Card.Meta
title={title}
description={
<Paragraph style={{ marginBottom: 0 }} ellipsis={{ rows: 1 }} title={description}>
{description}
</Paragraph>
}
/>
{badge}
</Card>
</a>
</Col>
);
@ -133,7 +103,7 @@ export type ResourceCardsProps = {
};
const ResourceCards: React.FC<ResourceCardsProps> = ({ resources }) => (
<Row style={{ margin: '-12px -12px 0 -12px' }}>
<Row gutter={[24, 24]}>
{resources.map((item) => (
<ResourceCard resource={item} key={item?.title} />
))}