mirror of
https://codeberg.org/tacerus/teddit.git
synced 2024-11-22 23:09:28 +01:00
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
parent
2bffbcdf0b
commit
c695a392d6
146
dist/css/styles.css
vendored
146
dist/css/styles.css
vendored
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 )
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user