Start fix on mobile layout issues

Author: C-Garza

streams-react/src/components/ChatContainer/ChatContainer.module.css

@@ -2,7 +2,10 @@
   position: fixed;
   right: 0;
   height: calc(100vh - 70px);
-  width: 400px;
+  /* width: 400px; */
+  width: 20%;
+  min-width: 400px;
+  max-width: 500px;
   background-color: #EEEEEE;
   border: 2px solid #212121;
   transform: translateX(100%);
@@ -50,6 +53,27 @@
 .hidden {
   display: none;
 }
+/*****
+MEDIA QUERIES
+*****/
+@media(max-width: 1200px) {
+  .container {
+    min-width: 350px;
+  }
+}
+@media(max-width: 1000px) {
+  .container {
+    min-width: 300px;
+  }
+}
+@media(max-width: 600px) {
+  .container {
+    min-width: none;
+    max-width: none;
+    width: 100%;
+    z-index: 1;
+  }
+}
 @keyframes rotateChevron {
   0% {
     transform: rotateZ(0deg);

streams-react/src/components/ChatHeader/ChatHeader.js

@@ -1,13 +1,22 @@
 import { useContext } from "react";
+import { ChatContext } from "../../context/ChatContext";
 import { SocketContext } from "../../context/SocketContext";
 import styles from "./ChatHeader.module.css";
 
 const ChatHeader = () => {
   const {users, roomName} = useContext(SocketContext);
+  const {setIsChatOpen} = useContext(ChatContext);
   const totalOnline = Object.keys(users).length;
 
+  const handleClick = () => {
+    setIsChatOpen(prev => !prev);
+  };
+
   return(
     <div className={styles.container}>
+      <button className={styles.close__button} onClick={handleClick}>
+        <i className={`fas fa-times ${styles.close__icon}`}></i>
+      </button>
       <h2 className={styles.chat__header}>{roomName}</h2>
       <p className={styles.chat__online}>Currently Online: {totalOnline}</p>
     </div>

streams-react/src/components/ChatHeader/ChatHeader.module.css

@@ -3,6 +3,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  position: relative;
   border-bottom: 2px solid #212121;
   padding: 5px;
   padding-bottom: 10px;
@@ -14,16 +15,32 @@
 }
 .chat__header {
   display: -webkit-box;
-  -webkit-line-clamp: 3;
+  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   max-height: 100px;
   width: 100%;
   margin-top: 10px;
   margin-bottom: 10px;
+  padding-right: 2em;
+  padding-left: 2em;
   text-decoration: underline;
   overflow: hidden;
   text-align: center;
 }
 .chat__online {
   align-self: flex-start;
+}
+.close__button {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  color: #EEEEEE;
+  cursor: pointer;
+  transition: all 0.1s ease-out;
+}
+.close__button:hover, .close__button:focus {
+  color: white;
+}
+.close__icon {
+  font-size: 2em;
 }

streams-react/src/components/ChatInput/ChatInput.module.css

@@ -58,6 +58,11 @@
 .send__button:focus {
   color: #00E676;
 }
+@media(max-width: 400px) {
+  .emoji__mart {
+    transform: translate(-77%, -105%);
+  }
+}
 @keyframes sent {
   0% {
     transform: scale(1);

streams-react/src/components/HomeContainer/HomeContainer.module.css

@@ -24,6 +24,14 @@
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   animation: fadeUp 0.55s ease-out;
 }
+/***** 
+MEDIA QUERIES 
+******/
+@media(max-width: 400px) {
+  .forms {
+    min-width: auto;
+  }
+}
 /* Cool red color background-color: #DA3E52;*/
 @keyframes fadeUp {
   0% {

streams-react/src/components/RoomContainer/RoomContainer.js

@@ -21,7 +21,7 @@ const RoomContainer = () => {
     hasPeerError,
     hasSocketError
   } = useContext(SocketContext);
-  const {isChatOpen} = useContext(ChatContext);
+  const {isChatOpen, chatDimensions} = useContext(ChatContext);
   const location = useLocation();
   const [userName] = useStateToLocalStorage("userName");
   const [roomName, setRoomName] = useStateToLocalStorage("roomName");
@@ -43,7 +43,10 @@ const RoomContainer = () => {
   }, [setParams, roomID, location]);
 
   return(
-    <div className={`${styles.container} ${isChatOpen ? styles["container--shrink"] : ""}`}>
+    <div 
+      className={styles.container}
+      style={{paddingRight: isChatOpen ? chatDimensions.width : 0}}
+    >
       <VideoRoomHeader room={hostRoomName ? hostRoomName : roomName} setRoomName={setRoomName} isHost={isHost} />
       <VideoContainer 
         videos={videoStreams} 

streams-react/src/components/RoomContainer/RoomContainer.module.css

@@ -5,6 +5,8 @@
   min-height: calc(100vh - 70px);
   background-color: #333745;
 }
-.container--shrink {
-  padding-right: 400px;
+@media(max-width: 600px) {
+  .container {
+    padding-right: 0 !important;
+  }
 }