diff --git a/public/css/components/dashboard.css b/public/css/components/dashboard.css index eb0c2bf78..fb9a628de 100644 --- a/public/css/components/dashboard.css +++ b/public/css/components/dashboard.css @@ -23,6 +23,31 @@ :root { --fhc-dashboard-grid-size: 4; } + +@media(max-width: 1400px) { + :root { + --fhc-dashboard-grid-size: 4; + } +} + +@media(max-width: 1200px) { + :root { + --fhc-dashboard-grid-size: 3; + } +} + +@media(max-width: 992px) { + :root { + --fhc-dashboard-grid-size: 2; + } +} + +@media(max-width: 768px) { + :root { + --fhc-dashboard-grid-size: 2; + } +} + @media(max-width: 577px) { :root { --fhc-dashboard-grid-size: 1; diff --git a/public/js/components/Drop/Grid.js b/public/js/components/Drop/Grid.js index baa8129cc..3a975d209 100644 --- a/public/js/components/Drop/Grid.js +++ b/public/js/components/Drop/Grid.js @@ -165,7 +165,8 @@ export default { } }, dragging(event){ - this.toggleDraggedItemOverlay(true); + if(this.mode == MODE_MOVE) + this.toggleDraggedItemOverlay(true); /* use case: instead of showing the ghost widget when dragging, change the x and y position of the widget when dragging to drag the whole widget event.target.style.top = `${this.clientY}px`; @@ -271,7 +272,8 @@ export default { }, _dragStart(evt) { if (evt.dataTransfer) { - //evt.dataTransfer.setDragImage(evt.target, -99999, -99999); + if(this.mode == MODE_RESIZE) + evt.dataTransfer.setDragImage(evt.target, -99999, -99999); evt.dataTransfer.dropEffect = 'move'; evt.dataTransfer.effectAllowed = 'move'; } @@ -288,9 +290,9 @@ export default { startResize(evt, item) { if (!this.active) return; - this._dragStart(evt); this.mode = MODE_RESIZE; this.draggedItem = item; + this._dragStart(evt); }, dragOver(evt) { if (!this.active) @@ -338,7 +340,8 @@ export default { this.draggedItem = null; }, dragEnd() { - this.toggleDraggedItemOverlay(false); + if(this.mode == MODE_MOVE) + this.toggleDraggedItemOverlay(false); if (this.mode == MODE_IDLE) return; if (!this.active || this.x < 0 || this.y < 0 || this.x >= this.cols)