From 109bc0bdd650e179983be3a233ae363bccd3023f Mon Sep 17 00:00:00 2001 From: ElnuDev Date: Sat, 18 Feb 2023 18:04:23 -0800 Subject: [PATCH] Revamp soudan --- assets/sass/soudan.sass | 4 +++ assets/sass/style.sass | 37 ++++++++++++++++++--- static/js/soudan.js | 73 +++++++++++++++++++++-------------------- 3 files changed, 74 insertions(+), 40 deletions(-) diff --git a/assets/sass/soudan.sass b/assets/sass/soudan.sass index 5b7cc92..659690a 100644 --- a/assets/sass/soudan.sass +++ b/assets/sass/soudan.sass @@ -1,6 +1,10 @@ .soudan-comment display: flex gap: 0.5em + .description + font-weight: 300 + p:first-of-type + margin-top: 0; & > div width: 100% @keyframes diff --git a/assets/sass/style.sass b/assets/sass/style.sass index 61a0108..0dd3b62 100644 --- a/assets/sass/style.sass +++ b/assets/sass/style.sass @@ -1,5 +1,6 @@ @import "syntax.scss" @import "stork.sass" +@import "soudan.sass" @import "_everforest.sass" @import "_topography.sass" @@ -13,6 +14,7 @@ $dim: $ef-bg5 $fg: $ef-fg $primary: $ef-green $padding: 1rem +$shadow-size: 4px html color: $fg @@ -58,11 +60,11 @@ a color: $primary &:not(:hover) text-decoration: none -pre, #_content - box-shadow: 4px 4px $shadow -img +pre, .page + box-shadow: $shadow-size $shadow-size $shadow +img, button, input[type=submit] max-width: 100% - box-shadow: 4px 4px $bg0 + box-shadow: $shadow-size $shadow-size $bg0 border: 2px solid $bg0 header h2 @@ -103,5 +105,30 @@ nav .disabled, footer color: $dim footer - margin-top: 2em; + margin-top: 2em text-align: center +button, input[type=submit] + border: none + cursor: pointer + background: $dim + color: $fg + padding: 0.125em 0.5em + &:active + box-shadow: none; + transform: translate($shadow-size, $shadow-size) +form + display: flex + flex-direction: column + gap: 0.5em +textarea, input + font-size: inherit + font-family: inherit + color: inherit +textarea, input[type=text], input[type=email], input[type=number] + border: none + background: $bg0 + padding: 0.5em + &:focus + outline: 1px solid $primary +textarea + resize: vertical diff --git a/static/js/soudan.js b/static/js/soudan.js index 3d5c711..a5f2f41 100644 --- a/static/js/soudan.js +++ b/static/js/soudan.js @@ -10,7 +10,7 @@ function commentForm(parentId) { `; } function commentDisplay(comment, replies) { - return `
${typeof replies === "string" ? `` : ""}${comment.author ? comment.author : "Anonymous"} commented ${moment(new Date(comment.timestamp * 1000)).fromNow()}:
${md.render(comment.text)}
${typeof replies === "string" ? `
${replies ? replies : ""}
` : ""}
`; + return `
${typeof replies === "string" ? `` : ""}${comment.author ? comment.author : "Anonymous"} commented ${moment(new Date(comment.timestamp * 1000)).fromNow()}:
${md.render(comment.text)}
${typeof replies === "string" ? `
${replies ? replies : ""}
` : ""}
`; } const container = document.getElementById("soudan"); container.style.display = "none"; @@ -51,6 +51,41 @@ function submitForm(form, e) { e.preventDefault(); } +function renderComments(jump, comments, debug) { + let commentCount = comments.length; + comments.forEach(comment => { + if (comment.replies) { + commentCount += comment.replies.length; + } + }); + commentContainerHeader.innerHTML = `${commentCount} Comment${commentCount == 1 ? "" : "s"}${debug ? " (Debug)" : ""}`; + let html = ""; + if (comments.length == 0) { + html = "

No comments yet! Be the first to make one.

"; + } else { + comments.forEach(comment => { + if (comment.replies) { + let replies = ""; + comment.replies.forEach(reply => { + replies += commentDisplay(reply); + }); + html += commentDisplay(comment, replies); + } else { + html += commentDisplay(comment, ""); + } + }); + } + commentContainer.innerHTML = html; + soudan.style.display = ""; + if (jump && window.location.hash) { + const target = document.getElementById(window.location.hash.substring(1)); + if (target) { + window.scrollTo(0, target.offsetTop); + target.classList.add("soudan-highlighted"); + } + } +} + function reloadComments(jump) { fetch(`${url}/${contentId}`) .then(response => { @@ -58,40 +93,8 @@ function reloadComments(jump) { return response.ok ? json : Promise.reject(json); }); }) - .then(comments => { - let commentCount = comments.length; - comments.forEach(comment => { - if (comment.replies) { - commentCount += comment.replies.length; - } - }); - commentContainerHeader.innerHTML = `${commentCount} Comment${commentCount == 1 ? "" : "s"}`; - let html = ""; - if (comments.length == 0) { - html = "

No comments yet! Be the first to make one.

"; - } else { - comments.forEach(comment => { - if (comment.replies) { - let replies = ""; - comment.replies.forEach(reply => { - replies += commentDisplay(reply); - }); - html += commentDisplay(comment, replies); - } else { - html += commentDisplay(comment, ""); - } - }); - } - commentContainer.innerHTML = html; - soudan.style.display = ""; - if (jump && window.location.hash) { - const target = document.getElementById(window.location.hash.substring(1)); - if (target) { - window.scrollTo(0, target.offsetTop); - target.classList.add("soudan-highlighted"); - } - } - }) + .then(comments => renderComments(jump, comments)) + .catch(error => renderComments(jump, [{"id":9,"text":"yoo thanks for this little guide. Might be useful to add a few lines for Wayland users out there to activate the firefox PWA wayland support n stuff, but yea thanks","timestamp":1672748214},{"id":1,"author":"Elnu","gravatar":"1cfb9e38feea40e5150bc0fa69faf693","text":"Nice post, me!","timestamp":1658541512,"replies":[{"id":2,"author":"Drago","text":"HELLO ELNU","timestamp":1658541674},{"id":3,"author":"Elnu","gravatar":"1cfb9e38feea40e5150bc0fa69faf693","text":"HELLO DRAGO","timestamp":1658541732},{"id":4,"author":"Drago","text":"You should get to drawing ( ͡° ͜ʖ ͡°)","timestamp":1658541778},{"id":5,"author":"Elnu","gravatar":"1cfb9e38feea40e5150bc0fa69faf693","text":"*soon™*","timestamp":1658541863}]}], true)) } function reply(id) {