fix: Home app list card style (#504)

Author: whDongRui

src/components/AppList/index.jsx

@@ -46,11 +46,18 @@ export default class AppList extends PureComponent {
               <CardTitle skipLink={skipLink} categoryId={category_id} title={name} more />
             )}
 
-            {apps.slice(0, 6).map(app => (
-              <Link key={app.app_id} to={`/${skipLink}/${app.app_id}`}>
-                <Card icon={app.icon} name={app.name} desc={app.description} fold />
-              </Link>
-            ))}
+            {apps
+              .slice(0, 6)
+              .map(app => (
+                <Card
+                  key={app.app_id}
+                  icon={app.icon}
+                  name={app.name}
+                  desc={app.description}
+                  link={`/${skipLink}/${app.app_id}`}
+                  fold
+                />
+              ))}
           </div>
         );
       });
@@ -66,10 +73,10 @@ export default class AppList extends PureComponent {
     const { apps, className, skipLink, isLoading, t } = this.props;
 
     return (
-      <div className={classnames(styles.appList, className)}>
-        {<CardTitle title={this.getSearchTitle()} more={false} />}
+      <div className={classnames(className)}>
+        <div className={styles.appList}>
+          {<CardTitle title={this.getSearchTitle()} more={false} />}
 
-        <div className={styles.appsRow}>
           {apps.map((app, idx) => (
             <Card
               icon={app.icon}
@@ -79,9 +86,9 @@ export default class AppList extends PureComponent {
               link={`/${skipLink}/${app.app_id}`}
             />
           ))}
-        </div>
 
-        {!apps.length && !isLoading && <div className={styles.noData}>{t('NO_SEARCH_DATA')}</div>}
+          {!apps.length && !isLoading && <div className={styles.noData}>{t('NO_SEARCH_DATA')}</div>}
+        </div>
 
         {this.renderCategoryApps()}
       </div>

src/components/AppList/index.scss

@@ -1,25 +1,26 @@
 @import '~scss/vars';
 
-.appList {
-  a {
+
+.appList, .categoryApps {
+  overflow: hidden;
+  _zoom: 1;
+
+  > div {
     &:nth-child(3n+4) {
-      &>div {
-        margin-right: 0;
-      }
+      margin-right: 0;
     }
   }
-  .noData{
+}
+
+.appList {
+  .noData {
     padding: 20px 0;
     text-align: center;
     font-size: 12px;
     color: $N75;
   }
 }
-.categoryApps{
-  margin-top: -16px;
-}
 
-.appsRow {
-  display: flex;
-  justify-content: space-between;
+.categoryApps {
+  margin-top: -16px;
 }

src/components/Card/index.scss

@@ -1,11 +1,12 @@
 @import '~scss/vars';
 
 .card {
+   float: left;
    display: inline-block;
    width: $app-card-width;
    height: $app-card-height;
    padding: 40px 20px 20px;
-   //margin: 0 24px 24px 0;
+   margin: 0 24px 24px 0;
    border-radius: 2px;
    //border: 1px solid $border-light;
    background-color: $N0;

src/pages/Home/index.jsx

@@ -19,20 +19,27 @@ import styles from './index.scss';
 }))
 @observer
 export default class Home extends Component {
+  async componentWillMount() {
+    const { rootStore, match } = this.props;
+    const { category, search } = match.params;
+
+    if (category || search) {
+      rootStore.setNavFix(true);
+    } else {
+      rootStore.setNavFix(false);
+    }
+
+    window.scroll({ top: 0 });
+  }
+
   async componentDidMount() {
     const { rootStore, appStore, categoryStore, match } = this.props;
     const { category, search } = match.params;
     const filterParams = { status: 'active', noLimit: true };
 
-    window.scroll({ top: 0, behavior: 'smooth' });
-
     await categoryStore.fetchAll();
 
-    if (category || search) {
-      rootStore.setNavFix(true);
-    } else {
-      // home page
-      rootStore.setNavFix(false);
+    if (!(category || search)) {
       this.threshold = this.getThreshold();
       window.onscroll = this.handleScroll;
     }