style: Update dashboard history card style (#4210)

Signed-off-by: harrisonliu5 <[email protected]>
kubesphere · Oct 19, 2023 · eb6a5df · eb6a5df
1 parent 516eae8
commit eb6a5df
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 26 deletions.
diff --git a/src/pages/console/containers/Dashboard/Admin/History/Card.jsx b/src/pages/console/containers/Dashboard/Admin/History/Card.jsx
@@ -82,7 +82,7 @@ export default class Card extends Component {
     ) {
       return (
         <span className={styles.tagWrapper}>
-          <span>
+          <span title={getDisplayName(data.cluster)}>
             <Tag
               type={CLUSTER_GROUP_TAG_TYPE[data.cluster.group]}
               className={styles.tag}
@@ -112,13 +112,17 @@ export default class Card extends Component {
         <Text
           className={styles.text}
           icon={this.getIcon()}
-          title={getDisplayName(data)}
+          title={
+            <div className={styles.textTitle}>
+              <span title={getDisplayName(data)}>{getDisplayName(data)}</span>
+              <span>{this.renderTags()}</span>
+            </div>
+          }
           description={t(
             `WORKBENCH_${data.type.replace(/[-\s+]/g, '_').toUpperCase()}`
           )}
           ellipsis
         />
-        {this.renderTags()}
 
         {data.isFedManaged && (
           <Tooltip

diff --git a/src/pages/console/containers/Dashboard/Admin/History/index.jsx b/src/pages/console/containers/Dashboard/Admin/History/index.jsx
@@ -50,7 +50,7 @@ export default class History extends Component {
     }
 
     return (
-      <div className={classNames(styles.histories, className)}>
+      <div className={classNames(styles.historiesNew, className)}>
         {histories.map(item => (
           <Card key={item.url} data={item} />
         ))}

diff --git a/src/pages/console/containers/Dashboard/Admin/History/index.scss b/src/pages/console/containers/Dashboard/Admin/History/index.scss
@@ -8,30 +8,23 @@
   background-color: #ffffff;
 }
 
-.histories {
-  margin-bottom: -12px;
+.historiesNew {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  row-gap: 12px;
+  column-gap: 12px;
+}
 
+.historiesNew,
+.histories {
   & > a {
-    display: inline-block;
-    vertical-align: middle;
     position: relative;
-    width: calc(20% - 11px);
-    margin-bottom: 12px;
-    margin-right: 12px;
-    padding: 11px 12px;
+    padding: 12px;
     border-radius: 3px;
     background-color: $card-bg-color;
     transition: all $trans-speed ease-in-out;
 
-    &:nth-child(5n + 5) {
-      margin-right: 0;
-    }
-
     .tagWrapper {
-      position: absolute;
-      top: 12px;
-      right: 12px;
-      left: 100px;
       text-align: right;
       > span {
         max-width: 100%;
@@ -41,11 +34,24 @@
         background: #fff;
       }
       .tag {
-        max-width: 100%;
         overflow: hidden;
         word-break: break-all;
         white-space: nowrap;
         text-overflow: ellipsis;
+        max-width: 100px;
+      }
+    }
+    .textTitle {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 8px;
+      & > span:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > span:last-child {
+        display: inherit;
       }
     }
 
@@ -54,11 +60,6 @@
         & > div > div {
           color: $primary;
         }
-
-        :global .kubed-icon {
-          color: #00aa72;
-          fill: #90e0c5;
-        }
       }
     }
   }