Merge pull request #8 from oslabs-beta/mergetest

Mergetest
open-source-labs · Jun 30, 2023 · 6f43ca3 · 6f43ca3
2 parents e2d9786 + 25a99bb
commit 6f43ca3
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 53 deletions.
diff --git a/src/components/Containers/Containers.module.scss b/src/components/Containers/Containers.module.scss
@@ -1,31 +1,58 @@
+// .wrapper {
+//   display: grid;
+//   grid-template-columns: 1fr 1fr;
+//   gap: 2rem;
+//   margin: $default-page-margin;
+//   @media screen and (max-width: 1000px) {
+//     flex-direction: column;
+//   }
+
+// }
+
 .wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 2rem;
-  margin: $default-page-margin;
+  display: flex;
+  // flex-direction: column;
+  // margin: $default-page-margin;
+  margin-top: 1rem;
+  transition: margin-left .5s;
+  padding-left: 18rem;
   @media screen and (max-width: 1000px) {
     flex-direction: column;
   }
-  
+
 }
 
 #networkList {
-  max-height: 40rem;
+  position: fixed;
+  height: 100%;
+  width: .5rem;
+  z-index: 1;
+  top: 3.8rem;
+  left: 0;
   overflow-y: scroll;
-  width: 15rem;
   overflow-x: hidden;
+  background-color: #111;
+  padding-top: 1rem;
+  padding-left: 1rem;
+  transition: .5s;
+  &:hover {
+    width: 18rem;
+  }
   &::-webkit-scrollbar {
       width: 10px;
       background-color: rgb(41, 41, 41);
     }
   input {
     margin-top: 2rem;
+    width: 15rem;
   }
   button{
     margin-top: .5rem;
+    width: 15rem;
   }
 }
 
+
 #networkName {
   margin-top: .25rem;
   font-size: 1.5rem;
@@ -44,7 +71,7 @@
   display: grid;
   gap: 1rem;
   grid-template-columns: 1fr 1fr;
-  // transform: all 0.5s ease-in-out;
+  transform: all 0.5s ease-in-out;
   width: 100%;
 }
 

diff --git a/src/components/Containers/Containers.tsx b/src/components/Containers/Containers.tsx
@@ -187,35 +187,35 @@ const Containers = (): JSX.Element => {
   // TODO: CREATE FUNCTIONALITY TO ADD NETWORK TO CONTAINER
 
   return (
-    <div className={styles.wrapper}>
-      <div className={styles.wrapper}>
-        <div id={styles.networkList} className={styles.listHolder}>
-          <h2>NETWORKS</h2>
-          <input
-            className={globalStyles.input}
-            type="text"
-            id="newNetwork"
-            value={network}
-            placeholder="Input network name here..."
-            onChange={(e) => {
-              setNetwork(e.target.value);
-            }}
-          />
-          <button
-            className={globalStyles.button1}
-            onClick={() => createNewNetwork()}
-          >
+    <div>
+      <div id={styles.sidebar}>
+        <div className={styles.listHolder}>
+          <div id={styles.networkList}>
+            <h2>NETWORKS</h2>
+            <input
+              className={globalStyles.input}
+              type="text"
+              id="newNetwork"
+              value={network}
+              placeholder="Input network name here..."
+              onChange={(e) => {
+                setNetwork(e.target.value);
+              }}
+            />
+            <button
+              className={globalStyles.button1}
+              onClick={() => createNewNetwork()}
+            >
             CREATE NEW NETWORK
-          </button>
-          <button
-            className={globalStyles.button1}
-            onClick={() => displayNetworkList()}
-          >
-            {showList ? 'HIDE NETWORK LIST' : 'DISPLAY NETWORK LIST'}
-          </button>
-          {showList && (
-            <div className={styles.listHolder}>
-              <div id={styles.networkList}>
+            </button>
+            <button
+              className={globalStyles.button1}
+              onClick={() => displayNetworkList()}
+            >
+              {showList ? 'HIDE NETWORK LIST' : 'DISPLAY NETWORK LIST'}
+            </button>
+            {showList && (
+              <div className={styles.listHolder}>
                 {networkList.map((name: string, index: number) => {
                   return (
                     <div key={index}>
@@ -226,10 +226,11 @@ const Containers = (): JSX.Element => {
                   );
                 })}
               </div>
-            </div>
-
-          )}
+            )}
+          </div>
         </div>
+      </div>
+      <div className={styles.wrapper}>
         <div className={styles.listHolder}>
           <h2>RUNNING CONTAINERS</h2>
           <p className={styles.count}>Count: {runningList.length}</p>
@@ -242,21 +243,21 @@ const Containers = (): JSX.Element => {
               connectToNetwork={connectToNetwork}
               status="running"
             />
-          </div>
+          </div>    
         </div>
-      </div>
-      <div className={styles.listHolder}>
-        <h2>STOPPED CONTAINERS</h2>
-        <p className={styles.count}>Count: {stoppedList.length}</p>
-        <div className={styles.containerList}>
-          <ContainersCard
-            containerList={stoppedList}
-            stopContainer={stopContainer}
-            runContainer={runContainer}
-            removeContainer={removeContainer}
-            connectToNetwork={connectToNetwork}
-            status="stopped"
-          />
+        <div className={styles.listHolder}>
+          <h2>STOPPED CONTAINERS</h2>
+          <p className={styles.count}>Count: {stoppedList.length}</p>
+          <div className={styles.containerList}>
+            <ContainersCard
+              containerList={stoppedList}
+              stopContainer={stopContainer}
+              runContainer={runContainer}
+              removeContainer={removeContainer}
+              connectToNetwork={connectToNetwork}
+              status="stopped"
+            />
+          </div>
         </div>
       </div>
     </div>