Skip to content

Commit 3c935c4

Browse files
kbondkbond
committed
feature #1679 [Demo] Infinite scroll 1/2 (smnandre)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Demo] Infinite scroll 1/2 New demo in two parts: part 1 here (second part will showcase the automatic load via intersection observer) <img width="1816" alt="Capture d’écran 2024-04-04 à 02 03 50" src="https://github.com/symfony/ux/assets/1359581/aa039be5-7260-4ea8-ba66-86ad9f01e61d"> <img width="1926" alt="Capture d’écran 2024-04-04 à 02 03 57" src="https://github.com/symfony/ux/assets/1359581/617e32f5-ef30-4af6-ae68-3f53badad4b1"> Commits ------- d817d09 [Demo] Infinite scroll 1/2
2 parents a13900f + d817d09 commit 3c935c4

File tree

18 files changed

+655
-32
lines changed

18 files changed

+655
-32
lines changed

‎ux.symfony.com/assets/controllers/browser-controller.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Controller } from '@hotwired/stimulus';
2+
3+
/* stimulusFetch: 'lazy' */
4+
export default class extends Controller {
5+
reduce() {
6+
this.element.classList.toggle('Browser--reduced');
7+
}
8+
}

‎ux.symfony.com/assets/icons/symfony.svg

Lines changed: 1 addition & 0 deletions
Loading

‎ux.symfony.com/assets/images/icons/circle-help.svg

Lines changed: 4 additions & 0 deletions
Loading

‎ux.symfony.com/assets/images/icons/lock.svg

Lines changed: 3 additions & 0 deletions
Loading

‎ux.symfony.com/assets/images/icons/refresh.svg

Lines changed: 3 additions & 0 deletions
Loading

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

39.1 KB
Loading

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@
6666

6767
// Components
6868
@import "components/Banner";
69+
@import "components/Browser";
6970
@import "components/DataList";
7071
@import "components/demo-container";
7172
@import "components/DemoCard";
@@ -76,6 +77,7 @@
7677
@import "components/IconModal";
7778
@import "components/IconSearch";
7879
@import "components/IconSetCard";
80+
@import "components/ProductGrid";
7981
@import "components/PackageHeader";
8082
@import "components/PackageBox";
8183
@import "components/Tabs";

‎ux.symfony.com/assets/styles/app/_html.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,11 @@ footer {
3737
flex-shrink: 0;
3838
}
3939

40+
button {
41+
border: none;
42+
background: inherit;
43+
}
44+
4045
a.link {
4146
--color: #d9438e;
4247
color: var(--color);

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

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
.Browser {
2+
place-self: center;
3+
margin-inline: auto;
4+
}
5+
.Browser__window {
6+
border-radius: .5rem;
7+
overflow: hidden;
8+
box-shadow: 0 0 0 1px #070707;
9+
max-width: 1400px;
10+
background: radial-gradient(circle at center, #00000021 0.15rem, #00000003 0) repeat;
11+
background-size: 1rem 1rem;
12+
transition: all 450ms linear;
13+
}
14+
15+
.Browser--reduced {
16+
z-index: 555;
17+
transform: scale(.75);
18+
}
19+
20+
.Browser__header {
21+
display: grid;
22+
grid-template-areas: "left center right";
23+
grid-template-columns: 1fr 3fr 1fr;
24+
justify-content: space-between;
25+
align-items: center;
26+
padding: .6rem;
27+
background-color: #191C1F;
28+
border-bottom: 1px solid #070707;
29+
box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.15);
30+
}
31+
32+
.Browser__dots {
33+
grid-area: left;
34+
display: flex;
35+
gap: .5rem;
36+
padding-inline: .5rem;
37+
}
38+
39+
.Browser__actions {
40+
grid-area: right;
41+
display: flex;
42+
gap: .5rem;
43+
flex-direction: row-reverse;
44+
}
45+
46+
.Browser__action {
47+
color: rgba(219, 219, 220, 0.7);
48+
}
49+
50+
.Browser__url {
51+
grid-area: center;
52+
background-color: #0C0F12;
53+
color: rgba(219, 219, 220, 0.7);
54+
border-radius: .5rem;
55+
font-size: .75rem;
56+
width: auto;
57+
padding: 0.1rem .5rem;
58+
display: flex;
59+
align-items: center;
60+
justify-content: space-between;
61+
}
62+
63+
.Browser__url em {
64+
color: #DBDBDC;
65+
font-style: normal;
66+
}
67+
68+
.Browser__url .Browser__action {
69+
float: right;
70+
}
71+
72+
.Browser__viewport {
73+
width: 100%;
74+
aspect-ratio: 16/10;
75+
background-color: var(--bs-body-bg);
76+
overflow-x: hidden;
77+
overflow-y: scroll;
78+
scrollbar-width: thin;
79+
}
80+
81+
.Browser__dot {
82+
height: .75rem;
83+
width: .75rem;
84+
border: none;
85+
border-radius: 50%;
86+
background-color: var(--dot-color, #000f);
87+
box-shadow: 0 0 0 1px #070707;
88+
display: grid;
89+
place-content: center;
90+
}
91+
92+
.Browser__dot span {
93+
font-size: .8rem;
94+
mix-blend-mode: overlay;
95+
color: #070707;
96+
transition: all 150ms;
97+
transform: scale(.75);
98+
opacity: .5;
99+
display: block;
100+
position: relative;
101+
top: -.05rem;
102+
}
103+
104+
.Browser__dot:hover span {
105+
opacity: 1;
106+
transform: scale(1);
107+
}
108+
109+
.Browser__dot--red {
110+
--dot-color: lch(42.76% 78.42 43);
111+
}
112+
113+
.Browser__dot--orange {
114+
--dot-color: lch(62.6% 72.82 64.92);
115+
}
116+
117+
.Browser__dot--green {
118+
--dot-color: lch(67.05% 83.27 137.66);
119+
}

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
// -----------------------------------------------------------------
2+
// ProductGrid
3+
// -----------------------------------------------------------------
4+
5+
.ProductGrid {
6+
--item-ratio: 1;
7+
--grid-columns: 5;
8+
}
9+
10+
.ProductGrid_page {
11+
display: grid;
12+
grid-template-columns: repeat(var(--grid-columns), 1fr);
13+
gap: 1rem;
14+
}
15+
16+
.ProductGrid_item {
17+
aspect-ratio: var(--item-ratio, 1/1);
18+
padding: 1rem;
19+
display: grid;
20+
background: #f0f8ff87;
21+
background: rgba(2, 12, 21, 0.98);
22+
grid-template-rows: 4fr 1fr;
23+
border-radius: 4px;
24+
}
25+
26+
[data-bs-theme="dark"] .ProductGrid_item {
27+
background: var(--bs-secondary-bg-subtle);
28+
background-blend-mode: color-burn;
29+
}
30+
31+
.ProductGrid_media {
32+
display: grid;
33+
place-content: center;
34+
position: relative;
35+
justify-items: center;
36+
}
37+
38+
.ProductGrid_item svg {
39+
height: 100%;
40+
max-width: 100%;
41+
width: auto;
42+
fill: var(--color);
43+
filter: drop-shadow(2px 2px 0px #fff) drop-shadow(-2px -2px 0px #461279);
44+
}
45+
46+
.ProductGrid_item span {
47+
top: 40%;
48+
font-size: 2rem;
49+
position: absolute;
50+
}
51+
52+
.ProductGrid_item data {
53+
text-align: center;
54+
font-size: small;
55+
font-family: var(--font-family-code);
56+
color: black;
57+
58+
color: var(--color);
59+
}

‎ux.symfony.com/src/Controller/Demo/LiveComponentDemoController.php

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,14 @@ public function invoice(LiveDemoRepository $liveDemoRepository, ?Invoice $invoic
116116
]);
117117
}
118118

119+
#[Route('/infinite-scroll', name: 'app_demo_live_component_infinite_scroll')]
120+
public function infiniteScroll(LiveDemoRepository $liveDemoRepository): Response
121+
{
122+
return $this->render('demos/live_component/infinite_scroll.html.twig', parameters: [
123+
'demo' => $liveDemoRepository->find('infinite-scroll'),
124+
]);
125+
}
126+
119127
#[Route('/product-form', name: 'app_demo_live_component_product_form')]
120128
public function productForm(LiveDemoRepository $liveDemoRepository): Response
121129
{

0 commit comments

Comments
 (0)