Skip to content

Commit

Permalink
adjusting the top and bottom spacing and removed empty spacers
Browse files Browse the repository at this point in the history
  • Loading branch information
@jenbreese
jenbreese committed Aug 21, 2024
1 parent d7bf438 commit 3a3bd97
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 38 deletions.
44 changes: 28 additions & 16 deletions ...omponents/views/sul-branch-locations/filtering-table/branch-locations-filtering-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,22 +126,22 @@ const TableRow = ({id, imageUrl, path, title, phone, email, mapUrl, address, hou
className="block sm:flex-col sm:flex-wrap sm:text-center md:grid md:grid-cols-2 md:grid-rows-[repeat(4,minmax(0,auto))] md:justify-items-start md:gap-x-20 md:text-left md:align-top lg:!table-row lg:max-h-none"
>
<Td className="table-image m-auto flex min-h-fit w-auto place-content-center justify-center sm:border-b sm:border-black-40 md:row-span-4 lg:mr-25 lg:table-cell lg:w-[125px] lg:pr-16 lg:align-middle">
<div className="relative block aspect-[3/2] w-auto max-w-[338px] overflow-hidden md:w-[290px] lg:max-w-[125px]">
{imageUrl && (
{imageUrl && (
<div className="relative my-16 block aspect-[3/2] w-auto max-w-[338px] overflow-hidden md:w-[360px] lg:max-w-[125px]">
<Link
href={path}
className="relative block aspect-[3/2] w-[300px] overflow-hidden md:w-[290px] lg:max-w-[125px]"
className="relative block aspect-[3/2] w-[300px] overflow-hidden md:w-[360px] lg:max-w-[125px]"
aria-hidden="true"
tabIndex={-1}
>
<Image src={imageUrl} className="object-contain" alt="" fill sizes="300px" />
</Link>
)}
</div>
</div>
)}
</Td>
<Th
scope="row"
className="flex w-auto px-0 md:text-left lg:table-cell lg:w-1/4 lg:border-b lg:border-black-40 lg:pr-80 lg:align-middle"
className="flex w-auto px-0 text-center md:text-left lg:table-cell lg:w-1/4 lg:border-b lg:border-black-40 lg:pr-80 lg:align-middle"
>
<Link
href={path}
Expand All @@ -151,7 +151,13 @@ const TableRow = ({id, imageUrl, path, title, phone, email, mapUrl, address, hou
</Link>
</Th>
<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 lg:pr-80 lg:align-middle">
{hoursId ? <BranchHours hoursId={hoursId} /> : ""}
{hoursId ? (
<div className="pb-16 lg:pb-0">
<BranchHours hoursId={hoursId} />
</div>
) : (
""
)}
</Td>
<Td className="block w-auto sm:border-b sm:border-black-40 lg:table-cell lg:w-1/4 lg:pr-80 lg:align-middle">
{phone && (
Expand All @@ -163,25 +169,31 @@ const TableRow = ({id, imageUrl, path, title, phone, email, mapUrl, address, hou
{phone}
</a>
)}
{email && (
{email ? (
<a
href={`mailto:${email}`}
className="m-auto flex w-fit items-center justify-center gap-4 text-16 font-normal leading-[23px] no-underline hover:bg-black-10 hover:text-brick-dark hover:underline focus:bg-none md:m-[unset] md:justify-start"
className="m-auto mb-16 flex w-fit items-center justify-center gap-4 text-16 font-normal leading-[23px] no-underline hover:bg-black-10 hover:text-brick-dark hover:underline focus:bg-none md:mx-[unset] md:justify-start lg:mb-0"
>
<EnvelopeIcon title="Email" width={20} />
{email}
</a>
) : (
""
)}
</Td>
<Td className="block w-auto text-16 leading-[23px] sm:border-b sm:border-black-40 lg:table-cell lg:w-1/4 lg:align-middle">
{address && mapUrl && (
<a href={mapUrl} className="flex items-center justify-center gap-4 md:justify-start">
<MapPinIcon title="Map" width={20} className="min-w-20" />
<Address
{...address}
className="text-center font-normal no-underline hover:bg-black-10 hover:text-brick-dark hover:underline focus:bg-none md:text-left"
/>
</a>
<>
<div className="pb-16 lg:pb-0">
<a href={mapUrl} className="flex items-center justify-center gap-4 md:justify-start">
<MapPinIcon title="Map" width={20} className="min-w-20" />
<Address
{...address}
className="text-center font-normal no-underline hover:bg-black-10 hover:text-brick-dark hover:underline focus:bg-none md:text-left"
/>
</a>
</div>
</>
)}
</Td>
</Tr>
Expand Down
22 changes: 15 additions & 7 deletions src/components/views/sul-people/sul-people-table-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,13 +183,13 @@ const SulPeopleTableView = ({items, hasHeading}: Props) => {
{displayedItems.map(item => (
<Tr
key={item.id}
className="block sm:flex-col sm:flex-wrap md:grid md:grid-cols-2 md:grid-rows-[repeat(5,minmax(0,auto))] md:justify-items-start md:gap-x-20 md:pt-16 md:text-left md:first:pt-0 lg:!table-row lg:max-h-none"
className="block pt-16 sm:flex-col sm:flex-wrap md:grid md:grid-cols-2 md:grid-rows-[repeat(5,minmax(0,auto))] md:justify-items-start md:gap-x-20 md:text-left md:first:pt-0 lg:!table-row lg:max-h-none"
>
<Td className="table-image m-auto flex min-h-fit w-auto place-content-center justify-center sm:border-b sm:border-black-40 sm:first:border-0 md:row-span-5 lg:table-cell lg:min-h-fit lg:w-[125px]">
{item.photoUrl && (
<Link
href={item.path}
className="relative block aspect-[1/1] w-[200px] overflow-hidden rounded-full lg:w-[68px]"
className="relative mb-16 block aspect-[1/1] w-[200px] overflow-hidden rounded-full md:mb-32 lg:mb-0 lg:w-[68px]"
aria-hidden="true"
tabIndex={-1}
>
Expand Down Expand Up @@ -217,19 +217,21 @@ const SulPeopleTableView = ({items, hasHeading}: Props) => {
</HeadingElement>
</Link>
)}
{item.fullTitle && <div className="text-16 font-normal leading-[23px]">{item.fullTitle}</div>}
{item.fullTitle && (
<div className="pb-16 text-16 font-normal leading-[23px] lg:pb-0">{item.fullTitle}</div>
)}
</Th>
<Td className="min-w-1/5 block w-auto px-0 py-16 text-center md:border-b md:border-black-40 md:px-9 md:py-16 md:text-left lg:table-cell lg:w-2/5 lg:pr-72">
{!!item.researchAreas?.length && (
<div className="bg-black-10 px-1em py-1em text-16 leading-[23px] md:bg-transparent md:p-0">
<div className="mb-16 bg-black-10 px-1em py-1em text-16 leading-[23px] md:bg-transparent md:p-0 lg:mb-0">
<span className="font-bold md:hidden">Expertise: </span>
{item.researchAreas.join(", ")}
</div>
)}
</Td>
<Td className="block w-auto px-0 py-16 text-center md:border-b md:border-black-40 md:px-9 md:py-16 md:text-left lg:table-cell lg:w-1/5 lg:pr-72">
{item.email && (
<>
<div className="pb-16 lg:pb-0">
<Link
href={`mailto:${item.email}`}
prefetch={false}
Expand All @@ -238,11 +240,17 @@ const SulPeopleTableView = ({items, hasHeading}: Props) => {
<EnvelopeIcon title="Email" width={20} className="mr-6 inline-block" />
{item.email}
</Link>
</>
</div>
)}
</Td>
<Td className="block w-auto px-0 py-16 text-center md:border-b md:border-black-40 md:px-9 md:py-16 md:text-left lg:table-cell lg:w-1/5">
{item.libCalId && <LibCal libcalId={item.libCalId} srText={item.title} />}
{item.libCalId ? (
<div className="pb-16 lg:pb-0">
<LibCal libcalId={item.libCalId} srText={item.title} />
</div>
) : (
""
)}
</Td>
</Tr>
))}
Expand Down
18 changes: 12 additions & 6 deletions src/components/views/sul-study-place/filtering-table/study-place-filtering-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ const StudyPlaceFilteringTable = ({items}: Props) => {
>
<Td className="table-image m-auto block min-h-fit w-auto place-content-center justify-center sm:border-b sm:border-black-40 md:row-span-5 lg:table-cell lg:min-h-fit lg:w-[125px] lg:pr-32">
{item.branchImageUrl ? (
<div className="relative block aspect-[3/2] w-auto max-w-[338px] overflow-hidden md:w-[290px] lg:max-w-[125px]">
<div className="relative my-16 block aspect-[3/2] w-auto max-w-[338px] overflow-hidden md:w-[360px] lg:max-w-[125px]">
<Image
className="object-contain"
src={item.branchImageUrl}
Expand Down Expand Up @@ -239,17 +239,23 @@ const StudyPlaceFilteringTable = ({items}: Props) => {
<Td className="min-w-1/5 block w-auto sm:border-b sm:border-black-40 md:text-left lg:table-cell lg:w-1/5 lg:pr-32">
<Link
href={item.branchPath}
className="block w-fit text-16 font-normal leading-[23px] underline transition-colors hover:bg-black-10 hover:text-brick-dark hover:no-underline focus:bg-none focus:text-cardinal-red active:text-cardinal-red"
className="mb-16 block w-fit text-16 font-normal leading-[23px] underline transition-colors hover:bg-black-10 hover:text-brick-dark hover:no-underline focus:bg-none focus:text-cardinal-red active:text-cardinal-red lg:mb-0"
>
<div>{item.branchTitle}</div>
</Link>
</Td>
<Td className="justify-left flex w-auto text-16 leading-[23px] sm:border-b sm:border-black-40 md:text-left lg:table-cell lg:w-1/5 lg:pr-32">
{item.libHours && <BranchHours hoursId={item.libHours} />}
<Td className="justify-left flex w-auto sm:border-b sm:border-black-40 md:text-left lg:table-cell lg:w-1/5 lg:pr-32">
{item.libHours ? (
<div className="pb-16 text-16 leading-[23px] lg:pb-0">
{item.libHours && <BranchHours hoursId={item.libHours} />}
</div>
) : (
""
)}
</Td>
<Td className="block w-auto sm:border-b sm:border-black-40 md:text-left lg:table-cell lg:w-2/5 lg:pr-32">
{item.features && (
<div className="bg-black-10 px-16 py-8 text-16 leading-[23px] lg:bg-transparent lg:p-0">
<div className="mb-16 bg-black-10 px-16 py-8 text-16 leading-[23px] lg:mb-0 lg:bg-transparent lg:p-0">
<span className="bg-black-10 font-bold lg:hidden">Features: </span>
{item.features.join(", ")}
</div>
Expand All @@ -259,7 +265,7 @@ const StudyPlaceFilteringTable = ({items}: Props) => {
{item.libCalId ? (
<a
href={`https://appointments.library.stanford.edu/space/${item.libCalId}`}
className="button w-fit whitespace-nowrap border border-solid border-cardinal-red bg-white py-[4px] text-16 leading-[22px] text-cardinal-red hocus:bg-cardinal-red hocus:text-white hocus:shadow-button md:w-full lg:w-fit"
className="button mb-16 w-fit whitespace-nowrap border border-solid border-cardinal-red bg-white py-[4px] text-16 leading-[22px] text-cardinal-red hocus:bg-cardinal-red hocus:text-white hocus:shadow-button md:w-full lg:mb-0 lg:w-fit"
aria-haspopup="dialog"
>
<div className="flex items-center justify-end gap-xs md:justify-center lg:justify-end">
Expand Down
11 changes: 2 additions & 9 deletions src/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,24 +38,17 @@
border-bottom: 1px #ABABA9 solid !important;
}
.responsive-table tr td.pivoted {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
text-align: unset !important;
}
table.sul-people-table thead + tbody {
border-top: 0;
}
@media screen and (max-width: 55.29em) {
.responsive-table tr td.pivoted {
padding-top: 0 !important;
}
.responsive-table tr td.pivoted:first-of-type {
padding-top: 16px !important;
}
}
.responsive-table ul li:last-child span {
display: none;
}

@media screen and (max-width: 40em) {
.responsiveTable.responsive-table-study td.table-image {
display: block;
Expand Down

0 comments on commit 3a3bd97

Please sign in to comment.