From 80646d4d33a77c3dbc7a21902683cc4cd277df01 Mon Sep 17 00:00:00 2001 From: Beatrice Olivera Date: Sat, 1 Sep 2018 17:36:46 +0100 Subject: [PATCH] css changes (navbar, settings page, contacts page) --- .../stylesheets/components/_navbar.scss | 37 ++- app/assets/stylesheets/pages/_contacts.scss | 25 +- app/assets/stylesheets/pages/_home.scss | 1 - app/assets/stylesheets/pages/_index.scss | 3 +- app/assets/stylesheets/pages/_settings.scss | 77 ++++++ app/javascript/packs/application.js | 24 +- app/javascript/packs/notifications.js | 5 +- app/javascript/packs/settings_video.js | 14 ++ app/views/pages/index.html.erb | 18 +- app/views/shared/_navbar.html.erb | 59 +++-- app/views/users/setting.html.erb | 235 +++++++----------- 11 files changed, 294 insertions(+), 204 deletions(-) create mode 100644 app/assets/stylesheets/pages/_settings.scss create mode 100644 app/javascript/packs/settings_video.js diff --git a/app/assets/stylesheets/components/_navbar.scss b/app/assets/stylesheets/components/_navbar.scss index 4a53bc0..b5e7e45 100644 --- a/app/assets/stylesheets/components/_navbar.scss +++ b/app/assets/stylesheets/components/_navbar.scss @@ -14,17 +14,18 @@ font-weight: bold; } - .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,17 +33,18 @@ border-bottom: 5px solid transparent; &:first-child { - margin-right: 1em; + margin-right: 2.5em; } - &.active { + &.active, &:hover { border-bottom: 5px solid $primary; color: white; - a { + a { color: white; - } + } } + a { color: #C4C4C4; text-decoration: none; @@ -53,7 +55,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: $icon; + + &:hover { + color: $primary; + background-color: $navbar-background; + } + } } } } diff --git a/app/assets/stylesheets/pages/_contacts.scss b/app/assets/stylesheets/pages/_contacts.scss index 96b9436..bac5bab 100644 --- a/app/assets/stylesheets/pages/_contacts.scss +++ b/app/assets/stylesheets/pages/_contacts.scss @@ -72,7 +72,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 +141,15 @@ a:hover { align-items: center; } - - - - .contact { color: white; } .contacts { height: 570px; +} + +.contacts-list{ overflow: scroll; } @@ -152,10 +160,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..c9be6e9 --- /dev/null +++ b/app/assets/stylesheets/pages/_settings.scss @@ -0,0 +1,77 @@ +.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; +} diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 8a54864..24e5b70 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -4,6 +4,26 @@ import { triggerModalEvent } from "../components/modal.js"; triggerModalEvent(); -// import { profilePageAnimation } from '../users/lesson'; +const links = document.querySelector('links'); +const linksList = document.querySelectorAll('.links div'); -// profilePageAnimation(); +const getSiblings = function (elem) { + const siblings = []; + let sibling = elem.parentNode.firstChild; + const skipMe = elem; + for ( ; sibling; sibling = sibling.nextSibling ) + if ( sibling.nodeType == 1 && sibling != elem ) + siblings.push( sibling ); + return siblings; +} + +linksList.forEach(link => { + link.addEventListener('click', event => { + // event.preventDefault() + link.classList.add('active') + const siblings = getSiblings(link) + siblings.forEach(sibling => { + sibling.classList.remove('active'); + }) + }) +}) 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/pages/index.html.erb b/app/views/pages/index.html.erb index 060cad6..4b54a44 100644 --- a/app/views/pages/index.html.erb +++ b/app/views/pages/index.html.erb @@ -1,26 +1,28 @@ +

Contacts

- <%= link_to new_connection_path do %> <% end %>
- <% current_user.contacts.each do |contact| %> - <%= render "pages/contact", contact: contact %> - <% end %> - +
+ <% current_user.contacts.each do |contact| %> + <%= render "pages/contact", contact: contact %> + <% end %> +
-
+
+
@@ -28,6 +30,8 @@
+
+ <%= javascript_pack_tag 'notifications' %> <%= javascript_pack_tag 'local_video' %> diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb index c5ea4c9..a85a264 100644 --- a/app/views/shared/_navbar.html.erb +++ b/app/views/shared/_navbar.html.erb @@ -1,32 +1,45 @@
- + -
+ diff --git a/app/views/users/setting.html.erb b/app/views/users/setting.html.erb index 131f531..02e491c 100644 --- a/app/views/users/setting.html.erb +++ b/app/views/users/setting.html.erb @@ -1,158 +1,97 @@ -
- <%= simple_form_for(@user) do |t| %> -
+
+ +<% languages = [ + "Afrikaans (South Africa)", "Amharic (Ethiopia)", "Armenian (Armenia)", + "Azerbaijani (Azerbaijan)", "Indonesian (Indonesia)", "Malay (Malaysia)", + "Bengali (Bangladesh)", "Bengali (India)", "Catalan (Spain)", + "Czech (Czech Republic)", "Danish (Denmark)", "German (Germany)", + "English (Australia)", "English (Canada)", "English (Ghana)", + "English (United Kingdom)", "English (India)", "English (Ireland)", + "English (Kenya)", "English (New Zealand)", "English (Nigeria)", + "English (Philippines)", "English (South Africa)", "English (Tanzania)", + "English (United States)", "Spanish (Argentina)", "Spanish (Bolivia)", + "Spanish (Chile)", "Spanish (Colombia)", "Spanish (Costa Rica)", + "Spanish (Ecuador)", "Spanish (El Salvador)", "Spanish (Spain)", + "Spanish (United States)", "Spanish (Guatemala)", "Spanish (Honduras)", + "Spanish (Mexico)", "Spanish (Nicaragua)", "Spanish (Panama)", + "Spanish (Paraguay)", "Spanish (Peru)", "Spanish (Puerto Rico)", + "Spanish (Dominican Republic)", "Spanish (Uruguay)", "Spanish (Venezuela)", + "Basque (Spain)", "Filipino (Philippines)", "French (Canada)", + "French (France)", "Galician (Spain)", "Georgian (Georgia)", + "Gujarati (India)", "Croatian (Croatia)", "Zulu (South Africa)", + "Icelandic (Iceland)", "Italian (Italy)", "Javanese (Indonesia)", + "Kannada (India)", "Khmer (Cambodia)", "Lao (Laos)", + "Latvian (Latvia)", "Lithuanian (Lithuania)", "Hungarian (Hungary)", + "Malayalam (India)", "Marathi (India)", "Dutch (Netherlands)", + "Nepali (Nepal)", "Norwegian Bokmål (Norway)", "Polish (Poland)", + "Portuguese (Brazil)", "Portuguese (Portugal)", "Romanian (Romania)", + "Sinhala (Sri Lanka)", "Slovak (Slovakia)", "Slovenian (Slovenia)", + "Sundanese (Indonesia)", "Swahili (Tanzania)", "Swahili (Kenya)", + "Finnish (Finland)", "Swedish (Sweden)", "Tamil (India)", + "Tamil (Singapore)", "Tamil (Sri Lanka)", "Tamil (Malaysia)", + "Telugu (India)", "Vietnamese (Vietnam)", "Turkish (Turkey)", + "Urdu (Pakistan)", "Urdu (India)", "Greek (Greece)", + "Bulgarian (Bulgaria)", "Russian (Russia)", "Serbian (Serbia)", + "Ukrainian (Ukraine)", "Hebrew (Israel)", "Arabic (Israel)", + "Arabic (Jordan)", "Arabic (United Arab Emirates)", "Arabic (Bahrain)", + "Arabic (Algeria)", "Arabic (Saudi Arabia)", "Arabic (Iraq)", + "Arabic (Kuwait)", "Arabic (Morocco)", "Arabic (Tunisia)", + "Arabic (Oman)", "Arabic (Qatar)", "Arabic (Lebanon)", + "Arabic (Egypt)", "Persian (Iran)", "Hindi (India)", + "Thai (Thailand)", "Korean (South Korea)", "Chinese, Mandarin (Traditional, Taiwan)", + "Chinese, Cantonese (Traditional, Hong Kong)", "Japanese (Japan)", + "Chinese, Mandarin (Simplified, Hong Kong)", + "Chinese, Mandarin (Simplified, China)" ]%> + +<% fonts = [ + "Arial", + "Times New Roman", + "Calibri" + ] %> + +
+
+
+

Settings

-
+ <%= simple_form_for(@user) do |t| %> +
+
+ <%= t.label :language %> + <%= t.input_field :language, collection: languages.sort, class:'input-field-text-black input-dropdown' %> +
+
+ <%= t.label :caption_font %> + <%= t.input_field :caption_font, collection: fonts.sort, class:'input-field-text-black input-dropdown' %> +
+
+ <%= t.label :caption_font_size %> + <%= t.input_field :caption_font_size, class:'input-field-text-black' %> +
+
+ <%= t.label :enable_transcript %> + +
-
<%= t.input :language, collection: -[ -"Afrikaans (South Africa)", -"Amharic (Ethiopia)", -"Armenian (Armenia)", -"Azerbaijani (Azerbaijan)", -"Indonesian (Indonesia)", -"Malay (Malaysia)", -"Bengali (Bangladesh)", -"Bengali (India)", -"Catalan (Spain)", -"Czech (Czech Republic)", -"Danish (Denmark)", -"German (Germany)", -"English (Australia)", -"English (Canada)", -"English (Ghana)", -"English (United Kingdom)", -"English (India)", -"English (Ireland)", -"English (Kenya)", -"English (New Zealand)", -"English (Nigeria)", -"English (Philippines)", -"English (South Africa)", -"English (Tanzania)", -"English (United States)", -"Spanish (Argentina)", -"Spanish (Bolivia)", -"Spanish (Chile)", -"Spanish (Colombia)", -"Spanish (Costa Rica)", -"Spanish (Ecuador)", -"Spanish (El Salvador)", -"Spanish (Spain)", -"Spanish (United States)", -"Spanish (Guatemala)", -"Spanish (Honduras)", -"Spanish (Mexico)", -"Spanish (Nicaragua)", -"Spanish (Panama)", -"Spanish (Paraguay)", -"Spanish (Peru)", -"Spanish (Puerto Rico)", -"Spanish (Dominican Republic)", -"Spanish (Uruguay)", -"Spanish (Venezuela)", -"Basque (Spain)", -"Filipino (Philippines)", -"French (Canada)", -"French (France)", -"Galician (Spain)", -"Georgian (Georgia)", -"Gujarati (India)", -"Croatian (Croatia)", -"Zulu (South Africa)", -"Icelandic (Iceland)", -"Italian (Italy)", -"Javanese (Indonesia)", -"Kannada (India)", -"Khmer (Cambodia)", -"Lao (Laos)", -"Latvian (Latvia)", -"Lithuanian (Lithuania)", -"Hungarian (Hungary)", -"Malayalam (India)", -"Marathi (India)", -"Dutch (Netherlands)", -"Nepali (Nepal)", -"Norwegian Bokmål (Norway)", -"Polish (Poland)", -"Portuguese (Brazil)", -"Portuguese (Portugal)", -"Romanian (Romania)", -"Sinhala (Sri Lanka)", -"Slovak (Slovakia)", -"Slovenian (Slovenia)", -"Sundanese (Indonesia)", -"Swahili (Tanzania)", -"Swahili (Kenya)", -"Finnish (Finland)", -"Swedish (Sweden)", -"Tamil (India)", -"Tamil (Singapore)", -"Tamil (Sri Lanka)", -"Tamil (Malaysia)", -"Telugu (India)", -"Vietnamese (Vietnam)", -"Turkish (Turkey)", -"Urdu (Pakistan)", -"Urdu (India)", -"Greek (Greece)", -"Bulgarian (Bulgaria)", -"Russian (Russia)", -"Serbian (Serbia)", -"Ukrainian (Ukraine)", -"Hebrew (Israel)", -"Arabic (Israel)", -"Arabic (Jordan)", -"Arabic (United Arab Emirates)", -"Arabic (Bahrain)", -"Arabic (Algeria)", -"Arabic (Saudi Arabia)", -"Arabic (Iraq)", -"Arabic (Kuwait)", -"Arabic (Morocco)", -"Arabic (Tunisia)", -"Arabic (Oman)", -"Arabic (Qatar)", -"Arabic (Lebanon)", -"Arabic (Egypt)", -"Persian (Iran)", -"Hindi (India)", -"Thai (Thailand)", -"Korean (South Korea)", -"Chinese, Mandarin (Traditional, Taiwan)", -"Chinese, Cantonese (Traditional, Hong Kong)", -"Japanese (Japan)", -"Chinese, Mandarin (Simplified, Hong Kong)", -"Chinese, Mandarin (Simplified, China)"] %> - -
-
-
<%= t.input :caption_font %>
-
<%= t.input :caption_font_size %>
-
<%= t.input :enable_transcript %>
- - <%= link_to "Save", contacts_path, class: "btn btn-primary save-btn form-control" %> -

-
- - - -
- <% if @user.photo.url.nil? %> - <%= image_tag "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"%> - <% else %> - <%= cl_image_tag current_user.photo%> + <%= link_to "Save", contacts_path, class: "btn btn-primary save-btn form-control" %> +

+
<% end %> - - <%#= t.input_field :photo, onchange: 'this.form.submit();' %> - <%#= t.input_field :photo, as: :hidden %> -
- <% end %> + + +
- +<%= javascript_pack_tag 'settings_video' %>