📝 Docs: 商店详情卡片添加宽度限制与文本省略 (#2473)

nonebot · Nov 30, 2023 · bec74d8 · bec74d8
1 parent abc3829
commit bec74d8
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 24 deletions.
diff --git a/website/src/components/Modal/index.tsx b/website/src/components/Modal/index.tsx
@@ -40,7 +40,7 @@ export default function Modal({
         onClick={() => backdropExit && onFadeOut()}
       />
       <div className={clsx("nb-modal-container", transitionClass)}>
-        <div className="card bg-base-100 shadow-xl">
+        <div className="card bg-base-100 shadow-xl max-w-2xl">
           <div className="card-body">
             {!useCustomTitle && (
               <div className="nb-modal-title">

diff --git a/website/src/components/Modal/styles.css b/website/src/components/Modal/styles.css
@@ -9,7 +9,7 @@
 
   &-container {
     @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 min-w-[400px] lg:min-w-[600px];
-    @apply p-8 opacity-0;
+    @apply opacity-0;
     @apply transition-opacity duration-[225ms] ease-in-out delay-0;
 
     &.fade-in {

diff --git a/website/src/components/Resource/Card/index.tsx b/website/src/components/Resource/Card/index.tsx
@@ -37,14 +37,7 @@ export default function ResourceCard({
   const authorAvatar = `${authorLink}.png?size=80`;
 
   return (
-    <div
-      className={clsx(
-        "resource-card-container",
-        onClick && "resource-card-container-clickable",
-        className
-      )}
-      onClick={onClick}
-    >
+    <div className={clsx("resource-card-container", className)}>
       <div className="resource-card-header">
         <div className="resource-card-header-title">
           {resource.name}
@@ -55,7 +48,7 @@ export default function ResourceCard({
             />
           )}
         </div>
-        <div className="resource-card-header-expand">
+        <div className="resource-card-header-expand" onClick={onClick}>
           <FontAwesomeIcon icon={["fas", "expand"]} />
         </div>
       </div>

diff --git a/website/src/components/Resource/Card/styles.css b/website/src/components/Resource/Card/styles.css
@@ -3,10 +3,7 @@
     @apply flex flex-col gap-y-2 w-full min-h-[12rem] p-4;
     @apply transition-colors duration-500 bg-base-200;
     @apply border-2 border-base-200 rounded-lg;
-
-    &-clickable {
-      @apply cursor-pointer hover:border-primary;
-    }
+    @apply hover:border-primary;
   }
 
   &-header {
@@ -21,7 +18,7 @@
     }
 
     &-expand {
-      @apply flex-none fill-current;
+      @apply flex-none fill-current cursor-pointer;
     }
   }
 

diff --git a/website/src/components/Resource/DetailCard/index.tsx b/website/src/components/Resource/DetailCard/index.tsx
@@ -80,7 +80,7 @@ export default function ResourceDetailCard({ resource }: Props) {
           src={authorAvatar}
           className="detail-card-avatar"
           decoding="async"
-        ></img>
+        />
         <div className="detail-card-title">
           <span className="detail-card-title-main">{resource.name}</span>
           <span className="detail-card-title-sub">{resource.author}</span>
@@ -123,10 +123,7 @@ export default function ResourceDetailCard({ resource }: Props) {
           </div>
           <div className="detail-card-meta-item">
             <span>
-              <FontAwesomeIcon
-                className="fa-fw"
-                icon={["fas", "scale-balanced"]}
-              />{" "}
+              <FontAwesomeIcon fixedWidth icon={["fas", "scale-balanced"]} />{" "}
               {(pypiData && pypiData.info.license) || "无"}
             </span>
           </div>

diff --git a/website/src/components/Resource/DetailCard/styles.css b/website/src/components/Resource/DetailCard/styles.css
@@ -35,19 +35,19 @@
     @apply flex flex-col w-full lg:flex-row;
 
     &-left {
-      @apply flex flex-col min-h-[150px] lg:basis-3/4;
+      @apply flex flex-col min-h-[150px] lg:basis-3/4 max-w-[65%];
     }
 
     &-divider {
       @apply divider lg:divider-horizontal;
     }
 
     &-right {
-      @apply flex flex-col justify-start gap-y-2 lg:basis-1/4;
+      @apply flex flex-col justify-start gap-y-2 lg:basis-1/4 max-w-[45%];
     }
   }
 
   &-meta-item {
-    @apply text-sm whitespace-nowrap;
+    @apply text-sm truncate;
   }
 }