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

fix SubscriptionsCatalog links, footer, styling

Browse Source
This commit is contained in:
Tom
2023-05-13 17:43:13 +02:00
parent e34fe0a01d
commit dabe947eab
4 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styled/Board.styled.jsx
+1 -1
View File
@@ -427,7 +427,7 @@ export const Header = styled.div`
.offline { .offline {
width: 16px; width: 16px;
position: relative; position: relative;
margin: 2px 2px -4px 2px; margin: 2px 2px -2px 2px;
} }
`; `;
src/components/styled/Catalog.styled.jsx
+2 -2
View File
@@ -23,7 +23,7 @@ export const Threads = styled.div`
max-height: 150px; max-height: 150px;
} }
img { .card {
display: inline; display: inline;
margin: auto; margin: auto;
box-shadow: 0 0 5px rgba(0, 0, 0, .25); box-shadow: 0 0 5px rgba(0, 0, 0, .25);
@@ -45,7 +45,7 @@ export const Threads = styled.div`
} }
.offline-icon-no-link { .offline-icon-no-link {
height: 13px; height: 11px;
position: absolute; position: absolute;
margin-left: 13px; margin-left: 13px;
margin-top: -2px; margin-top: -2px;
src/components/views/Catalog.jsx
+4 -4
View File
@@ -477,7 +477,7 @@ const Catalog = () => {
<Fragment key="f-catalog"> <Fragment key="f-catalog">
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? ( thread.thumbnailUrl ? (
<img key={`img-${index}`} <img className="card" key={`img-${index}`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => { onError={(e) => {
e.target.src = fallbackImgUrl e.target.src = fallbackImgUrl
@@ -486,21 +486,21 @@ const Catalog = () => {
) : null ) : null
) : null} ) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === "image" ? (
<img key={`img-${index}`} <img className="card" key={`img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => { onError={(e) => {
e.target.src = fallbackImgUrl e.target.src = fallbackImgUrl
e.target.onerror = null;}} /> e.target.onerror = null;}} />
) : null} ) : null}
{commentMediaInfo?.type === "video" ? ( {commentMediaInfo?.type === "video" ? (
<video key={`fti-${index}`} <video className="card" key={`fti-${index}`}
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} />
) : null} ) : null}
{commentMediaInfo?.type === "audio" ? ( {commentMediaInfo?.type === "audio" ? (
<audio controls <audio className="card" controls
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
alt={commentMediaInfo.type} alt={commentMediaInfo.type}
src/components/views/SubscriptionsCatalog.jsx
+13 -13
View File
@@ -214,14 +214,14 @@ const SubscriptionsCatalog = () => {
const commentMediaInfo = getCommentMediaInfo(thread); const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
return ( return (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} <Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => {setSelectedThread(thread.cid); window.scrollTo(0, 0);}}> onClick={() => {setSelectedThread(thread.cid); window.scrollTo(0, 0);}}>
<div key={`thread-${index}`} className="thread"> <div key={`thread-${index}`} className="thread">
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
<Fragment key="f-catalog"> <Fragment key="f-catalog">
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? ( thread.thumbnailUrl ? (
<img key={`img-${index}`} <img className="card" key={`img-${index}`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => { onError={(e) => {
e.target.src = fallbackImgUrl e.target.src = fallbackImgUrl
@@ -230,21 +230,21 @@ const SubscriptionsCatalog = () => {
) : null ) : null
) : null} ) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === "image" ? (
<img key={`img-${index}`} <img className="card" key={`img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => { onError={(e) => {
e.target.src = fallbackImgUrl e.target.src = fallbackImgUrl
e.target.onerror = null;}} /> e.target.onerror = null;}} />
) : null} ) : null}
{commentMediaInfo?.type === "video" ? ( {commentMediaInfo?.type === "video" ? (
<video key={`fti-${index}`} <video className="card" key={`fti-${index}`}
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} />
) : null} ) : null}
{commentMediaInfo?.type === "audio" ? ( {commentMediaInfo?.type === "audio" ? (
<audio controls <audio className="card" controls
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
alt={commentMediaInfo.type} alt={commentMediaInfo.type}
@@ -254,14 +254,18 @@ const SubscriptionsCatalog = () => {
</Fragment> </Fragment>
) : null} ) : null}
<div key={`ti-${index}`} className="thread-icons" > <div key={`ti-${index}`} className="thread-icons" >
{thread.link ? ( {(commentMediaInfo && (
// <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky"></span> */ commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
// <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky" /> */
<OfflineIndicator <OfflineIndicator
address={thread.subplebbitAddress} address={thread.subplebbitAddress}
className="thread-icon offline-icon" className="thread-icon offline-icon"
tooltipPlace="top" /> tooltipPlace="top" />
) : ( ) : (
// <span key={`si-${index}`} className="thread-icon sticky-icon-no-link" title="Sticky"></span> */ // <span key={`si-${index}`} className="thread-icon sticky-icon-no-link" title="Sticky" /> */
<OfflineIndicator <OfflineIndicator
address={thread.subplebbitAddress} address={thread.subplebbitAddress}
className="thread-icon offline-icon-no-link" className="thread-icon offline-icon-no-link"
@@ -318,10 +322,6 @@ const SubscriptionsCatalog = () => {
{index === 0 ? null : "\u00a0"} {index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)} <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link> >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
<OfflineIndicator
address={subplebbit.address}
className="offline-nav"
tooltipPlace="bottom" />
{index !== defaultSubplebbits.length - 1 ? " /" : null} {index !== defaultSubplebbits.length - 1 ? " /" : null}
</span> </span>
))} ))}
@@ -336,7 +336,7 @@ const SubscriptionsCatalog = () => {
}>Create Board</button> }>Create Board</button>
] ]
[ [
<Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link> <Link to={`/p/subscriptions/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
] ]
[ [
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}} <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}