Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Wrap guestbook message and add reply button

This commit is contained in:
Helen Chong 2024-05-19 19:24:52 +08:00
parent b4fd0ab249
commit 28c06b22cb
5 changed files with 47 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
_site/assets/js/guestbook.js
View File

@ -90,6 +90,10 @@ const renderMessage = (item) => {
const itemID = item[0]; const itemID = item[0];
const itemValue = item[1]; const itemValue = item[1];
const newMessageWrapperDiv = document.createElement('div');
newMessageWrapperDiv.classList.add('gb__message--wrapper');
newMessageWrapperDiv.id = `msg-${itemID}`;
const newMessageDiv = document.createElement('div'); const newMessageDiv = document.createElement('div');
newMessageDiv.classList.add('gb__message'); newMessageDiv.classList.add('gb__message');
@ -111,6 +115,11 @@ const renderMessage = (item) => {
newMessageTime.classList.add('gb__message--time'); newMessageTime.classList.add('gb__message--time');
newMessageTime.textContent = itemValue.timestamp; newMessageTime.textContent = itemValue.timestamp;
messageListEl.append(newMessageDiv); const messageReplyBtn = document.createElement('button');
newMessageDiv.append(newMessageName, newMessageMsg, newMessageTime); messageReplyBtn.classList.add('gb__message--reply-btn');
messageReplyBtn.textContent = 'Reply';
messageListEl.append(newMessageWrapperDiv);
newMessageWrapperDiv.append(newMessageDiv);
newMessageDiv.append(newMessageName, newMessageMsg, newMessageTime, messageReplyBtn);
}; };

2
_site/feed.xml
View File

@ -4,7 +4,7 @@
<subtitle>Leilukin&#39;s personal website.</subtitle> <subtitle>Leilukin&#39;s personal website.</subtitle>
<link href="https://leilukin.neocities.org/feed.xml" rel="self"/> <link href="https://leilukin.neocities.org/feed.xml" rel="self"/>
<link href="https://leilukin.neocities.org"/> <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> <id>https://leilukin.neocities.org</id>
<author> <author>
<name>Leilukin</name> <name>Leilukin</name>

16
_site/guestbook/index.html
View File

@ -424,16 +424,18 @@
gap: 0.2em; gap: 0.2em;
} }
.gb__form--submit { .gb__form--submit,
.gb__message--reply-btn {
border: none; border: none;
background: var(--clr-link-btn-bg); background: var(--clr-link-btn-bg);
color: var(--clr-link-btn-txt); color: var(--clr-link-btn-txt);
padding: 0.3em; padding: 0.3em 0.6em;
} }
.gb__form--input input, .gb__form--input input,
.gb__form--input textarea, .gb__form--input textarea,
.gb__form--submit { .gb__form--submit,
.gb__message--reply-btn {
border-radius: 0.2em; border-radius: 0.2em;
} }
@ -460,9 +462,15 @@
font-size: 1.4rem; font-size: 1.4rem;
} }
.gb__message--time { .gb__message--time,
.gb__message--reply-btn {
font-size: 1rem; font-size: 1rem;
} }
.gb__message--reply-btn {
justify-self: start;
margin-top: 0.3em;
}
</style> </style>
<script type="module" src="/assets/js/guestbook.js" defer></script> <script type="module" src="/assets/js/guestbook.js" defer></script>

13
src/assets/js/guestbook.js
View File

@ -90,6 +90,10 @@ const renderMessage = (item) => {
const itemID = item[0]; const itemID = item[0];
const itemValue = item[1]; const itemValue = item[1];
const newMessageWrapperDiv = document.createElement('div');
newMessageWrapperDiv.classList.add('gb__message--wrapper');
newMessageWrapperDiv.id = `msg-${itemID}`;
const newMessageDiv = document.createElement('div'); const newMessageDiv = document.createElement('div');
newMessageDiv.classList.add('gb__message'); newMessageDiv.classList.add('gb__message');
@ -111,6 +115,11 @@ const renderMessage = (item) => {
newMessageTime.classList.add('gb__message--time'); newMessageTime.classList.add('gb__message--time');
newMessageTime.textContent = itemValue.timestamp; newMessageTime.textContent = itemValue.timestamp;
messageListEl.append(newMessageDiv); const messageReplyBtn = document.createElement('button');
newMessageDiv.append(newMessageName, newMessageMsg, newMessageTime); messageReplyBtn.classList.add('gb__message--reply-btn');
messageReplyBtn.textContent = 'Reply';
messageListEl.append(newMessageWrapperDiv);
newMessageWrapperDiv.append(newMessageDiv);
newMessageDiv.append(newMessageName, newMessageMsg, newMessageTime, messageReplyBtn);
}; };

16
src/pages/guestbook.njk
View File

@ -61,16 +61,18 @@ eleventyNavigation:
gap: 0.2em; gap: 0.2em;
} }
.gb__form--submit { .gb__form--submit,
.gb__message--reply-btn {
border: none; border: none;
background: var(--clr-link-btn-bg); background: var(--clr-link-btn-bg);
color: var(--clr-link-btn-txt); color: var(--clr-link-btn-txt);
padding: 0.3em; padding: 0.3em 0.6em;
} }
.gb__form--input input, .gb__form--input input,
.gb__form--input textarea, .gb__form--input textarea,
.gb__form--submit { .gb__form--submit,
.gb__message--reply-btn {
border-radius: 0.2em; border-radius: 0.2em;
} }
@ -97,9 +99,15 @@ eleventyNavigation:
font-size: 1.4rem; font-size: 1.4rem;
} }
.gb__message--time { .gb__message--time,
.gb__message--reply-btn {
font-size: 1rem; font-size: 1rem;
} }
.gb__message--reply-btn {
justify-self: start;
margin-top: 0.3em;
}
</style> </style>
<script type="module" src="/assets/js/guestbook.js" defer></script> <script type="module" src="/assets/js/guestbook.js" defer></script>