diff options
| -rw-r--r-- | src/App.css | 2 | ||||
| -rw-r--r-- | src/Board.js | 40 | ||||
| -rw-r--r-- | src/Post.js | 2 |
3 files changed, 32 insertions, 12 deletions
diff --git a/src/App.css b/src/App.css index a53157f..cd12c8b 100644 --- a/src/App.css +++ b/src/App.css @@ -11,7 +11,7 @@ .imageSegment { padding: 0 !important; - min-width: 250px !important; + /* min-width: 250px !important; */ } .vipFont { diff --git a/src/Board.js b/src/Board.js index bec11a3..19dda7a 100644 --- a/src/Board.js +++ b/src/Board.js @@ -1,5 +1,5 @@ import React, { Component } from "react"; -import { Loader, Message, Segment, Header } from "semantic-ui-react"; +import { Loader, Message, Segment, Header, Image, SegmentGroup } from "semantic-ui-react"; import { Link } from "@reach/router"; import Moment from "react-moment"; import "moment/locale/es"; @@ -75,16 +75,36 @@ class Board extends Component { {thread.name} ― <Moment fromNow unix locale="es" date={thread.timestamp} /> </Header.Subheader> </Header> - <Segment attached> - <div dangerouslySetInnerHTML={{ __html: thread.message }} /> - </Segment> + <Segment.Group horizontal attached> + {thread.file !== "" ? + <Segment compact className="imageSegment"> + <Image size="small" fluid src={`https://bienvenidoainternet.org/${this.props.dir}/thumb/${thread.thumb}`} /> + </Segment> + + : null} + <Segment attached> + <div dangerouslySetInnerHTML={{ __html: thread.message }} /> + </Segment> + </Segment.Group> + {thread.replies.map((reply, index, replies) => - <Header attached key={index} as="h5"> - #{thread.total_replies - replies.length + index + 1} {reply.name} - <Header.Subheader> - <div className={`postMessage ${this.props.dir === "zonavip" ? "vipFont" : null}`} dangerouslySetInnerHTML={{ __html: reply.message }} /> - </Header.Subheader> - </Header> + <Segment.Group horizontal attached> + {reply.file !== "" ? + <Segment compact className="imageSegment"> + <Image size="small" fluid src={`https://bienvenidoainternet.org/${this.props.dir}/thumb/${reply.thumb}`} /> + </Segment> + : null} + <Segment attached> + + <Header key={index} as="h5"> + #{thread.total_replies - replies.length + index + 1} {reply.name} + <Header.Subheader> + <div className={`postMessage ${this.props.dir === "zonavip" ? "vipFont" : null}`} dangerouslySetInnerHTML={{ __html: reply.message }} /> + </Header.Subheader> + </Header> + </Segment> + </Segment.Group> + )} </Segment.Group> diff --git a/src/Post.js b/src/Post.js index 4923b81..054bc58 100644 --- a/src/Post.js +++ b/src/Post.js @@ -22,7 +22,7 @@ const Post = ({ index, post, locked, dir }) => { <Segment.Group horizontal> {post.file !== "" ? <Segment compact className="imageSegment"> - <Label attached='bottom'>{post.file} {post.image_width}x{post.image_height} {filesize(post.file_size, { bits: true })}</Label> + <Label size="small" attached='bottom'>{post.file} {post.image_width}x{post.image_height} {filesize(post.file_size, { bits: true })}</Label> <Image fluid src={`https://bienvenidoainternet.org/${dir}/thumb/${post.thumb}`} /> </Segment> : null} |