Skip to content

Commit 843c9c9

Browse files
niklasramoniklasramo
committed
Update/fix examples.
1 parent 33f6f2e commit 843c9c9

File tree

57 files changed

+992
-939
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+992
-939
lines changed

‎docs/examples.md‎

Lines changed: 107 additions & 91 deletions
Large diffs are not rendered by default.

docs/public/examples/001-draggable-basic/001-draggable-basic.37750bbd.css renamed to docs/public/examples/001-draggable-basic/001-draggable-basic.3485c094.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ body {
3434
color: var(--card-color);
3535
border: 1.5px solid var(--bg-color);
3636
border-radius: 7px;
37-
justify-content: center;
38-
align-items: center;
37+
justify-content: safe center;
38+
align-items: safe center;
3939
font-size: 30px;
4040
display: flex;
4141

‎docs/public/examples/001-draggable-basic/001-draggable-basic.3e63e6b5.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
body {
2+
flex-flow: row;
3+
place-content: safe center;
4+
align-items: safe center;
5+
gap: 10px;
6+
width: 100%;
7+
height: 100%;
8+
padding: 10px;
9+
display: flex;
10+
}
11+
12+
.card.draggable {
13+
flex-grow: 0;
14+
flex-shrink: 0;
15+
position: relative;
16+
}
17+
18+
@media (width < 430px) {
19+
.card.draggable {
20+
aspect-ratio: 1;
21+
width: calc(25% - 12.5px);
22+
height: auto;
23+
}
24+
}

‎docs/public/examples/001-draggable-basic/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<title>Draggable - Basic</title>
44
<meta name="description" content="A minimal setup with four draggable elements using pointer and keyboard (motion) sensor. You can drag them all at once too if you have a multi-touch device (e.g. phone or tablet).">
55
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
6-
<link rel="stylesheet" href="001-draggable-basic.37750bbd.css">
7-
<link rel="stylesheet" href="001-draggable-basic.47e6845d.css">
6+
<link rel="stylesheet" href="001-draggable-basic.3485c094.css">
7+
<link rel="stylesheet" href="001-draggable-basic.3e63e6b5.css">
88
</head>
99
<body>
1010
<div class="card draggable" tabindex="0">

docs/public/examples/004-draggable-locked-axis/004-draggable-locked-axis.37750bbd.css renamed to docs/public/examples/002-draggable-auto-scroll/002-draggable-auto-scroll.3485c094.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ body {
3434
color: var(--card-color);
3535
border: 1.5px solid var(--bg-color);
3636
border-radius: 7px;
37-
justify-content: center;
38-
align-items: center;
37+
justify-content: safe center;
38+
align-items: safe center;
3939
font-size: 30px;
4040
display: flex;
4141

‎docs/public/examples/002-draggable-auto-scroll/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<title>Draggable - Auto Scroll</title>
44
<meta name="description" content="This example demonstrates quite a lot of things. We use a drag container and freeze `left` and `top` values before we move the dragged element into the drag container. The draggable element has percetage based left and top values, which would not be correct when the element is moved to the drag container, which has different dimensions. Lastly we use the auto scroll plugin and configure it to scroll the viewport on y-axis when the dragged element is close to it's edges. Note that we also set auto scroll target's `padding.top` and `padding.bottom` to `Infinity` to allow the scrolling to continue even if you drag the element past the edges.">
55
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
6-
<link rel="stylesheet" href="002-draggable-auto-scroll.37750bbd.css">
6+
<link rel="stylesheet" href="002-draggable-auto-scroll.3485c094.css">
77
<link rel="stylesheet" href="002-draggable-auto-scroll.35a0514c.css">
88
</head>
99
<body>

docs/public/examples/002-draggable-auto-scroll/002-draggable-auto-scroll.37750bbd.css renamed to docs/public/examples/003-draggable-transformed/003-draggable-transformed.3485c094.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ body {
3434
color: var(--card-color);
3535
border: 1.5px solid var(--bg-color);
3636
border-radius: 7px;
37-
justify-content: center;
38-
align-items: center;
37+
justify-content: safe center;
38+
align-items: safe center;
3939
font-size: 30px;
4040
display: flex;
4141

‎docs/public/examples/003-draggable-transformed/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<title>Draggable - Transformed</title>
44
<meta name="description" content="Draggable automagically handles (2D) transformed ancestors and the dragged element itself, out of the box, performantly. The draggable element is always guaranteed to move in sync with the active sensor, to the same direction and the same distance, regardless of any CSS transforms or zoom in any part of the document. In this example we showcase a scenario where the draggable element is within two differently transformed containers with different transform origins and uses a differently transformed drag container that's also wrapped in an extra transformed container. The draggable element itself also has transforms applied.">
55
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
6-
<link rel="stylesheet" href="003-draggable-transformed.37750bbd.css">
6+
<link rel="stylesheet" href="003-draggable-transformed.3485c094.css">
77
<link rel="stylesheet" href="003-draggable-transformed.23354434.css">
88
</head>
99
<body>

docs/public/examples/003-draggable-transformed/003-draggable-transformed.37750bbd.css renamed to docs/public/examples/004-draggable-locked-axis/004-draggable-locked-axis.3485c094.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ body {
3434
color: var(--card-color);
3535
border: 1.5px solid var(--bg-color);
3636
border-radius: 7px;
37-
justify-content: center;
38-
align-items: center;
37+
justify-content: safe center;
38+
align-items: safe center;
3939
font-size: 30px;
4040
display: flex;
4141

docs/public/examples/004-draggable-locked-axis/004-draggable-locked-axis.252e490c.css renamed to docs/public/examples/004-draggable-locked-axis/004-draggable-locked-axis.990b99ec.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
body {
22
flex-flow: wrap;
3-
place-content: center;
4-
align-items: center;
3+
place-content: safe center;
4+
align-items: safe center;
55
gap: 10px;
66
width: 100%;
77
height: 100%;

0 commit comments

Comments
 (0)