devol
/
teddit-reddit-frontend-alternativa
mirror of https://codeberg.org/teddit/teddit
1
0
Fork 0
Code Issues Releases Wiki Activity

Add depth of each comment to the json. When creating the html, determine if the comment is an even or odd depth for css.

This commit is contained in:
Shaun Collins 2020-12-17 17:17:20 -05:00
parent 2bffbcdf0b
commit c695a392d6
3 changed files with 30 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
dist/css/styles.css vendored
View File

@ -98,77 +98,17 @@ body.dark .comment .body blockquote {
color: #afafaf;
border-color: #464646;
}
body.dark .comment {
body.dark .even-depth {
background: var(--darkbg);
}
body.dark .comment .comment {
body.dark .odd-depth {
background: var(--darkbglight);
}
body.dark .comment .comment {
border-left: 1px solid #545454;
}
body.dark .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .comment .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
/* Is there any better way to do this??? send help naow */
body.dark .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .meta .created a {
color: #7b7b7b;
}
@ -691,75 +631,19 @@ input[type="submit"]:hover,
.comment .md {
max-width: 60em;
}
.comment .comment {
.even-depth {
background: var(--whitebg);
}
.odd-depth {
background: var(--lightgray);
}
.comment .comment {
border-left: 1px solid #dcdcdc;
margin-top: 10px;
}
.comment .comment .comment {
background: var(--whitebg);
}
.comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment {
background: var(--whitebg);
}
.comment .comment .comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment .comment .comment {
background: var(--whitebg);
}
/* Is there any better way to do this??? send help naow */
.comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--whitebg);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--whitebg);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--whitebg);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--whitebg);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--whitebg);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--whitebg);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--whitebg);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--whitebg);
}
/* POST */
#post .info {
float: left;

4
inc/compilePostComments.js
View File

@ -38,7 +38,7 @@ module.exports = function() {
edited_span = `<span title="this comment is edited">*</span>`
}
comments_html = `
<div class="comment" id="${comments.id}">
<div class="comment ${comments.depth % 2 === 0 ? 'even-depth' : 'odd-depth'}" id="${comments.id}">
<details open>
<summary>
<p class="author">${commentAuthor(comments, classlist, submitter && submitter_link, moderator && moderator_badge)}</p>
@ -124,7 +124,7 @@ module.exports = function() {
edited_span = `<span title="this comment is edited">*</span>`
}
comments_html += `
<div class="comment" id="${comment.id}">
<div class="comment ${comment.depth % 2 === 0 ? 'even-depth' : 'odd-depth'} id="${comment.id}">
<details open>
<summary>
<p class="author">${commentAuthor(comment, classlist, submitter && submitter_link, moderator && moderator_badge)}</p>

22
inc/processJsonPost.js
View File

@ -142,7 +142,8 @@ module.exports = function(fetch) {
distinguished: comment.distinguished,
score_hidden: comment.score_hidden,
edited: comment.edited,
replies: []
replies: [],
depth: 0
}
} else {
obj = {
@ -158,7 +159,7 @@ module.exports = function(fetch) {
if(comment.replies && kind !== 'more') {
if(comment.replies.data) {
if(comment.replies.data.children.length > 0) {
obj.replies = processReplies(comment.replies.data.children, post_id)
obj.replies = processReplies(comment.replies.data.children, post_id, 1)
}
}
}
@ -197,7 +198,7 @@ module.exports = function(fetch) {
return { post_data: post_data, comments: comments_html }
}
this.processReplies = (data, post_id) => {
this.processReplies = (data, post_id, depth) => {
let return_replies = []
for(var i = 0; i < data.length; i++) {
let kind = data[i].kind
@ -218,7 +219,8 @@ module.exports = function(fetch) {
distinguished: reply.distinguished,
score_hidden: reply.score_hidden,
edited: reply.edited,
replies: []
replies: [],
depth: depth
}
} else {
obj = {
@ -227,13 +229,13 @@ module.exports = function(fetch) {
id: reply.id,
parent_id: reply.parent_id,
post_id: post_id,
children: []
children: [],
depth: depth
}
}
if(reply.replies && kind !== 'more') {
if(reply.replies.data.children.length) {
let replies = []
for(var j = 0; j < reply.replies.data.children.length; j++) {
let comment = reply.replies.data.children[j].data
let objct = {}
@ -252,7 +254,8 @@ module.exports = function(fetch) {
score_hidden: comment.score_hidden,
distinguished: comment.distinguished,
distinguished: comment.edited,
replies: []
replies: [],
depth: depth + 1
}
} else {
objct = {
@ -261,7 +264,8 @@ module.exports = function(fetch) {
id: comment.id,
parent_id: comment.parent_id,
post_id: post_id,
children: []
children: [],
depth: depth + 1
}
if(comment.children) {
for(var k = 0; k < comment.children.length; k++) {
@ -273,7 +277,7 @@ module.exports = function(fetch) {
if(comment.replies) {
if(comment.replies.data) {
if(comment.replies.data.children.length > 0) {
objct.replies = processReplies(comment.replies.data.children, post_id)
objct.replies = processReplies(comment.replies.data.children, post_id, depth )
}
}
}