External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

add container to expanded images

Browse Source
This commit is contained in:
Tom
2023-04-30 13:32:52 +02:00
parent 272752a522
commit 7008b5649d
4 changed files with 126 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styled/GlobalStyle.styled.jsx
+11 -6
View File
@@ -37,13 +37,18 @@ export const GlobalStyle = createGlobalStyle`
padding: 0; padding: 0;
} }
.enlarged { .expanded-container {
@media (min-width: 480px) { display: inline-block;
max-width: none !important; }
max-height: none !important;
}
@media (max-width: 480px) { .enlarged {
display: block;
max-width: 100% !important;
max-height: 100% !important;
}
@media (max-width: 480px) {
.enlarged {
max-width: 100% !important; max-width: 100% !important;
max-height: 100% !important; max-height: 100% !important;
} }
src/components/views/Board.jsx
+44 -28
View File
@@ -485,24 +485,28 @@ const Board = () => {
}</a>&nbsp;({commentMediaInfo?.type}) }</a>&nbsp;({commentMediaInfo?.type})
</div> </div>
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
<span key={`fta-${index}`} className="file-thumb"> <div key={`enlarge-${index}`} className="img-container">
{thread.thumbnailUrl ? ( <span key={`fta-${index}`} className="file-thumb">
{thread.thumbnailUrl ? (
<img key={`fti-${index}`}
src={thread.thumbnailUrl} alt={commentMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</span>
</div>
) : null}
{commentMediaInfo?.type === "image" ? (
<div key={`enlarge-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb">
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={thread.thumbnailUrl} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick} onClick={handleImageClick}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} </span>
</span> </div>
) : null}
{commentMediaInfo?.type === "image" ? (
<span key={`fta-${index}`} className="file-thumb">
<img key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null} ) : null}
{commentMediaInfo?.type === "video" ? ( {commentMediaInfo?.type === "video" ? (
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb">
@@ -717,24 +721,28 @@ const Board = () => {
}</a>&nbsp;({replyMediaInfo?.type}) }</a>&nbsp;({replyMediaInfo?.type})
</div> </div>
{replyMediaInfo?.type === "webpage" ? ( {replyMediaInfo?.type === "webpage" ? (
<span key={`fta-${index}`} className="file-thumb-reply"> <div key={`enlarge-reply-${index}`} className="img-container">
{reply.thumbnailUrl ? ( <span key={`fta-${index}`} className="file-thumb-reply">
{reply.thumbnailUrl ? (
<img key={`fti-${index}`}
src={reply.thumbnailUrl} alt={replyMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</span>
</div>
) : null}
{replyMediaInfo?.type === "image" ? (
<div key={`enlarge-reply-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply">
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={reply.thumbnailUrl} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={handleImageClick} onClick={handleImageClick}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} </span>
</span> </div>
) : null}
{replyMediaInfo?.type === "image" ? (
<span key={`fta-${index}`} className="file-thumb-reply">
<img key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null} ) : null}
{replyMediaInfo?.type === "video" ? ( {replyMediaInfo?.type === "video" ? (
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply">
@@ -848,6 +856,7 @@ const Board = () => {
<div key={`mob-f-${index}`} className="file-mobile"> <div key={`mob-f-${index}`} className="file-mobile">
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
commentMediaInfo.type === "webpage" ? ( commentMediaInfo.type === "webpage" ? (
<div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
{thread.thumbnailUrl ? ( {thread.thumbnailUrl ? (
<img key={`mob-img-${index}`} <img key={`mob-img-${index}`}
@@ -858,7 +867,9 @@ const Board = () => {
) : null} ) : null}
<div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span> </span>
</div>
) : commentMediaInfo.type === "image" ? ( ) : commentMediaInfo.type === "image" ? (
<div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${index}`} <img key={`mob-img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
@@ -867,6 +878,7 @@ const Board = () => {
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span> </span>
</div>
) : commentMediaInfo.type === "video" ? ( ) : commentMediaInfo.type === "video" ? (
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<video key={`fti-${index}`} <video key={`fti-${index}`}
@@ -986,6 +998,7 @@ const Board = () => {
<div key={`mob-f-${index}`} className="file-mobile"> <div key={`mob-f-${index}`} className="file-mobile">
{replyMediaInfo?.url ? ( {replyMediaInfo?.url ? (
replyMediaInfo.type === "webpage" ? ( replyMediaInfo.type === "webpage" ? (
<div key={`enlarge-mob-reply-${index}`} className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
<img key={`mob-img-${index}`} <img key={`mob-img-${index}`}
@@ -996,7 +1009,9 @@ const Board = () => {
) : null} ) : null}
<div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span> </span>
</div>
) : replyMediaInfo.type === "image" ? ( ) : replyMediaInfo.type === "image" ? (
<div key={`enlarge-mob-reply-${index}`} className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${index}`} <img key={`mob-img-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
@@ -1005,6 +1020,7 @@ const Board = () => {
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span> </span>
</div>
) : replyMediaInfo.type === "video" ? ( ) : replyMediaInfo.type === "video" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<video key={`fti-${index}`} <video key={`fti-${index}`}
src/components/views/Thread.jsx
+63 -47
View File
@@ -465,24 +465,28 @@ const Thread = () => {
}</a>&nbsp;({commentMediaInfo?.type}) }</a>&nbsp;({commentMediaInfo?.type})
</div> </div>
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
<span key={`fta-${comment.cid}`} className="file-thumb"> <div key="enlarge" className="img-container">
{comment.thumbnailUrl ? ( <span key={`fta-${comment.cid}`} className="file-thumb">
<img key={`fti-${index}`} {comment.thumbnailUrl ? (
src={comment.thumbnailUrl} alt={commentMediaInfo.type} <img key={`fti-${comment.cid}`}
src={comment.thumbnailUrl} alt={commentMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</span>
</div>
) : null}
{commentMediaInfo?.type === "image" ? (
<div key="enlarge" className="img-container">
<span key={`fta-${comment.cid}`} className="file-thumb">
<img key={`fti-${comment.cid}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick} onClick={handleImageClick}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} </span>
</span> </div>
) : null}
{commentMediaInfo?.type === "image" ? (
<span key={`fta-${comment.cid}`} className="file-thumb">
<img key={`fti-${comment.cid}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null} ) : null}
{commentMediaInfo?.type === "video" ? ( {commentMediaInfo?.type === "video" ? (
<span key={`fta-${comment.cid}`} className="file-thumb"> <span key={`fta-${comment.cid}`} className="file-thumb">
@@ -663,24 +667,28 @@ const Thread = () => {
}</a>&nbsp;({replyMediaInfo?.type}) }</a>&nbsp;({replyMediaInfo?.type})
</div> </div>
{replyMediaInfo?.type === "webpage" ? ( {replyMediaInfo?.type === "webpage" ? (
<span key={`fta-${index}`} className="file-thumb-reply"> <div key="enlarge-reply" className="img-container">
{reply.thumbnailUrl ? ( <span key={`fta-${index}`} className="file-thumb-reply">
{reply.thumbnailUrl ? (
<img key={`fti-${index}`}
src={reply.thumbnailUrl} alt="thumbnail"
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</span>
</div>
) : null}
{replyMediaInfo?.type === "image" ? (
<div key="enlarge-reply" className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply">
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={reply.thumbnailUrl} alt="thumbnail" src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={handleImageClick} onClick={handleImageClick}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} </span>
</span> </div>
) : null}
{replyMediaInfo?.type === "image" ? (
<span key={`fta-${index}`} className="file-thumb-reply">
<img key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null} ) : null}
{replyMediaInfo?.type === "video" ? ( {replyMediaInfo?.type === "video" ? (
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply">
@@ -773,27 +781,31 @@ const Thread = () => {
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
commentMediaInfo.type === "webpage" ? ( commentMediaInfo.type === "webpage" ? (
<div key={`mob-f-${comment.cid}`} className="file-mobile"> <div key={`mob-f-${comment.cid}`} className="file-mobile">
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile"> <div key="enlarge-reply-mob" className="img-container">
{comment.thumbnailUrl ? ( <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${comment.cid}`} {comment.thumbnailUrl ? (
src={comment.thumbnailUrl} alt={commentMediaInfo.type} <img key={`mob-img-${comment.cid}`}
onClick={handleImageClick} src={comment.thumbnailUrl} alt={commentMediaInfo.type}
style={{cursor: "pointer"}} onClick={handleImageClick}
onError={(e) => e.target.src = fallbackImgUrl} /> style={{cursor: "pointer"}}
) : null} onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div> ) : null}
</span> <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
</div> </div>
) : commentMediaInfo.type === "image" ? ( ) : commentMediaInfo.type === "image" ? (
<div key={`mob-f-${comment.cid}`} className="file-mobile"> <div key={`mob-f-${comment.cid}`} className="file-mobile">
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile"> <div key="enlarge-reply-mob" className="img-container">
<img key={`mob-img-${comment.cid}`} <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
src={commentMediaInfo.url} alt={commentMediaInfo.type} <img key={`mob-img-${comment.cid}`}
onClick={handleImageClick} src={commentMediaInfo.url} alt={commentMediaInfo.type}
style={{cursor: "pointer"}} onClick={handleImageClick}
onError={(e) => e.target.src = fallbackImgUrl} /> style={{cursor: "pointer"}}
<div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div> onError={(e) => e.target.src = fallbackImgUrl} />
</span> <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
</div> </div>
) : commentMediaInfo.type === "video" ? ( ) : commentMediaInfo.type === "video" ? (
<div key={`mob-f-${comment.cid}`} className="file-mobile"> <div key={`mob-f-${comment.cid}`} className="file-mobile">
@@ -889,6 +901,7 @@ const Thread = () => {
<div key={`mob-f-${reply.cid}`} className="file-mobile"> <div key={`mob-f-${reply.cid}`} className="file-mobile">
{replyMediaInfo?.url ? ( {replyMediaInfo?.url ? (
replyMediaInfo.type === "webpage" ? ( replyMediaInfo.type === "webpage" ? (
<div key="enlarge-reply-mob" className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
<img key={`mob-img-${reply.cid}`} <img key={`mob-img-${reply.cid}`}
@@ -899,7 +912,9 @@ const Thread = () => {
) : null} ) : null}
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div> <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span> </span>
</div>
) : replyMediaInfo.type === "image" ? ( ) : replyMediaInfo.type === "image" ? (
<div key="enlarge-reply-mob" className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${reply.cid}`} <img key={`mob-img-${reply.cid}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
@@ -908,6 +923,7 @@ const Thread = () => {
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div> <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span> </span>
</div>
) : replyMediaInfo.type === "video" ? ( ) : replyMediaInfo.type === "video" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<video key={`fti-${reply.cid}`} <video key={`fti-${reply.cid}`}
src/utils/handleImageClick.js
+8 -1
View File
@@ -1,5 +1,12 @@
const handleImageClick = (e) => { const handleImageClick = (e) => {
e.target.classList.toggle('enlarged'); const image = e.target;
const container = image.closest('.img-container');
image.classList.toggle('enlarged');
if (container) {
container.classList.toggle('expanded-container');
}
}; };
export default handleImageClick; export default handleImageClick;