feature #1887 [Demo] Infinite Scroll 2/2 (smnandre)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[Demo] Infinite Scroll 2/2

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | no
| Issues        | Fix
| License       | MIT

This took some time but....  what a beautiful collection of TShirts 😸

<img width="1206" alt="Capture d’écran 2024-06-04 à 20 40 14" src="https://github.com/symfony/ux/assets/1359581/5dea5970-d468-4506-ab96-7bf63b17428a">

Commits
-------

a23123c [Demo] Infinite Scroll 2/2

Author: kbond

ux.symfony.com/assets/controllers/appear-controller.js

@@ -0,0 +1,21 @@
+import { Controller } from '@hotwired/stimulus';
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    static targets = ['loader'];
+
+    loaderTargetConnected(element) {
+        this.observer ??= new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    entry.target.dispatchEvent(new CustomEvent('appear', {detail: {entry}}));
+                }
+            });
+        });
+        this.observer?.observe(element);
+    }
+
+    loaderTargetDisconnected(element) {
+        this.observer?.unobserve(element);
+    }
+}

ux.symfony.com/assets/images/live_demo/infinite-scroll-2.png

@@ -20,8 +20,8 @@ h3, a.component-title {
   font-size: 28px;
   line-height: 32px;
   letter-spacing: -1px;
-  color: #0A0A0A;
   text-decoration: none;
+  color: var(--bs-body-color);
 }
 
 h4.ubuntu {
@@ -47,6 +47,26 @@ h4.ubuntu {
   }
 }
 
+.code-description :is(h2, h3) {
+  font-family: var(--font-family-title);
+}
+.code-description h2 {
+  font-size: 2.5em;
+  margin-block-end: 1.5rem;
+}
+.code-description h3 {
+  font-size: 1.65em;
+  font-weight: 500;
+  margin-block-end: 1.125rem;
+  margin-top: 2.25rem;
+}
+
+.code-description:hover strong {
+  background: var(--bs-body-color);
+    color: var(--bs-body-bg);
+}
+
+
 .ubuntu-header {
   font-family: var(--font-family-title);
   font-weight: 700;

ux.symfony.com/assets/images/live_demo/infinite-scroll.png

@@ -77,6 +77,11 @@
   overflow-y: scroll;
   scrollbar-width: thin;
 }
+@media screen and (max-width: 768px) {
+  .Browser__viewport {
+    aspect-ratio: 1/2;
+  }
+}
 
 .Browser__dot {
   height: .75rem;

ux.symfony.com/assets/styles/app/_typography.scss

@@ -24,4 +24,5 @@
 }
 .demo-introduction code {
   font-size: 0.95em;
+  letter-spacing: -.01em;
 }

ux.symfony.com/assets/styles/components/_Browser.scss

@@ -5,6 +5,8 @@
 .ProductGrid {
   --item-ratio: 1;
   --grid-columns: 5;
+  --color: rgba(252 240 240 / 0.9);
+  --bg-color: #161719;
 }
 @media screen and (max-width: 768px) {
   .ProductGrid {
@@ -16,20 +18,34 @@
   padding: min(4%, 1.5rem);
 }
 
-.ProductGrid_page {
+.ProductGrid_header {
   display: grid;
-  grid-template-columns: repeat(var(--grid-columns), 1fr);
+  position: sticky;
   gap: 1rem;
+  padding: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  border-bottom: 1px solid #070707;
+  top: 0;
+    background: #191C1F;
+  z-index: 5;
+  backdrop-filter: blur(5px);
+}
+
+.ProductGrid_items,
+.ProductGrid_page {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(35vw, 180px), 1fr));
+  gap: min(1rem, 4vw);
 }
 
 .ProductGrid_item {
   aspect-ratio: var(--item-ratio, 1/1);
   padding: 1rem;
+  gap: 1rem;
   display: grid;
-  background: #f0f8ff87;
-  background: rgba(2, 12, 21, 0.98);
-  grid-template-rows: 4fr 1fr;
-  border-radius: 4px;
+  background: #0000002b;
+  background: var(--bg-color);
+  border-radius: .5rem;
 }
 
 [data-bs-theme="dark"] .ProductGrid_item {
@@ -42,27 +58,113 @@
   place-content: center;
   position: relative;
   justify-items: center;
+  overflow: hidden;
 }
 
-.ProductGrid_item svg {
-  height: 100%;
-  max-width: 100%;
-  width: auto;
+.ProductGrid_media svg {
+  height: auto;
+  width: 100%;
   fill: var(--color);
-  filter: drop-shadow(2px 2px 0px #fff) drop-shadow(-2px -2px 0px #461279);
+  color: var(--color);
+  min-width: 160px;
 }
 
-.ProductGrid_item span {
+.ProductGrid_media span {
   top: 40%;
   font-size: 2rem;
   position: absolute;
 }
 
-.ProductGrid_item data {
-  text-align: center;
-  font-size: small;
+.ProductGrid_price {
+  font-size: .75rem;
   font-family: var(--font-family-code);
-  color: black;
+  color: var(--color);
+  background: rgba(0, 0, 0, 0.2);
+  display: inline-flex;
+  margin-inline: auto;
+  min-width: 48%;
+  border-radius: 0.8rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1rem;
+  height: 1.5rem;
+}
+.ProductGrid_price::before {
+  content: attr(data-currency);
+  font-weight: 300;
+  padding-inline-end: 0.25em;
+  opacity: .5;
+}
+.ProductGrid_price small {
+  font-weight: 300;
+  opacity: .9;
+}
 
+.ProductGrid_more {
+  display: grid;
+  place-content: center;
+  background: var(--bg-color);
+  background-blend-mode: color-burn;
   color: var(--color);
+  font-size: 1rem;
+  text-transform: uppercase;
+  padding: .75rem 2.5rem;
+  border-radius: 2rem;
+  font-weight: 300;
+  font-stretch: semi-condensed;
+  opacity: .75;
+  transition: all 150ms;
+  border: 2px solid #0009;
+}
+.ProductGrid_more:hover {
+  opacity: 1;
+  border: 2px solid #000e;
+}
+
+.ProductGrid_item:has(.ProductGrid_loader) .ProductGrid_media {
+  filter: brightness(0);
+  opacity: 0.2;
+}
+.ProductGrid_loader {
+  position: relative;
+  height: 4px;
+  width: 100%;
+  border-radius: 1rem;
+  overflow: hidden;
+  content: "";
+}
+.ProductGrid_loader:after{
+  content: '';
+  position: absolute;
+  left:0;
+  top:0;
+  height: 100%;
+  width: 100%;
+  background: var(--color);
+  --duration: 1s;
+  animation: productloading linear forwards;
+  animation-delay: calc(var(--delay) * 0.9 * var(--duration));
+  animation-duration: var(--duration);
+  transform: translateX(-100%);
+}
+@keyframes productloading {
+  100% { transform: translateX(0) }
+}
+@keyframes productloaded {
+  0% {
+    opacity: 0.2;
+    filter: brightness(0)
+  }
+  100% {
+    opacity: 1;
+    filter: brightness(1)
+  }
+}
+.ProductGrid_media.loaded span,
+.ProductGrid_media.loaded svg {
+  opacity: .2;
+  filter: brightness(0);
+  --duration: 1000ms;
+  animation: productloaded var(--duration) linear forwards;
+  animation-delay: calc(var(--delay) * 0.9 * var(--duration));
 }

ux.symfony.com/assets/styles/components/_DemoContainer.scss

@@ -1,12 +1,15 @@
 .container {
   margin-inline: auto;
-  max-width: 1200px;
+  max-width: 1240px;
 }
 .container--fluid {
   max-width: 100%;
 }
 .container--large {
 
+}
+.container-xxl {
+  max-width: 1400px;
 }
 .container--xlarge {
 

ux.symfony.com/assets/styles/components/_ProductGrid.scss

@@ -21,3 +21,9 @@ section:not([class]) {
   line-height: 1.2;
   color: var(--heading-color, var(--color-primary));
 }
+
+
+.section--alt {
+  background: rgb(var(--bs-body-color-rgb), .025);
+  border-block: 1px dotted var(--bs-primary-border-subtle);
+}

ux.symfony.com/assets/styles/layouts/_container.scss

@@ -124,6 +124,14 @@ public function infiniteScroll(LiveDemoRepository $liveDemoRepository): Response
         ]);
     }
 
+    #[Route('/infinite-scroll-2', name: 'app_demo_live_component_infinite_scroll_2')]
+    public function infiniteScroll2(LiveDemoRepository $liveDemoRepository): Response
+    {
+        return $this->render('demos/live_component/infinite_scroll_2.html.twig', parameters: [
+            'demo' => $liveDemoRepository->find('infinite-scroll-2'),
+        ]);
+    }
+
     #[Route('/product-form', name: 'app_demo_live_component_product_form')]
     public function productForm(LiveDemoRepository $liveDemoRepository): Response
     {

ux.symfony.com/assets/styles/layouts/_section.scss

@@ -52,10 +52,7 @@ private function loadEmojis(): array
             '🦦',
             '🦨',
             '🦘',
-            '🦡',
             '🐾',
-            '🦃',
-            '🐔',
             '🐓',
             '🐣',
             '🐤',
@@ -68,11 +65,9 @@ private function loadEmojis(): array
             '🦢',
             '🦉',
             '🦤',
-            '🪶',
             '🦩',
             '🦚',
             '🦜',
-            '🪽',
             '🐦‍⬛',
             '🪿',
             '🐸',
@@ -88,13 +83,8 @@ private function loadEmojis(): array
             '🐋',
             '🐬',
             '🦭',
-            '🐟',
-            '🐠',
             '🐡',
-            '🦈',
             '🐙',
-            '🐚',
-            '🪸',
             '🪼',
             '🐌',
             '🦋',
@@ -103,22 +93,11 @@ private function loadEmojis(): array
             '🐝',
             '🪲',
             '🐞',
-            '🦗',
-            '🪳',
-            '🕷️',
-            '🕸️',
-            '🦂',
-            '🦟',
-            '🪰',
-            '🪱',
-            '🦠',
             '💐',
             '🌸',
-            '💮',
             '🪷',
             '🏵️',
             '🌹',
-            '🥀',
             '🌺',
             '🌻',
             '🌼',
@@ -137,8 +116,6 @@ private function loadEmojis(): array
             '🍁',
             '🍂',
             '🍃',
-            '🪹',
-            '🪺',
             '🍄',
             '🍇',
             '🍈',
@@ -160,21 +137,14 @@ private function loadEmojis(): array
             '🫒',
             '🥥',
             '🥑',
-            '🍆',
-            '🥔',
             '🥕',
             '🌽',
             '🌶️',
             '🫑',
             '🥒',
             '🥬',
             '🥦',
-            '🧄',
-            '🧅',
             '🍄',
-            '🍠',
-            '🥜',
-            '🌰',
         ];
     }
 }