css changes (navbar, settings page, contacts page)

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,10 +33,10 @@
         border-bottom: 5px solid transparent;
 
         &:first-child {
-          margin-right: 1em;
+          margin-right: 2.5em;
         }
 
-        &.active {
+        &.active, &:hover {
           border-bottom: 5px solid $primary;
           color: white;
 
@@ -43,6 +44,7 @@
             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;
+        }
+      }
     }
   }
 }

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 {
 
 
 
-
-
-
-
-
-
-

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 */

app/assets/stylesheets/pages/_index.scss

@@ -1,3 +1,4 @@
 // Import page-specific CSS files here.
 @import "home";
-@import "contacts"
+@import "contacts";
+@import "settings";

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;
+}

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');
+    })
+  })
+})

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
 })

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()";
+}

app/views/pages/index.html.erb

@@ -1,26 +1,28 @@
+<!-- CONTACTS PAGE -->
 <div class="container">
   <div class="contacts-container text-color">
     <div class="contacts half">
       <div class="contacts-header">
         <h2>Contacts</h2>
-
         <%= link_to new_connection_path do %>
           <i class="fas fa-plus-square"></i>
         <% end %>
       </div>
+      <div class="contacts-list">
         <% current_user.contacts.each do |contact| %>
           <%= render "pages/contact", contact: contact %>
         <% end %>
-
       </div>
-    <div class="video-feed half">
+    </div>
+    <div class="video-feed half hidden-xs hidden-sm">
       <div class="video-content">
-        <video id="contacts-video" autoplay=""></video>
+        <video id="contacts-video" class="flex-video" autoplay=""></video>
       </div>
     </div>
   </div>
 </div>
 
+<!-- INFORMATION TO BE PASSED TO NOTIFICATIONS.JS -->
 <div id="my-user-id" data-user-id="<%= current_user.id %>"></div>
 
 <form action="/accept_call" method="post">
@@ -28,6 +30,8 @@
   <input type="submit" id="accept-button" class="btn btn-primary" id="accept-button" style="display: none;" value="ACCEPT CALL"/>
 </form>
 
+<div id="contacts-page"></div>
+
 <%= javascript_pack_tag 'notifications' %>
 <%= javascript_pack_tag 'local_video' %>
 

app/views/shared/_navbar.html.erb

@@ -1,12 +1,10 @@
 <div class="polyglot-navbar">
-  <div class="logo">
+  <div class="logo">Polyglot</div>
-      Polyglot
-  </div>
 
-  <div class="right-align">
+  <div class="right-align hidden-xs hidden-sm">
     <div class="links">
-      <div class="active"><%= link_to "Dashboard", contacts_path %></div>
+      <div id="contacts"><%= link_to "Contacts", contacts_path %></div>
-      <div><%= link_to "Settings", setting_path %></div>
+      <div id="settings"><%= link_to "Settings", setting_path %></div>
     </div>
     <div class="profile">
       <% if current_user.nil? %>
@@ -20,8 +18,7 @@
               <%= cl_image_tag current_user.photo, class: "avatar dropdown-toggle img-circle"%>
             <% end %>
           </div>
-        <ul class="dropdown-menu dropdown-menu-right">
+          <ul class="dropdown-menu dropdown-menu-right polyglot-dropdown">
-          <!-- <li><a href="#">Profile</a></li> -->
             <li><%= link_to "Profile", user_path(current_user) %></li>
             <li><%= link_to "Logout", destroy_user_session_path %></li>
           </ul>
@@ -29,4 +26,20 @@
       <% end %>
     </div>
   </div>
+
+  <div class="burger-menu hidden-md hidden-lg">
+    <div class="dropdown">
+      <i class="fa fa-bars dropdown-toggle" data-toggle="dropdown"></i>
+      <ul class="dropdown-menu dropdown-menu-right polyglot-dropdown">
+        <li><%= link_to "Contacts", contacts_path %></li>
+        <li><%= link_to "Settings", setting_path %></li>
+          <% if current_user.nil? %>
+            <li><%= link_to "Login", new_user_session_path  %></li>
+          <% else %>
+            <li><%= link_to "Profile", user_path(current_user) %></li>
+            <li><%= link_to "Logout", destroy_user_session_path %></li>
+          <% end %>
+      </ul>
+    </div>
+  </div>
 </div>

app/views/users/setting.html.erb

@@ -1,158 +1,97 @@
-<div class="profile-container">
+<div id="settings-page"></div>
-  <%= simple_form_for(@user) do |t| %>
+
-    <div class="profile-form">
+<% 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"
+  ] %>
+
+<div class="container">
+  <div class="contacts-container">
+    <div class="settings half">
+      <h2>Settings</h2>
       <div>
-        <div class="lign">
+        <%= simple_form_for(@user) do |t| %>
-
+          <div>
-       <div class="card"><%= t.input :language, collection:
+            <div class="card card-form card-form-no-hover">
-[
+              <%= t.label :language %>
-"Afrikaans (South Africa)",
+              <%= t.input_field :language, collection: languages.sort, class:'input-field-text-black input-dropdown' %>
-"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)"] %>
-
             </div>
+            <div class="card card-form card-form-no-hover">
+              <%= t.label :caption_font %>
+              <%= t.input_field :caption_font, collection: fonts.sort, class:'input-field-text-black input-dropdown' %>
+            </div>
+            <div class="card card-form card-form-no-hover">
+              <%= t.label :caption_font_size %>
+              <%= t.input_field :caption_font_size, class:'input-field-text-black' %>
+            </div>
+            <div class="card card-form card-form-no-hover">
+              <%= t.label :enable_transcript %>
+              <label class="switch">
+                <%= t.input_field :enable_transcript, class:'input-field-text-black' %>
+                <span class="slider round"></span>
+              </label>
             </div>
-       <div class="card"><%= t.input :caption_font %></div>
-       <div class="card"><%= t.input :caption_font_size %></div>
-       <div class="card"><%= t.input :enable_transcript %></div>
 
             <%= link_to "Save", contacts_path, class: "btn btn-primary save-btn form-control" %>
             <p></p>
           </div>
-
-
-
-      <div class="profile-pic">
-        <% 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%>
         <% end %>
-
-        <%#= t.input_field :photo, onchange: 'this.form.submit();' %>
-        <%#= t.input_field :photo, as: :hidden %>
-
       </div>
 
     </div>
-  <% end %>
+
+    <div class="video-feed hidden-xs hidden-sm">
+      <div class="video-content">
+        <video id="settings-video" class="flex-video" autoplay=""></video>
+      </div>
+    </div>
+  </div>
 </div>
 
 
-
+<%= javascript_pack_tag 'settings_video' %>