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
+70 -73
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,40 +700,39 @@ 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>
{commentMediaInfo?.url ? ( {thread.link ? (
commentMediaInfo.type === "webpage" ? ( <div key={`mob-f-${thread.cid}`} className="file-mobile">
<div key={`mob-f-${thread.cid}`} className="file-mobile"> <a key={`link-a-${thread.cid}`} href={commentMediaInfo?.url} target="_blank"
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> rel="noopener noreferrer">
<img key={`mob-img-${thread.cid}`} src={thread.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} /> {commentMediaInfo?.url ? (
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div> commentMediaInfo.type === "webpage" ? (
</span> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
</div> <img key={`mob-img-${thread.cid}`} src={thread.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
) : commentMediaInfo.type === "image" ? ( <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
<div key={`mob-f-${thread.cid}`} className="file-mobile"> </span>
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> ) : commentMediaInfo.type === "image" ? (
<img key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div> <img key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
</span> <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</div> </span>
) : 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> ) : commentMediaInfo.type === "audio" ? (
</div> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
) : commentMediaInfo.type === "audio" ? ( <audio key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-f-${thread.cid}`} className="file-mobile"> <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> </span>
<audio key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> ) : null
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div> ) : null}
</span> </a>
</div> </div>
) : null
) : null} ) : null}
{thread.content ? ( {thread.content ? (
thread.content.length > 500 ? thread.content.length > 500 ?
@@ -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,42 +794,38 @@ 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>
{replyMediaInfo?.url ? ( {reply.link ? (
replyMediaInfo.type === "webpage" ? ( <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">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> {replyMediaInfo?.url ? (
<img key={`mob-img-${reply.cid}`} src={reply.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} /> replyMediaInfo.type === "webpage" ? (
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
</span> <img key={`mob-img-${reply.cid}`} src={reply.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
</div> <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
) : replyMediaInfo.type === "image" ? ( </span>
<div key={`mob-f-${reply.cid}`} className="file-mobile"> ) : 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} 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">
<div key={`mob-f-${reply.cid}`} className="file-mobile"> <video key={`fti-${reply.cid}`}
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> src={replyMediaInfo.url}
<a href={replyMediaInfo.url} target="_blank" rel="noopener noreferrer"> alt={replyMediaInfo.type}
<video key={`fti-${reply.cid}`} style={{ pointerEvents: "none" }}
src={replyMediaInfo.url} onError={(e) => e.target.src = fallbackImgUrl} />
alt={replyMediaInfo.type} <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
style={{ pointerEvents: "none" }} </span>
onError={(e) => e.target.src = fallbackImgUrl} /> ) : replyMediaInfo.type === "audio" ? (
</a> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div> <audio key={`mob-img-${reply.cid}`} src={replyMediaInfo.url} alt={replyMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
</span> <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</div> </span>
) : replyMediaInfo.type === "audio" ? ( ) : null
<div key={`mob-f-${reply.cid}`} className="file-mobile"> ) : null}
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> </a>
<audio key={`mob-img-${reply.cid}`} src={replyMediaInfo.url} alt={replyMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> </div>
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
</div>
) : null
) : null} ) : null}
{reply.content ? ( {reply.content ? (
reply.content.length > 500 ? reply.content.length > 500 ?
src/components/views/styles/Board.styled.jsx
+63 -63
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,67 +2165,67 @@ 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;
background-color: #ddd; background-color: #ddd;
} }
.post-menu-button-mobile { .post-menu-button-mobile {
color: #f60 !important; color: #f60 !important;
} }
.name-mobile { .name-mobile {
color: #004a99; color: #004a99;
font-weight: 700; font-weight: 700;
} }
.subject-mobile { .subject-mobile {
color: #111; color: #111;
font-weight: 700; font-weight: 700;
} }
.date-time-mobile { .date-time-mobile {
color: #333; color: #333;
a { a {
text-decoration: none; text-decoration: none;
color: #333;
}
}
.file-thumb-mobile {
color: #f60 !important;
}
.file-info-mobile {
color: #707070;
font-size: 9pt !important;
}
blockquote {
font-size: 11pt;
}
.post-link-mobile {
background-color: #ddd;
border-top: 1px solid #ccc;
}
.info-mobile {
color: #333; color: #333;
} }
}
.button-mobile {
background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(224, 224, 224, 1) 100%); .file-thumb-mobile {
border: 1px solid #ccc; color: #f60 !important;
color: #333; }
border-radius: 3px 3px 3px 3px;
font-weight: 700; .file-info-mobile {
padding: 6px 10px 5px; color: #707070;
background-repeat: repeat-x; font-size: 9pt !important;
cursor: pointer; }
}
blockquote {
font-size: 11pt;
}
.post-link-mobile {
background-color: #ddd;
border-top: 1px solid #ccc;
}
.info-mobile {
color: #333;
}
.button-mobile {
background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(224, 224, 224, 1) 100%);
border: 1px solid #ccc;
color: #333;
border-radius: 3px 3px 3px 3px;
font-weight: 700;
padding: 6px 10px 5px;
background-repeat: repeat-x;
cursor: pointer;
} }
.reply-container { .reply-container {