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;
}
.enlarged {
@media (min-width: 480px) {
max-width: none !important;
max-height: none !important;
}
.expanded-container {
display: inline-block;
}
@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-height: 100% !important;
}
src/components/views/Board.jsx
+44 -28
View File
@@ -485,24 +485,28 @@ const Board = () => {
}</a>&nbsp;({commentMediaInfo?.type})
</div>
{commentMediaInfo?.type === "webpage" ? (
<span key={`fta-${index}`} className="file-thumb">
{thread.thumbnailUrl ? (
<div key={`enlarge-${index}`} className="img-container">
<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}`}
src={thread.thumbnailUrl} alt={commentMediaInfo.type}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</span>
) : 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>
</span>
</div>
) : null}
{commentMediaInfo?.type === "video" ? (
<span key={`fta-${index}`} className="file-thumb">
@@ -717,24 +721,28 @@ const Board = () => {
}</a>&nbsp;({replyMediaInfo?.type})
</div>
{replyMediaInfo?.type === "webpage" ? (
<span key={`fta-${index}`} className="file-thumb-reply">
{reply.thumbnailUrl ? (
<div key={`enlarge-reply-${index}`} className="img-container">
<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}`}
src={reply.thumbnailUrl} alt={replyMediaInfo.type}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</span>
) : 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>
</span>
</div>
) : null}
{replyMediaInfo?.type === "video" ? (
<span key={`fta-${index}`} className="file-thumb-reply">
@@ -848,6 +856,7 @@ const Board = () => {
<div key={`mob-f-${index}`} className="file-mobile">
{commentMediaInfo?.url ? (
commentMediaInfo.type === "webpage" ? (
<div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
{thread.thumbnailUrl ? (
<img key={`mob-img-${index}`}
@@ -858,7 +867,9 @@ const Board = () => {
) : null}
<div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span>
</div>
) : commentMediaInfo.type === "image" ? (
<div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
@@ -867,6 +878,7 @@ const Board = () => {
onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span>
</div>
) : commentMediaInfo.type === "video" ? (
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<video key={`fti-${index}`}
@@ -986,6 +998,7 @@ const Board = () => {
<div key={`mob-f-${index}`} className="file-mobile">
{replyMediaInfo?.url ? (
replyMediaInfo.type === "webpage" ? (
<div key={`enlarge-mob-reply-${index}`} className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
{reply.thumbnailUrl ? (
<img key={`mob-img-${index}`}
@@ -996,7 +1009,9 @@ const Board = () => {
) : null}
<div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
</div>
) : replyMediaInfo.type === "image" ? (
<div key={`enlarge-mob-reply-${index}`} className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
@@ -1005,6 +1020,7 @@ const Board = () => {
onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
</div>
) : replyMediaInfo.type === "video" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<video key={`fti-${index}`}
src/components/views/Thread.jsx
+63 -47
View File
@@ -465,24 +465,28 @@ const Thread = () => {
}</a>&nbsp;({commentMediaInfo?.type})
</div>
{commentMediaInfo?.type === "webpage" ? (
<span key={`fta-${comment.cid}`} className="file-thumb">
{comment.thumbnailUrl ? (
<img key={`fti-${index}`}
src={comment.thumbnailUrl} alt={commentMediaInfo.type}
<div key="enlarge" className="img-container">
<span key={`fta-${comment.cid}`} className="file-thumb">
{comment.thumbnailUrl ? (
<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}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</span>
) : 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>
</span>
</div>
) : null}
{commentMediaInfo?.type === "video" ? (
<span key={`fta-${comment.cid}`} className="file-thumb">
@@ -663,24 +667,28 @@ const Thread = () => {
}</a>&nbsp;({replyMediaInfo?.type})
</div>
{replyMediaInfo?.type === "webpage" ? (
<span key={`fta-${index}`} className="file-thumb-reply">
{reply.thumbnailUrl ? (
<div key="enlarge-reply" className="img-container">
<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}`}
src={reply.thumbnailUrl} alt="thumbnail"
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</span>
) : 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>
</span>
</div>
) : null}
{replyMediaInfo?.type === "video" ? (
<span key={`fta-${index}`} className="file-thumb-reply">
@@ -773,27 +781,31 @@ const Thread = () => {
{commentMediaInfo?.url ? (
commentMediaInfo.type === "webpage" ? (
<div key={`mob-f-${comment.cid}`} className="file-mobile">
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
{comment.thumbnailUrl ? (
<img key={`mob-img-${comment.cid}`}
src={comment.thumbnailUrl} alt={commentMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
<div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
<div key="enlarge-reply-mob" className="img-container">
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
{comment.thumbnailUrl ? (
<img key={`mob-img-${comment.cid}`}
src={comment.thumbnailUrl} alt={commentMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
<div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
</div>
) : commentMediaInfo.type === "image" ? (
<div key={`mob-f-${comment.cid}`} className="file-mobile">
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${comment.cid}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
<div key="enlarge-reply-mob" className="img-container">
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${comment.cid}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
</div>
) : commentMediaInfo.type === "video" ? (
<div key={`mob-f-${comment.cid}`} className="file-mobile">
@@ -889,6 +901,7 @@ const Thread = () => {
<div key={`mob-f-${reply.cid}`} className="file-mobile">
{replyMediaInfo?.url ? (
replyMediaInfo.type === "webpage" ? (
<div key="enlarge-reply-mob" className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
{reply.thumbnailUrl ? (
<img key={`mob-img-${reply.cid}`}
@@ -899,7 +912,9 @@ const Thread = () => {
) : null}
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
</div>
) : replyMediaInfo.type === "image" ? (
<div key="enlarge-reply-mob" className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${reply.cid}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
@@ -908,6 +923,7 @@ const Thread = () => {
onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
</div>
) : replyMediaInfo.type === "video" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<video key={`fti-${reply.cid}`}
src/utils/handleImageClick.js
+8 -1
View File
@@ -1,5 +1,12 @@
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;