Merge pull request #687 from colonial-heritage/improve-metadat-table

Improve object page on smaller screen

apps/researcher/src/app/[locale]/objects/[id]/(provenance)/data-table.tsx

@@ -80,10 +80,10 @@ function ProvenanceEventRow({
 
   return (
     <div className="flex flex-col md:flex-row gap-4 border-t">
-      <div className="w-1/3 lg:w-1/4 py-2">
+      <div className="w-full md:w-1/3 lg:w-1/4 py-2">
         <div className="sticky top-8">{dateRange}</div>
       </div>
-      <div className="flex flex-col gap-4 w-2/3 lg:w-3/4 ">
+      <div className="flex flex-col gap-4 w-full md:w-2/3 lg:w-3/4 ">
         {provenanceEvents.map(event => (
           <div
             key={event.id}
@@ -94,7 +94,7 @@ function ProvenanceEventRow({
                 {event.label}
               </SelectEventsButton>
             </div>
-            <div className="w-2/3">
+            <div className="w-full md:w-2/3">
               {metadata.map(
                 ({prop, translationKey}) =>
                   event[prop] && (
@@ -147,7 +147,7 @@ function ProvenanceEventRow({
                 </>
               )}
             </div>
-            <div className="w-1/3 text-xs">
+            <div className="w-full md:w-1/3 text-xs">
               <ProvidedBy
                 dateCreated={event.dateCreated}
                 citation={event.citation}

apps/researcher/src/app/[locale]/objects/[id]/metadata.tsx

@@ -37,16 +37,16 @@ export function Metadata({
   return (
     <>
       <div className="flex flex-col gap-4">
-        <div className="flex flex-col xl:flex-row gap-2 xl:gap-10">
-          <div className="w-full xl:w-1/5 border-t border-neutral-400 pt-4">
-            <div className="sticky top-6 py-1">
+        <div className="flex flex-row gap-2 xl:gap-10">
+          <div className="w-2/5 lg:w-1/5 lg:border-t border-neutral-400 pt-4">
+            <div className="sticky top-0 py-1">
               <h3
-                className="text-lg w-full my-1 flex items-center"
+                className="text-sm md:text-lg w-full my-1 flex items-center"
                 tabIndex={0}
               >
                 {t(translationKey)}
               </h3>
-              <div className="text-neutral-600 text-sm">
+              <div className="text-neutral-600 text-sm hidden md:block">
                 {t(`${translationKey}SubTitle`)}
               </div>
             </div>
@@ -114,7 +114,7 @@ export async function MetadataEntry({
 
   return (
     <div className="border-t border-neutral-200 flex flex-col lg:flex-row justify-between gap-2 first:border-0 ">
-      <div className="w-full lg:w-2/3 py-3 whitespace-pre-wrap" tabIndex={0}>
+      <div className="w-full lg:w-2/3 lg:py-3 whitespace-pre-wrap" tabIndex={0}>
         {children}
         {languageCode && (
           <div tabIndex={0}>

apps/researcher/src/app/[locale]/objects/[id]/provided-by.tsx

@@ -29,9 +29,9 @@ export function ProvidedBy({
 
   return (
     <div
-      className={classNames('px-2 py-3 text-xs my-1 self-start w-full', {
-        'text-neutral-900 border-l': isCurrentPublisher,
-        'bg-consortium-green-100 text-consortium-blue-800 rounded':
+      className={classNames('lg:py-3 text-xs my-1 self-start w-full', {
+        'text-neutral-900 lg:border-l lg:px-2 ': isCurrentPublisher,
+        'bg-consortium-green-100 text-consortium-blue-800 rounded px-2 ':
           !isCurrentPublisher,
       })}
     >

apps/researcher/src/components/footer.tsx

@@ -27,12 +27,9 @@ export default async function Footer() {
   const t = await getTranslations('Navigation');
 
   return (
-    <footer className="w-full bg-consortium-blue-800 text-consortium-blue-50 pt-20 pb-52 px-4 sm:px-10 relative mt-20">
+    <footer className="w-full bg-consortium-blue-800 text-consortium-blue-50 pt-20 lg:pb-52 px-4 sm:px-10 relative mt-20">
       <div className="max-w-7xl w-full flex flex-col gap-4 lg:gap-10 lg:flex-row mx-auto">
-        <div className="flex justify-center w-full max-w-6xl absolute bottom-0 opacity-20 z-0">
-          <FooterBackground />
-        </div>
-        <div className="w-full lg:w-1/3">
+        <div className="w-full lg:w-1/3 border-consortium-blue-400 lg:border-r pr-4">
           <Link href="/" className="flex flex-row gap-2">
             <div className="w-5 sm:w-10">
               <ConsortiumLogo />
@@ -50,12 +47,12 @@ export default async function Footer() {
             </div>
           </Link>
         </div>
-        <div className="w-full lg:w-1/3 border-consortium-blue-400 border-r">
-          <div className="flex flex-col gap-2 text-sm max-w-80">
+        <div className="w-full lg:w-1/3 border-consortium-blue-400 border-t lg:border-t-0 lg:border-r pt-4">
+          <div className="flex flex-col gap-2 text-sm max-w-80 pr-4">
             <p className="whitespace-pre-wrap">{t('footerText')}</p>
           </div>
         </div>
-        <div className="w-full lg:w-1/3 flex gap-10 border-consortium-blue-400 border-r">
+        <div className="w-full lg:w-1/3 flex gap-10 border-t pt-4 lg:border-t-0 border-consortium-blue-400">
           <nav className="flex flex-col gap-1 text-lg font-semibold">
             <ToFilteredListButton baseUrl="/objects">
               {t('searchObjects')}
@@ -73,6 +70,9 @@ export default async function Footer() {
             ))}
           </nav>
         </div>
+        <div className="flex justify-center w-full max-w-3xl lg:absolute bottom-0 opacity-20 z-0">
+          <FooterBackground />
+        </div>
       </div>
     </footer>
   );

packages/ui/branding/footer-background.tsx

@@ -3,7 +3,7 @@ export function FooterBackground() {
     <svg
       version="1.1"
       fill="currentColor"
-      className="w-full h-auto fill-consortium-green-500"
+      className="w-full max-w-[80vw] h-auto fill-consortium-green-500"
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       x="0px"