Merge pull request #600 from danskernesdigitalebibliotek/DDFFORM-490-…

…material-grid DDFFORM 490 material grid
danskernesdigitalebibliotek · Apr 19, 2024 · 0a123f7 · 0a123f7
2 parents d68ddd6 + bf57224
commit 0a123f7
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/src/stories/Library/recommended-material/RecommendedMaterial.tsx b/src/stories/Library/recommended-material/RecommendedMaterial.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { ButtonFavourite } from "../Buttons/button-favourite/ButtonFavourite";
 import Cover from "../cover/Cover";
 
@@ -22,9 +23,9 @@ export const RecommendedMaterial: React.FC<RecommendedMaterialProps> = ({
 }) => {
   return (
     <div
-      className={`recommended-material ${
-        partOfGrid && "recommended-material--in-grid "
-      }`}
+      className={clsx("recommended-material", {
+        "recommended-material--in-grid": partOfGrid,
+      })}
     >
       <div className="recommended-material__icon">
         <ButtonFavourite fill={favoriteFill} />

diff --git a/src/stories/Library/recommended-material/recommended-material-skeleton.scss b/src/stories/Library/recommended-material/recommended-material-skeleton.scss
@@ -16,6 +16,7 @@
     display: flex;
     flex-direction: column;
     gap: 5px;
+    margin-bottom: 12px;
   }
   .ssc-line {
     width: 60%;

diff --git a/src/stories/Library/recommended-material/recommended-material.scss b/src/stories/Library/recommended-material/recommended-material.scss
@@ -1,5 +1,7 @@
-// MATERIAL_LARGE_DESKTOP is equivalent to the one being used in cover.scss
-$MATERIAL_LARGE_DESKTOP: 216px;
+// MATERIAL_LARGE_DESKTOP & MATERIAL_MEDIUM_MOBILE are variables
+// taken from the cover.scss file.
+$cover_height_small: $MATERIAL_MEDIUM_MOBILE;
+$cover_height_large: $MATERIAL_LARGE_DESKTOP;
 $_recommended-material-max-height: 432px;
 $_recommended-material-max-width: 378px;
 $_aspect-ratio-mobile: 285 / 320;
@@ -12,20 +14,25 @@ $_material-image-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
   background-color: $color__global-secondary;
   max-height: $_recommended-material-max-height;
   width: 100%;
+  height: 100%;
   padding: $s-md;
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: min-content $cover_height_small min-content;
   row-gap: $s-lg;
   justify-items: center;
   align-items: center;
+  align-content: space-between;
   aspect-ratio: $_aspect-ratio-mobile;
 
   @include media-query__small {
     padding: $s-lg;
     aspect-ratio: $_aspect-ratio-desktop;
     max-width: $_recommended-material-max-width;
   }
+  @include media-query__medium {
+    grid-template-rows: min-content $cover_height_large min-content;
+  }
 }
 
 .recommended-material__icon {
@@ -53,13 +60,9 @@ $_material-image-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
 .recommended-material--in-grid {
   max-width: unset;
   border: 1px solid $color__global-tertiary-1;
+  aspect-ratio: unset;
 
   > .cover {
     height: 100%;
-    max-height: $MATERIAL_LARGE_DESKTOP;
-    @include media-query__medium {
-      height: $MATERIAL_LARGE_DESKTOP;
-      max-height: unset;
-    }
   }
 }