diff --git a/app/blog/templates/blog/parts/chatbox.html b/app/blog/templates/blog/parts/chatbox.html index cf627e56..05b062df 100644 --- a/app/blog/templates/blog/parts/chatbox.html +++ b/app/blog/templates/blog/parts/chatbox.html @@ -7,27 +7,54 @@ Ezra's avatar
-

Ask a Question

-

Hi, I'm Ezra! I can answer questions about any blog post on - this site!

+

Ezra

+

{% now "jS F Y" %}

+
+ +
+ +
+
I can answer questions about any blog post on this + site!
+
Hi, I'm Ezra!
-
{% csrf_token %} - - +
+ + +
+
+

Powered by Blogthedata

+
- +
\ No newline at end of file diff --git a/app/staticfiles/css/main.css b/app/staticfiles/css/main.css index b40e5fb7..d6815a35 100644 --- a/app/staticfiles/css/main.css +++ b/app/staticfiles/css/main.css @@ -44,9 +44,11 @@ Global Styles --primary-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1); --secondary-box-shadow: 0px -10px 15px rgba(0, 0, 0, 0.1); --primary-gradient: linear-gradient(93.12deg, #0d6efd 0.52%, #007bff 100%); - --secondary-gradient: linear-gradient(268.91deg, - #0d6efd -2.14%, - #007bff 99.69%); + --secondary-gradient: linear-gradient( + 268.91deg, + #0d6efd -2.14%, + #007bff 99.69% + ); } html { @@ -599,7 +601,6 @@ figure { margin-right: 0.5rem; } - /* Post Submit Button */ .post-submit-button { display: inline-block; @@ -775,14 +776,11 @@ figure img { height: auto; } - - - /* ============= Typography ============= */ -p>code { +p > code { color: #e76f51; font-family: monospace; font-size: 0.95em; @@ -847,26 +845,28 @@ h2 { margin-bottom: 0.5em; } -:is(h1, - h2, - h3, - h4, - h5, - h6, - strong, - .list-group-item, - svg, - table, - p, - blockquote, - li, - legend, - small, - .word-count, - label, - input, - form, -) { +:is( + h1, + h2, + h3, + h4, + h5, + h6, + strong, + .list-group-item, + svg, + table, + p, + blockquote, + li, + legend, + small, + .word-count, + label, + input, + form, + + ) { color: var(--secondary-color); } @@ -875,7 +875,7 @@ hr { opacity: 0.25; } -.post-content>p:first-of-type::first-letter { +.post-content > p:first-of-type::first-letter { font-size: 2rem; font-weight: 700; } @@ -921,75 +921,99 @@ button a, button a:hover { color: inherit; } +/* ============= Chatbot ============= */ -/* ============= - Chatbot -============= */ +#chatbox-container button svg { + transition: fill 0.3s ease; +} + +#chatbox-container button:hover svg path { + fill: white !important; +} + +#chatbox-container button:hover, +#chatbox-container button { + background-color: transparent !important; +} #chatbox-icon { - width: 35px; - height: 35px; + width: 40px; + height: 40px; + cursor: pointer; } #chatbot-container { position: fixed; - bottom: 0; - right: 0; + bottom: 20px; + right: 20px; margin: 10px; } .chatbox { position: fixed; - bottom: 30px; - left: 20px; + bottom: 20px; + right: 20px; z-index: 123456; } -/* CONTENT IS CLOSED */ .chatbox__support { display: none; flex-direction: column; - background: #eee; - width: 300px; - height: 350px; + background: #f9f9f9; + width: 350px; + height: 550px; + border-radius: 10px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); + overflow: hidden; +} + +.chatbox__time--header { + font-size: 0.6em; + color: white; + margin-top: 1px; } /* CONTENT IS OPEN */ .chatbox--active { display: flex; - transform: translateY(-40px); + transform: translateY(-20px); z-index: 123456; } .send__button { - padding: 6px; - background: transparent; - border: none; - outline: none; + cursor: pointer; + flex: 0 0 auto; } .send__button:hover { - background-color: transparent; - color: black; + size: 1.1rem; } /* MESSAGES */ textarea { - background-color: var(--primary-color); - color: var(--secondary-color); + background-color: #ffffff; + color: #333333; resize: none; + border-radius: 10px; + padding: 10px; + border: 1px solid #ddd; + font-family: "Arial", sans-serif; + font-size: 0.9rem; } textarea::placeholder { - color: var(--secondary-color); + color: #999999; } .chatbox__messages { margin-top: auto; display: flex; - overflow-y: scroll; + overflow-y: auto; flex-direction: column-reverse; - color: var(--secondary-color); + color: #333333; + padding: 20px; + height: 400px; + background: #f5f5f5; } .messages__item--user { @@ -1001,25 +1025,24 @@ textarea::placeholder { } .chatbox__support { - background: var(--primary-color); - height: 500px; - width: 350px; + background: #f5f5f5; + height: 550px; + width: 400px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); - border-top-left-radius: 20px; - border-top-right-radius: 20px; + border-radius: 10px; } /* HEADER */ .chatbox__header { - background: var(--primary-gradient); + background: linear-gradient(135deg, #0d6efd, #0a58ca); display: flex; flex-direction: row; align-items: center; - justify-content: center; + justify-content: space-between; padding: 15px 20px; - border-top-left-radius: 20px; - border-top-right-radius: 20px; - box-shadow: var(--primary-box-shadow); + border-top-left-radius: 10px; + border-top-right-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .chatbox__image--header { @@ -1029,6 +1052,7 @@ textarea::placeholder { .chatbox__heading--header { font-size: 1.2rem; color: white; + margin-bottom: 0; } .chatbox__description--header { @@ -1038,7 +1062,7 @@ textarea::placeholder { /* Messages */ .chatbox__messages { - padding: 0 20px; + padding: 20px; } .messages__item { @@ -1046,6 +1070,9 @@ textarea::placeholder { background: #e6e6e8; padding: 8px 12px; max-width: 70%; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + position: relative; } .messages__item--bot { @@ -1063,30 +1090,46 @@ textarea::placeholder { color: white; } +.messages__item::after { + content: attr(data-time); + position: absolute; + bottom: -20px; + right: 10px; + font-size: 0.75rem; + color: #888; + opacity: 0.3; + transition: opacity 0.3s; +} + +.messages__item:hover::after { + opacity: 1; +} + /* FOOTER */ .chatbox__footer { display: flex; flex-direction: row; align-items: center; - justify-content: space-between; - padding: 20px 20px; - background: var(--secondary-gradient); - box-shadow: var(--secondary-box-shadow); - margin-top: 20px; + padding: 10px 20px; + background: linear-gradient(135deg, #0a58ca, #0d6efd); + box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1); + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; +} + +.chatbox__input-container { + display: flex; + width: 380px; } .chatbox__footer textarea { - width: 80%; + width: 90%; border: none; padding: 10px 10px; - border-radius: 30px; + border-radius: 10px; text-align: left; } -.chatbox__send--footer { - color: white; -} - .chatbox__button button, .chatbox__button button:focus, .chatbox__button button:visited { @@ -1094,20 +1137,34 @@ textarea::placeholder { background: white; border: none; outline: none; - border-top-left-radius: 50px; - border-top-right-radius: 50px; - border-bottom-left-radius: 50px; + border-radius: 50px; box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1); cursor: pointer; } -#chatbox-submit { - display: inline-flex; +.chatbox__close--header { + margin-left: auto; } -#question-text-area { - margin-right: 10px; +.chatbox__close--header button { + border: none; + border-radius: 50%; + padding: 5px; + cursor: pointer; } + +.chatbox__footer--small { + font-size: 0.7rem; + text-align: center; + padding: 5px; + background: #f5f5f5; +} + +.chatbox__footer--small a { + color: #0d6efd; + text-decoration: none; +} + /* ============= Comments ============= */ @@ -1116,12 +1173,10 @@ textarea::placeholder { list-style-type: none; } - .comment-delete-form { display: inline; } - .comment-btn { padding: 3px 8px; font-size: 8px; @@ -1132,9 +1187,7 @@ textarea::placeholder { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 1rem; margin-bottom: 1rem; -} - - +} /* ============= Status Page @@ -1172,7 +1225,7 @@ textarea::placeholder { ============= */ /* Override Ckeditor */ -.ck.ck-toolbar.ck-toolbar_grouping>.ck-toolbar__items { +.ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items { flex-wrap: wrap !important; } @@ -1185,7 +1238,7 @@ iframe { } code { - padding: 1rem !important + padding: 1rem !important; } #draft { @@ -1207,7 +1260,7 @@ video { color: var(--a11-red); position: fixed; bottom: 20px; - right: 20px; + left: 20px; z-index: 999; font-size: 2rem; } @@ -1239,7 +1292,7 @@ video { Media Queries ============= */ @media (prefers-reduced-motion: reduce) { - .navbar-nav>li:hover:not(.dropdown) { + .navbar-nav > li:hover:not(.dropdown) { animation: none; } @@ -1285,7 +1338,7 @@ video { fill: black; } - p>code { + p > code { color: #a626a4; } @@ -1333,7 +1386,6 @@ video { } @media print { - /* @page { size: Letter portrait; @@ -1395,13 +1447,10 @@ video { #aboutMe { display: none !important; } - - } /* Responsive Styles*/ @media (max-width: 1239px) { - /* Changes the layout of the container to a single column grid with the header, sidebar, post-content, and footer taking up @@ -1447,7 +1496,6 @@ video { max-width: 100%; } - .post-card-meta-img-container img { display: block; width: 100%; @@ -1507,7 +1555,6 @@ video { } @media screen and (min-width: 1240px) { - /* Changes the layout of the container to a 4 column grid. The Sidebar and post-content occupy the middle two columns, @@ -1551,7 +1598,6 @@ video { .post-content { grid-column: 3; } - } @media screen and (min-width: 2000px) { @@ -1583,10 +1629,10 @@ video { } @media (min-width: 992px) { - .navbar-nav>li:hover:not(.dropdown) { + .navbar-nav > li:hover:not(.dropdown) { animation: button-shake 0.3s linear; } .nav-categories { display: none; } -} \ No newline at end of file +} diff --git a/app/staticfiles/js/chatbox.js b/app/staticfiles/js/chatbox.js index 9bd02f6f..c7a73647 100644 --- a/app/staticfiles/js/chatbox.js +++ b/app/staticfiles/js/chatbox.js @@ -4,31 +4,46 @@ document.addEventListener("DOMContentLoaded", () => { this.openButton = document.querySelector(".chatbox__button"); this.chatBox = document.querySelector(".chatbox__support"); this.sendButton = document.querySelector(".send__button"); + this.closeButton = document.querySelector( + ".chatbox__close--header button" + ); this.state = false; } display() { this.openButton.addEventListener("click", () => this.toggleState()); + this.closeButton.addEventListener("click", () => this.toggleState()); this.sendButton.addEventListener("click", () => this.onSendButton()); + const textArea = this.chatBox.querySelector("textarea"); - const node = this.chatBox.querySelector("textarea"); - node.addEventListener("input", () => { - node.style.height = "auto"; - node.style.height = `${node.scrollHeight}px`; + textArea.addEventListener("input", () => { + textArea.style.height = "auto"; + textArea.style.height = `${textArea.scrollHeight}px`; }); - node.addEventListener("keyup", ({ key, shiftKey }) => { + textArea.addEventListener("keyup", ({ key, shiftKey }) => { if (key === "Enter" && !shiftKey) { this.onSendButton(); } }); + + const observer = new MutationObserver(() => { + textArea.style.height = "auto"; + }); + + observer.observe(textArea, { + childList: true, + subtree: true, + characterData: true, + }); } toggleState() { this.state = !this.state; - - // show or hides the box this.chatBox.classList.toggle("chatbox--active", this.state); + document.getElementById("chatbox-icon").style.display = this.state + ? "none" + : "block"; } onSendButton() { @@ -37,8 +52,10 @@ document.addEventListener("DOMContentLoaded", () => { if (text === "" || text === "\n") { return; } - this.updateChatText(text); + textField.value = ""; + textField.style.height = "auto"; + textField.dispatchEvent(new Event("input")); } updateChatText(text) { @@ -47,7 +64,6 @@ document.addEventListener("DOMContentLoaded", () => { message.classList.add("messages__item", "messages__item--user"); message.textContent = text; chatmessages.prepend(message); - this.chatBox.querySelector("#question-text-area").value = ""; } } diff --git a/app/staticfiles/svg/close-icon.svg b/app/staticfiles/svg/close-icon.svg new file mode 100644 index 00000000..cb0bf60a --- /dev/null +++ b/app/staticfiles/svg/close-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/staticfiles/svg/send-icon.svg b/app/staticfiles/svg/send-icon.svg new file mode 100644 index 00000000..f6b0ad5f --- /dev/null +++ b/app/staticfiles/svg/send-icon.svg @@ -0,0 +1,5 @@ + + + + +