mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
add reply quotelink, update mobile themes
This commit is contained in:
plebeius.eth
@@ -1,5 +1,5 @@
|
||||
.thumbnailBig {
|
||||
background-color: var(--post-thumbnail-background-color);
|
||||
background-color: var(--media-thumbnail-background-color);
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
margin: 3px 20px 5px 0;
|
||||
@@ -9,7 +9,7 @@
|
||||
}
|
||||
|
||||
.thumbnailSmall {
|
||||
background-color: var(--post-thumbnail-background-color);
|
||||
background-color: var(--media-thumbnail-background-color);
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
margin: 3px 10px 5px 5px;
|
||||
|
||||
@@ -202,7 +202,9 @@
|
||||
.postMobile .postInfo {
|
||||
overflow: hidden;
|
||||
border-bottom: var(--post-mobile-info-border-bottom);
|
||||
border-top: var(--post-mobile-info-border-top);
|
||||
background-color: var(--post-mobile-info-background-color);
|
||||
color: var(--post-mobile-info-text-color);
|
||||
padding: 5px;
|
||||
clear: left;
|
||||
}
|
||||
@@ -303,12 +305,23 @@
|
||||
padding: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.quoteLink {
|
||||
color: var(--post-quotelink-text-color);
|
||||
text-decoration: var(--post-quotelink-text-decoration);
|
||||
}
|
||||
|
||||
.quoteLink:hover {
|
||||
color: var(--post-quotelink-text-color-hover);
|
||||
text-decoration: var(--post-quotelink-text-decoration-hover);
|
||||
}
|
||||
|
||||
.replyMobile {
|
||||
padding-top: 7px;
|
||||
}
|
||||
|
||||
.replyMobile .replyContainer {
|
||||
background-color: var(--post-mobile-background-color);
|
||||
border-bottom: var(--post-mobile-border-bottom);
|
||||
}
|
||||
|
||||
/* clearfix to the container of the floatied elements to contain them */
|
||||
@@ -320,8 +333,10 @@
|
||||
|
||||
.replyMobile .postInfo {
|
||||
padding: 5px;
|
||||
border-top: var(--post-mobile-info-border-top);
|
||||
border-bottom: var(--post-mobile-info-border-bottom);
|
||||
background-color: var(--post-mobile-info-background-color);
|
||||
color: var(--post-mobile-info-text-color);
|
||||
}
|
||||
|
||||
.replyMobile .postInfo .postMenuBtn {
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Comment } from '@plebbit/plebbit-react-hooks';
|
||||
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
|
||||
import { getCommentMediaInfoMemoized, getHasThumbnail } from '../../lib/utils/media-utils';
|
||||
import { getFormattedDate } from '../../lib/utils/time-utils';
|
||||
import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
|
||||
@@ -12,13 +13,15 @@ import Media from '../media';
|
||||
|
||||
const ReplyDesktop = ({ reply }: Comment) => {
|
||||
const { t } = useTranslation();
|
||||
const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {};
|
||||
const { author, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, subplebbitAddress, timestamp } = reply || {};
|
||||
const { displayName, shortAddress } = author || {};
|
||||
|
||||
const commentMediaInfo = getCommentMediaInfoMemoized(reply);
|
||||
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
|
||||
const [showThumbnail, setShowThumbnail] = useState(true);
|
||||
|
||||
const isReplyingToReply = postCid !== parentCid;
|
||||
|
||||
return (
|
||||
<div className={styles.replyDesktop}>
|
||||
<div className={styles.sideArrows}>{'>>'}</div>
|
||||
@@ -54,7 +57,7 @@ const ReplyDesktop = ({ reply }: Comment) => {
|
||||
<div className={styles.fileText}>
|
||||
{t('link')}:{' '}
|
||||
<a href={link} target='_blank' rel='noopener noreferrer'>
|
||||
{link.length > 30 ? link.slice(0, 30) + '...' : link}
|
||||
{link.length > 30 ? link?.slice(0, 30) + '...' : link}
|
||||
</a>
|
||||
{!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video') && (
|
||||
<span>
|
||||
@@ -82,6 +85,14 @@ const ReplyDesktop = ({ reply }: Comment) => {
|
||||
)}
|
||||
{content && (
|
||||
<blockquote className={styles.postMessage}>
|
||||
{isReplyingToReply && (
|
||||
<>
|
||||
<Link to={`/p/${subplebbitAddress}/c/${parentCid}`} className={styles.quoteLink}>
|
||||
{`c/${Plebbit.getShortCid(parentCid)}`}
|
||||
</Link>
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
<Markdown content={content} />
|
||||
</blockquote>
|
||||
)}
|
||||
@@ -94,8 +105,8 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
|
||||
const { t } = useTranslation();
|
||||
const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
|
||||
const { displayName, shortAddress } = author || {};
|
||||
const displayTitle = title && title.length > 75 ? title.slice(0, 75) + '...' : title;
|
||||
const displayContent = content && content.length > 1000 ? content.slice(0, 1000) + '(...)' : content;
|
||||
const displayTitle = title && title.length > 75 ? title?.slice(0, 75) + '...' : title;
|
||||
const displayContent = content && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content;
|
||||
|
||||
const commentMediaInfo = getCommentMediaInfoMemoized(post);
|
||||
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
|
||||
@@ -120,7 +131,7 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
|
||||
<div className={styles.fileText}>
|
||||
{t('link')}:{' '}
|
||||
<a href={commentMediaInfo?.url} target='_blank' rel='noopener noreferrer'>
|
||||
{commentMediaInfo.url.length > 30 ? commentMediaInfo?.url.slice(0, 30) + '...' : commentMediaInfo?.url}
|
||||
{commentMediaInfo.url.length > 30 ? commentMediaInfo?.url?.slice(0, 30) + '...' : commentMediaInfo?.url}
|
||||
</a>{' '}
|
||||
({commentMediaInfo?.type})
|
||||
{!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video') && (
|
||||
@@ -204,7 +215,7 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
|
||||
</span>
|
||||
)}
|
||||
{!pinned &&
|
||||
replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
|
||||
replies?.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
|
||||
<div key={reply.cid} className={styles.replyContainer}>
|
||||
<ReplyDesktop index={index} reply={reply} />
|
||||
</div>
|
||||
@@ -214,13 +225,15 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
|
||||
};
|
||||
|
||||
const ReplyMobile = ({ reply }: Comment) => {
|
||||
const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {};
|
||||
const { author, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, subplebbitAddress, timestamp } = reply || {};
|
||||
const { displayName, shortAddress } = author || {};
|
||||
|
||||
const commentMediaInfo = getCommentMediaInfoMemoized(reply);
|
||||
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
|
||||
const [showThumbnail, setShowThumbnail] = useState(true);
|
||||
|
||||
const isReplyingToReply = postCid !== parentCid;
|
||||
|
||||
return (
|
||||
<div className={styles.replyMobile}>
|
||||
<div className={styles.reply}>
|
||||
@@ -247,9 +260,19 @@ const ReplyMobile = ({ reply }: Comment) => {
|
||||
setShowThumbnail={setShowThumbnail}
|
||||
/>
|
||||
)}
|
||||
<blockquote className={styles.postMessage}>
|
||||
<Markdown content={content} />
|
||||
</blockquote>
|
||||
{content && (
|
||||
<blockquote className={styles.postMessage}>
|
||||
{isReplyingToReply && (
|
||||
<>
|
||||
<Link to={`/p/${subplebbitAddress}/c/${parentCid}`} className={styles.quoteLink}>
|
||||
{`c/${Plebbit.getShortCid(parentCid)}`}
|
||||
</Link>
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
<Markdown content={content} />
|
||||
</blockquote>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -260,8 +283,8 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b
|
||||
const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
|
||||
const { address, displayName, shortAddress } = author || {};
|
||||
const linkCount = useCountLinksInReplies(post);
|
||||
const displayTitle = title && title.length > 30 ? title.slice(0, 30) + '(...)' : title;
|
||||
const displayContent = content && content.length > 1000 ? content.slice(0, 1000) : content;
|
||||
const displayTitle = title && title.length > 30 ? title?.slice(0, 30) + '(...)' : title;
|
||||
const displayContent = content && content.length > 1000 ? content?.slice(0, 1000) : content;
|
||||
|
||||
const commentMediaInfo = getCommentMediaInfoMemoized(post);
|
||||
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
|
||||
@@ -283,7 +306,7 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b
|
||||
</span>
|
||||
<span className={styles.nameBlock}>
|
||||
<span className={styles.name}>{displayName || 'Anonymous'} </span>
|
||||
<span className={styles.address}>(u/{shortAddress || address.slice(0, 12) + '...'})</span>
|
||||
<span className={styles.address}>(u/{shortAddress || address?.slice(0, 12) + '...'})</span>
|
||||
{title && (
|
||||
<>
|
||||
<br />
|
||||
@@ -330,7 +353,7 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b
|
||||
</div>
|
||||
</div>
|
||||
{!pinned &&
|
||||
replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
|
||||
replies?.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
|
||||
<div key={reply.cid} className={styles.replyContainer}>
|
||||
<ReplyMobile index={index} reply={reply} />
|
||||
</div>
|
||||
|
||||
+102
-8
@@ -68,6 +68,9 @@
|
||||
--post-content-link-text-decoration: none;
|
||||
--post-content-link-text-decoration-hover: none;
|
||||
|
||||
/* media */
|
||||
--media-thumbnail-background-color: rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* post desktop */
|
||||
--post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-red.png");
|
||||
--post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png");
|
||||
@@ -96,8 +99,12 @@
|
||||
--post-mobile-abbr-font-size: 10pt;
|
||||
--post-mobile-file-info-text-color: #707070;
|
||||
--post-mobile-content-font-size: 11pt;
|
||||
|
||||
--post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* quotelink */
|
||||
--post-quotelink-text-color: navy;
|
||||
--post-quotelink-text-color-hover: red;
|
||||
--post-quotelink-text-decoration: underline;
|
||||
--post-quotelink-text-decoration-hover: underline;
|
||||
|
||||
/* reply desktop */
|
||||
--side-arrows-color: #e0bfb7;
|
||||
@@ -180,6 +187,9 @@
|
||||
--post-content-link-text-decoration: none;
|
||||
--post-content-link-text-decoration-hover: none;
|
||||
|
||||
/* media */
|
||||
--media-thumbnail-background-color: rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* post */
|
||||
--post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-blue.png");
|
||||
--post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png");
|
||||
@@ -197,7 +207,7 @@
|
||||
--post-mobile-info-border-bottom: 1px solid #b7c5d9;
|
||||
--post-mobile-info-background-color: #c9cde8;
|
||||
--post-mobile-menu-button-color: #34345c;
|
||||
--post-mobile-name-text-color: purple;
|
||||
--post-mobile-name-text-color: #117743;
|
||||
--post-mobile-name-font-weight: 700;
|
||||
--post-mobile-subject-text-color: #0f0c5d;
|
||||
--post-mobile-subject-font-weight: 700;
|
||||
@@ -208,7 +218,11 @@
|
||||
--post-mobile-abbr-font-size: 10pt;
|
||||
--post-mobile-content-font-size: 11pt;
|
||||
|
||||
--post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
|
||||
/* quotelink */
|
||||
--post-quotelink-text-color: #d00;
|
||||
--post-quotelink-text-color-hover: #d00;
|
||||
--post-quotelink-text-decoration: underline;
|
||||
--post-quotelink-text-decoration-hover: underline;
|
||||
|
||||
/* reply desktop */
|
||||
--side-arrows-color: #b7c5d9;
|
||||
@@ -271,6 +285,9 @@
|
||||
--post-content-link-text-decoration: underline;
|
||||
--post-content-link-text-decoration-hover: underline;
|
||||
|
||||
/* media */
|
||||
--media-thumbnail-background-color: rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* post */
|
||||
--post-subject-text-color: #cc1105;
|
||||
--post-subject-font-weight: 700;
|
||||
@@ -297,7 +314,11 @@
|
||||
--post-mobile-abbr-font-size: 12pt;
|
||||
--post-mobile-content-font-size: 13pt;
|
||||
|
||||
--post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
|
||||
/* quotelink */
|
||||
--post-quotelink-text-color: navy;
|
||||
--post-quotelink-text-color-hover: red;
|
||||
--post-quotelink-text-decoration: underline;
|
||||
--post-quotelink-text-decoration-hover: underline;
|
||||
|
||||
/* reply desktop */
|
||||
--side-arrows-color: #e0bfb7;
|
||||
@@ -373,6 +394,9 @@
|
||||
--post-content-link-text-decoration: none;
|
||||
--post-content-link-text-decoration-hover: none;
|
||||
|
||||
/* media */
|
||||
--media-thumbnail-background-color: rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* post */
|
||||
--post-subject-text-color: #0f0c5d;
|
||||
--post-subject-font-weight: 700;
|
||||
@@ -383,7 +407,27 @@
|
||||
--post-greentext-color: #789922;
|
||||
--post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png");
|
||||
|
||||
--post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
|
||||
/* post mobile */
|
||||
--post-mobile-background-color: #d6daf0;
|
||||
--post-mobile-info-border-bottom: 1px solid #b7c5d9;
|
||||
--post-mobile-info-background-color: #c9cde8;
|
||||
--post-mobile-menu-button-color: #34345c;
|
||||
--post-mobile-name-text-color: #117743;
|
||||
--post-mobile-name-font-weight: 700;
|
||||
--post-mobile-subject-text-color: #0f0c5d;
|
||||
--post-mobile-subject-font-weight: 700;
|
||||
--post-mobile-link-background-color: #c9cde8;
|
||||
--post-mobile-link-border-top: 1px solid #b7c5d9;
|
||||
--post-mobile-link-info-text-color: #34345c;
|
||||
--post-mobile-abbr-text-color: #707070;
|
||||
--post-mobile-abbr-font-size: 12pt;
|
||||
--post-mobile-content-font-size: 13pt;
|
||||
|
||||
/* quotelink */
|
||||
--post-quotelink-text-color: #d00;
|
||||
--post-quotelink-text-color-hover: #d00;
|
||||
--post-quotelink-text-decoration: underline;
|
||||
--post-quotelink-text-decoration-hover: underline;
|
||||
|
||||
/* reply desktop */
|
||||
--side-arrows-color: #b7c5d9;
|
||||
@@ -455,6 +499,9 @@
|
||||
--post-content-link-text-decoration: none;
|
||||
--post-content-link-text-decoration-hover: none;
|
||||
|
||||
/* media */
|
||||
--media-thumbnail-background-color: rgba(255, 255, 255, 0.01);
|
||||
|
||||
/* post */
|
||||
--post-subject-text-color: #b294bb;
|
||||
--post-subject-font-weight: 700;
|
||||
@@ -465,7 +512,28 @@
|
||||
--post-greentext-color: #b5bd68;
|
||||
--post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-dark.png");
|
||||
|
||||
--post-thumbnail-background-color: rgba(255, 255, 255, 0.01);
|
||||
/* post mobile */
|
||||
--post-mobile-background-color: #282A2E;
|
||||
--post-mobile-info-border-bottom: 1px solid #2D2F33;
|
||||
--post-mobile-info-background-color: #212326;
|
||||
--post-mobile-info-text-color: #707070;
|
||||
--post-mobile-menu-button-color: #81A2BE;
|
||||
--post-mobile-name-text-color: #117743;
|
||||
--post-mobile-name-font-weight: 700;
|
||||
--post-mobile-subject-text-color: #B294BB;
|
||||
--post-mobile-subject-font-weight: 700;
|
||||
--post-mobile-link-background-color: #212326;
|
||||
--post-mobile-link-border-top: 1px solid #2D2F33;
|
||||
--post-mobile-link-info-text-color: #707070;
|
||||
--post-mobile-abbr-text-color: #707070;
|
||||
--post-mobile-abbr-font-size: 10pt;
|
||||
--post-mobile-content-font-size: 11pt;
|
||||
|
||||
/* quotelink */
|
||||
--post-quotelink-text-color: #5f89ac;
|
||||
--post-quotelink-text-color-hover: #81a2be;
|
||||
--post-quotelink-text-decoration: underline;
|
||||
--post-quotelink-text-decoration-hover: underline;
|
||||
|
||||
/* reply desktop */
|
||||
--side-arrows-color: #c5c8c6;
|
||||
@@ -532,6 +600,9 @@
|
||||
--post-content-link-text-decoration: none;
|
||||
--post-content-link-text-decoration-hover: none;
|
||||
|
||||
/* media */
|
||||
--media-thumbnail-background-color: rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* post */
|
||||
--post-subject-text-color: #111;
|
||||
--post-subject-font-weight: 700;
|
||||
@@ -542,7 +613,30 @@
|
||||
--post-greentext-color: #789922;
|
||||
--post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-photon.png");
|
||||
|
||||
--post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
|
||||
/* post mobile */
|
||||
--post-mobile-background-color: #eee;
|
||||
--post-mobile-info-border-bottom: 1px solid #ccc;
|
||||
--post-mobile-info-border-top: 1px solid #ccc;
|
||||
--post-mobile-info-background-color: #ddd;
|
||||
--post-mobile-info-text-color: #707070;
|
||||
--post-mobile-menu-button-color: #f60;
|
||||
--post-mobile-name-text-color: #004a99;
|
||||
--post-mobile-name-font-weight: 700;
|
||||
--post-mobile-subject-text-color: #111;
|
||||
--post-mobile-subject-font-weight: 700;
|
||||
--post-mobile-link-background-color: #ddd;
|
||||
--post-mobile-link-border-top: 1px solid #ccc;
|
||||
--post-mobile-link-info-text-color: #333;
|
||||
--post-mobile-abbr-text-color: #333;
|
||||
--post-mobile-abbr-font-size: 10pt;
|
||||
--post-mobile-content-font-size: 11pt;
|
||||
--post-mobile-border-bottom: 1px solid #ccc;
|
||||
|
||||
/* quotelink */
|
||||
--post-quotelink-text-color: #f60;
|
||||
--post-quotelink-text-color-hover: #f30;
|
||||
--post-quotelink-text-decoration: underline;
|
||||
--post-quotelink-text-decoration-hover: underline;
|
||||
|
||||
/* reply desktop */
|
||||
--side-arrows-color: #333;
|
||||
|
||||
@@ -59,14 +59,9 @@ const Settings = () => {
|
||||
</a>
|
||||
)}
|
||||
{commitRef && (
|
||||
<>
|
||||
{' '}
|
||||
(
|
||||
<a href={`https://github.com/plebbit/plebchan/commit/${commitRef}`} target='_blank' rel='noopener noreferrer'>
|
||||
{commitRef.slice(0, 7)}
|
||||
</a>
|
||||
)
|
||||
</>
|
||||
<a href={`https://github.com/plebbit/plebchan/commit/${commitRef}`} target='_blank' rel='noopener noreferrer'>
|
||||
{commitRef.slice(0, 7)}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user