Merge pull request #40 from beatriceo/front-end

Front end
2025-06-22 04:19:12 +00:00 · 2018-09-01 20:27:34 +01:00 · 2018-09-01 20:27:34 +01:00 · 2f6d020b26
commit 2f6d020b26
parent 2e8dd92f39 6a1992a29f
16 changed files with 371 additions and 229 deletions
--- 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;
+        }
+      }
    }
  }
 }
--- 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;
--- 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 {
--- 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 {



-
-
-
-
-
-
-
--- 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 */
--- 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";
--- a/app/assets/stylesheets/pages/_settings.scss
+++ 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;
+}
--- 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 }
--- 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();
--- 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
 })
--- a/app/javascript/packs/settings_video.js
+++ 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()";
+}
--- 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' %>
-
  </body>
 </html>
--- a/app/views/pages/_contact.html.erb
+++ b/app/views/pages/_contact.html.erb
@ -16,19 +16,19 @@
  </div>
  <div class="call" data-user-id="<%= contact.id %>">
    <!-- Calls establish_call in pages_controller -->
-    <%= 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  %>
      <i class="fas fa-phone"></i>
    <% end %>
  </div>
 </div>

 <!-- Modal -->
-<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+<div class="modal fade" id="myModal<%= contact.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="vertical-alignment-helper">
    <div class="modal-dialog vertical-align-center">
      <div class="modal-content modal-color">
        <div class="modal-header">
-          <%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#myModal" do  %>
+          <%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#myModal#{contact.id}" do  %>
            <i class="fas fa-times-circle"></i>
          <% end %>
          <div class="container">
--- a/app/views/pages/index.html.erb
+++ b/app/views/pages/index.html.erb
@ -1,26 +1,36 @@
+<div id="contacts-page"></div>
+
+<!-- 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 class="row">
+      <div class="col-xs-12 col-md-6">
+        <div class="contacts">
+          <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>
      </div>
-      <% current_user.contacts.each do |contact| %>
-        <%= render "pages/contact", contact: contact %>
-      <% end %>
-
-    </div>
-    <div class="video-feed half">
-      <div class="video-content">
-        <video id="contacts-video" autoplay=""></video>
+      <div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
+        <div class="video-feed">
+          <div class="video-content">
+            <video id="contacts-video" class="flex-video" autoplay=""></video>
+          </div>
+        </div>
      </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">
--- a/app/views/shared/_navbar.html.erb
+++ b/app/views/shared/_navbar.html.erb
@ -1,32 +1,45 @@
 <div class="polyglot-navbar">
-  <div class="logo">
-      Polyglot
-  </div>
+  <div class="logo"><%= link_to "Polyglot", contacts_path %></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>
--- a/app/views/users/setting.html.erb
+++ b/app/views/users/setting.html.erb
@ -1,158 +1,101 @@
-<div class="profile-container">
-  <%= simple_form_for(@user) do |t| %>
-    <div class="profile-form">
-      <div>
-        <div class="lign">
+<div id="settings-page"></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)"] %>
+<% 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="row">
+      <div class="col-xs-12 col-md-6">
+        <div class="settings">
+          <h2>Settings</h2>
+          <div>
+            <%= simple_form_for(@user) do |t| %>
+              <div>
+                <div class="card card-form card-form-no-hover">
+                  <%= t.label :language, class:'padding-right no-margin font-weight-normal' %>
+                  <%= 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, class:'padding-right no-margin font-weight-normal' %>
+                  <%= 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, class:'padding-right no-margin font-weight-normal' %>
+                  <%= 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, class:'padding-right no-margin font-weight-normal' %>
+                  <label class="switch">
+                    <%= t.input_field :enable_transcript, class:'input-field-text-black' %>
+                    <span class="slider round"></span>
+                  </label>
+                </div>
+
+                <%= link_to "Save", contacts_path, class: "btn btn-primary save-btn form-control" %>
+                <p></p>
+              </div>
+            <% end %>
+          </div>
        </div>
+      </div>
+      <div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
+        <div class="video-feed">
+          <div class="video-content">
+            <video id="settings-video" class="flex-video" autoplay=""></video>
+          </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%>
-        <% end %>
-
-        <%#= t.input_field :photo, onchange: 'this.form.submit();' %>
-        <%#= t.input_field :photo, as: :hidden %>
-
-      </div>
-
    </div>
-  <% end %>
+  </div>
 </div>


-
+<%= javascript_pack_tag 'settings_video' %>