styled view on dynamic pane width changes

darylbg · Sep 4, 2023 · 2a8d787 · 2a8d787
1 parent 478229f
commit 2a8d787
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 19 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Zoom</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.jsx b/src/App.jsx
@@ -39,23 +39,41 @@ function App() {
   const layoutCSS = {
     minHeight: "100%",
     display: "flex",
-    flexDirection: paneWidth < 800 ? 'column' : 'row',
+    flexDirection: paneWidth < 800 ? "column" : "row",
     justifyContent: "space-between",
-    paddingBottom: '52px',
+    paddingBottom: "52px",
   };
 
-  const smallLayoutCss = {
-    width: '80%'
+  // const smallLayoutCss = {
+  //   width: "80%",
+  // };
+
+  const mediumLayoutCss = {
+    flex: "0.8",
+  };
+
+  const LargeLayoutCSS = {
+    flex: "0.5",
+  };
+
+  let conditionalStyles = {};
+
+  if (paneWidth > 1000 && toggleVideoView === false) {
+    conditionalStyles = LargeLayoutCSS;
+  } else if (paneWidth > 800 && toggleVideoView === false) {
+    conditionalStyles = mediumLayoutCss;
+  } else {
+    conditionalStyles = null;
   }
 
   useEffect(() => {
     const handleViewPadding = () => {
-      if (paneWidth > 1100 && toggleVideoView == true) {
+      if (paneWidth > 900 && toggleVideoView == false) {
         // return padding = paneWidth / 100
       }
-    }
-  handleViewPadding();
-  }, [sizes, viewportWidth])
+    };
+    handleViewPadding();
+  }, [sizes, viewportWidth]);
 
   const handleResize = () => {
     setViewportWidth(window.innerWidth);
@@ -155,9 +173,16 @@ function App() {
         onChange={setSizes}
         className="split-pane-section"
       >
-        <Pane minSize={"50%"} maxSize={"95%"}>
+        <Pane minSize={"20%"} maxSize={"95%"}>
           <div style={{ ...layoutCSS, alignItems: "center" }} ref={elementRef}>
-            <div style={paneWidth < 800 ? smallLayoutCss : null} className={`view-wrapper ${toggleVideoView ? "" : "d-none"}`}>
+            <div
+              style={{
+                width: paneWidth < 800 ? "80%" : null,
+                paddingLeft: paneWidth > 900 ? "5%" : null,
+              }}
+              // style={conditionalStyles}
+              className={`view-wrapper ${toggleVideoView ? "" : "d-none"}`}
+            >
               <div className={`video-view `}>
                 <Dropdown className="view-menu-dropdown">
                   <Dropdown.Toggle variant="primary" id="dropdown-basic">
@@ -185,21 +210,39 @@ function App() {
                 {isVideoVisible ? (
                   <YoutubeEmbedVideo videoId={videoId} suggestions={false} />
                 ) : (
-                  <p className="view-title">{videoName}</p>
+                  <p
+                    className="view-title"
+                    style={{ fontSize: paneWidth < 800 ? "2em" : "5vw" }}
+                  >
+                    {videoName}
+                  </p>
                 )}
                 <div className="view-mute-label">
                   <MicOff />
                   <p>{videoName}</p>
                 </div>
               </div>
             </div>
-            <div style={paneWidth < 800 ? smallLayoutCss : null} className="view-wrapper">
-              <div className="right-view">
+            <div
+              style={{
+                width: paneWidth < 800 ? "80%" : null,
+                paddingRight:
+                  paneWidth > 900 && toggleVideoView === true ? "5%" : null,
+              }}
+              // style={conditionalStyles}
+              className="view-wrapper"
+            >
+              <div className="right-view" style={conditionalStyles}>
                 <ViewMenu handleSidebarToggle={handleSidebarToggle} />
                 {isWebcamVisible ? (
                   <Webcam style={{ width: "100%" }} />
                 ) : (
-                  <p className="view-title">{myName}</p>
+                  <p
+                    className="view-title"
+                    style={{ fontSize: paneWidth < 800 ? "2em" : "5vw" }}
+                  >
+                    {myName}
+                  </p>
                 )}
                 <div className="view-mute-label">
                   <MicOff />

diff --git a/src/index.css b/src/index.css
@@ -26,17 +26,21 @@ input:focus-visible {
   flex: 1;
   justify-self: center;
   align-items: center;
+  justify-content: center;
+  width: 80%;
 }
 
-/* @media screen and (min-width: ) {
-  
-} */
+@media screen and (min-width: 800px) {
+  .view-wrapper {
+    padding: 0 10px;
+  }
+}
 
 .view-title {
   color: white;
   font-weight: bold;
   text-wrap: nowrap;
-  font-size: 5vw;
+  /* font-size: 5vw; */
   clear: right;
   overflow: hidden;
 }