comment/s fixes

traceypooh · Jan 27, 2025 · fc51fad · fc51fad
1 parent 6773c93
commit fc51fad
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 115 deletions.
diff --git a/js/staticman.js b/js/staticman.js
@@ -1,7 +1,7 @@
 import { cfg } from './blogtini.js'
 
 function find_form() {
-  return document.querySelector('bt-post-full')?.shadowRoot?.querySelector('.new-comment')
+  return document.querySelector('bt-post-full')?.shadowRoot?.querySelector('bt-comments')?.shadowRoot?.querySelector('.new-comment')
 }
 
 function comment_setup() {
@@ -67,7 +67,7 @@ function comment_setup() {
   })
 
   // record reply target when one of the "reply" buttons is pressed
-  document.querySelector('bt-post-full').shadowRoot.querySelectorAll('bt-comment').forEach((e) => {
+  for (const e of document.querySelector('bt-post-full').shadowRoot.querySelector('bt-comments').shadowRoot.querySelectorAll('bt-comment')) {
     e.shadowRoot.querySelector('.comment-reply-btn').addEventListener('click', (evt) => {
       // eslint-disable-next-line no-use-before-define
       resetReplyTarget()
@@ -81,7 +81,7 @@ function comment_setup() {
       form.querySelector('.reply-notice').classList.remove('hidden')
       form.querySelector('.reply-name').innerText = replyName
     })
-  })
+  }
 
   // handle removal of reply target when '×' is pressed
   // eslint-disable-next-line no-use-before-define

diff --git a/theme/future-imperfect/bt-comment.js b/theme/future-imperfect/bt-comment.js
@@ -1,4 +1,4 @@
-import { LitElement, html } from 'https://esm.ext.archive.org/[email protected]'
+import { LitElement, html, css } from 'https://esm.ext.archive.org/[email protected]'
 import { cssify, datetime } from '../../js/blogtini.js'
 import {
   css_post, css_dark, css_footer, css_title, css_buttons,
@@ -20,7 +20,7 @@ customElements.define('bt-comment', class extends LitElement {
 
   render() {
     return html`
-<link href="${cssify('theme/future-imperfect/css.css')}" rel="stylesheet" type="text/css"/><!-- xxx -->
+<link href="${cssify('css/blogtini.css')}" rel="stylesheet" type="text/css"/><!--fonts,fontawesome,etc.-->
 
 <article id="${this.id}" class="comment" style="${this.replID ? 'margin-left:150px' : ''}">
   <header>
@@ -54,6 +54,111 @@ customElements.define('bt-comment', class extends LitElement {
       css_title(),
       css_footer(),
       css_buttons(),
+      css`
+@charset "UTF-8";
+/* Staticman Comments - Content */
+.comment header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  background: #ededed;
+  align-items: center;
+  border-radius: 50px 0 0 50px;
+}
+@media (min-width: 375px) {
+  .comment header {
+    border-radius: 0;
+  }
+}
+.comment header div {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  align-items: center;
+}
+@media (min-width: 375px) {
+  .comment header div {
+    flex-direction: row;
+  }
+}
+.comment.comment-reply {
+  margin-left: 1.875em;
+}
+@media (min-width: 375px) {
+  .comment.comment-reply {
+    margin-left: 3.75em;
+  }
+}
+.comment-author-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+@media (min-width: 375px) {
+  .comment-author-container {
+    align-items: flex-start;
+    flex-grow: 1;
+  }
+}
+@media (min-width: 768px) {
+  .comment-author-container {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+.comment-avatar {
+  margin: 0 0 0 1em;
+  width: 3.75em;
+  height: 3.75em;
+  flex-grow: 0;
+}
+@media (min-width: 375px) {
+  .comment-avatar {
+    margin: 0 .5em 0 0;
+  }
+  .comment-avatar.circle {
+    -webkit-clip-path: none;
+    clip-path: none;
+  }
+}
+.comment-author {
+  font-size: 0.9em;
+  margin: 0;
+}
+@media (min-width: 768px) {
+  .comment-author {
+    margin-right: .5em;
+    padding-right: .5em;
+    border-right: 1px solid rgba(161, 161, 161, 0.3);
+  }
+}
+.comment-reply-btn {
+  border: 0;
+}
+.comment-reply-btn::before {
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  content: "\\f3e5";
+  margin-right: .5em;
+  width: 20px;
+}
+@media (min-width: 375px) {
+  .comment-reply-btn {
+    margin-right: 1.5em;
+  }
+}
+.comment-content {
+  margin: 1em;
+}
+`,
       css_dark(),
     ]
   }

diff --git a/theme/future-imperfect/bt-comments.js b/theme/future-imperfect/bt-comments.js
@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'https://esm.ext.archive.org/[email protected]'
-import { fetcher, state } from '../../js/blogtini.js'
+import { fetcher, state, cssify } from '../../js/blogtini.js'
 import {
   css_dark, css_headers, css_buttons, css_post, css_forms,
 } from './index.js'
@@ -29,6 +29,7 @@ customElements.define('bt-comments', class extends LitElement {
     }
 
     return html`
+  <link href="${cssify('css/fontawesome.css')}" rel="stylesheet" type="text/css"/>
   <div class="comments post">
     <div>
       <h2 id="say-something">Say Something</h2>
@@ -143,6 +144,7 @@ customElements.define('bt-comments', class extends LitElement {
       css_post(),
       css_forms(),
       css`
+@charset "UTF-8";
 #comment-form input,
 #comment-form textarea {
   box-sizing: border-box;
@@ -152,130 +154,44 @@ customElements.define('bt-comments', class extends LitElement {
 
 /* Staticman Comments - Form */
 .new-comment.loading {
-  opacity: 0.5; }
-
+  opacity: 0.5;
+}
 .new-comment .reply-notice .comment-avatar {
   width: 2em;
   height: 2em;
-  margin: 0 0.6em; }
-
+  margin: 0 0.6em;
+}
 .new-comment .reply-notice .reply-close-btn {
   padding: unset;
   border: none;
   vertical-align: top;
   font-size: 1em;
   line-height: 0;
-  height: 0; }
-  .new-comment .reply-notice .reply-close-btn:hover {
-    border: none; }
-
+  height: 0;
+}
+.new-comment .reply-notice .reply-close-btn:hover {
+  border: none;
+}
 .new-comment .reply-notice .reply-name {
-  vertical-align: middle; }
-  .new-comment .reply-notice .reply-name::before {
-    font-family: "Font Awesome 5 Free";
-    font-weight: 900;
-    content: "\f3e5";
-    margin-right: .5em;
-    width: 20px; }
+  vertical-align: middle;
+}
+.new-comment .reply-notice .reply-name::before {
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  content: "\\f3e5";
+  margin-right: .5em;
+  width: 20px;
+}
 
 .submit-success {
   border: 1px solid #2eb8ac;
-  background: rgba(46, 184, 172, 0.25); }
-
+  background: rgba(46, 184, 172, 0.25);
+}
 .submit-failed {
   border: 1px solid #b82e6e;
-  background: rgba(184, 46, 110, 0.25); }
-
-/* Staticman Comments - Content */
-.comment header {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  background: #ededed;
-  align-items: center;
-  border-radius: 50px 0 0 50px; }
-  @media (min-width: 375px) {
-    .comment header {
-      border-radius: 0; } }
-  .comment header div {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    align-items: center; }
-    @media (min-width: 375px) {
-      .comment header div {
-        flex-direction: row; } }
-.comment.comment-reply {
-  margin-left: 1.875em; }
-  @media (min-width: 375px) {
-    .comment.comment-reply {
-      margin-left: 3.75em; } }
-.comment-author-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center; }
-  @media (min-width: 375px) {
-    .comment-author-container {
-      align-items: flex-start;
-      flex-grow: 1; } }
-  @media (min-width: 768px) {
-    .comment-author-container {
-      flex-direction: row;
-      align-items: center; } }
-.comment-avatar {
-  margin: 0 0 0 1em;
-  width: 3.75em;
-  height: 3.75em;
-  flex-grow: 0; }
-  @media (min-width: 375px) {
-    .comment-avatar {
-      margin: 0 .5em 0 0; }
-      .comment-avatar.circle {
-        -webkit-clip-path: none;
-        clip-path: none; } }
-.comment-author {
-  font-size: 0.9em;
-  margin: 0; }
-  @media (min-width: 768px) {
-    .comment-author {
-      margin-right: .5em;
-      padding-right: .5em;
-      border-right: 1px solid rgba(161, 161, 161, 0.3); } }
-.comment-reply-btn {
-  border: 0; }
-  .comment-reply-btn::before {
-    font-family: "Font Awesome 5 Free";
-    font-weight: 900;
-    content: "\f3e5";
-    margin-right: .5em;
-    width: 20px; }
-  @media (min-width: 375px) {
-    .comment-reply-btn {
-      margin-right: 1.5em; } }
-.comment-content {
-  margin: 1em; }
-
-/* TODO: Assess Value
-  .reply-target {
-    font-size: 0.9em;
-    border: 0;
-    &::before {
-      font-family: $fa-free-font;
-      font-weight: 900;
-      content: "\f3e5";
-      margin-right: .5em;
-      width: 20px;
-    }
-  }
-*/`,
+  background: rgba(184, 46, 110, 0.25);
+}
+`,
       css_dark(),
     ]
   }