Merge pull request #66 from danskernesdigitalebibliotek/DDFBRA-172-br…

…uger-skal-kunne-se-materiale-cover-adjustments fix: add minor adjustments to the workpage header / coverPicture
danskernesdigitalebibliotek · Dec 3, 2024 · 7e66221 · 7e66221
2 parents 6fa55cd + b34d7c1
commit 7e66221
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 51 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -41,7 +41,7 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en">
+    <html lang="da">
       <body className={`${GTFlexa.variable} antialiased`}>
         <GridHelper hideInProduction />
         <Theme>

diff --git a/components/pages/workPageLayout/WorkPageButtons.tsx b/components/pages/workPageLayout/WorkPageButtons.tsx
@@ -29,14 +29,14 @@ const WorkPageButtons = ({ workId }: WorkPageButtonsProps) => {
           <Button
             ariaLabel="Prøv ebog"
             size={"default"}
-            className="mb-grid-gap-half min-w-full lg:min-w-80"
+            className="mb-grid-gap-half w-full lg:min-w-72 lg:max-w-80"
             asChild
             disabled={!!identifier}>
             <SmartLink linkType="external" href={url}>
               Prøv ebog
             </SmartLink>
           </Button>
-          <Button ariaLabel="Lån/reserver/læse ebog" className="min-w-full lg:min-w-80">
+          <Button ariaLabel="Lån/reserver/læse ebog" className="w-full lg:min-w-72 lg:max-w-80">
             Not done yet
           </Button>
         </>
@@ -47,11 +47,11 @@ const WorkPageButtons = ({ workId }: WorkPageButtonsProps) => {
           <Button
             ariaLabel="Prøv lydbog"
             disabled={!!!identifier}
-            className="mb-grid-gap-half min-w-full lg:min-w-80"
+            className="mb-grid-gap-half w-full lg:min-w-72 lg:max-w-80"
             onClick={() => setIsPlayerOpen(!isPlayerOpen)}>
             Prøv lydbog
           </Button>
-          <Button ariaLabel="Lån/reserver/læse lydbog" className="min-w-full lg:min-w-80">
+          <Button ariaLabel="Lån/reserver/læse lydbog" className="w-full lg:min-w-72 lg:max-w-80">
             Not done yet
           </Button>
         </>

diff --git a/components/pages/workPageLayout/WorkPageHeader.tsx b/components/pages/workPageLayout/WorkPageHeader.tsx
@@ -1,3 +1,4 @@
+import { motion } from "framer-motion"
 import React, { useEffect, useState } from "react"
 
 import { CoverPicture } from "@/components/shared/coverPicture/CoverPicture"
@@ -64,19 +65,24 @@ const WorkPageHeader = ({ work }: WorkPageHeaderProps) => {
 
   return (
     <>
-      <div className="mt-5 flex w-full flex-col lg:flex-row">
-        <div className="h-auto lg:order-2 lg:flex lg:flex-1 lg:basis-1/3 lg:flex-col">
-          <div className="relative mx-auto mb-12 flex h-full w-[70vw] justify-center lg:min-h-[60vh] lg:w-full">
+      <motion.div
+        key={work.workId}
+        className="lg:grid-go mt-5"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.5 }}
+        exit={{ opacity: 0 }}>
+        <div className="col-span-4 h-auto lg:order-2">
+          <div className="flex aspect-1/1 h-auto w-full flex-col items-center justify-center rounded-base lg:aspect-4/5">
             {!isLoadingCovers && (
               <CoverPicture
                 alt="Forsidebillede på værket"
                 lowResSrc={lowResCover || ""}
                 src={coverSrc?.[0] || ""}
-                classNames="lg:w-[80%] select-none"
               />
             )}
           </div>
-          <div className="flex w-full justify-center">
+          <div className="flex w-full justify-center pt-12">
             <SlideSelect
               options={slideSelectOptions}
               initialOption={initialSliderValue}
@@ -89,19 +95,16 @@ const WorkPageHeader = ({ work }: WorkPageHeaderProps) => {
             />
           </div>
         </div>
-        <div className="flex flex-col lg:order-1 lg:flex-1 lg:basis-1/3 lg:justify-end">
-          <h1
-            // In order to be able to break words, we need to set the lang attribute
-            lang="da"
-            className="mt-grid-gap-3 hyphens-auto break-words text-typo-heading-3 lg:mt-0 lg:text-typo-heading-2">
-            {`${selectedManifestation?.titles?.main}${!!titleSuffix ? ` (${titleSuffix})` : ""}`}
+        <div className="col-span-4 flex flex-col justify-end">
+          <h1 className="mt-grid-gap-3 hyphens-auto break-words text-typo-heading-3 lg:mt-0 lg:text-typo-heading-2">
+            {`${selectedManifestation?.titles?.main || ""}${!!titleSuffix ? ` (${titleSuffix})` : ""}`}
           </h1>
           <p className="mt-grid-gap-2 text-typo-caption uppercase lg:mt-7">{`af ${displayCreators(work.creators, 100)}`}</p>
         </div>
-        <div className="mt-grid-gap-3 flex flex-col items-end justify-end lg:order-3 lg:mt-0 lg:flex-1 lg:basis-1/3">
+        <div className="col-span-4 mt-grid-gap-3 flex flex-col items-end justify-end lg:order-3 lg:mt-0">
           <WorkPageButtons workId={work.workId} />
         </div>
-      </div>
+      </motion.div>
     </>
   )
 }

diff --git a/components/shared/coverPicture/CoverPicture.tsx b/components/shared/coverPicture/CoverPicture.tsx
@@ -11,7 +11,7 @@ import Icon from "../icon/Icon"
 type CoverPictureProps = {
   lowResSrc: string
   src: string
-  classNames?: string
+  className?: string
   alt: string
   withTilt?: boolean
 }
@@ -20,39 +20,38 @@ export const CoverPicture = ({
   lowResSrc,
   alt,
   withTilt = false,
-  classNames,
+  className,
 }: CoverPictureProps) => {
   const size = useWindowSize()
-  const ref = useRef<HTMLDivElement>(null)
-  const containerHeight = ref.current?.getBoundingClientRect().height || 0
   const [imageHeight, setImageHeight] = useState(0)
   const [imageWidth, setImageWidth] = useState(0)
   const imageAspectRatio = imageWidth / imageHeight
+
+  // get the container height
+  const ref = useRef<HTMLDivElement>(null)
+  const containerHeight = ref.current?.getBoundingClientRect().height || 0
+
   // calculate the max width using image aspect ratio and container width
   const imageWidthByContainerHeight = imageAspectRatio * containerHeight
   const paddingTop = `${100 / imageAspectRatio}%`
-  const [imageLoaded, setImageLoaded] = useState(false)
-  const [imageError, setImageError] = useState(false)
 
   useEffect(() => {}, [size.width])
+  const [imageLoaded, setImageLoaded] = useState(false)
+  const [imageError, setImageError] = useState(false)
 
   return (
-    <div className={cn("flex h-full w-full items-center", classNames)} ref={ref}>
+    <div className={cn("flex h-full w-full items-center", className)} ref={ref}>
       {!imageError && src ? (
-        <Tilt
-          scale={withTilt ? 1.05 : 1}
-          transitionSpeed={2500}
-          tiltMaxAngleX={withTilt ? 10 : 0}
-          tiltMaxAngleY={withTilt ? 10 : 0}
-          tiltReverse={true}
-          className={"relative w-full"}
+        <CoverPictureTiltWrapper
+          withTilt={withTilt}
+          className={"relative m-auto"}
           style={{ paddingTop, width: `min(100%,${imageWidthByContainerHeight}px)` }}>
           {lowResSrc && (
             <Image
               src={lowResSrc}
               alt={alt}
-              height={0}
-              width={0}
+              height={imageHeight}
+              width={imageWidth}
               sizes="20px"
               loading="eager"
               className={cn(
@@ -72,28 +71,24 @@ export const CoverPicture = ({
             <Image
               src={src}
               alt={alt}
-              height={0}
-              width={0}
+              height={imageHeight}
+              width={imageWidth}
               sizes="100vw"
               loading="lazy"
               className={cn(
                 `absolute inset-0 h-auto w-full overflow-hidden rounded-sm object-contain shadow-cover-picture
                   transition-all duration-500 will-change-transform`,
                 imageLoaded ? "opacity-100" : "opacity-0"
               )}
-              onLoad={({ target }) => {
-                // get the intrinsic dimensions of the image
-                const { naturalWidth, naturalHeight } = target as HTMLImageElement
-                setImageHeight(naturalHeight)
-                setImageWidth(naturalWidth)
+              onLoad={() => {
                 setImageLoaded(true)
               }}
               onError={() => {
                 setImageError(true)
               }}
             />
           )}
-        </Tilt>
+        </CoverPictureTiltWrapper>
       ) : (
         <motion.div
           initial={{ opacity: 0 }}
@@ -107,3 +102,32 @@ export const CoverPicture = ({
     </div>
   )
 }
+
+const CoverPictureTiltWrapper = ({
+  children,
+  style,
+  className,
+  withTilt,
+}: {
+  children: React.ReactNode
+  style?: React.CSSProperties
+  className?: string
+  withTilt: boolean
+}) => {
+  return withTilt ? (
+    <Tilt
+      scale={1.05}
+      transitionSpeed={2500}
+      tiltMaxAngleX={10}
+      tiltMaxAngleY={10}
+      tiltReverse={true}
+      className={className}
+      style={style}>
+      {children}
+    </Tilt>
+  ) : (
+    <div className={className} style={style}>
+      {children}
+    </div>
+  )
+}
diff --git a/components/shared/workCard/WorkCard.tsx b/components/shared/workCard/WorkCard.tsx
@@ -73,7 +73,7 @@ const WorkCard = ({ work }: WorkCardProps) => {
                 src={coverSrc?.[0] || ""}
                 alt={`${work.titles.full[0]} cover billede`}
                 withTilt
-                classNames="select-none"
+                className="select-none"
               />
             )}
           </div>

diff --git a/styles/globals.css b/styles/globals.css
@@ -318,14 +318,6 @@
   @apply mx-auto w-full max-w-[var(--page-width)] px-[var(--grid-edge)];
 }
 
-.grid-cols-go {
-  @apply grid-cols-6 lg:grid-cols-12;
-}
-
-.grid-go {
-  @apply grid-cols-go grid gap-x-[--grid-gap-x];
-}
-
 .dark-mode-transition {
   @apply transition-[background] duration-dark-mode;
 }
@@ -364,6 +356,14 @@ body > * {
   .text-balance {
     text-wrap: balance;
   }
+
+  .grid-cols-go {
+    @apply grid-cols-6 lg:grid-cols-12;
+  }
+
+  .grid-go {
+    @apply grid-cols-go grid gap-x-[--grid-gap-x];
+  }
 }
 
 /* shadcn variables */