css changes (navbar, settings page, contacts page)

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>
-      <% current_user.contacts.each do |contact| %>
-        <%= render "pages/contact", contact: contact %>
-      <% end %>
-
+      <div class="contacts-list">
+        <% current_user.contacts.each do |contact| %>
+          <%= render "pages/contact", contact: contact %>
+        <% end %>
+      </div>
     </div>
-    <div class="video-feed half">
+    <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,32 +1,45 @@
 <div class="polyglot-navbar">
-  <div class="logo">
-      Polyglot
-  </div>
+  <div class="logo">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><%= link_to "Settings", setting_path %></div>
+      <div id="contacts"><%= link_to "Contacts", contacts_path %></div>
+      <div id="settings"><%= link_to "Settings", setting_path %></div>
     </div>
     <div class="profile">
-    <% if current_user.nil? %>
-      <%= link_to "Login", new_user_session_path  %>
-    <% else %>
-      <div class="dropdown">
-        <div data-toggle="dropdown">
-          <% if current_user.photo.url.nil? %>
-            <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar dropdown-toggle img-circle">
-          <% else %>
-            <%= cl_image_tag current_user.photo, class: "avatar dropdown-toggle img-circle"%>
-          <% end %>
+      <% if current_user.nil? %>
+        <%= link_to "Login", new_user_session_path  %>
+      <% else %>
+        <div class="dropdown">
+          <div data-toggle="dropdown">
+            <% if current_user.photo.url.nil? %>
+              <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar dropdown-toggle img-circle">
+            <% else %>
+              <%= cl_image_tag current_user.photo, class: "avatar dropdown-toggle img-circle"%>
+            <% end %>
+          </div>
+          <ul class="dropdown-menu dropdown-menu-right polyglot-dropdown">
+            <li><%= link_to "Profile", user_path(current_user) %></li>
+            <li><%= link_to "Logout", destroy_user_session_path %></li>
+          </ul>
         </div>
-        <ul class="dropdown-menu dropdown-menu-right">
-          <!-- <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>
-      </div>
-    <% end %>
+      <% 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">
-  <%= simple_form_for(@user) do |t| %>
-    <div class="profile-form">
+<div id="settings-page"></div>
+
+<% 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 card-form card-form-no-hover">
+              <%= t.label :language %>
+              <%= t.input_field :language, collection: languages.sort, class:'input-field-text-black input-dropdown' %>
+            </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 :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)"] %>
-
-        </div>
-        </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%>
+            <%= link_to "Save", contacts_path, class: "btn btn-primary save-btn form-control" %>
+            <p></p>
+          </div>
         <% 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' %>