fix: contributor popup responsiveness

acmcsufoss · Sep 25, 2024 · a960b3b · a960b3b
1 parent 0bafe08
commit a960b3b
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 27 deletions.
diff --git a/src/components/ContributorPopup.svelte b/src/components/ContributorPopup.svelte
@@ -33,9 +33,12 @@
     <h2>{name}</h2>
 
     <div class="card-layout">
-      <div class="message">
-        {message}
-      </div>
+      {#if message && message !== ""}
+        <div class="message">
+          <b>Message:</b>
+          {message}
+        </div>
+      {/if}
 
       <div class="bubble-1"></div>
       <div class="bubble-2"></div>
@@ -48,35 +51,37 @@
           alt="{name} GitHub image"
         />
         <div class="links">
-          <a target="_blank" href="https://github.com/{githubUsername}">
-            GitHub Profile
-          </a>
-          {#if extraLink !== ""}
+          {#if githubUsername && githubUsername !== ""}
+            <a target="_blank" href="https://github.com/{githubUsername}">
+              GitHub Profile
+            </a>
+          {/if}
+          {#if extraLink && extraLink !== ""}
             <a target="_blank" href={extraLink}> External Link </a>
           {/if}
         </div>
       </div>
 
       <div class="right">
-        {#if githubUsername}
+        {#if githubUsername && githubUsername !== ""}
           <div>
-            <h3>GitHub</h3>
+            <h3>GitHub Username</h3>
             <p>{githubUsername}</p>
           </div>
         {/if}
-        {#if about}
+        {#if about && about !== ""}
           <div>
             <h3>About</h3>
             <p>{about}</p>
           </div>
         {/if}
-        {#if programmingInterests}
+        {#if programmingInterests && programmingInterests !== ""}
           <div>
             <h3>Programming Interests</h3>
             <p>{programmingInterests}</p>
           </div>
         {/if}
-        {#if hobbies}
+        {#if hobbies && hobbies !== ""}
           <div>
             <h3>Hobbies</h3>
             <p>{hobbies}</p>
@@ -105,7 +110,8 @@
     z-index: 20;
     display: none;
     width: min(40rem, 90vw);
-    max-height: 400px;
+    max-height: 500px;
+    overflow-y: scroll;
     transform: translate(-50%, -50%);
     border-radius: 0.5rem;
     background-color: rgb(var(--color-primary));
@@ -151,7 +157,6 @@
   }
 
   .message {
-    position: absolute;
     padding: 0.5rem;
     border-radius: 0.5rem;
     top: -42%;
@@ -162,6 +167,7 @@
   .bubble-2,
   .bubble-3,
   .bubble-4 {
+    display: none;
     background-color: rgb(var(--color-secondary));
     position: absolute;
     border-radius: 50%;
@@ -197,7 +203,7 @@
     padding-inline: 1rem;
     margin-top: 1rem;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     gap: 2rem;
   }
 
@@ -215,14 +221,15 @@
   }
 
   .card-layout img {
+    margin-inline: auto;
     border-radius: 50%;
-    width: 10rem;
+    width: 7rem;
   }
 
   .card-layout > .right {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: 0.5rem;
   }
 
   .card-layout > .right > div {
@@ -234,4 +241,30 @@
     flex-direction: column;
     gap: 0.25rem;
   }
+
+  @media screen and (min-width: 640px) {
+    .custom-modal {
+      max-width: none;
+      overflow-y: visible;
+    }
+
+    .message {
+      position: absolute;
+    }
+
+    .card-layout {
+      flex-direction: row;
+    }
+
+    .bubble-1,
+    .bubble-2,
+    .bubble-3,
+    .bubble-4 {
+      display: block;
+    }
+
+    .card-layout img {
+      width: 10rem;
+    }
+  }
 </style>
diff --git a/src/pages/fa24.astro b/src/pages/fa24.astro
@@ -12,34 +12,39 @@ const contributors: Fa2024MarkdownEntry[] = Object.values(
 
 const boxStyles = [
   {
-    bottom: "8%",
-    left: "5%",
+    bottom: "4rem",
+    left: "4rem",
     backgroundColor: "#333333",
     opacity: 0.4,
+    zIndex: -10,
   },
   {
-    bottom: "8%",
-    left: "8%",
+    bottom: "4rem",
+    left: "6.25rem",
     backgroundColor: "#035a4f",
     opacity: 0.7,
+    zIndex: -10,
   },
   {
-    bottom: "14%",
-    left: "5%",
+    bottom: "6.25rem",
+    left: "4rem",
     backgroundColor: "#11d4b1",
     opacity: 0.9,
+    zIndex: -10,
   },
   {
-    bottom: "10%",
-    right: "5%",
+    bottom: "4.5rem",
+    right: "4rem",
     backgroundColor: "#11d4b1",
     opacity: 0.8,
+    zIndex: -10,
   },
   {
-    bottom: "8%",
-    right: "8%",
+    bottom: "4rem",
+    right: "7rem",
     backgroundColor: "#035a4f",
     opacity: 0.8,
+    zIndex: -10,
   },
 ];
 ---