changed the look of home page

CERIT-SC · Dec 19, 2024 · 8fc994b · 8fc994b
1 parent eeb2764
commit 8fc994b
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 14 deletions.
diff --git a/src/HomePage.css b/src/HomePage.css
@@ -45,7 +45,8 @@ input {
 .server-properties {
   display: grid;
   align-items: center;
-  grid-template-areas: "url url time time time btn btn btn";
+  grid-template-areas: "url url url url url url"
+                       "time time time btn btn btn";
   gap: 0.5rem;
 }
 
@@ -74,10 +75,10 @@ input {
     position: absolute;
     width: 90%;
     padding: 5%;
+    font-size: 12px;
     background: rgba(255, 255, 255, 0.5);
     border-radius: 8px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    min-height: 80vh;
   }
 
   .start-named-server {

diff --git a/src/HomePage.jsx b/src/HomePage.jsx
@@ -6,6 +6,7 @@ import { DropDownButton } from "./components/DropDownButton/DropDownButton";
 import { Button } from "./components/Button/Button";
 import { EinfraFooter } from "./components/FooterAndHeader/EinfraFooter";
 import JupyterHubHeader from "./components/FooterAndHeader/JupyterHubHeader";
+import { FieldHeader } from "./components/FieldHeader/FieldHeader";
 
 function HomePage() {
   // for testing with npm run dev please uncomment this block
@@ -22,7 +23,16 @@ function HomePage() {
   //       url: "/user/test1",
   //       active: false,
   //       ready: false,
-  //     }
+  //     },
+  //     ...Array.from({ length: 50 }, (_, i) => `spawner${i + 1}`).reduce((acc, spawner) => {
+  //       acc[spawner] = {
+  //         last_activity: new Date().toISOString(),
+  //         url: `/user/${spawner}`,
+  //         active: Math.random() < 0.5, // Randomly set active status
+  //         ready: Math.random() < 0.5, // Randomly set ready status
+  //       };
+  //       return acc;
+  //     }, {})
   //   },
   //   default_server_active: false,
   //   url: "http://localhost",
@@ -138,18 +148,15 @@ function HomePage() {
             <Button title="Add New Server" onClickFun={handleAddServer} />
           </div>
           {Object.entries(spawners).map(([name, spawner], dropdownIndex) => (
-            <DropDownButton
+            <FieldHeader
               title={name}
               isActive={isActiveIndex(dropdownIndex)}
               hasIcon={true}
               onActivate={() => setActiveDropdownIndex(dropdownIndex)}
             >
               <div className="server-properties">
-                <Button
-                  title="Link"
-                  link={spawner.url}
-                  disabled={!spawner.active}
-                />
+                {spawner.active && <a href={spawner.url}> {spawner.url} </a>
+                }
                 <div className="time-col">
                   {spawner.last_activity
                     ? dateFormat(spawner.last_activity)
@@ -178,7 +185,7 @@ function HomePage() {
                   )}
                 </div>
               </div>
-            </DropDownButton>
+            </FieldHeader>
           ))}
         </div>
         <EinfraFooter />

diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
@@ -9,7 +9,7 @@
 .btn--primary {
   background-color: var(--primary-color);
   color: white;
-  padding: 16px;
+  padding: 1rem;
   border: none;
   cursor: pointer;
   text-align: center;
@@ -21,7 +21,6 @@
 .btn--primary :hover {
   background-color: var(--primary-color);
   color: white;
-  padding: 16px;
   border: none;
   cursor: pointer;
   text-align: center;
@@ -35,9 +34,9 @@
 }
 
 .btn--secondary {
-  background-color: var(--secondary-color);
+  background-color: rgb(117, 5, 5);
   color: white;
-  padding: 16px;
+  padding: 1rem;
   border: none;
   cursor: pointer;
   text-align: center;
@@ -52,3 +51,29 @@
   cursor: not-allowed;
   pointer-events: none;
 }
+
+@media (max-width: 768px) {
+  .btn--secondary {
+    color: white;
+    padding: 0.5rem;
+    border: none;
+    cursor: pointer;
+    text-align: center;
+    border-radius: 8px;
+    display: inline-block;
+    text-decoration: none;
+  }
+
+  .btn--primary {
+    background-color: var(--primary-color);
+    color: white;
+    padding: 0.5rem;
+    border: none;
+    cursor: pointer;
+    text-align: center;
+    border-radius: 8px;
+    display: inline-block;
+    text-decoration: none;
+  }
+
+}
diff --git a/src/components/FieldHeader/FieldHeader.css b/src/components/FieldHeader/FieldHeader.css
@@ -14,3 +14,23 @@
 .field-children {
   padding: 0.5rem;
 }
+
+@media (max-width: 768px) {
+  .field-header {
+    background-color: var(--primary-color);
+    color: white;
+    padding: 0.5rem;
+    font-size: 12px;
+    border: none;
+    text-align: left;
+    border-radius: 0.5rem;
+    margin-bottom: 0.25rem;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .field-children {
+    padding: 0rem;
+  }
+}
+