diff options
| -rw-r--r-- | src/App.css | 25 | ||||
| -rw-r--r-- | src/Board.js | 46 | ||||
| -rw-r--r-- | src/Post.js | 41 |
3 files changed, 45 insertions, 67 deletions
diff --git a/src/App.css b/src/App.css index bdeb084..07441e4 100644 --- a/src/App.css +++ b/src/App.css @@ -42,5 +42,30 @@ .postImage { padding-top: 0.5em; + padding-bottom: 0.5em; +} + +.imageContainer { + display: inline-block; + text-align: center; + font-size: 0.75em; padding-bottom: 1em; +} + +.yt { + border: 1px solid #ccc; + font-size: 12px; + display: inline-block; + line-height: 13px; + margin: 2px 0; + padding: 5px; + text-decoration: none; +} + +.yt .pvw { + width: 100px; + height: 60px; + overflow: hidden; + float: left; + margin-right: 5px; }
\ No newline at end of file diff --git a/src/Board.js b/src/Board.js index daa2f39..6fece58 100644 --- a/src/Board.js +++ b/src/Board.js @@ -1,8 +1,9 @@ import React, { Component } from "react"; -import { Loader, Message, Segment, Header, Image, SegmentGroup } from "semantic-ui-react"; +import { Loader, Message, Segment, Header, Image, Comment } from "semantic-ui-react"; import { Link } from "@reach/router"; import Moment from "react-moment"; import "moment/locale/es"; +import Post from "./Post"; class Board extends Component { constructor() { super(); @@ -71,42 +72,15 @@ class Board extends Component { <Segment.Group> <Header as="h4" attached> <Link to={`/${this.props.dir}/read/${thread.id}`}>{thread.subject}</Link> - <Header.Subheader> - {thread.name} ― <Moment fromNow unix locale="es" date={thread.timestamp} /> - </Header.Subheader> </Header> - <Segment.Group horizontal attached> - {thread.file !== "" ? - <Segment compact className="imageSegment"> - <Image size="small" 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) => - <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> + <Comment.Group> + <Post index={0} post={thread} locked={thread.locked} threadId={thread.id} dir={this.props.dir} /> + {thread.replies.map((reply, index, replies) => + <Post index={thread.total_replies - replies.length + index + 1} post={reply} locked={thread.locked} threadId={thread.id} dir={this.props.dir} /> + )} + </Comment.Group> + </Segment> </Segment.Group> )} </div> diff --git a/src/Post.js b/src/Post.js index 2525184..e175f91 100644 --- a/src/Post.js +++ b/src/Post.js @@ -14,6 +14,10 @@ const ImageModal = ({ href, trigger }) => ( ); const Post = ({ index, post, locked, dir, threadId }) => { + if (post.IS_DELETED > 0) { + return null; + } + console.log(post); const filesize = require('filesize'); const seedrandom = require("seedrandom"); const rng = seedrandom(threadId + index); @@ -28,11 +32,15 @@ const Post = ({ index, post, locked, dir, threadId }) => { <Comment.Content> <Comment.Author as='a'>#{index + 1} <span className={post.email === "sage" ? "username sage" : "username"}>{post.name}</span><span className="tripcode">{post.tripcode}</span></Comment.Author> <Comment.Metadata> - <Moment fromNow unix locale="es" date={post.timestamp} /> + <div><Moment fromNow unix locale="es" date={post.timestamp} /></div> + <div><Icon name="star" />{user_id}</div> </Comment.Metadata> <Comment.Text> {post.file !== "" ? - <ImageModal href={`https://bienvenidoainternet.org/${dir}/src/${post.file}`} trigger={<Image className="postImage" src={`https://bienvenidoainternet.org/${dir}/thumb/${post.thumb}`} />} /> + <div className="imageContainer"> + <ImageModal href={`https://bienvenidoainternet.org/${dir}/src/${post.file}`} trigger={<Image className="postImage" src={`https://bienvenidoainternet.org/${dir}/thumb/${post.thumb}`} />} /> + {post.file} {post.image_width}x{post.image_height} {filesize(post.file_size, { bits: true })} + </div> : null} <div className={`postMessage ${dir === "zonavip" ? "vipFont" : null}`} dangerouslySetInnerHTML={{ __html: post.message }} /> </Comment.Text> @@ -42,35 +50,6 @@ const Post = ({ index, post, locked, dir, threadId }) => { </Comment.Content> </Comment> ); - - return ( - <Segment.Group> - <Header as="h5" attached> - #{index + 1} <span className={post.email === "sage" ? "username sage" : "username"}>{post.name}</span><span className="tripcode">{post.tripcode}</span> - - <Header.Subheader className="inlineSubHeader"> - <Moment fromNow unix locale="es" date={post.timestamp} /> - </Header.Subheader> - {user_id ? <Label size="mini">{user_id}</Label> : null} - </Header> - - <Segment.Group horizontal> - {post.file !== "" ? - <Segment compact className="imageSegment"> - <Label size="tiny" attached='bottom'>{post.file} {post.image_width}x{post.image_height} - <Label.Detail>{filesize(post.file_size, { bits: true })}</Label.Detail> - </Label> - <ImageModal href={`https://bienvenidoainternet.org/${dir}/src/${post.file}`} trigger={<Image fluid src={`https://bienvenidoainternet.org/${dir}/thumb/${post.thumb}`} />} /> - </Segment> : null} - <Segment> - <div className={`postMessage ${dir === "zonavip" ? "vipFont" : null}`} dangerouslySetInnerHTML={{ __html: post.message }} /> - {locked ? null : - (<Label attached='bottom right'> - <Icon name="reply" />Responder - </Label>)} - </Segment> - </Segment.Group> - </Segment.Group>); } export default Post;
\ No newline at end of file |