From 95e6800664751c9ce4d5227fef96aa4560f9bddd Mon Sep 17 00:00:00 2001
From: Gabriel Dutra <nesk.frz@gmail.com>
Date: Sun, 14 Apr 2019 07:10:40 -0300
Subject: [PATCH] Update CardsList to use visual-card styling (#3679)

* Update CardsList to use old markup

* CR
---
 .../assets/less/redash/redash-newstyle.less   | 72 +++++++++++++++++++
 .../app/components/cards-list/CardsList.jsx   | 50 ++++++-------
 .../app/components/cards-list/CardsList.less  | 22 ------
 3 files changed, 95 insertions(+), 49 deletions(-)
 delete mode 100644 client/app/components/cards-list/CardsList.less

diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less
index 5104816cf0..28a0389568 100644
--- a/client/app/assets/less/redash/redash-newstyle.less
+++ b/client/app/assets/less/redash/redash-newstyle.less
@@ -238,6 +238,78 @@ body {
   float: right;
 }
 
+.visual-card {
+  background: #FFFFFF;
+  border: 1px solid fade(@redash-gray, 15%);
+  border-radius: 3px;
+  margin: 5px;
+  width: 212px;
+  padding: 15px 5px;
+  cursor: pointer;
+  box-shadow: none;
+  transition: transform 0.12s ease-out;
+  transition-duration: 0.3s;
+  transition-property: box-shadow;
+
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    box-shadow: rgba(102, 136, 153, 0.15) 0px 4px 9px -3px;
+  }
+
+  img {
+    width: 64px !important;
+    height: 64px !important;
+    margin-right: 5px;
+  }
+
+  h3 {
+    font-size: 13px;
+    color: #323232;
+    margin: 0 !important;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+
+@media (max-width: 1200px) {
+  .visual-card {
+    width: 217px;
+  }
+}
+
+@media (max-width: 755px) {
+  .visual-card {
+    width: 47%;
+  }
+}
+
+@media (max-width: 515px) {
+  .visual-card {
+    width: 47%;
+
+    img {
+      width: 48px;
+      height: 48px;
+    }
+  }
+}
+
+@media (max-width: 408px) {
+  .visual-card {
+    width: 100%;
+    padding: 5px;
+    margin: 5px 0;
+
+    img {
+      width: 48px;
+      height: 48px;
+    }
+  }
+}
+
+
 .t-header:not(.th-alt) {
   padding: 15px;
 
diff --git a/client/app/components/cards-list/CardsList.jsx b/client/app/components/cards-list/CardsList.jsx
index df4eb94ee2..a2525bfc76 100644
--- a/client/app/components/cards-list/CardsList.jsx
+++ b/client/app/components/cards-list/CardsList.jsx
@@ -1,15 +1,10 @@
-import Card from 'antd/lib/card';
 import Input from 'antd/lib/input';
-import List from 'antd/lib/list';
 import { includes, isEmpty } from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
 import EmptyState from '@/components/items-list/components/EmptyState';
 
-import './CardsList.less';
-
 const { Search } = Input;
-const { Meta } = Card;
 
 export default class CardsList extends React.Component {
   static propTypes = {
@@ -33,34 +28,36 @@ export default class CardsList extends React.Component {
     searchText: '',
   };
 
+  constructor(props) {
+    super(props);
+    this.items = [];
+
+    let itemId = 1;
+    props.items.forEach((item) => {
+      this.items.push({ id: itemId, ...item });
+      itemId += 1;
+    });
+  }
+
   // eslint-disable-next-line class-methods-use-this
   renderListItem(item) {
-    const card = (
-      <Card
-        size="small"
-        cover={(<div><img alt={item.title} src={item.imgSrc} /></div>)}
-        onClick={item.onClick}
-        hoverable
-      >
-        <Meta title={(<h3>{item.title}</h3>)} />
-      </Card>
-    );
     return (
-      <List.Item className="cards-list-item">
-        {item.href ? (<a href={item.href}>{card}</a>) : card}
-      </List.Item>
+      <a key={`card${item.id}`} className="visual-card" onClick={item.onClick} href={item.href}>
+        <img alt={item.title} src={item.imgSrc} />
+        <h3>{item.title}</h3>
+      </a>
     );
   }
 
   render() {
-    const { items, showSearch } = this.props;
+    const { showSearch } = this.props;
     const { searchText } = this.state;
 
-    const filteredItems = items.filter(item => isEmpty(searchText) ||
+    const filteredItems = this.items.filter(item => isEmpty(searchText) ||
       includes(item.title.toLowerCase(), searchText.toLowerCase()));
 
     return (
-      <div className="cards-list" data-test="CardsList">
+      <div data-test="CardsList">
         {showSearch && (
           <div className="row p-10">
             <div className="col-md-4 col-md-offset-4">
@@ -73,12 +70,11 @@ export default class CardsList extends React.Component {
           </div>
         )}
         {isEmpty(filteredItems) ? (<EmptyState className="" />) : (
-          <List
-            className="p-10"
-            grid={{ gutter: 12, column: 6, xs: 1, sm: 3, lg: 4, xl: 6 }}
-            dataSource={filteredItems}
-            renderItem={item => this.renderListItem(item)}
-          />
+          <div className="row">
+            <div className="col-lg-12 d-inline-flex flex-wrap">
+              {filteredItems.map(item => this.renderListItem(item))}
+            </div>
+          </div>
         )}
       </div>
     );
diff --git a/client/app/components/cards-list/CardsList.less b/client/app/components/cards-list/CardsList.less
deleted file mode 100644
index e0a34544b5..0000000000
--- a/client/app/components/cards-list/CardsList.less
+++ /dev/null
@@ -1,22 +0,0 @@
-.cards-list {
-  .cards-list-item {
-    text-align: center;
-  }
-  
-  .cards-list-item img {
-    margin-top: 10px;
-    width: 64px;
-    height: 64px;
-  }
-  
-  .cards-list-item h3 {
-    font-size: 13px;
-    height: 44px;
-    white-space: normal;
-    overflow: hidden;
-    /* autoprefixer: off */
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-  }
-}