Lista de hilos rediseñada

1 files changed, 21 insertions, 22 deletions

diff --git a/src/ThreadList.js b/src/ThreadList.js
index c5eb990..fe597c3 100644
--- a/src/ThreadList.js
+++ b/src/ThreadList.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Header, Loader, List, Card, Image, Icon } from "semantic-ui-react";
+import { Loader, Icon, Item } from "semantic-ui-react";
 import { Link } from "@reach/router";
 import Moment from "react-moment";
 import "moment/locale/es";
@@ -44,39 +44,38 @@ class ThreadList extends Component {
     );
 
     return (
-      <Card.Group centered itemsPerRow={4} stackable>
+      <Item.Group divided>
         {threadList.map((thread, index) => {
           return (
-            <Card key={index} raised>
-              {currentBoard.allow_images === 1 ? (
-                <Image
+            <Item key={index}>
+              {currentBoard.allow_images === 1 && (
+                <Item.Image
+                  size="tiny"
                   src={`https://bienvenidoainternet.org/${dir}/thumb/${thread.thumb}`}
-                  ui={false}
-                  style={{ maxHeight: "250px" }}
                 />
-              ) : null}
-              <Card.Content>
-                <Card.Header as={Link} to={`/${dir}/read/${thread.id}`}>
+              )}
+              <Item.Content verticalAlign="middle">
+                <Item.Header as={Link} to={`/${dir}/read/${thread.id}`}>
                   {thread.subject}
-                </Card.Header>
-                <Card.Meta>
+                </Item.Header>
+                <Item.Meta>
                   <span className="date">
                     <Moment fromNow unix date={thread.timestamp} />
                   </span>
-                </Card.Meta>
-                <Card.Description>
+                </Item.Meta>
+                <Item.Description>
                   {thread.message.replace(stripHtml, "").substring(0, 200) +
                     " ..."}
-                </Card.Description>
-              </Card.Content>
-              <Card.Content extra>
-                <Icon name="reply" />
-                {thread.total_replies} Respuestas
-              </Card.Content>
-            </Card>
+                </Item.Description>
+                <Item.Extra>
+                  <Icon name="reply" />
+                  {thread.total_replies} Respuestas
+                </Item.Extra>
+              </Item.Content>
+            </Item>
           );
         })}
-      </Card.Group>
+      </Item.Group>
     );
   }
 }