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 enlarge image effect to mobile views

Browse Source
This commit is contained in:
Tom
2023-04-29 17:54:25 +02:00
parent 756a53dd29
commit 638d9ac2ff
3 changed files with 60 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+9 -4
View File
@@ -56,10 +56,15 @@ const GlobalStyle = createGlobalStyle`
} }
.enlarged { .enlarged {
max-width: none !important; @media (min-width: 480px) {
max-height: none !important; max-width: none !important;
width: auto !important; max-height: none !important;
height: auto !important; }
@media (max-width: 480px) {
max-width: 100% !important;
max-height: 100% !important;
}
} }
`; `;
src/components/views/Board.jsx
+18 -10
View File
@@ -846,14 +846,14 @@ const Board = () => {
</div> </div>
{thread.link ? ( {thread.link ? (
<div key={`mob-f-${index}`} className="file-mobile"> <div key={`mob-f-${index}`} className="file-mobile">
<a key={`link-a-${index}`} href={commentMediaInfo?.url} target="_blank"
rel="noopener noreferrer">
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
commentMediaInfo.type === "webpage" ? ( commentMediaInfo.type === "webpage" ? (
<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}`}
src={thread.thumbnailUrl} alt="thumbnail" src={thread.thumbnailUrl} alt="thumbnail"
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : 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>
@@ -862,6 +862,8 @@ const Board = () => {
<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}
onClick={handleImageClick}
style={{cursor: "pointer"}}
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>
@@ -882,7 +884,6 @@ const Board = () => {
</span> </span>
) : null ) : null
) : null} ) : null}
</a>
</div> </div>
) : null} ) : null}
{thread.content ? ( {thread.content ? (
@@ -983,37 +984,44 @@ const Board = () => {
</div> </div>
{reply.link ? ( {reply.link ? (
<div key={`mob-f-${index}`} className="file-mobile"> <div key={`mob-f-${index}`} className="file-mobile">
<a key={`link-a-${index}`} href={replyMediaInfo?.url} target="_blank" rel="noopener noreferrer">
{replyMediaInfo?.url ? ( {replyMediaInfo?.url ? (
replyMediaInfo.type === "webpage" ? ( replyMediaInfo.type === "webpage" ? (
<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}`} src={reply.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} /> <img key={`mob-img-${index}`}
src={reply.thumbnailUrl} alt="thumbnail"
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : 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>
) : replyMediaInfo.type === "image" ? ( ) : replyMediaInfo.type === "image" ? (
<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}`} src={replyMediaInfo.url} alt={replyMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <img key={`mob-img-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
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>
) : 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={replyMediaInfo.url} src={replyMediaInfo.url} alt={replyMediaInfo.type}
alt={replyMediaInfo.type}
style={{ pointerEvents: "none" }} style={{ pointerEvents: "none" }}
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>
) : replyMediaInfo.type === "audio" ? ( ) : replyMediaInfo.type === "audio" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<audio key={`mob-img-${index}`} src={replyMediaInfo.url} alt={replyMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <audio key={`mob-img-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
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>
) : null ) : null
) : null} ) : null}
</a>
</div> </div>
) : null} ) : null}
{reply.content ? ( {reply.content ? (
src/components/views/Thread.jsx
+33 -14
View File
@@ -775,7 +775,11 @@ const Thread = () => {
<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"> <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
{comment.thumbnailUrl ? ( {comment.thumbnailUrl ? (
<img key={`mob-img-${comment.cid}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} /> <img key={`mob-img-${comment.cid}`}
src={comment.thumbnailUrl} alt={commentMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
<div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div> <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span> </span>
@@ -783,21 +787,29 @@ const Thread = () => {
) : 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"> <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <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> <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span> </span>
</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">
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
<video controls key={`mob-img-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <video controls key={`mob-img-${comment.cid}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div> <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span> </span>
</div> </div>
) : commentMediaInfo.type === "audio" ? ( ) : commentMediaInfo.type === "audio" ? (
<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"> <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
<audio controls key={`mob-img-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <audio controls key={`mob-img-${comment.cid}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div> <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span> </span>
</div> </div>
@@ -875,37 +887,44 @@ const Thread = () => {
</div> </div>
{reply.link ? ( {reply.link ? (
<div key={`mob-f-${reply.cid}`} className="file-mobile"> <div key={`mob-f-${reply.cid}`} className="file-mobile">
<a key={`link-a-${reply.cid}`} href={replyMediaInfo?.url} target="_blank" rel="noopener noreferrer">
{replyMediaInfo?.url ? ( {replyMediaInfo?.url ? (
replyMediaInfo.type === "webpage" ? ( replyMediaInfo.type === "webpage" ? (
<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}`} src={reply.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} /> <img key={`mob-img-${reply.cid}`}
src={reply.thumbnailUrl} alt={replyMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : 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>
) : replyMediaInfo.type === "image" ? ( ) : replyMediaInfo.type === "image" ? (
<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}`} src={replyMediaInfo.url} alt={replyMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <img key={`mob-img-${reply.cid}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
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>
) : 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={replyMediaInfo.url} src={replyMediaInfo.url} alt={replyMediaInfo.type}
alt={replyMediaInfo.type} style={{ pointerEvents: "none" }}
style={{ pointerEvents: "none" }} 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>
) : replyMediaInfo.type === "audio" ? ( ) : replyMediaInfo.type === "audio" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<audio key={`mob-img-${reply.cid}`} src={replyMediaInfo.url} alt={replyMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <audio key={`mob-img-${reply.cid}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
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>
) : null ) : null
) : null} ) : null}
</a>
</div> </div>
) : null} ) : null}
<blockquote key={`mob-pm-${index}`} className="post-message-mobile"> <blockquote key={`mob-pm-${index}`} className="post-message-mobile">