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

added media anchors on mobile

Browse Source
This commit is contained in:
plebbitor
2023-03-29 22:02:44 +02:00
parent 15f4a200b0
commit 2db2aa545d
2 changed files with 133 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+22 -25
View File
@@ -399,7 +399,8 @@ const Board = () => {
<div key={`f-${thread.cid}`} className="file" style={{marginBottom: "5px"}}> <div key={`f-${thread.cid}`} className="file" style={{marginBottom: "5px"}}>
<div key={`ft-${thread.cid}`} className="file-text"> <div key={`ft-${thread.cid}`} className="file-text">
Link:&nbsp; Link:&nbsp;
<a key={`fa-${thread.cid}`} href={commentMediaInfo.url} target="_blank">{ <a key={`fa-${thread.cid}`} href={commentMediaInfo.url} target="_blank"
rel="noopener noreferrer">{
commentMediaInfo?.url.length > 30 ? commentMediaInfo?.url.length > 30 ?
commentMediaInfo?.url.slice(0, 30) + "(...)" : commentMediaInfo?.url.slice(0, 30) + "(...)" :
commentMediaInfo?.url commentMediaInfo?.url
@@ -579,7 +580,8 @@ const Board = () => {
style={{marginBottom: "5px"}}> style={{marginBottom: "5px"}}>
<div key={`ft-${reply.cid}`} className="reply-file-text"> <div key={`ft-${reply.cid}`} className="reply-file-text">
Link:&nbsp; Link:&nbsp;
<a key={`fa-${reply.cid}`} href={replyMediaInfo.url} target="_blank">{ <a key={`fa-${reply.cid}`} href={replyMediaInfo.url} target="_blank"
rel="noopener noreferrer">{
replyMediaInfo?.url.length > 30 ? replyMediaInfo?.url.length > 30 ?
replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url replyMediaInfo?.url
@@ -698,41 +700,40 @@ const Board = () => {
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no2-${thread.cid}`} onClick={handleReplyOpen} title="Reply to this post">{thread.cid.slice(0, 8)}</button> <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no2-${thread.cid}`} onClick={handleReplyOpen} title="Reply to this post">{thread.cid.slice(0, 8)}</button>
</span> </span>
</div> </div>
{thread.link ? (
<div key={`mob-f-${thread.cid}`} className="file-mobile">
<a key={`link-a-${thread.cid}`} href={commentMediaInfo?.url} target="_blank"
rel="noopener noreferrer">
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
commentMediaInfo.type === "webpage" ? ( commentMediaInfo.type === "webpage" ? (
<div key={`mob-f-${thread.cid}`} className="file-mobile">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${thread.cid}`} src={thread.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} /> <img key={`mob-img-${thread.cid}`} src={thread.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div> <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span> </span>
</div>
) : commentMediaInfo.type === "image" ? ( ) : commentMediaInfo.type === "image" ? (
<div key={`mob-f-${thread.cid}`} className="file-mobile">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <img key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div> <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span> </span>
</div>
) : commentMediaInfo.type === "video" ? ( ) : commentMediaInfo.type === "video" ? (
<div key={`mob-f-${thread.cid}`} className="file-mobile">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<video key={`fti-${thread.cid}`} <video key={`fti-${thread.cid}`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
alt={commentMediaInfo.type} alt={commentMediaInfo.type}
style={{ pointerEvents: "none" }} style={{ pointerEvents: "none" }}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div> <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span> </span>
</div>
) : commentMediaInfo.type === "audio" ? ( ) : commentMediaInfo.type === "audio" ? (
<div key={`mob-f-${thread.cid}`} className="file-mobile">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<audio key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <audio key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div> <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span> </span>
</div>
) : null ) : null
) : null} ) : null}
</a>
</div>
) : null}
{thread.content ? ( {thread.content ? (
thread.content.length > 500 ? thread.content.length > 500 ?
<Fragment key={`fragment12-${thread.cid}`}> <Fragment key={`fragment12-${thread.cid}`}>
@@ -751,7 +752,7 @@ const Board = () => {
: null} : null}
</div> </div>
<div key={`mob-pl-${thread.cid}`} className="post-link-mobile"> <div key={`mob-pl-${thread.cid}`} className="post-link-mobile">
<span key={`mob-info-${thread.cid}`} className="info-mobile">{thread.replyCount} Replies / ? Images</span> <span key={`mob-info-${thread.cid}`} className="info-mobile">{thread.replyCount} Replies</span>
<Link key={`rl2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="button-mobile" >View Thread</Link> <Link key={`rl2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="button-mobile" >View Thread</Link>
</div> </div>
</div> </div>
@@ -793,43 +794,39 @@ const Board = () => {
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${reply.cid}`} onClick={handleReplyOpen} title="Reply to this post">{reply.cid.slice(0, 8)}</button> <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${reply.cid}`} onClick={handleReplyOpen} title="Reply to this post">{reply.cid.slice(0, 8)}</button>
</span> </span>
</div> </div>
{reply.link ? (
<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" ? (
<div key={`mob-f-${reply.cid}`} className="file-mobile">
<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={reply.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} /> <img key={`mob-img-${reply.cid}`} src={reply.thumbnailUrl} alt="thumbnail" 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 === "image" ? ( ) : replyMediaInfo.type === "image" ? (
<div key={`mob-f-${reply.cid}`} className="file-mobile">
<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} 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" ? (
<div key={`mob-f-${reply.cid}`} className="file-mobile">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<a href={replyMediaInfo.url} target="_blank" rel="noopener noreferrer">
<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} />
</a>
<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 === "audio" ? ( ) : replyMediaInfo.type === "audio" ? (
<div key={`mob-f-${reply.cid}`} className="file-mobile">
<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>
</div>
) : null ) : null
) : null} ) : null}
</a>
</div>
) : null}
{reply.content ? ( {reply.content ? (
reply.content.length > 500 ? reply.content.length > 500 ?
<Fragment key={`fragment15-${reply.cid}`}> <Fragment key={`fragment15-${reply.cid}`}>
src/components/views/styles/Board.styled.jsx
+7 -7
View File
@@ -340,7 +340,7 @@ export const Header = styled.div`
.board-address { .board-address {
margin-top: 5px; margin-top: 5px;
font-size: 11pt; font-size: 10pt;
}`; }`;
case 'Tomorrow': case 'Tomorrow':
@@ -1585,6 +1585,7 @@ export const BoardForm = styled.div`
.op-container { .op-container {
background-color: #f5e9e1; background-color: #f5e9e1;
border: 1px solid #d9bfb7 !important; border: 1px solid #d9bfb7 !important;
}
.post-info-mobile { .post-info-mobile {
border-bottom: 1px solid #d9bfb7; border-bottom: 1px solid #d9bfb7;
@@ -1645,7 +1646,6 @@ export const BoardForm = styled.div`
background-repeat: repeat-x; background-repeat: repeat-x;
text-decoration: none; text-decoration: none;
} }
}
.reply-container { .reply-container {
background-color: #f0e0d6; background-color: #f0e0d6;
@@ -1702,6 +1702,7 @@ export const BoardForm = styled.div`
.op-container { .op-container {
background-color: #d6daf0; background-color: #d6daf0;
border: 1px solid #b7c5d9 !important; border: 1px solid #b7c5d9 !important;
}
.post-info-mobile { .post-info-mobile {
border-bottom: 1px solid #b7c5d9; border-bottom: 1px solid #b7c5d9;
@@ -1762,7 +1763,6 @@ export const BoardForm = styled.div`
background-repeat: repeat-x; background-repeat: repeat-x;
text-decoration: none; text-decoration: none;
} }
}
.reply-container { .reply-container {
background-color: #d6daf0; background-color: #d6daf0;
@@ -1815,6 +1815,7 @@ export const BoardForm = styled.div`
.op-container { .op-container {
background-color: #f5e9e1; background-color: #f5e9e1;
border: 1px solid #d9bfb7 !important; border: 1px solid #d9bfb7 !important;
}
.post-info-mobile { .post-info-mobile {
border-bottom: 1px solid #d9bfb7; border-bottom: 1px solid #d9bfb7;
@@ -1875,7 +1876,6 @@ export const BoardForm = styled.div`
background-repeat: repeat-x; background-repeat: repeat-x;
text-decoration: none; text-decoration: none;
} }
}
.reply-container { .reply-container {
background-color: #f0e0d6; background-color: #f0e0d6;
@@ -1931,6 +1931,7 @@ export const BoardForm = styled.div`
.op-container { .op-container {
background-color: #d6daf0; background-color: #d6daf0;
border: 1px solid #b7c5d9 !important; border: 1px solid #b7c5d9 !important;
}
.post-info-mobile { .post-info-mobile {
border-bottom: 1px solid #b7c5d9; border-bottom: 1px solid #b7c5d9;
@@ -1991,7 +1992,6 @@ export const BoardForm = styled.div`
background-repeat: repeat-x; background-repeat: repeat-x;
text-decoration: none; text-decoration: none;
} }
}
.reply-container { .reply-container {
background-color: #d6daf0; background-color: #d6daf0;
@@ -2043,6 +2043,7 @@ export const BoardForm = styled.div`
.op-container { .op-container {
background-color: #282A2E; background-color: #282A2E;
border: 1px solid #2D2F33 !important; border: 1px solid #2D2F33 !important;
}
.post-info-mobile { .post-info-mobile {
border-bottom: 1px solid #2D2F33; border-bottom: 1px solid #2D2F33;
@@ -2108,7 +2109,6 @@ export const BoardForm = styled.div`
background-repeat: repeat-x; background-repeat: repeat-x;
text-decoration: none; text-decoration: none;
} }
}
.reply-container { .reply-container {
background-color: #f0e0d6; background-color: #f0e0d6;
@@ -2165,6 +2165,7 @@ export const BoardForm = styled.div`
.op-container { .op-container {
background-color: #eee; background-color: #eee;
border: 1px solid #ccc !important; border: 1px solid #ccc !important;
}
.post-info-mobile { .post-info-mobile {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
@@ -2226,7 +2227,6 @@ export const BoardForm = styled.div`
background-repeat: repeat-x; background-repeat: repeat-x;
cursor: pointer; cursor: pointer;
} }
}
.reply-container { .reply-container {
background-color: #eee; background-color: #eee;