wasp-lang/wasp
1
1
Fork 0
mirror of https://github.com/wasp-lang/wasp.git synced 2024-12-23 17:13:40 +03:00
Code Issues Projects Releases Wiki Activity

Add CSS transitions for tilting when dragged

Browse Source
This commit is contained in:
dabrorius 2024-12-18 11:10:12 +01:00
parent 9d4c8731aa
commit add1b164db
2 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
examples/waspello/src/cards/Main.css
View File

@ -233,12 +233,18 @@ button.open-add-list {
background-color: #ebecf0;
border-radius: 3px;
transition: transform 200ms ease-in-out;
}
.list--dragging {
transform: rotate(2deg);
}
.list--drop-animating {
transform: rotate(0deg);
}
.list-header {
display: flex;
align-items: center;
@ -422,12 +428,17 @@ textarea.card-composer-textarea {
margin-bottom: 8px;
padding: 6px 8px 2px;
box-shadow: 0 1px 0 rgb(9 30 66 / 25%);
transition: transform 200ms ease-in-out;
}
.list-card--dragging {
transform: rotate(4deg);
}
.list-card--drop-animating {
transform: rotate(0deg);
}
.list-card-title {
display: block;
margin: 0 0 4px;

26
examples/waspello/src/cards/MainPage.jsx
View File

@ -236,6 +236,17 @@ const List = ({ list, index, cards }) => {
)
}
const getListClassName = (snapshot) => {
const classes = ['list']
if (snapshot.isDragging) {
classes.push('list--dragging')
}
if (snapshot.isDropAnimating) {
classes.push('list--drop-animating')
}
return classes.join(' ')
}
return (
<Draggable
key={list.id}
@ -248,7 +259,7 @@ const List = ({ list, index, cards }) => {
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<div className={`list ${snapshot.isDragging && 'list--dragging'}`}>
<div className={getListClassName(snapshot)}>
<div className='list-header'>
{isHeaderTargetShown ? (
<div
@ -324,6 +335,17 @@ const Cards = ({ cards }) => {
}
const Card = ({ card, index }) => {
const getListCardClassName = (snapshot) => {
const classes = ['list-card']
if (snapshot.isDragging) {
classes.push('list-card--dragging')
}
if (snapshot.isDropAnimating) {
classes.push('list-card--drop-animating')
}
return classes.join(' ')
}
return (
<Draggable
key={card.id}
@ -335,7 +357,7 @@ const Card = ({ card, index }) => {
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<div className={`list-card ${snapshot.isDragging && 'list-card--dragging'}`}>
<div className={getListCardClassName(snapshot)}>
<span className='list-card-title'>{card.title}</span>
</div>
</div>