Wrap guestbook message and add reply button
This commit is contained in:
parent
b4fd0ab249
commit
28c06b22cb
|
@ -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);
|
||||
};
|
|
@ -4,7 +4,7 @@
|
|||
<subtitle>Leilukin'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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
};
|
|
@ -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>
|
Loading…
Reference in New Issue