diff --git a/components/comment.module.css b/components/comment.module.css index 682ede07..efd2eb96 100644 --- a/components/comment.module.css +++ b/components/comment.module.css @@ -18,9 +18,7 @@ .dontLike { fill: #a5a5a5; - margin-right: .35rem; - padding: 2px; - margin-left: 1px; + margin-right: 2px; margin-top: 9px; cursor: pointer; } @@ -64,19 +62,23 @@ .children { margin-top: 0; - margin-left: 27px; + margin-left: 15px; } .comments { - margin-left: -.75rem; + margin-left: -15px; } @media screen and (min-width: 768px) { .comments { - margin-left: .75rem; + margin-left: 0px; } - } + + .children { + margin-left: 25px; + } +} .skeleton .hunk { width: 100%; diff --git a/components/dont-link-this.js b/components/dont-link-this.js index c230d8e6..25f02a93 100644 --- a/components/dont-link-this.js +++ b/components/dont-link-this.js @@ -7,6 +7,7 @@ import Flag from '@/svgs/flag-fill.svg' import { useMemo } from 'react' import getColor from '@/lib/rainbow' import { gql, useMutation } from '@apollo/client' +import styles from './upvote.module.css' export function DownZap ({ item, ...props }) { const { meDontLikeSats } = item @@ -20,7 +21,9 @@ export function DownZap ({ item, ...props }) {
- +
+ +
} /> ) diff --git a/components/item.module.css b/components/item.module.css index 8800900e..9c6fc504 100644 --- a/components/item.module.css +++ b/components/item.module.css @@ -76,10 +76,9 @@ a.title:visited { .dontLike { fill: #a5a5a5; - margin-right: .35rem; - margin-left: -.2rem; flex-shrink: 0; cursor: pointer; + margin-right: 2px; } .case { diff --git a/components/reply.module.css b/components/reply.module.css index 8b962271..1a324bc0 100644 --- a/components/reply.module.css +++ b/components/reply.module.css @@ -2,6 +2,7 @@ max-width: 600px; padding-right: 15px; padding-bottom: 1rem; + margin-left: 12px; } .replyButtons { @@ -12,6 +13,7 @@ align-items: center; line-height: 1rem; vertical-align: middle; + margin-left: 12px; } .replyButtons > * { @@ -47,4 +49,14 @@ .reply .text { margin-top: -1px; height: auto; +} + +@media screen and (min-width: 768px) { + .replyButtons { + margin-left: .99px; + } + + .reply { + margin-left: .99px; + } } \ No newline at end of file diff --git a/fragments/comments.js b/fragments/comments.js index f7e88b5a..c55283ea 100644 --- a/fragments/comments.js +++ b/fragments/comments.js @@ -152,6 +152,16 @@ export const COMMENTS = gql` comments { comments { ...CommentFields + comments { + comments { + ...CommentFields + comments { + comments { + ...CommentFields + } + } + } + } } } } @@ -167,7 +177,7 @@ export const COMMENTS = gql` export const COMMENT_WITH_NEW_RECURSIVE = gql` ${COMMENT_FIELDS} ${COMMENTS} - + fragment CommentWithNewRecursive on Item { ...CommentFields comments { @@ -180,7 +190,7 @@ export const COMMENT_WITH_NEW_RECURSIVE = gql` export const COMMENT_WITH_NEW_LIMITED = gql` ${COMMENT_FIELDS} - + fragment CommentWithNewLimited on Item { ...CommentFields comments { @@ -193,7 +203,7 @@ export const COMMENT_WITH_NEW_LIMITED = gql` export const COMMENT_WITH_NEW_MINIMAL = gql` ${COMMENT_FIELDS} - + fragment CommentWithNewMinimal on Item { ...CommentFields } @@ -201,7 +211,7 @@ export const COMMENT_WITH_NEW_MINIMAL = gql` export const GET_NEW_COMMENTS = gql` ${COMMENTS} - + query GetNewComments($rootId: ID, $after: Date) { newComments(rootId: $rootId, after: $after) { comments { diff --git a/lib/constants.js b/lib/constants.js index f1a92ae7..50f0363f 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -42,7 +42,7 @@ export const BOUNTY_MAX = 10000000 export const POST_TYPES = ['LINK', 'DISCUSSION', 'BOUNTY', 'POLL'] export const TERRITORY_BILLING_TYPES = ['MONTHLY', 'YEARLY', 'ONCE'] export const TERRITORY_GRACE_DAYS = 5 -export const COMMENT_DEPTH_LIMIT = 6 +export const COMMENT_DEPTH_LIMIT = 8 export const COMMENTS_LIMIT = 50 export const FULL_COMMENTS_THRESHOLD = 200 export const COMMENTS_OF_COMMENT_LIMIT = 2