diff --git a/app/assets/stylesheets/pages/_messages.scss b/app/assets/stylesheets/pages/_messages.scss index eb11ba0..b767dd7 100644 --- a/app/assets/stylesheets/pages/_messages.scss +++ b/app/assets/stylesheets/pages/_messages.scss @@ -1,19 +1,27 @@ .messages-container-container { - background-color: $light-gray; + background-color: $card-background; width: 100%; height: 100vh; position: relative; + margin-left: 15px; + display: flex; + justify-content: center; + align-items: center; .chat { position: absolute; - bottom: 0px; + bottom: 100px; + width: 90%; } } #messages-container { overflow: scroll; overflow-x: hidden; - height: 95%; - padding: 10px; + height: 81%; + padding: 38px; + width: 90%; + border-radius: 15px; + background-color: $light-gray; } select:not([multiple]) { @@ -33,6 +41,7 @@ select:not([multiple]) { .avatar-sm { width: 35px; height: 35px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) } .messageDiv { @@ -46,9 +55,9 @@ select:not([multiple]) { padding-bottom: 2px; padding-left: 8px; padding-right: 8px; - background-color: #d4d5d6; + background-color: #f9bab3; color: $navbar-background; - border-radius: 2px; + border-radius: 10px; } &.right { @@ -64,3 +73,31 @@ select:not([multiple]) { .margin-left { margin-left: 10px; } + +.text-center { + text-align: center; +} + +.hover-notice { + display: flex; + justify-content: center; +} + +.input-transparent { + background-color: transparent; + border: none; + box-shadow: none; + &:focus { + box-shadow: none; + } +} + +.send-button { + background: none; + border: none; + box-shadow: none; + color: gray; + &:focus { + box-shadow: none; + } +} diff --git a/app/javascript/packs/chatrooms.js b/app/javascript/packs/chatrooms.js index c1f654d..b43e61d 100644 --- a/app/javascript/packs/chatrooms.js +++ b/app/javascript/packs/chatrooms.js @@ -127,23 +127,23 @@ hangUpIcon.addEventListener('click', event => { // }) // }) -const originalBtn = document.getElementById('original-btn') -originalBtn.addEventListener('click', event => { - originalBtn.classList.toggle('original') - const allMessages = document.querySelectorAll('.messageDiv:not(.right) > p') +// const originalBtn = document.getElementById('original-btn') +// originalBtn.addEventListener('click', event => { +// originalBtn.classList.toggle('original') +// const allMessages = document.querySelectorAll('.messageDiv:not(.right) > p') - if (originalBtn.classList.contains('original')) { - originalBtn.innerText = "Show Original" - allMessages.forEach(message => { - message.innerText = message.dataset.translated - }) - } else { - originalBtn.innerText = "Show Translated" - allMessages.forEach(message => { - message.innerText = message.dataset.original - }) - } -}) +// if (originalBtn.classList.contains('original')) { +// originalBtn.innerText = "Show Original" +// allMessages.forEach(message => { +// message.innerText = message.dataset.translated +// }) +// } else { +// originalBtn.innerText = "Show Translated" +// allMessages.forEach(message => { +// message.innerText = message.dataset.original +// }) +// } +// }) const sendBtn = document.getElementById('send-btn') sendBtn.addEventListener('click', event => { diff --git a/app/views/chat_rooms/show.html.erb b/app/views/chat_rooms/show.html.erb index b05b468..4e7974b 100644 --- a/app/views/chat_rooms/show.html.erb +++ b/app/views/chat_rooms/show.html.erb @@ -20,6 +20,9 @@
+
+ Hover to see the original message +
@@ -29,13 +32,15 @@ <% end %> - + - + - +