refactor: update article list style

Author: fecommunity

client/src/components/ArticleCarousel/index.module.scss

@@ -11,7 +11,7 @@
     position: relative;
     display: flex;
     width: 100%;
-    height: 460px;
+    height: 260px;
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
@@ -54,7 +54,31 @@
 
   @media (max-width: 768px) {
     .articleItem {
-      height: 180px;
+      height: 300px;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .container {
+      width: 768px;
+    }
+  }
+
+  @media (min-width: 992px) {
+    .articleItem {
+      height: 340px;
+    }
+  }
+
+  @media (min-width: 1200px) {
+    .articleItem {
+      height: 380px;
+    }
+  }
+
+  @media (min-width: 1360px) {
+    .articleItem {
+      height: 460px;
     }
   }
 }

client/src/components/ArticleList/index.module.scss

@@ -22,7 +22,7 @@
   &:hover {
     img {
       transform: scale(1.1);
-      transition: all .2s ease-in;
+      transition: all 0.2s ease-in;
     }
   }
 
@@ -194,7 +194,6 @@
 }
 
 @media (max-width: 658px) {
-
   .articleItem {
     .coverWrapper {
       width: 140px;
@@ -213,6 +212,16 @@
       flex-direction: column;
       align-items: flex-start;
 
+      .title {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        line-height: 1.2em;
+        max-height: 2.4em;
+      }
+
       .info {
         font-size: 0.8em;
 

client/src/components/ArticleList/index.tsx

@@ -46,7 +46,7 @@ export const ArticleList: React.FC<IProps> = ({ articles = [] }) => {
                 <Link href={`/article/[id]`} as={`/article/${article.id}`} scroll={false}>
                   <a aria-label={article.title} className={style.link}>
                     <header>
-                      <div className={style.title}>{article.title}</div>
+                      <div className={style.title} title={article.title}>{article.title}</div>
                       <div className={style.info}>
                         {article.category && categoryIndex >= 0 && (
                           <Tag className={style.antBadge} color={getColorFromNumber(categoryIndex)}>
@@ -58,7 +58,7 @@ export const ArticleList: React.FC<IProps> = ({ articles = [] }) => {
                     </header>
                     <main className={style.desc} title={article.title}>
                       <div className={style.contentWrapper}>
-                        <div className={style.desc}>
+                        <div className={style.desc} title={article.summary}>
                           <span dangerouslySetInnerHTML={{ __html: article.summary }} />
                         </div>
                         <div className={style.meta}>

client/src/theme/reset.scss

@@ -75,7 +75,7 @@ iframe {
 
 @media (min-width: 768px) {
   .container {
-    width: 768px;
+    width: calc(768px - 32px);
   }
 }