fix infopill variants and skip-length

varianter · Nov 8, 2023 · 513031a · 513031a
1 parent 6725070
commit 513031a
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 18 deletions.
diff --git a/frontend/src/app/[organisation]/bemanning/page.tsx b/frontend/src/app/[organisation]/bemanning/page.tsx
@@ -37,7 +37,7 @@ export default async function Bemanning({
     >
       <StaffingSidebar />
 
-      <div className="main pl-12 p-6 w-full flex flex-col gap-8">
+      <div className="main p-6 w-full flex flex-col gap-8">
         <h1>Bemanning</h1>
         <FilteredConsultantsList />
         <InfoPillDescriptions />

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -152,7 +152,7 @@
 
   .main {
     grid-area: main;
-    overflow-y: scroll;
+    overflow: scroll;
     height: 100%;
   }
 

diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx
@@ -10,7 +10,7 @@ import {
   Moon,
   Sun,
 } from "react-feather";
-import InfoPill from "./InfoPill";
+import InfoPill, { InfoPillProps, InfoPillVariant } from "./InfoPill";
 
 interface ConsultantListElementProps {
   consultant: Consultant;
@@ -24,6 +24,8 @@ export default function ConsultantRows({
   const [isListElementVisible, setIsListElementVisible] = useState(false);
   const [isButtonHovered, setIsButtonHovered] = useState(false);
 
+  const columnCount = consultant.bookings.length ?? 0;
+
   function toggleListElementVisibility() {
     setIsListElementVisible(!isListElementVisible);
   }
@@ -68,7 +70,7 @@ export default function ConsultantRows({
           </div>
         </td>
         {consultant.bookings?.map((b) => (
-          <td key={b.weekNumber} className="h-[52px] p-0.5">
+          <td key={b.weekNumber} className="h-[52px] p-0.5 min-w-fit">
             <div
               className={`flex flex-col gap-1 p-2 justify-end rounded w-full h-full  ${
                 b.bookingModel.totalOverbooking > 0
@@ -84,27 +86,32 @@ export default function ConsultantRows({
                     text={b.bookingModel.totalOffered.toFixed(1)}
                     colors="bg-offer_light text-offer_dark"
                     icon={<FileText size="12" />}
+                    variant={getInfopillVariantByColumnCount(columnCount)}
                   />
                 )}
-                {b.bookingModel.totalSellableTime > 0 && (
-                  <InfoPill
-                    text={b.bookingModel.totalSellableTime.toFixed(1)}
-                    colors="bg-free_light text-free_dark"
-                    icon={<Coffee size="12" />}
-                  />
-                )}
+                {b.bookingModel.totalSellableTime > 0 &&
+                  getInfopillVariantByColumnCount(columnCount) !== "narrow" && (
+                    <InfoPill
+                      text={b.bookingModel.totalSellableTime.toFixed(1)}
+                      colors="bg-free_light text-free_dark"
+                      icon={<Coffee size="12" />}
+                      variant={getInfopillVariantByColumnCount(columnCount)}
+                    />
+                  )}
                 {b.bookingModel.totalVacationHours > 0 && (
                   <InfoPill
                     text={b.bookingModel.totalVacationHours.toFixed(1)}
                     colors="bg-vacation_light text-vacation_dark"
                     icon={<Sun size="12" />}
+                    variant={getInfopillVariantByColumnCount(columnCount)}
                   />
                 )}
                 {b.bookingModel.totalOverbooking > 0 && (
                   <InfoPill
                     text={b.bookingModel.totalOverbooking.toFixed(1)}
                     colors="bg-overbooking_dark text-overbooking_light"
                     icon={<AlertTriangle size="12" />}
+                    variant={getInfopillVariantByColumnCount(columnCount)}
                   />
                 )}
               </div>
@@ -219,3 +226,16 @@ function getIconByBookingType(type: BookingType): ReactElement {
       return <></>;
   }
 }
+
+function getInfopillVariantByColumnCount(count: number): InfoPillVariant {
+  switch (true) {
+    case 26 <= count:
+      return "narrow";
+    case 12 <= count && count < 26:
+      return "medium";
+    case count < 12:
+      return "wide";
+    default:
+      return "wide";
+  }
+}
diff --git a/frontend/src/components/InfoPill.tsx b/frontend/src/components/InfoPill.tsx
@@ -1,18 +1,28 @@
 import { ReactElement } from "react";
 
-interface InfoPill {
+export type InfoPillProps = {
   text: string;
   icon: ReactElement;
   colors: string;
-}
+  variant: InfoPillVariant;
+};
+
+export type InfoPillVariant = "wide" | "medium" | "narrow" | "none";
 
-export default function InfoPill({ text, icon, colors }: InfoPill) {
-  return (
+export default function InfoPill({
+  text,
+  icon,
+  colors,
+  variant,
+}: InfoPillProps) {
+  return variant == "none" ? (
+    <></>
+  ) : (
     <div
       className={`flex flex-row gap-0.5 detail-pill-text p-0.5 items-center w-fit h-4 rounded-sm ${colors}`}
     >
-      {icon}
-      <p>{text}</p>
+      {(variant == "wide" || variant == "narrow") && icon}
+      {(variant == "wide" || variant == "medium") && <p>{text}</p>}
     </div>
   );
 }
diff --git a/frontend/src/components/StaffingSidebar.tsx b/frontend/src/components/StaffingSidebar.tsx
@@ -31,7 +31,7 @@ export default function StaffingSidebar() {
         <>
           <button
             onClick={() => setIsSidebarHidden(false)}
-            className="bg-primary_l3 rounded-r p-2 mt-6 hover:bg-primary_default hover:bg-opacity-20"
+            className="bg-primary_l3 rounded-r p-2 mt-16 hover:bg-primary_default hover:bg-opacity-20"
           >
             <Filter className="text-primary_default" size="20" />
           </button>