Add responsive layout

tmarti · Jun 6, 2024 · 159779d · 159779d
1 parent 2ea27a4
commit 159779d
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 33 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,7 +1,7 @@
 #root {
-  max-width: 1280px;
+  /* max-width: 1280px; */
   margin: 0 auto;
-  padding: 2rem;
+  /* padding: 2rem; */
   text-align: center;
 }
 
@@ -41,7 +41,7 @@
   color: #888;
 }
 
-#main-div {
+/* #main-div {
   display: flex;
   width: 100%;
   height: 100%;
@@ -56,4 +56,128 @@
   flex-grow: 1;
   margin: 5px;
 }
+ */
+
+
+#main-div {
+  display: flex;
+  height: 100vh; /* Full viewport height */
+  width: 100vw; /* Full viewport width */
+}
+
+#left-pane {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 20%; /* 20% of horizontal space as per your diagram */
+  border: 1px solid lightgray;
+  padding: 0 2rem;
+}
+
+#right-pane {
+  height: 100%;
+  width: 80%; /* 80% of horizontal space as per your diagram */
+}
+
+.PanelConceptCategories {
+  height: 70%; /* 70% of vertical space */
+  overflow-y: scroll; /* Enable vertical scrolling */
+}
+
+.PanelMyConcept {
+  height: 30%; /* 30% of vertical space */
+}
+
+.Panel3D {
+  height: 100%; /* 100% of vertical space */
+  width: 100%; /* Using full width of its container */
+  border: 1px solid lightgray;
+}
+
+.ItemOpenAiKey {
+  position: fixed; /* Fix position relative to the viewport */
+  bottom: 1rem; /* Align to the top of the viewport */
+  right: 1rem; /* Position at the center of the viewport */
+  /* transform: translateX(-50%); Shift left by half its width to center it */
+  width: auto; /* Auto width based on content */
+  z-index: 1000; /* Ensure it's above other content */
+  background: lightyellow;
+  padding: 1rem;
+  border: 1px solid lightgray;
+  border-radius: 10px;
+}
 
+.CardHoveredConcept {
+  position: fixed; /* Fix position relative to the viewport */
+  bottom: 1rem; /* Align to the top of the viewport */
+  left: calc(20% + 4rem); /* Position at the center of the viewport */
+  /* transform: translateX(-50%); Shift left by half its width to center it */
+  width: auto; /* Auto width based on content */
+  z-index: 1000; /* Ensure it's above other content */
+  background: lightyellow;
+  padding: 1rem;
+  border: 1px solid lightgray;
+  border-radius: 10px;
+  margin-left: 1rem;
+}
+
+.HiddenOnMobile {
+  display: block;
+}
+
+.SelectConcept {
+  max-width: 100%;
+  /* z-index: 2000;; */
+  margin: 1rem 0;
+}
+
+/* Mobile styles using a media query */
+@media (max-width: 600px) { /* Adjust breakpoint as needed */
+  #main-div {
+    flex-direction: column; /* Stack vertically for mobile */
+  }
+
+  #left-pane, #right-pane {
+    width: 100%; /* Full width on mobile */
+  }
+
+  #right-pane {
+    height: 50%;
+  }
+
+  #left-pane {
+    height: 50%;
+    padding: 0;
+  }
+
+  .PanelConceptCategories {
+    width: calc(100% - 2rem);
+    padding: 0;
+    margin: 1rem;
+    height: 170px; /* 20% of vertical space */
+    margin-bottom: 0;
+  }
+
+  .PanelMyConcept {
+    width: 100%; /* Full width */
+    /* Height auto-adjusts based on content */
+    padding-bottom: 1rem;
+    padding: 0;
+    margin: 1rem;
+  }
+
+  .Panel3D {
+    height: 50%;
+    /* flex-grow: 1; Takes remaining space */
+    width: 100%; /* Full width */
+    height: unset;
+  }
+
+  .HiddenOnMobile {
+    display: none;
+  }
+
+  .SelectConcept {
+    max-width: 85%;
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -33,14 +33,6 @@ function App() {
     setConcepts(concepts.slice());
   };
 
-
-  setTimeout(
-    () => {
-      (document.getElementById('three-canvas') as HTMLCanvasElement).style.height = '100%';
-    },
-    400
-  )
-
   return (
     <>
       <ItemOpenAiKey/>
@@ -56,11 +48,6 @@ function App() {
           <PanelMyConcept
             onChangeMyConcept={fnChangeCustomConcept}
           />
-          {hoveredIndex != -1 &&
-            <CardHoveredConcept
-              text={`${concepts[hoveredIndex].label}`}
-            />
-          }
         </div>
         <div id="right-pane">
           <Panel3D
@@ -69,6 +56,7 @@ function App() {
             onHoverConcept={setHoveredIndex}/>
         </div>
       </div>
+      {hoveredIndex != -1 && <CardHoveredConcept text={`${concepts[hoveredIndex].label}`}/>}
     </>
   )
 }

diff --git a/src/CardHoveredConcept.tsx b/src/CardHoveredConcept.tsx
@@ -4,13 +4,8 @@ export const CardHoveredConcept = ({
   text: string,
 }) => {
   return (
-    <h4 style={{
-        border: '1px black solid',
-        borderRadius: '8px',
-        width: 'fit-content',
-        padding: '8px',
-    }}>
-        <em>{text}</em>
-    </h4>
+    <div className="CardHoveredConcept HiddenOnMobile">
+        <strong><em>{text}</em></strong>
+    </div>
   );
 }
diff --git a/src/ItemOpenAiKey.tsx b/src/ItemOpenAiKey.tsx
@@ -1,10 +1,10 @@
 export const ItemOpenAiKey = () => {
   return (
-    <div style={{ padding: '3px', textAlign: 'left' }}>
+    <div className="ItemOpenAiKey">
         OpenAI API key&nbsp;
         <input
           id='llm-key'
-          style={{width: '400px'}}
+          style={{width: '200px'}}
           type='password'
         />
     </div>

diff --git a/src/ListItemConcept.tsx b/src/ListItemConcept.tsx
@@ -9,6 +9,7 @@ export const ListItemConcept = ({
   return (
     <div style={{ display: 'flex', alignItems: 'center', padding: '3px' }}>
         <span
+            className="HiddenOnMobile"
             style={{
                 height: '20px', // Ensures the circle is 20px in diameter
                 width: '20px',  // Matching width and height for a perfect circle

diff --git a/src/Panel3D.tsx b/src/Panel3D.tsx
@@ -54,7 +54,7 @@ export const Panel3D = ({
     )
   }
   return (
-    <Canvas id="three-canvas">
+    <Canvas id="three-canvas" className='Panel3D'>
       {/* PerspectiveCamera from drei automatically becomes the default camera */}
       <PerspectiveCamera
         makeDefault

diff --git a/src/PanelConceptCategories.tsx b/src/PanelConceptCategories.tsx
@@ -35,12 +35,14 @@ export const PanelConceptCategories = ({
   };
 
   return (
-    <>
-    <h3 style={{textAlign: 'left'}}># Categories</h3>
+    <div className='PanelConceptCategories'>
+        <h3 style={{textAlign: 'left'}}># Categories</h3>
         <Select 
             // ref={select}
+            className="SelectConcept"
             placeholder="pick a concept..."
             isSearchable={false}
+            menuPortalTarget={document.body}
             options={Object.keys(conceptCategories).map(
               x => {
                 return {
@@ -51,7 +53,7 @@ export const PanelConceptCategories = ({
             )}
             onChange={ev => onSelectionChange(ev?.value || "")}
         />
-        <h2 style={{height:'300px', overflow:'scroll'}}>
+        <h2 style={{height:'300px', overflow:'scroll'}} className="HiddenOnMobile">
             {concepts.map(x => (
                 <ListItemConcept
                   color={x.color}
@@ -67,7 +69,7 @@ export const PanelConceptCategories = ({
             Represent Category
           </button>
         </div>
-    </>
+    </div>
   );
 
 }
diff --git a/src/PanelMyConcept.tsx b/src/PanelMyConcept.tsx
@@ -6,7 +6,7 @@ export const PanelMyConcept = ({
   onChangeMyConcept: (concept: string) => void,
 }) => {
   return (
-    <>
+    <div className='PanelMyConcept'>
         <h3 style={{textAlign:'left' }}># Your Concept</h3>
         <h2>
           <ListItemConcept
@@ -23,7 +23,7 @@ export const PanelMyConcept = ({
             Represent Concept
             </button>
         </div>
-    </>
+    </div>
   );
 
 }