From 28c06b22cbfdb9f69145bfd185510cce22b4f8d4 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Sun, 19 May 2024 19:24:52 +0800
Subject: [PATCH] Wrap guestbook message and add reply button

---
 _site/assets/js/guestbook.js | 13 +++++++++++--
 _site/feed.xml               |  2 +-
 _site/guestbook/index.html   | 16 ++++++++++++----
 src/assets/js/guestbook.js   | 13 +++++++++++--
 src/pages/guestbook.njk      | 16 ++++++++++++----
 5 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/_site/assets/js/guestbook.js b/_site/assets/js/guestbook.js
index 12b9202a..77795338 100644
--- a/_site/assets/js/guestbook.js
+++ b/_site/assets/js/guestbook.js
@@ -90,6 +90,10 @@ const renderMessage = (item) => {
     const itemID = item[0];
     const itemValue = item[1];
 
+    const newMessageWrapperDiv = document.createElement('div');
+    newMessageWrapperDiv.classList.add('gb__message--wrapper');
+    newMessageWrapperDiv.id = `msg-${itemID}`;
+
     const newMessageDiv = document.createElement('div');
     newMessageDiv.classList.add('gb__message');
 
@@ -111,6 +115,11 @@ const renderMessage = (item) => {
     newMessageTime.classList.add('gb__message--time');
     newMessageTime.textContent = itemValue.timestamp;
 
-    messageListEl.append(newMessageDiv);
-    newMessageDiv.append(newMessageName, newMessageMsg, newMessageTime);
+    const messageReplyBtn = document.createElement('button');
+    messageReplyBtn.classList.add('gb__message--reply-btn');
+    messageReplyBtn.textContent = 'Reply';
+
+    messageListEl.append(newMessageWrapperDiv);
+    newMessageWrapperDiv.append(newMessageDiv);
+    newMessageDiv.append(newMessageName, newMessageMsg, newMessageTime, messageReplyBtn);
 };
\ No newline at end of file
diff --git a/_site/feed.xml b/_site/feed.xml
index e7faca3c..1e58cdc3 100644
--- a/_site/feed.xml
+++ b/_site/feed.xml
@@ -4,7 +4,7 @@
     <subtitle>Leilukin&#39;s personal website.</subtitle>
     <link href="https://leilukin.neocities.org/feed.xml" rel="self"/>
     <link href="https://leilukin.neocities.org"/>
-    <updated>2024-05-19T08:29:29Z</updated>
+    <updated>2024-05-19T11:24:03Z</updated>
     <id>https://leilukin.neocities.org</id>
     <author>
         <name>Leilukin</name>
diff --git a/_site/guestbook/index.html b/_site/guestbook/index.html
index 2a97d59c..effbf46c 100644
--- a/_site/guestbook/index.html
+++ b/_site/guestbook/index.html
@@ -424,16 +424,18 @@
         gap: 0.2em;
     }
 
-    .gb__form--submit {
+    .gb__form--submit,
+    .gb__message--reply-btn {
         border: none;
         background: var(--clr-link-btn-bg);
         color: var(--clr-link-btn-txt);
-        padding: 0.3em;
+        padding: 0.3em 0.6em;
     }
 
     .gb__form--input input,
     .gb__form--input textarea,
-    .gb__form--submit {
+    .gb__form--submit,
+    .gb__message--reply-btn {
         border-radius: 0.2em;
     }
 
@@ -460,9 +462,15 @@
         font-size: 1.4rem;
     }
 
-    .gb__message--time {
+    .gb__message--time,
+    .gb__message--reply-btn {
         font-size: 1rem;
     }
+
+    .gb__message--reply-btn {
+        justify-self: start;
+        margin-top: 0.3em;
+    }
 </style>
 
 <script type="module" src="/assets/js/guestbook.js" defer></script>
diff --git a/src/assets/js/guestbook.js b/src/assets/js/guestbook.js
index 12b9202a..77795338 100644
--- a/src/assets/js/guestbook.js
+++ b/src/assets/js/guestbook.js
@@ -90,6 +90,10 @@ const renderMessage = (item) => {
     const itemID = item[0];
     const itemValue = item[1];
 
+    const newMessageWrapperDiv = document.createElement('div');
+    newMessageWrapperDiv.classList.add('gb__message--wrapper');
+    newMessageWrapperDiv.id = `msg-${itemID}`;
+
     const newMessageDiv = document.createElement('div');
     newMessageDiv.classList.add('gb__message');
 
@@ -111,6 +115,11 @@ const renderMessage = (item) => {
     newMessageTime.classList.add('gb__message--time');
     newMessageTime.textContent = itemValue.timestamp;
 
-    messageListEl.append(newMessageDiv);
-    newMessageDiv.append(newMessageName, newMessageMsg, newMessageTime);
+    const messageReplyBtn = document.createElement('button');
+    messageReplyBtn.classList.add('gb__message--reply-btn');
+    messageReplyBtn.textContent = 'Reply';
+
+    messageListEl.append(newMessageWrapperDiv);
+    newMessageWrapperDiv.append(newMessageDiv);
+    newMessageDiv.append(newMessageName, newMessageMsg, newMessageTime, messageReplyBtn);
 };
\ No newline at end of file
diff --git a/src/pages/guestbook.njk b/src/pages/guestbook.njk
index 7999fa10..9f2b0a2d 100644
--- a/src/pages/guestbook.njk
+++ b/src/pages/guestbook.njk
@@ -61,16 +61,18 @@ eleventyNavigation:
         gap: 0.2em;
     }
 
-    .gb__form--submit {
+    .gb__form--submit,
+    .gb__message--reply-btn {
         border: none;
         background: var(--clr-link-btn-bg);
         color: var(--clr-link-btn-txt);
-        padding: 0.3em;
+        padding: 0.3em 0.6em;
     }
 
     .gb__form--input input,
     .gb__form--input textarea,
-    .gb__form--submit {
+    .gb__form--submit,
+    .gb__message--reply-btn {
         border-radius: 0.2em;
     }
 
@@ -97,9 +99,15 @@ eleventyNavigation:
         font-size: 1.4rem;
     }
 
-    .gb__message--time {
+    .gb__message--time,
+    .gb__message--reply-btn {
         font-size: 1rem;
     }
+
+    .gb__message--reply-btn {
+        justify-self: start;
+        margin-top: 0.3em;
+    }
 </style>
 
 <script type="module" src="/assets/js/guestbook.js" defer></script>
\ No newline at end of file