Merge branch 'master' into cross

app/assets/javascripts/signaling-server.js

@@ -1,244 +0,0 @@
-// Broadcast Types
-
-class Signaling {}
-
-const JOIN_ROOM = "JOIN_ROOM";
-const EXCHANGE = "EXCHANGE";
-const REMOVE_USER = "REMOVE_USER";
-
-// DOM Elements
-let currentUser;
-let localVideo;
-let remoteVideoContainer;
-
-// Objects
-let pcPeers = {}; // peer connection
-let localstream;
-
-window.onload = () => {
-  // if (document.getElementById("current-user")) {
-    currentUser = document.getElementById("current-user").innerHTML;
-    console.log(currentUser)
-    localVideo = document.getElementById("local-video");
-    remoteVideoContainer = document.getElementById("remote-video-container");
-  // }
-};
-
-// Ice Credentials
-const ice = { iceServers: [{urls: ['stun:stun.l.google.com:19302', 'stun:stun.1.google.com:19302']}]};
-
-// Initialize user's own video
-document.onreadystatechange = async () => {
-  if (document.readyState === "interactive") {
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({
-        audio: true,
-        video: true
-      })
-
-      localstream = stream;
-      // if (localVideo) {
-        localVideo.srcObject = stream
-        localVideo.muted = true
-      // }
-    } catch (e) { console.error(e); }
-  }
-};
-
-// find chatroom
-// const handleJoinSession = async () => {
-//   App.session = await App.cable.subscriptions.create("VideoSessionChannel", {
-//     connected: () => {
-//       broadcastData({
-//         type: JOIN_ROOM,
-//         from: currentUser
-//       });
-//     },
-//     received: data => {
-//       console.log("received", data);
-//       if (data.from === currentUser) return;
-//       switch (data.type) {
-//         case JOIN_ROOM:
-//           return joinRoom(data);
-//         case EXCHANGE:
-//           if (data.to !== currentUser) return;
-//           return exchange(data);
-//         case REMOVE_USER:
-//           return removeUser(data);
-//         default:
-//           return;
-//       }
-//     }
-//   });
-// };
-
-// if (document.getElementById('chatroom-hook')) {
-  const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"]
-
-// }
-
-const handleJoinSession = async () => {
-  App['chatroom' + chatroomId] = await App.cable.subscriptions.create({
-    channel: "ChatRoomsChannel",
-    room: chatroomId
-  }, {
-    connected: () => {
-      console.log(chatroomId)
-      broadcastData({
-        type: JOIN_ROOM,
-        from: currentUser,
-        room: chatroomId
-      });
-    },
-    received: data => {
-      console.log(data)
-      if (data.from === currentUser) return;
-      switch (data.type) {
-        case JOIN_ROOM:
-          return joinRoom(data);
-        case EXCHANGE:
-          if (data.to !== currentUser) return;
-          return exchange(data);
-        case REMOVE_USER:
-          return removeUser(data);
-        default:
-          return;
-      }
-    }
-  });
-};
-
-const handleLeaveSession = () => {
-  for (user in pcPeers) {
-    pcPeers[user].close();
-  }
-  pcPeers = {};
-
-  App.session.unsubscribe();
-
-  remoteVideoContainer.innerHTML = "";
-
-  broadcastData({
-    type: REMOVE_USER,
-    from: currentUser
-  });
-};
-
-const joinRoom = data => {
-  createPC(data.from, true);
-};
-
-const removeUser = data => {
-  let video = document.getElementById(`remoteVideoContainer+${data.from}`);
-  video && video.remove();
-  delete pcPeers[data.from];
-};
-
-
-const broadcastData = data => {
-  if (data.type === EXCHANGE) {
-    console.log("yayyy")
-  }
-  fetch("chat_room_sessions", {
-    method: "POST",
-    body: JSON.stringify(data),
-    headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
-  });
-};
-
-const createPC = (userId, isOffer) => {
-  let pc = new RTCPeerConnection(ice);
-  let test = userId
-  pcPeers[userId] = pc;
-  pc.addStream(localstream);
-  if (isOffer) {
-    pc
-      .createOffer()
-      .then(offer => {
-        pc.setLocalDescription(offer);
-        broadcastData({
-          type: EXCHANGE,
-          from: currentUser,
-          to: userId,
-          sdp: JSON.stringify(pc.localDescription),
-          room: chatroomId
-        });
-      })
-      .catch(logError);
-  }
-
-  pc.onicecandidate = event => {
-    if (event.candidate) {
-      broadcastData({
-        type: EXCHANGE,
-        from: currentUser,
-        to: userId,
-        candidate: JSON.stringify(event.candidate),
-        room: chatroomId
-      });
-    }
-  };
-
-  pc.onaddstream = event => {
-    const element = document.createElement("video");
-    element.id = `remoteVideoContainer+${userId}`;  // why is the userId being interpolated?
-    element.autoplay = "autoplay";
-    element.srcObject = event.stream;
-    element.height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
-    remoteVideoContainer.appendChild(element);
-    localVideo.classList.add("video-sm");
-  };
-
-  pc.oniceconnectionstatechange = event => {
-    if (pc.iceConnectionState == "disconnected") {
-      console.log("Disconnected:", userId);
-      broadcastData({
-        type: REMOVE_USER,
-        from: userId
-      });
-    }
-  };
-
-  return pc;
-};
-
-
-const exchange = data => {
-  let pc;
-
-  if (!pcPeers[data.from]) {
-    pc = createPC(data.from, false);
-  } else {
-    pc = pcPeers[data.from];
-  }
-
-  if (data.candidate) {
-    pc
-      .addIceCandidate(new RTCIceCandidate(JSON.parse(data.candidate)))
-      .then(() => console.log("Ice candidate added"))
-      .catch(logError);
-  }
-
-  if (data.sdp) {
-    sdp = JSON.parse(data.sdp);
-    pc
-      .setRemoteDescription(new RTCSessionDescription(sdp))
-      .then(() => {
-        if (sdp.type === "offer") {
-          pc.createAnswer().then(answer => {
-            pc.setLocalDescription(answer);
-            broadcastData({
-              type: EXCHANGE,
-              from: currentUser,
-              to: data.from,
-              sdp: JSON.stringify(pc.localDescription),
-              room: chatroomId
-            });
-          });
-        }
-      })
-      .catch(logError);
-  }
-};
-
-const logError = error => console.warn("Whoops! Error:", error);

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

app/assets/stylesheets/config/_bootstrap_variables.scss

@@ -14,7 +14,7 @@ $gray-base:       $gray;
 $brand-primary:   $primary;
 $brand-success:   $green;
 $brand-info:      $yellow;
-$brand-danger:    $red;
+$brand-danger:    $warn;
 $brand-warning:   $orange;
 $brand-secondary: $secondary;
 
@@ -52,3 +52,4 @@ $border-radius-small: 2px;
 }
 
 // Override other variables below!
+$input-border-focus: $primary;

app/assets/stylesheets/config/_colors.scss

@@ -8,6 +8,7 @@ $orange: #E67E22;
 $green: #32B796;
 $gray: #000000;
 $light-gray: #F4F4F4;
+$warn: #3d63cc;
 
 $primary: #F55E4F;
 $secondary: #5ED17E;
@@ -15,4 +16,5 @@ $background: #33333D;
 $card-background: #464650;
 $navbar-background: #1F1F29;
 $text-darker: #CDCDCD;
+$text-inactive: #C4C4C4;
 $icon: #EDECEC;

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 {

app/assets/stylesheets/devise/_login.scss

@@ -18,13 +18,13 @@
     url('https://unsplash.com/photos/jay5BqVyf5A');
 
 
-
   .login-content {
     position: relative;
-    top: -10vh;
+    // top: -10vh;
     padding: 50px;
     background-color: white;
     width: 25vw;
+    min-width: 300px;
     border-radius: 3px;
     box-shadow: 1px 1px 10px rgba(0,0,0, 0.21);
 

app/assets/stylesheets/pages/_contacts.scss

@@ -12,6 +12,7 @@ a:hover {
 }
 
 .card {
+  min-width: 360px;
   display: flex;
   justify-content: space-between;
   background: $card-background;
@@ -73,8 +74,17 @@ a:hover {
 }
 
 .video-content {
-  height: 485px;
-  background-color: black;
+  // height: 485px;
+
+  padding-left: 0.2vw;
+  display: flex;
+  justify-content: center;
+  .flex-video {
+    height: 100%;
+    width: 100%;
+    flex: 1 1 auto;
+  }
+  // background-color: black;
 }
 
 .half {
@@ -91,6 +101,8 @@ a:hover {
   align-items: center;
 }
 
+// Modal
+
 .modal-header {
   border-bottom: 0px;
   i {
@@ -100,6 +112,7 @@ a:hover {
 
 .modal-color {
   background-color: $card-background;
+  min-width: 296px;
 }
 
 .vertical-alignment-helper {
@@ -133,17 +146,28 @@ a:hover {
   align-items: center;
 }
 
+.modal-flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media only screen and (max-width: 1100px) {
+    .modal-picture {
+      width: 50px;
+    }
+}
 
 
-
+// Contact
 
 .contact {
   color: white;
 }
 
 .contacts {
-  height: 570px;
-  overflow: scroll;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .close {
@@ -159,12 +183,10 @@ a:hover {
   filter: alpha(opacity=20);
 }
 
-
-
-
-
-
-
+.contacts-list{
+  height: 90vh;
+  overflow: scroll;
+}
 
 
 

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,125 @@
+.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;
+}
+
+.slider.rounded {
+  border-radius: 3px;
+}
+
+.slider.rounded:before {
+  border-radius: 3px;
+}
+
+
+.settings {
+  color: white;
+}
+
+.no-padding {
+  padding: 0;
+}
+
+.no-margin {
+  margin: 0;
+}
+
+.font-weight-normal {
+  font-weight: normal;
+}
+
+.padding-right {
+  padding-right: 10px;
+}
+
+.margin-right {
+  margin-right: 10px;
+}
+
+.flex-inline {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.center-screen {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  min-height: 80vh;
+}

app/assets/stylesheets/users/_edit.scss

@@ -3,7 +3,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: calc(100vh - 4.5em); // 4.5em is height of navbar
+  padding-top: 30px;
+  // height: calc(100vh - 4.5em); // 4.5em is height of navbar
 
   form {
     flex-grow: 1;
@@ -22,10 +23,18 @@
 
     img {
       max-width: 50vw;
+      padding-top: 30px;
     }
   }
 }
 
+.small-profile-pic {
+  img {
+    width: 223px;
+    margin-bottom: 20px;
+  }
+}
+
 .profile-form {
   display: grid;
   grid-template-columns: 1fr 1fr;

app/assets/stylesheets/users/_show.scss

@@ -4,6 +4,7 @@
   display:flex;
   flex-direction: column;
   justify-content: center;
+  text-align: center;
 
   h2 {
     font-size: 1.5em;
@@ -21,33 +22,43 @@
         margin-right: .5em;
       }
     }
-    .profile-pic {
-      display: flex;
-      align-items: center;
-      margin-right: 3em;
-      img {
-        width: 10em;
-      }
-    }
-
-    .profile-text {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      color: #f2321f;
-      h1 {
-        margin: 0 0 .5em 0 ;
-      }
-      h2 {
-        margin: 0;
-      }
-      .italics {
-        font-style: italic;
-        color: white;
-      }
-    }
   }
+}
 
+.profile-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: $primary;
+  h1 {
+    margin: 0 0 .5em 0 ;
   }
+  h2 {
+    margin: 0;
+  }
+  .italics {
+    font-style: italic;
+    color: white;
+  }
+}
 
+.vcenter {
+  display: inline-block;
+  vertical-align: middle;
+  float: none;
+}
 
+.vertical-padding {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.vertical-margin {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.img-profile {
+  width: 200px;
+  height: 200px;
+}