Fix drag&drop in kanban for mobile

This commit is contained in:
yflory 2021-02-03 17:27:38 +01:00
parent 0e686eae63
commit 1c9d36d9ea
2 changed files with 44 additions and 4 deletions

View file

@ -143,6 +143,9 @@
border: 0; border: 0;
background: transparent; background: transparent;
align-self: flex-start; align-self: flex-start;
@media (hover: none) {
margin-right: 20px;
}
} }
.cp-kanban-cursors { .cp-kanban-cursors {
@ -167,6 +170,21 @@
padding: 5px; padding: 5px;
flex-wrap: wrap; flex-wrap: wrap;
touch-action: none; touch-action: none;
.tools_unselectable();
touch-action: none;
cursor: move;
cursor: grab;
margin-bottom: 10px;
&:last-child {
margin: 0;
}
&.is-moving.gu-mirror {
transform: rotate(3deg);
height: auto !important;
opacity: 0.8;
}
.cp-kanban-cursors { .cp-kanban-cursors {
margin-top: 10px; margin-top: 10px;
} }
@ -240,6 +258,26 @@
} }
.kanban-board { .kanban-board {
position: relative;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
vertical-align: top;
display: flex;
flex-flow: column;
width: 300px;
margin: 10px 5px;
@media (hover: none) {
margin-bottom: 30px;
}
&.is-moving.gu-mirror {
transform: rotate(3deg);
opacity: 0.8;
.kanban-drag {
overflow: hidden;
padding-right: 50px;
}
}
main { main {
padding: 0 10px; padding: 0 10px;
margin: 10px 0; margin: 10px 0;
@ -247,12 +285,17 @@
overflow-y: auto; overflow-y: auto;
justify-content: space-around; justify-content: space-around;
min-height: 38px; // Size of one card min-height: 38px; // Size of one card
@media (hover: none) {
padding-right: 30px;
}
} }
header { header {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
padding: 5px 10px; padding: 5px 10px;
cursor: move;
cursor: grab;
.kanban-title-board { .kanban-title-board {
flex: 1; flex: 1;
margin-right: 10px; margin-right: 10px;
@ -264,9 +307,6 @@
#kanban-edit { #kanban-edit {
font-weight: bold; font-weight: bold;
} }
&:hover {
cursor: move;
}
} }
footer { footer {
margin: 10px; margin: 10px;

View file

@ -26,7 +26,7 @@ define([
element: '', element: '',
gutter: '15px', gutter: '15px',
widthBoard: '250px', widthBoard: '250px',
responsive: '700', responsive: 0, //'700',
responsivePercentage: false, responsivePercentage: false,
boards: { boards: {
data: {}, data: {},