fix: some ui optimize (#60)

Innei · Aug 9, 2023 · 3aea1cc · 3aea1cc · vercel · Aug 9, 2023
1 parent fddcbbd
commit 3aea1cc
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/src/components/widgets/post/PostItem.tsx b/src/components/widgets/post/PostItem.tsx
@@ -22,10 +22,13 @@ export const PostItem = memo<{ data: PostModel }>(({ data }) => {
  return (
  <Link
  href={postLink}
- className="relative flex flex-col py-6 focus-visible:!shadow-none"
+ className="relative flex flex-col py-8 focus-visible:!shadow-none"
  >
  <PostItemHoverOverlay />
- <h2 className="relative text-center text-2xl font-medium lg:text-left">
+ <h2
+ className="relative text-2xl font-medium"
+ style={{ wordBreak: 'break-word' }}
+ >
  <Balancer>{data.title}</Balancer>
 
  <PostPinIcon pin={!!data.pin} id={data.id} />
@@ -36,12 +39,12 @@ export const PostItem = memo<{ data: PostModel }>(({ data }) => {
  摘要： {data.summary}
  </p>
  )}
- <div className="relative overflow-hidden">
+ <div className="relative overflow-hidden text-justify">
  {hasImage && (
  <div
  className={clsx(
- 'float-right h-24 w-24 overflow-hidden rounded-md',
- 'bg-contain bg-center bg-no-repeat',
+ 'float-right mb-2 ml-3 h-[5.5rem] w-[5.5rem] overflow-hidden rounded-md',
+ 'bg-cover bg-center bg-no-repeat',
  )}
  style={{ backgroundImage: `url(${hasImage})` }}
  />

diff --git a/src/components/widgets/post/PostMetaBar.tsx b/src/components/widgets/post/PostMetaBar.tsx
@@ -18,7 +18,7 @@ export const PostMetaBar: Component<{
  return (
  <div
  className={clsxm(
- 'flex min-w-0 flex-shrink flex-grow flex-wrap space-x-2 text-sm',
+ 'flex min-w-0 flex-shrink flex-grow flex-wrap gap-2 text-sm',
  className,
  )}
  >

diff --git a/src/components/widgets/post/PostPagination.tsx b/src/components/widgets/post/PostPagination.tsx
@@ -5,7 +5,7 @@ import type { FC } from 'react'
 import { MotionButtonBase } from '~/components/ui/button'
 
 const className =
- 'rounded-md border-[2px] border-accent/50 px-4 py-2 hover:border-accent transition-colors'
+ 'rounded-md border-[2px] border-accent/50 px-4 py-2 hover:border-accent text-accent transition-colors'
 
 export const PostPagination: FC<{ pagination: Pager }> = ({ pagination }) => {
  return (