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={`ft-${thread.cid}`} className="file-text">
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.slice(0, 30) + "(...)" :
commentMediaInfo?.url
@@ -579,7 +580,8 @@ const Board = () => {
style={{marginBottom: "5px"}}>
<div key={`ft-${reply.cid}`} className="reply-file-text">
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.slice(0, 30) + "(...)" :
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>
</span>
</div>
{commentMediaInfo?.url ? (
commentMediaInfo.type === "webpage" ? (
<div key={`mob-f-${thread.cid}`} className="file-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} />
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : commentMediaInfo.type === "image" ? (
<div key={`mob-f-${thread.cid}`} className="file-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} />
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : commentMediaInfo.type === "video" ? (
<div key={`mob-f-${thread.cid}`} className="file-mobile">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<video key={`fti-${thread.cid}`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
style={{ pointerEvents: "none" }}
onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : commentMediaInfo.type === "audio" ? (
<div key={`mob-f-${thread.cid}`} className="file-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} />
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : null
{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.type === "webpage" ? (
<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} />
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span>
) : commentMediaInfo.type === "image" ? (
<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} />
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span>
) : commentMediaInfo.type === "video" ? (
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<video key={`fti-${thread.cid}`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
style={{ pointerEvents: "none" }}
onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span>
) : commentMediaInfo.type === "audio" ? (
<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} />
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span>
) : null
) : null}
</a>
</div>
) : null}
{thread.content ? (
thread.content.length > 500 ?
@@ -751,7 +752,7 @@ const Board = () => {
: null}
</div>
<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>
</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>
</span>
</div>
{replyMediaInfo?.url ? (
replyMediaInfo.type === "webpage" ? (
<div key={`mob-f-${reply.cid}`} className="file-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} />
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
</div>
) : replyMediaInfo.type === "image" ? (
<div key={`mob-f-${reply.cid}`} className="file-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} />
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
</div>
) : replyMediaInfo.type === "video" ? (
<div key={`mob-f-${reply.cid}`} className="file-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}`}
src={replyMediaInfo.url}
alt={replyMediaInfo.type}
style={{ pointerEvents: "none" }}
onError={(e) => e.target.src = fallbackImgUrl} />
</a>
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
</div>
) : replyMediaInfo.type === "audio" ? (
<div key={`mob-f-${reply.cid}`} className="file-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} />
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
</div>
) : null
{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.type === "webpage" ? (
<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} />
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
) : replyMediaInfo.type === "image" ? (
<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} />
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
) : replyMediaInfo.type === "video" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<video key={`fti-${reply.cid}`}
src={replyMediaInfo.url}
alt={replyMediaInfo.type}
style={{ pointerEvents: "none" }}
onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
) : replyMediaInfo.type === "audio" ? (
<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} />
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
) : null
) : null}
</a>
</div>
) : null}
{reply.content ? (
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 {
margin-top: 5px;
font-size: 11pt;
font-size: 10pt;
}`;
case 'Tomorrow':
@@ -1585,6 +1585,7 @@ export const BoardForm = styled.div`
.op-container {
background-color: #f5e9e1;
border: 1px solid #d9bfb7 !important;
}
.post-info-mobile {
border-bottom: 1px solid #d9bfb7;
@@ -1645,7 +1646,6 @@ export const BoardForm = styled.div`
background-repeat: repeat-x;
text-decoration: none;
}
}
.reply-container {
background-color: #f0e0d6;
@@ -1702,6 +1702,7 @@ export const BoardForm = styled.div`
.op-container {
background-color: #d6daf0;
border: 1px solid #b7c5d9 !important;
}
.post-info-mobile {
border-bottom: 1px solid #b7c5d9;
@@ -1762,7 +1763,6 @@ export const BoardForm = styled.div`
background-repeat: repeat-x;
text-decoration: none;
}
}
.reply-container {
background-color: #d6daf0;
@@ -1815,6 +1815,7 @@ export const BoardForm = styled.div`
.op-container {
background-color: #f5e9e1;
border: 1px solid #d9bfb7 !important;
}
.post-info-mobile {
border-bottom: 1px solid #d9bfb7;
@@ -1875,7 +1876,6 @@ export const BoardForm = styled.div`
background-repeat: repeat-x;
text-decoration: none;
}
}
.reply-container {
background-color: #f0e0d6;
@@ -1931,6 +1931,7 @@ export const BoardForm = styled.div`
.op-container {
background-color: #d6daf0;
border: 1px solid #b7c5d9 !important;
}
.post-info-mobile {
border-bottom: 1px solid #b7c5d9;
@@ -1991,7 +1992,6 @@ export const BoardForm = styled.div`
background-repeat: repeat-x;
text-decoration: none;
}
}
.reply-container {
background-color: #d6daf0;
@@ -2043,6 +2043,7 @@ export const BoardForm = styled.div`
.op-container {
background-color: #282A2E;
border: 1px solid #2D2F33 !important;
}
.post-info-mobile {
border-bottom: 1px solid #2D2F33;
@@ -2108,7 +2109,6 @@ export const BoardForm = styled.div`
background-repeat: repeat-x;
text-decoration: none;
}
}
.reply-container {
background-color: #f0e0d6;
@@ -2165,67 +2165,67 @@ export const BoardForm = styled.div`
.op-container {
background-color: #eee;
border: 1px solid #ccc !important;
}
.post-info-mobile {
border-bottom: 1px solid #ccc;
background-color: #ddd;
}
.post-menu-button-mobile {
color: #f60 !important;
}
.name-mobile {
color: #004a99;
font-weight: 700;
}
.subject-mobile {
color: #111;
font-weight: 700;
}
.date-time-mobile {
color: #333;
.post-info-mobile {
border-bottom: 1px solid #ccc;
background-color: #ddd;
}
.post-menu-button-mobile {
color: #f60 !important;
}
.name-mobile {
color: #004a99;
font-weight: 700;
}
.subject-mobile {
color: #111;
font-weight: 700;
}
.date-time-mobile {
color: #333;
a {
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 {
a {
text-decoration: none;
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;
}
}
.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;
}
.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 {