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 (