feat: mobiles styles, etc

IQSS · Dec 20, 2024 · 9f68cd8 · 9f68cd8
1 parent c6a069a
commit 9f68cd8
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 26 deletions.
diff --git a/src/sections/collection/featured-items/FeaturedItem.tsx b/src/sections/collection/featured-items/FeaturedItem.tsx
@@ -0,0 +1,41 @@
+import { UIEvent, useRef, useState } from 'react'
+import cn from 'classnames'
+import { CollectionFeaturedItem } from '@/collection/domain/models/CollectionFeaturedItem'
+import styles from './FeaturedItems.module.scss'
+
+interface FeaturedItemProps {
+  featuredItem: CollectionFeaturedItem
+}
+
+export const FeaturedItem = ({ featuredItem }: FeaturedItemProps) => {
+  const [cardScrolled, setCardScrolled] = useState(false)
+  const cardRef = useRef<HTMLDivElement | null>(null)
+
+  const handleScroll = (e: UIEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+    if (cardRef.current) {
+      const scrollTop = e.currentTarget.scrollTop
+
+      setCardScrolled(scrollTop > 50)
+    }
+  }
+  return (
+    <div className={styles['featured-item-card']} onScroll={handleScroll} ref={cardRef}>
+      <h2
+        className={cn(styles.title, {
+          [styles['card-scrolled']]: cardScrolled
+        })}>
+        {featuredItem.title}
+      </h2>
+      <div className={styles['inner-content']}>
+        {featuredItem.imageUrl && (
+          <img src={featuredItem.imageUrl} alt={featuredItem.title} className={styles.image} />
+        )}
+        <div
+          className={styles.content}
+          dangerouslySetInnerHTML={{ __html: featuredItem.content }}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/src/sections/collection/featured-items/FeaturedItems.module.scss b/src/sections/collection/featured-items/FeaturedItems.module.scss
@@ -7,15 +7,51 @@
 }
 
 .featured-item-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
   align-self: center;
   width: 100%;
   min-height: 300px;
-  max-height: 80dvh;
+  max-height: 70dvh;
   overflow-y: auto;
+  background-color: #fff;
+  border: solid 1px $dv-border-color;
+  border-radius: 6px;
   margin-inline: auto;
 
-  h2 {
+  .title {
+    position: sticky;
+    top: 0;
+    z-index: 2;
     margin-bottom: 1rem;
+    padding: 1rem;
+    background-color: #fff;
+
+    &.card-scrolled {
+      box-shadow: 0 2px 4px rgba(0 0 0 / 30%);
+    }
+  }
+
+  .inner-content {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    align-items: flex-start;
+    padding-inline: 1rem;
+    padding-bottom: 1rem;
+
+    .content {
+      flex: 1;
+    }
+
+    .image {
+      width: 100%;
+      max-width: 100%;
+      max-height: 50dvh;
+      object-fit: contain;
+      border-radius: 4px;
+    }
   }
 
   &::-webkit-scrollbar {
@@ -34,4 +70,24 @@
       background-color: color.adjust($dv-secondary-color, $blackness: 40%);
     }
   }
+
+  @media (min-width: 768px) {
+    max-height: 60dvh;
+
+    .inner-content {
+      flex-direction: row;
+
+      .image {
+        max-width: 30%;
+      }
+    }
+  }
+
+  @media (min-width: 1024px) {
+    max-height: 80dvh;
+
+    .inner-content .image {
+      max-width: 40%;
+    }
+  }
 }
diff --git a/src/sections/collection/featured-items/FeaturedItems.tsx b/src/sections/collection/featured-items/FeaturedItems.tsx
@@ -1,6 +1,6 @@
-import { Card } from 'react-bootstrap'
 import { CollectionFeaturedItem } from '@/collection/domain/models/CollectionFeaturedItem'
 import { Slider } from './silder/Slider'
+import { FeaturedItem } from './FeaturedItem'
 import styles from './FeaturedItems.module.scss'
 
 interface FeaturedItemsProps {
@@ -16,24 +16,8 @@ export const FeaturedItems = ({ featuredItems }: FeaturedItemsProps) => {
       nextLabel="Go to next slide"
       dotLabel="Go to slide"
       className={styles['featured-items-slider']}
-      items={featuredItems.map((featuredItem, index) => (
-        <Card className={styles['featured-item-card']} key={index}>
-          <Card.Body>
-            <Card.Title as="h2" style={{ position: 'sticky', top: 0 }}>
-              {featuredItem.title}
-            </Card.Title>
-            <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
-              {featuredItem.imageUrl && (
-                <img
-                  src={featuredItem.imageUrl}
-                  alt={featuredItem.title}
-                  style={{ maxWidth: '40%' }}
-                />
-              )}
-              <div style={{ flex: 1 }} dangerouslySetInnerHTML={{ __html: featuredItem.content }} />
-            </div>
-          </Card.Body>
-        </Card>
+      items={featuredItems.map((featuredItem) => (
+        <FeaturedItem featuredItem={featuredItem} key={featuredItem.id} />
       ))}
     />
   )

diff --git a/src/sections/collection/featured-items/silder/Slider.module.scss b/src/sections/collection/featured-items/silder/Slider.module.scss
@@ -32,14 +32,18 @@
   }
 
   .slider-arrow {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    display: none;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     transform: translateY(-50%);
     margin-inline: 0.5rem;
+
+    @media screen and (min-width: 768px) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 
   &.with-dots {

diff --git a/tests/component/collection/domain/models/CollectionFeaturedItemMother.ts b/tests/component/collection/domain/models/CollectionFeaturedItemMother.ts
@@ -9,7 +9,7 @@ export class CollectionFeaturedItemMother {
         order: 1,
         title: 'Featured item 1',
         content:
-          '<h1>Featured Item 1</h1> <p><strong>Lorem ipsum</strong> dolor sit amet, <em>consectetur adipiscing</em> elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p> <h2>Lorem Ipsum: Heading 2</h2> <p>Suspendisse potenti. In <strong>non</strong> libero a nibh <em>pellentesque</em> ultricies. Nulla facilisi.</p><ul> <li>Curabitur blandit tempus porttitor.</li> <li>Aenean lacinia bibendum nulla sed consectetur.</li> <li>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</li> </ul> <p>Quisque sit amet est et sapien ullamcorper pharetra. <strong>Vivamus venenatis</strong> vehicula ligula, a tincidunt orci blandit sed:</p> <ol> <li>Donec ullamcorper nulla non metus auctor fringilla.</li> <li>Nulla vitae elit libero, a pharetra augue.</li> <li>Cras mattis consectetur purus sit amet fermentum.</li> </ol> <blockquote>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.”</blockquote> <p>Proin <code>code</code> varius, eros sit amet vestibulum interdum, lorem urna ultricies est, in malesuada sem erat id nunc.</p>',
+          '<h1>Featured Item 1</h1><p><strong>Lorem ipsum</strong> dolor sit amet, <em>consectetur adipiscing</em> elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p><h2>Lorem Ipsum: Heading 2</h2><p>Suspendisse potenti. In <strong>non</strong> libero a nibh <em>pellentesque</em> ultricies. Nulla facilisi.</p><ul><li><p>Curabitur blandit tempus porttitor.</p></li><li><p>Aenean lacinia bibendum nulla sed consectetur.</p></li><li><p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p></li></ul><p>Quisque sit amet est et sapien ullamcorper pharetra. <strong>Vivamus venenatis</strong> vehicula ligula, a tincidunt orci blandit sed:</p><ol><li><p>Donec ullamcorper nulla non metus auctor fringilla.</p></li><li><p>Nulla vitae elit libero, a pharetra augue.</p></li><li><p>Cras mattis consectetur purus sit amet fermentum.</p></li></ol><blockquote><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.”</p></blockquote><p>Proin <code>code</code> varius, eros sit amet vestibulum interdum, lorem urna ultricies est, in malesuada sem erat id nunc.<br>Featured Item 1</p><p><strong>Lorem ipsum</strong> dolor sit amet, <em>consectetur adipiscing</em> elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p><h2>Lorem Ipsum: Heading 2</h2><p>Suspendisse potenti. In <strong>non</strong> libero a nibh <em>pellentesque</em> ultricies. Nulla facilisi.</p><ul><li><p>Curabitur blandit tempus porttitor.</p></li><li><p>Aenean lacinia bibendum nulla sed consectetur.</p></li><li><p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p></li></ul><p>Quisque sit amet est et sapien ullamcorper pharetra. <strong>Vivamus venenatis</strong> vehicula ligula, a tincidunt orci blandit sed:</p><ol><li><p>Donec ullamcorper nulla non metus auctor fringilla.</p></li><li><p>Nulla vitae elit libero, a pharetra augue.</p></li><li><p>Cras mattis consectetur purus sit amet fermentum.</p></li></ol><blockquote><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.”</p></blockquote><p>Proin <code>code</code> varius, eros sit amet vestibulum interdum, lorem urna ultricies est, in malesuada sem erat id nunc.<br>Featured Item 1</p><p><strong>Lorem ipsum</strong> dolor sit amet, <em>consectetur adipiscing</em> elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p><h2>Lorem Ipsum: Heading 2</h2><p>Suspendisse potenti. In <strong>non</strong> libero a nibh <em>pellentesque</em> ultricies. Nulla facilisi.</p><ul><li><p>Curabitur blandit tempus porttitor.</p></li><li><p>Aenean lacinia bibendum nulla sed consectetur.</p></li><li><p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p></li></ul><p>Quisque sit amet est et sapien ullamcorper pharetra. <strong>Vivamus venenatis</strong> vehicula ligula, a tincidunt orci blandit sed:</p><ol><li><p>Donec ullamcorper nulla non metus auctor fringilla.</p></li><li><p>Nulla vitae elit libero, a pharetra augue.</p></li><li><p>Cras mattis consectetur purus sit amet fermentum.</p></li></ol><blockquote><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.”</p></blockquote><p>Proin <code>code</code> varius, eros sit amet vestibulum interdum, lorem urna ultricies est, in malesuada sem erat id nunc.<br>Featured Item 1</p><p><strong>Lorem ipsum</strong> dolor sit amet, <em>consectetur adipiscing</em> elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p><h2>Lorem Ipsum: Heading 2</h2><p>Suspendisse potenti. In <strong>non</strong> libero a nibh <em>pellentesque</em> ultricies. Nulla facilisi.</p><ul><li><p>Curabitur blandit tempus porttitor.</p></li><li><p>Aenean lacinia bibendum nulla sed consectetur.</p></li><li><p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p></li></ul><p>Quisque sit amet est et sapien ullamcorper pharetra. <strong>Vivamus venenatis</strong> vehicula ligula, a tincidunt orci blandit sed:</p><ol><li><p>Donec ullamcorper nulla non metus auctor fringilla.</p></li><li><p>Nulla vitae elit libero, a pharetra augue.</p></li><li><p>Cras mattis consectetur purus sit amet fermentum.</p></li></ol><blockquote><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.”</p></blockquote><p>Proin <code>code</code> varius, eros sit amet vestibulum interdum, lorem urna ultricies est, in malesuada sem erat id nunc.</p>',
         imageUrl: 'https://via.placeholder.com/400x400'
       },
       {
@@ -35,7 +35,7 @@ export class CollectionFeaturedItemMother {
         title: 'Featured item 4',
         content:
           '<p>Lorem 4 <strong>ipsum</strong>, dolor sit <em>amet</em> consectetur adipisicing elit. Aut alias eos expedita quae quisquam ea nemo neque incidunt amet. Odit quos libero aliquam labore dicta eaque dolorum, consequuntur itaque corrupti, reiciendis quas ab. Voluptatem alias, quam, aliquid excepturi repudiandae ab ex pariatur, est id perspiciatis porro impedit adipisci beatae ipsam.</p>',
-        imageUrl: 'https://via.placeholder.com/400x400'
+        imageUrl: 'https://via.placeholder.com/400x1600'
       }
     ]
   }