SUL23-525: stashing work.

SU-SWS · Jul 17, 2024 · fba2948 · fba2948
1 parent 7c066b4
commit fba2948
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/...omponents/views/sul-branch-locations/filtering-table/branch-locations-filtering-table.tsx b/...omponents/views/sul-branch-locations/filtering-table/branch-locations-filtering-table.tsx
@@ -121,9 +121,9 @@ const TableRow = ({id, imageUrl, path, title, phone, email, mapUrl, address, hou
   return (
     <Tr
       key={id}
-      className="block sm:flex-col sm:flex-wrap sm:text-center md:flex md:max-h-[400px] md:text-left lg:!table-row lg:max-h-none"
+      className="block sm:flex-col sm:flex-wrap sm:text-center md:grid md:grid-cols-2 md:grid-rows-4 md:justify-items-start md:gap-x-20 md:text-left md:align-top lg:!table-row lg:max-h-none"
     >
-      <Td className="m-auto block sm:mr-25 sm:border-b sm:border-black-40 md:min-h-[400px] md:w-1/2 lg:table-cell lg:min-h-fit lg:w-[125px]">
+      <Td className="m-auto flex min-h-fit justify-center sm:mr-25 sm:border-b sm:border-black-40 md:row-span-4 lg:table-cell lg:w-[125px]">
         <div className="relative block aspect-[3/2] w-[338px] overflow-hidden lg:w-[125px]">
           {imageUrl && (
             <Image
@@ -136,16 +136,16 @@ const TableRow = ({id, imageUrl, path, title, phone, email, mapUrl, address, hou
           )}
         </div>
       </Td>
-      <Td className="flex w-auto justify-around sm:border-b sm:border-black-40 md:block md:w-1/2 md:text-left lg:table-cell lg:w-1/4">
+      <Td className="flex w-auto sm:border-b sm:border-black-40 md:text-left lg:table-cell lg:w-1/4">
         <Link
           href={path}
           className="inline-block w-full text-center md:w-auto md:text-left"
         >
           {title}
         </Link>
       </Td>
-      <Td className="branch-hours flex w-auto justify-center sm:border-b sm:border-black-40 md:block md:w-1/2 lg:table-cell lg:w-1/4">{hoursId && <BranchHours hoursId={hoursId} />}</Td>
-      <Td className="block w-auto sm:border-b sm:border-black-40 md:w-1/2 lg:table-cell lg:w-1/4">
+      <Td className="branch-hours flex w-auto justify-center sm:border-b sm:border-black-40 md:items-center md:justify-start lg:table-cell lg:w-1/4">{hoursId && <BranchHours hoursId={hoursId} />}</Td>
+      <Td className="block w-auto sm:border-b sm:border-black-40 lg:table-cell lg:w-1/4">
         {phone && (
           <a
             href={`tel:${phone.replaceAll(/[^0-9]/g, "")}`}
@@ -171,7 +171,7 @@ const TableRow = ({id, imageUrl, path, title, phone, email, mapUrl, address, hou
           </a>
         )}
       </Td>
-      <Td className="block w-auto sm:border-b sm:border-black-40 md:w-1/2 lg:table-cell lg:w-1/4">
+      <Td className="block w-auto sm:border-b sm:border-black-40 lg:table-cell lg:w-1/4">
         {address && mapUrl && (
           <a
             href={mapUrl}
@@ -225,11 +225,11 @@ const BranchHours = ({hoursId}: {hoursId: string}) => {
     <div
       {...outsideClickProps}
       ref={containerRef}
-      className="relative flex text-16 md:block"
+      className="relative flex text-16 md:flex lg:block"
     >
-      {isOpen && <span className="m-auto mb-8 mr-8 block w-fit rounded-full bg-digital-green p-10 text-white sm:text-center md:m-0 md:text-left lg:mx-auto lg:text-center">Open</span>}
+      {isOpen && <span className="m-auto mb-8 mr-8 block w-fit rounded-full bg-digital-green p-10 text-white sm:text-center md:my-0 md:ml-0 md:mr-5 md:text-left lg:m-0 lg:mx-auto lg:text-center">Open</span>}
 
-      {!isOpen && <span className="m-auto mr-8 flex w-fit sm:text-center md:m-0 md:text-left lg:mx-auto lg:text-center">Closed</span>}
+      {!isOpen && <span className="m-auto mr-8 flex w-fit sm:text-center md:my-0 md:ml-0 md:mr-5 md:text-left lg:m-0 lg:mx-auto lg:text-center">Closed</span>}
 
       <div className="flex w-fit items-center whitespace-nowrap sm:text-center md:text-left lg:mx-auto lg:text-center">
         {isOpen && closingTime && `Until ${closingTime}`}

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -41,9 +41,9 @@
     text-align: unset !important;
   }
   .responsive-table tr td.pivoted:first-of-type {
-    display: flex !important;
+    /* display: flex !important;
     justify-content: center;
-    align-items: flex-start;
+    align-items: flex-start; */
   }
   .responsive-table ul li:last-child span {
     display: none;