diff options
| author |  Renard
| 2019-09-14 14:29:45 -0300 |
|---|---|---|
| committer | Renard
| 2019-09-14 14:29:45 -0300 |
| commit | 0c39566d07c869111eeb0092381561d3dbdb0fd0 (patch) | |
| tree | 188ed2d591b219fe40ef8db32968037a2099cbc0 | |
| parent | 483924210d3ee109ad1bded460effc6f4d4ccad4 (diff) | |
| download | bai-client-0c39566d07c869111eeb0092381561d3dbdb0fd0.tar.gz bai-client-0c39566d07c869111eeb0092381561d3dbdb0fd0.tar.xz bai-client-0c39566d07c869111eeb0092381561d3dbdb0fd0.zip | |
Responsive grid
| -rw-r--r-- | src/Home.js | 50 |
1 files changed, 24 insertions, 26 deletions
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> ); } } |