refactor: Umbenennung von latestDoc in long und latestDocLarge in large
This commit is contained in:
parent
d5f38cff85
commit
7f01597ea1
@ -36,13 +36,13 @@ export type IDocItem = {
|
|||||||
export function DocItem({
|
export function DocItem({
|
||||||
sx,
|
sx,
|
||||||
post,
|
post,
|
||||||
latestDoc,
|
long,
|
||||||
latestDocLarge,
|
large,
|
||||||
...other
|
...other
|
||||||
}: CardProps & {
|
}: CardProps & {
|
||||||
post: IDocItem;
|
post: IDocItem;
|
||||||
latestDoc: boolean;
|
long: boolean;
|
||||||
latestDocLarge: boolean;
|
large: boolean;
|
||||||
}) {
|
}) {
|
||||||
const renderAvatar = (
|
const renderAvatar = (
|
||||||
<Avatar
|
<Avatar
|
||||||
@ -53,7 +53,7 @@ export function DocItem({
|
|||||||
zIndex: 9,
|
zIndex: 9,
|
||||||
bottom: -24,
|
bottom: -24,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
...((latestDocLarge || latestDoc) && {
|
...((large || long) && {
|
||||||
top: 24,
|
top: 24,
|
||||||
}),
|
}),
|
||||||
}}
|
}}
|
||||||
@ -71,8 +71,8 @@ export function DocItem({
|
|||||||
WebkitLineClamp: 2,
|
WebkitLineClamp: 2,
|
||||||
display: '-webkit-box',
|
display: '-webkit-box',
|
||||||
WebkitBoxOrient: 'vertical',
|
WebkitBoxOrient: 'vertical',
|
||||||
...(latestDocLarge && { typography: 'h5', height: 60 }),
|
...(large && { typography: 'h5', height: 60 }),
|
||||||
...((latestDocLarge || latestDoc) && {
|
...((large || long) && {
|
||||||
color: 'common.white',
|
color: 'common.white',
|
||||||
}),
|
}),
|
||||||
}}
|
}}
|
||||||
@ -101,7 +101,7 @@ export function DocItem({
|
|||||||
key={_index}
|
key={_index}
|
||||||
sx={{
|
sx={{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
...((latestDocLarge || latestDoc) && {
|
...((large || long) && {
|
||||||
opacity: 0.64,
|
opacity: 0.64,
|
||||||
color: 'common.white',
|
color: 'common.white',
|
||||||
}),
|
}),
|
||||||
@ -136,7 +136,7 @@ export function DocItem({
|
|||||||
sx={{
|
sx={{
|
||||||
mb: 1,
|
mb: 1,
|
||||||
color: 'text.disabled',
|
color: 'text.disabled',
|
||||||
...((latestDocLarge || latestDoc) && {
|
...((large || long) && {
|
||||||
opacity: 0.48,
|
opacity: 0.48,
|
||||||
color: 'common.white',
|
color: 'common.white',
|
||||||
}),
|
}),
|
||||||
@ -157,7 +157,7 @@ export function DocItem({
|
|||||||
bottom: -16,
|
bottom: -16,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
color: 'background.paper',
|
color: 'background.paper',
|
||||||
...((latestDocLarge || latestDoc) && { display: 'none' }),
|
...((large || long) && { display: 'none' }),
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
@ -168,7 +168,7 @@ export function DocItem({
|
|||||||
sx={(theme) => ({
|
sx={(theme) => ({
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
pt: 'calc(100% * 3 / 4)',
|
pt: 'calc(100% * 3 / 4)',
|
||||||
...((latestDocLarge || latestDoc) && {
|
...((large || long) && {
|
||||||
pt: 'calc(100% * 4 / 3)',
|
pt: 'calc(100% * 4 / 3)',
|
||||||
'&:after': {
|
'&:after': {
|
||||||
top: 0,
|
top: 0,
|
||||||
@ -179,7 +179,7 @@ export function DocItem({
|
|||||||
bgcolor: varAlpha(theme.palette.grey['900Channel'], 0.72),
|
bgcolor: varAlpha(theme.palette.grey['900Channel'], 0.72),
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
...(latestDocLarge && {
|
...(large && {
|
||||||
pt: {
|
pt: {
|
||||||
xs: 'calc(100% * 4 / 3)',
|
xs: 'calc(100% * 4 / 3)',
|
||||||
sm: 'calc(100% * 3 / 4.66)',
|
sm: 'calc(100% * 3 / 4.66)',
|
||||||
@ -195,7 +195,7 @@ export function DocItem({
|
|||||||
<Box
|
<Box
|
||||||
sx={(theme) => ({
|
sx={(theme) => ({
|
||||||
p: theme.spacing(6, 3, 3, 3),
|
p: theme.spacing(6, 3, 3, 3),
|
||||||
...((latestDocLarge || latestDoc) && {
|
...((large || long) && {
|
||||||
width: 1,
|
width: 1,
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
|
|||||||
@ -146,19 +146,19 @@ export function DocSearchView({ posts }: Props) {
|
|||||||
|
|
||||||
<Grid container spacing={3}>
|
<Grid container spacing={3}>
|
||||||
{posts.map((post, index) => {
|
{posts.map((post, index) => {
|
||||||
const latestDocLarge = index === 0;
|
const large = false;
|
||||||
const latestDoc = index === 1 || index === 2;
|
const long = false;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid
|
<Grid
|
||||||
key={post.id}
|
key={post.id}
|
||||||
size={{
|
size={{
|
||||||
xs: 12,
|
xs: 12,
|
||||||
sm: latestDocLarge ? 12 : 6,
|
sm: large ? 12 : 6,
|
||||||
md: latestDocLarge ? 6 : 3,
|
md: large ? 6 : 3,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<DocItem post={post} latestDoc={latestDoc} latestDocLarge={latestDocLarge} />
|
<DocItem post={post} long={long} large={large} />
|
||||||
</Grid>
|
</Grid>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user