mirror/seedit
1
0
Fork 0
mirror of https://github.com/plebbit/seedit.git synced 2026-06-11 17:46:27 -04:00
Code Issues Packages Projects Releases Wiki Activity

style(reply): adjust margin and dotted border

Browse Source
This commit is contained in:
plebeius.eth
2023-10-26 15:44:38 +02:00
parent bf296b64d1
commit bfd6b3267d
4 changed files with 12 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/reply/reply.module.css
View File

@@ -1,15 +1,15 @@
.nested {
margin-top: 10px;
margin-left: 25px;
border-left: 1px dotted #DDF;
}
.replyWrapper {
margin-top: 10px;
margin-top: 10px;
}
.midcol {
visibility: visible;
margin-left: 0px;
width: 15px;
float: left;
margin-right: 7px;

15
src/components/reply/reply.tsx
View File

@@ -25,11 +25,10 @@ const Reply: FC<ReplyProps> = ({ reply }) => {
const toggleExpanded = () => setExpanded(!expanded);
const commentMediaInfo = utils.getCommentMediaInfoMemoized(reply);
const hasThumbnail = utils.hasThumbnail(commentMediaInfo, link);
const calculatedMargin = 10 + (depth - 1) * 25;
return (
<div className={styles.reply}>
<div className={`${styles.replyWrapper} ${depth > 1 && styles.nested}`} style={{marginLeft: `${calculatedMargin}px`}}>
<div className={`${styles.replyWrapper} ${depth > 1 && styles.nested}`}>
<div className={styles.midcol}>
<div className={`${styles.arrow} ${styles.arrowUp}`} />
<div className={`${styles.arrow} ${styles.arrowDown}`} />
@@ -51,10 +50,10 @@ const Reply: FC<ReplyProps> = ({ reply }) => {
<span className={styles.time}>{utils.getFormattedTime(timestamp)}</span>
</p>
<div className={styles.usertext}>
{hasThumbnail && (<Thumbnail commentCid={cid} />)}
{hasThumbnail && (<ExpandButton commentCid={cid} expanded={expanded} hasThumbnail={hasThumbnail} toggleExpanded={toggleExpanded} />)}
{hasThumbnail && <Thumbnail commentCid={cid} />}
{hasThumbnail && <ExpandButton commentCid={cid} expanded={expanded} hasThumbnail={hasThumbnail} toggleExpanded={toggleExpanded} />}
<div className={styles.md}>{content}</div>
{hasThumbnail && (<Expando commentCid={cid} expanded={expanded} showContent={false} />)}
{hasThumbnail && <Expando commentCid={cid} expanded={expanded} showContent={false} />}
</div>
</div>
<ul className={styles.buttons}>
@@ -74,10 +73,10 @@ const Reply: FC<ReplyProps> = ({ reply }) => {
<span>reply</span>
</li>
</ul>
{replies.map((reply, index) => (
<Reply key={index} reply={reply} />
))}
</div>
{replies.map((reply, index) => (
<Reply key={index} reply={reply} />
))}
</div>
);
};

2
src/components/views/comments/comments.module.css
View File

@@ -116,5 +116,5 @@
.replies {
max-width: 80em;
margin-left: -6px;
margin-left: 3px;
}

4
src/components/views/comments/comments.tsx
View File

@@ -12,7 +12,7 @@ const Comments: FC = () => {
const { commentCid } = useParams();
const comment = useComment({ commentCid });
const { content, replyCount, subplebbitAddress, title } = comment || {};
const subplebbit = useSubplebbit({subplebbitAddress});
const subplebbit = useSubplebbit({ subplebbitAddress });
const replies = useReplies(comment).map((reply, index) => <Reply key={index} reply={reply} />) || '';
const threadTitle = title?.slice(0, 40) || content?.slice(0, 40);
const subplebbitTitle = subplebbit?.title || subplebbit?.shortAddress;
@@ -39,7 +39,7 @@ const Comments: FC = () => {
</div>
<div className={styles.menuArea}>
<div className={styles.spacer}>
<span className={styles.dropdownTitle}>sorted by:</span>
<span className={styles.dropdownTitle}>sorted by: </span>
<div className={styles.dropdown}>
<span className={styles.selected}>best</span>
</div>