diff options
| author |  Renard
| 2019-09-13 14:12:41 -0300 |
|---|---|---|
| committer | Renard
| 2019-09-13 14:12:41 -0300 |
| commit | 077852f2659cbf05dc88ebc61860a1ee655a35e3 (patch) | |
| tree | c7bd222fd24da931cbcec5ee183c1f7570999704 | |
| parent | 1289267e5c2650765236631f089282f499b7b70c (diff) | |
| download | bai-client-077852f2659cbf05dc88ebc61860a1ee655a35e3.tar.gz bai-client-077852f2659cbf05dc88ebc61860a1ee655a35e3.tar.xz bai-client-077852f2659cbf05dc88ebc61860a1ee655a35e3.zip | |
Image modal
| -rw-r--r-- | src/Board.js | 2 | ||||
| -rw-r--r-- | src/Post.js | 22 |
2 files changed, 17 insertions, 7 deletions
diff --git a/src/Board.js b/src/Board.js index 19dda7a..daa2f39 100644 --- a/src/Board.js +++ b/src/Board.js @@ -78,7 +78,7 @@ class Board extends Component { <Segment.Group horizontal attached> {thread.file !== "" ? <Segment compact className="imageSegment"> - <Image size="small" fluid src={`https://bienvenidoainternet.org/${this.props.dir}/thumb/${thread.thumb}`} /> + <Image size="small" src={`https://bienvenidoainternet.org/${this.props.dir}/thumb/${thread.thumb}`} /> </Segment> : null} diff --git a/src/Post.js b/src/Post.js index 054bc58..8260d1f 100644 --- a/src/Post.js +++ b/src/Post.js @@ -1,11 +1,20 @@ import React from "react"; -import { Segment, Header, Image, Label, Icon } from "semantic-ui-react"; +import { Segment, Header, Image, Label, Icon, Modal } from "semantic-ui-react"; import Moment from "react-moment"; import "moment/locale/es"; +const ImageModal = ({ href, trigger }) => ( + <Modal trigger={trigger}> + <Modal.Content image> + <Modal.Description> + <Image as="a" src={href} fluid /> + </Modal.Description> + </Modal.Content> + </Modal> +); + const Post = ({ index, post, locked, dir }) => { const filesize = require('filesize'); - let user_id = post.timestamp_formatted.split(" ID:")[1]; return ( @@ -16,15 +25,16 @@ const Post = ({ index, post, locked, dir }) => { <Header.Subheader className="inlineSubHeader"> <Moment fromNow unix locale="es" date={post.timestamp} /> </Header.Subheader> - <Label size="mini">{user_id}</Label> + {user_id ? <Label size="mini">{user_id}</Label> : null} </Header> <Segment.Group horizontal> {post.file !== "" ? <Segment compact className="imageSegment"> - <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}`} /> - + <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 }} /> |