From 0c39566d07c869111eeb0092381561d3dbdb0fd0 Mon Sep 17 00:00:00 2001
From: Renard
Date: Sat, 14 Sep 2019 14:29:45 -0300
Subject: Responsive grid

---
 src/Home.js | 50 ++++++++++++++++++++++++--------------------------
 1 file changed, 24 insertions(+), 26 deletions(-)

(limited to 'src')

diff --git a/src/Home.js b/src/Home.js
index bda02e6..8493db2 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { List, Header, Segment, Icon, Loader } from "semantic-ui-react";
+import { List, Header, Segment, Icon, Loader, Grid } from "semantic-ui-react";
 import Moment from "react-moment";
 import "moment/locale/es";
 
@@ -55,10 +55,9 @@ class Home extends Component {
         const { newThreadsList, lastAgeThreads, latestNews } = this.state;
 
         return (
-            <Segment.Group>
-                <Segment.Group horizontal>
-
-                    <Segment>
+            <Grid columns={2} divided container doubling>
+                <Grid.Row>
+                    <Grid.Column>
                         <Header as="h4">Hilos activos</Header>
                         <List divided>
                             {lastAgeThreads.map(thread =>
@@ -71,9 +70,8 @@ class Home extends Component {
                                 </List.Item>
                             )}
                         </List>
-                    </Segment>
-
-                    <Segment>
+                    </Grid.Column>
+                    <Grid.Column>
                         <Header as="h4">Nuevos hilos</Header>
                         <List divided>
                             {newThreadsList.map(thread =>
@@ -86,25 +84,25 @@ class Home extends Component {
                                 </List.Item>
                             )}
                         </List>
-                    </Segment>
-
-                </Segment.Group>
-                <Segment>
-                    <Header as="h4">Blotter</Header>
-                    <List divided>
-                        {latestNews.map(n =>
-                            <List.Item key={n.timestamp}>
-                                <List.Content>
-                                    <div dangerouslySetInnerHTML={{ __html: n.message }} />
-                                    <span className="ui tiny"><Icon name="clock" /><Moment fromNow unix locale="es" date={n.timestamp} /></span>
-
-                                </List.Content>
-                            </List.Item>
-                        )}
-                    </List>
-                </Segment>
+                    </Grid.Column>
+                </Grid.Row>
+                <Grid.Row columns={1}>
+                    <Grid.Column>
+                        <Header as="h4">Blotter</Header>
+                        <List divided>
+                            {latestNews.map(n =>
+                                <List.Item key={n.timestamp}>
+                                    <List.Content>
+                                        <div dangerouslySetInnerHTML={{ __html: n.message }} />
+                                        <span className="ui tiny"><Icon name="clock" /><Moment fromNow unix locale="es" date={n.timestamp} /></span>
 
-            </Segment.Group>
+                                    </List.Content>
+                                </List.Item>
+                            )}
+                        </List>
+                    </Grid.Column>
+                </Grid.Row>
+            </Grid>
         );
     }
 }
-- 
cgit v1.2.1-18-gbd029