From 077852f2659cbf05dc88ebc61860a1ee655a35e3 Mon Sep 17 00:00:00 2001
From: Renard
Date: Fri, 13 Sep 2019 14:12:41 -0300
Subject: Image modal
---
src/Board.js | 2 +-
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 }} />
--
cgit v1.2.1-18-gbd029