WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Commit 2b26589

Browse files
SheraffSheraff
committed
some cleanup
1 parent dfaae26 commit 2b26589

File tree

3 files changed

+57
-46
lines changed

3 files changed

+57
-46
lines changed

‎src/pages/silky-modal/index.tsx‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -23,31 +23,44 @@ export default function SilkyModalPage() {
2323
<dialog id="mydialog" ref={(e) => {
2424
if (!e) return
2525
const content = e.querySelector<HTMLDivElement>('[data-dialog-content]')!
26-
const observer = new IntersectionObserver(([entry]) => !entry.isIntersecting && e.close())
26+
let visible = false
27+
const observer = new IntersectionObserver(([entry]) => {
28+
visible = entry.isIntersecting
29+
if (!visible) e.close()
30+
})
2731
observer.observe(content)
2832
return () => observer.disconnect()
2933
}}>
3034
<div data-dialog-bumper="top" />
31-
<div data-dialog-content>
32-
<button commandfor="mydialog" command="close">Close</button>
33-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
34-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
35-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
36-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
37-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
38-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
39-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
40-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
41-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
42-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
43-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
44-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
45-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
46-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
47-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
48-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
49-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
50-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
35+
<div data-dialog-area>
36+
<div data-dialog-content>
37+
<button
38+
commandfor="mydialog"
39+
command="close"
40+
onClick={(e) => {
41+
e.preventDefault()
42+
e.currentTarget.closest<HTMLDialogElement>('dialog')!.scrollTo({ top: 0, behavior: 'smooth' })
43+
}}
44+
>Close</button>
45+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
46+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
47+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
48+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
49+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
50+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
51+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
52+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
53+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
54+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
55+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
56+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
57+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
58+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
59+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
60+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
61+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
62+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus.</p>
63+
</div>
5164
</div>
5265
<div data-dialog-bumper="bottom" />
5366
</dialog>

‎src/pages/silky-modal/styles.module.css‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
dialog {
1111
--initial-gap: 40svh;
12+
--end-gap: 5rem;
1213
inset: 0;
1314
margin: 0;
1415
width: auto;
@@ -26,15 +27,10 @@
2627

2728
&::backdrop {
2829
transition: opacity 400ms ease-out;
29-
animation: blur-in linear forwards, blur-in linear reverse forwards, blur-in 300ms ease-out;
30+
animation: blur-in linear both, blur-in linear reverse both, blur-in 250ms cubic-bezier(0.101, 1, 0.68, 1);
3031
animation-timeline: --dialog-page-top, --dialog-page-bottom, auto;
3132
animation-range: exit, entry;
32-
}
33-
34-
&::before {
35-
content: "";
36-
display: block;
37-
scroll-snap-align: start;
33+
background-color: rgba(0, 0, 0, 0.543);
3834
}
3935

4036
&>div[data-dialog-bumper="top"] {
@@ -44,22 +40,16 @@
4440
content: "";
4541
display: block;
4642
height: calc(100dvh - var(--initial-gap));
47-
view-timeline: --dialog-page-top y;
48-
}
49-
50-
&::after {
51-
content: "";
52-
display: block;
5343
scroll-snap-align: start;
54-
height: var(--initial-gap);
44+
view-timeline: --dialog-page-top y;
5545
}
5646
}
5747

5848
&>div[data-dialog-bumper="bottom"] {
5949
&::before {
6050
content: "";
6151
display: block;
62-
height: 100dvh;
52+
height: calc(100dvh - var(--end-gap));
6353
view-timeline: --dialog-page-bottom y;
6454
}
6555

@@ -71,30 +61,38 @@
7161
}
7262
}
7363

74-
&>div[data-dialog-content] {
75-
transition: translate 400ms ease-out;
64+
&>div[data-dialog-area] {
65+
scroll-snap-align: start;
66+
max-height: 100dvh;
67+
overflow-y: auto;
68+
scrollbar-width: none;
69+
padding-block: var(--initial-gap) var(--end-gap);
70+
}
71+
72+
&>div>div[data-dialog-content] {
73+
transition: translate 250ms cubic-bezier(0.101, 1, 0.68, 1);
74+
75+
@starting-style {
76+
translate: 0 calc(100dvh - var(--initial-gap));
77+
}
78+
7679
max-width: 50ch;
7780
margin: auto;
7881
padding: 2em;
7982
border-radius: 2em;
8083
corner-shape: squircle;
8184
background: #5e5e5e;
8285

83-
@starting-style {
84-
translate: 0 calc(100dvh - var(--initial-gap));
85-
}
8686
}
8787
}
8888
}
8989

9090
@keyframes blur-in {
9191
from {
92-
backdrop-filter: blur(0px);
9392
opacity: 0;
9493
}
9594

9695
to {
97-
backdrop-filter: blur(10px);
98-
opacity: 1;
96+
backdrop-filter: blur(3px);
9997
}
10098
}

‎src/router.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -175,8 +175,8 @@ export const ROUTES = {
175175
tags: ['css', 'wip']
176176
},
177177
git: {
178-
lastModified: 0,
179-
firstAdded: 0
178+
lastModified: 1764198910000,
179+
firstAdded: 1764198910000
180180
},
181181
},
182182
"quad-tree-collisions": {

0 commit comments

Comments
 (0)