diff --git a/app/assets/stylesheets/components/_navbar.scss b/app/assets/stylesheets/components/_navbar.scss index 4a53bc0..4261f89 100644 --- a/app/assets/stylesheets/components/_navbar.scss +++ b/app/assets/stylesheets/components/_navbar.scss @@ -12,19 +12,23 @@ font-size: 2em; font-weight: bold; + a:hover { + color: $primary; + } } - .right-align { height: 100%; width: 16em; - margin-right: 5em; + margin-right: 4em; display: flex; align-items: center; justify-content: space-between; + .links { display: flex; height: inherit; + div { height: inherit; display: flex; @@ -32,19 +36,26 @@ border-bottom: 5px solid transparent; &:first-child { - margin-right: 1em; + margin-right: 2.5em; } &.active { border-bottom: 5px solid $primary; color: white; - - a { - color: white; - } } + + &:hover { + color: white; + } + + &.active, &:hover { + a { + color: white; + } + } + a { - color: #C4C4C4; + color: $text-inactive; text-decoration: none; } } @@ -53,7 +64,28 @@ .profile { img { - width: 3.25em; + width: 3em; + padding: 0.2em; + } + } + + .burger-menu { + margin-right: 20px; + color: $primary; + } + + .polyglot-dropdown { + background-color: $navbar-background; + + li { + a { + color: $text-inactive; + + &:hover { + color: white; + background-color: $background; + } + } } } } diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss index 1ffb1c1..dfca064 100644 --- a/app/assets/stylesheets/config/_colors.scss +++ b/app/assets/stylesheets/config/_colors.scss @@ -15,4 +15,5 @@ $background: #33333D; $card-background: #464650; $navbar-background: #1F1F29; $text-darker: #CDCDCD; +$text-inactive: #C4C4C4; $icon: #EDECEC; diff --git a/app/assets/stylesheets/config/_fonts.scss b/app/assets/stylesheets/config/_fonts.scss index dca1ed8..dc7ce76 100755 --- a/app/assets/stylesheets/config/_fonts.scss +++ b/app/assets/stylesheets/config/_fonts.scss @@ -1,9 +1,9 @@ // Import Google fonts -@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Raleway:400,100,300,700,500"); +@import url("https://fonts.googleapis.com/css?family=Assistant:400,700|Hind:400,700"); // Define fonts for body and headers -$body-font: "Open Sans", "Helvetica", "sans-serif"; -$headers-font: "Raleway", "Helvetica", "sans-serif"; +$body-font: "Hind", "Helvetica", "sans-serif"; +$headers-font: "Assistant", "Helvetica", "sans-serif"; // To use a font file (.woff) uncomment following lines // @font-face { diff --git a/app/assets/stylesheets/pages/_contacts.scss b/app/assets/stylesheets/pages/_contacts.scss index 96b9436..4b0358e 100644 --- a/app/assets/stylesheets/pages/_contacts.scss +++ b/app/assets/stylesheets/pages/_contacts.scss @@ -11,6 +11,7 @@ a:hover { } .card { + min-width: 360px; display: flex; justify-content: space-between; background: $card-background; @@ -72,7 +73,16 @@ a:hover { } .video-content { - height: 485px; + // height: 485px; + + padding-left: 0.2vw; + display: flex; + justify-content: center; + .flex-video { + height: 100%; + width: 100%; + flex: 1 1 auto; + } // background-color: black; } @@ -132,16 +142,19 @@ a:hover { align-items: center; } - - - - .contact { color: white; } .contacts { - height: 570px; + + display: flex; + flex-direction: column; + justify-content: center; +} + +.contacts-list{ + height: 90vh; overflow: scroll; } @@ -152,10 +165,3 @@ a:hover { - - - - - - - diff --git a/app/assets/stylesheets/pages/_home.scss b/app/assets/stylesheets/pages/_home.scss index 740097b..a3fa38e 100755 --- a/app/assets/stylesheets/pages/_home.scss +++ b/app/assets/stylesheets/pages/_home.scss @@ -1,4 +1,3 @@ -// Specific CSS for your home-page video { transform: rotateY(180deg); -webkit-transform:rotateY(180deg); /* Safari and Chrome */ diff --git a/app/assets/stylesheets/pages/_index.scss b/app/assets/stylesheets/pages/_index.scss index 9adfd02..da7fa11 100644 --- a/app/assets/stylesheets/pages/_index.scss +++ b/app/assets/stylesheets/pages/_index.scss @@ -1,3 +1,4 @@ // Import page-specific CSS files here. @import "home"; -@import "contacts" +@import "contacts"; +@import "settings"; diff --git a/app/assets/stylesheets/pages/_settings.scss b/app/assets/stylesheets/pages/_settings.scss new file mode 100644 index 0000000..9e511d8 --- /dev/null +++ b/app/assets/stylesheets/pages/_settings.scss @@ -0,0 +1,93 @@ +.card-form { + padding: 20px; +} + +.card-form-no-hover { + &:hover { + box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.2); + } +} + +.input-dropdown { + width: 196px; +} + +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + +.switch input {display:none;} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider { + background-color: $primary; +} + +input:focus + .slider { + box-shadow: 0 0 1px $primary; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} + +.input-field-text-black { + color: black; +} + +.settings { + color: white; +} + +.no-padding { + padding: 0; +} + +.no-margin { + margin: 0; +} + +.font-weight-normal { + font-weight: normal; +} + +.padding-right { + padding-right: 10px; +} diff --git a/app/javascript/components/modal.js b/app/javascript/components/modal.js index a35d32a..f4cdcf0 100644 --- a/app/javascript/components/modal.js +++ b/app/javascript/components/modal.js @@ -1,12 +1,15 @@ const triggerModalEvent = () => { - const btn = document.getElementById("modalTrigger"); - const modal = document.getElementById("myModal"); - if (btn) { - btn.addEventListener('click', function(event) { - $('#myModal').modal('show'); - }); - } + const buttons = document.querySelectorAll(".modalTrigger"); + + buttons.forEach(btn => { + if (btn) { + btn.addEventListener('click', function(event) { + const btnId = btn.getAttribute('data-user-id') + $("#myModal"+`${btnId}`).modal('show'); + }); + } + }) } export { triggerModalEvent } diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 8a54864..d7551ce 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -4,6 +4,35 @@ import { triggerModalEvent } from "../components/modal.js"; triggerModalEvent(); -// import { profilePageAnimation } from '../users/lesson'; +const settingsPage = document.getElementById('settings-page'); +const contactsPage = document.getElementById('contacts-page'); + +const getSiblings = (element) => { + const siblings = []; + let sibling = element.parentNode.firstChild; + const skipMe = element; + for ( ; sibling; sibling = sibling.nextSibling ) + if ( sibling.nodeType == 1 && sibling != element ) + siblings.push( sibling ); + return siblings; +} + +const removeActiveClass = (element) => { + const siblings = getSiblings(element); + siblings.forEach(sibling => { + sibling.classList.remove('active'); + }); +} + +if (settingsPage) { + const settings = document.getElementById('settings') + settings.classList.add('active'); + removeActiveClass(settings); +} + +if (contactsPage) { + const contacts = document.getElementById('contacts') + contacts.classList.add('active'); + removeActiveClass(contacts); +} -// profilePageAnimation(); diff --git a/app/javascript/packs/notifications.js b/app/javascript/packs/notifications.js index 9310ce3..8054fa3 100644 --- a/app/javascript/packs/notifications.js +++ b/app/javascript/packs/notifications.js @@ -1,6 +1,6 @@ import ActionCable from 'actioncable' -// create App object with key cable == new cosumer +// create App object with key cable == new consumer (function() { window.App || (window.App = {}); @@ -40,10 +40,9 @@ App.cable.subscriptions.create({ } }) - +// Receive information from index.html.erb const acceptButton = document.getElementById('accept-button') acceptButton.addEventListener('click', event => { - // event.preventDefault() document.getElementById('chat-room-id').value = chatRoomId }) diff --git a/app/javascript/packs/settings_video.js b/app/javascript/packs/settings_video.js new file mode 100644 index 0000000..51900f9 --- /dev/null +++ b/app/javascript/packs/settings_video.js @@ -0,0 +1,14 @@ +const contactsVideo = document.getElementById("settings-video") + +try { + const contactsStream = navigator.mediaDevices.getUserMedia({ + audio: false, + video: true + }).then(stream => { + contactsVideo.srcObject = stream; + contactsVideo.muted = true; + }) +} catch(e) { + console.error(e); + contactsVideo.innerHTML = "Unable to getUserMedia()"; +} diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 4a5ea09..b6c48d2 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -22,6 +22,5 @@ <%= yield %> <%= javascript_include_tag 'application' %> <%= javascript_pack_tag 'application' %> - diff --git a/app/views/pages/_contact.html.erb b/app/views/pages/_contact.html.erb index 7b06c6c..92f1689 100644 --- a/app/views/pages/_contact.html.erb +++ b/app/views/pages/_contact.html.erb @@ -16,19 +16,19 @@
- <%= link_to establish_call_path(contact.id), remote: true, id: "modalTrigger" do %> + <%= link_to establish_call_path(contact.id), remote: true, class: "modalTrigger", data: {'user-id': contact.id } do %> <% end %>
-