EBernhardson has submitted this change and it was merged.

Change subject: Improving card dropping behaviour
......................................................................


Improving card dropping behaviour

- Adding a highlight when hovering over stacks
- Making it easier to drop cards on the stacks
  by increasing the height of the stack as cards
  are added

Change-Id: If08cf8d6c9cb29146a354e31e967e81531832b5c
---
M public/css/deck.css
M public/js/discernadeck.js
2 files changed, 50 insertions(+), 45 deletions(-)

Approvals:
  EBernhardson: Verified; Looks good to me, approved



diff --git a/public/css/deck.css b/public/css/deck.css
index 0d0466e..4ecef36 100644
--- a/public/css/deck.css
+++ b/public/css/deck.css
@@ -62,12 +62,12 @@
 }
 
 .info {
-    background-color: rgba(0,0,0,0.2);
+    background-color: rgba(0, 0, 0, 0.25);
     border-radius: 5px;
     height: 250px;
     left: 50%;
     position: relative;
-    width: 365px;
+    width: 385px;
     padding: 12px 12px 0 12px;
     margin-left: 18px;
     color: white;
@@ -262,7 +262,7 @@
 .drop-area {
     position: absolute;
     top: 275px;
-    background-color: transparent;
+    background-color: rgba(0, 0, 0, 0.25);
     width: 180px;
     height: 250px;
     border-radius: 5px;
@@ -271,7 +271,6 @@
     z-index: 0;
     box-shadow: 0 1px 3px 0px rgba(0,0,0,0.1);
     cursor: pointer;
-    border: 2px solid;
 }
 
 .drop-area-description {
@@ -297,54 +296,36 @@
     text-shadow: 0 1px rgba(0,0,0,0.2);
 }
 
-.drop-area.irrelevant {
-    left: -207px;
+.stack.active-stack {
+    box-shadow: 0 0px 2px 2px rgb(255, 255, 255);
 }
 
-.drop-area.irrelevant .drop-area-label{
-    border-color: rgb(255, 198, 198);
-}
+.drop-area.irrelevant { left: -207px; }
+.drop-area.irrelevant .drop-area-label{ border-color: rgb(255, 198, 198); }
 .drop-area.irrelevant:hover .drop-area-label,
-.drop-area.irrelevant.active .drop-area-label{
-    color: rgb(255, 223, 223);
-}
+.drop-area.irrelevant.active .drop-area-label{ color: rgb(255, 223, 223); }
+.drop-area.irrelevant:hover,
+.drop-area.irrelevant.active-stack { box-shadow: 0 0px 2px 2px rgb(255, 198, 
198); }
 
-.drop-area.maybe-relevant {
-    left: 0;
-}
-
-.drop-area.maybe-relevant .drop-area-label{
-    border-color: rgb(255, 222, 182);
-}
-
+.drop-area.maybe-relevant { left: 0; }
+.drop-area.maybe-relevant .drop-area-label{ border-color: rgb(255, 222, 182); }
 .drop-area.maybe-relevant:hover .drop-area-label,
-.drop-area.maybe-relevant.active .drop-area-label{
-    color: rgb(255, 222, 182);
-}
+.drop-area.maybe-relevant.active .drop-area-label{ color: rgb(255, 222, 182); }
+.drop-area.maybe-relevant:hover,
+.drop-area.maybe-relevant.active-stack { box-shadow: 0 0px 2px 3px rgb(255, 
222, 182); }
 
-.drop-area.probably-relevant {
-    left: 207px;
-}
 
-.drop-area.probably-relevant .drop-area-label {
-    border-color: rgb(249, 246, 177);
-}
-
+.drop-area.probably-relevant { left: 207px; }
+.drop-area.probably-relevant .drop-area-label { border-color: rgb(249, 246, 
177); }
 .drop-area.probably-relevant:hover .drop-area-label,
-.drop-area.probably-relevant.active .drop-area-label{
-    color: rgb(249, 246, 177);
-}
+.drop-area.probably-relevant.active .drop-area-label{ color: rgb(249, 246, 
177); }
+.drop-area.probably-relevant:hover,
+.drop-area.probably-relevant.active-stack { box-shadow: 0 0px 2px 2px rgb(249, 
246, 177); }
 
 
-.drop-area.relevant {
-    left: 414px;
-}
-
-.drop-area.relevant .drop-area-label{
-    border-color: rgb(193, 251, 189);
-}
-
+.drop-area.relevant { left: 414px; }
+.drop-area.relevant .drop-area-label{ border-color: rgb(193, 251, 189); }
 .drop-area.relevant:hover .drop-area-label,
-.drop-area.relevant.active .drop-area-label{
-    color: rgb(193, 251, 189);
-}
+.drop-area.relevant.active .drop-area-label{ color: rgb(193, 251, 189); }
+.drop-area.relevant:hover,
+.drop-area.relevant.active-stack { box-shadow: 0 0px 2px 2px rgb(193, 251, 
189); }
diff --git a/public/js/discernadeck.js b/public/js/discernadeck.js
index d910901..b87cb2d 100644
--- a/public/js/discernadeck.js
+++ b/public/js/discernadeck.js
@@ -12,6 +12,7 @@
        getCards: function(){ return this.cards },
        addCard: function( card ){
                this.cards.push( card );
+               this.setDomElHeight();
        },
        reorganizeCardsInStack: function() {
 
@@ -24,6 +25,10 @@
                        TweenLite.to( card.domEl, 0.8,{x: stackXY.x, y: 
stackXY.y - (stack.DROP_GAP * (reverseIndex ) ), zIndex: stack.cards.length - 
reverseIndex, ease:Elastic.easeOut} );
                        card.setCardXY( stackXY.x, stackXY.y - (stack.DROP_GAP 
* (reverseIndex ) ) );
                }
+               this.setDomElHeight();
+       },
+       setDomElHeight: function(){
+               this.domEl.style.height =  this.cards.length * this.DROP_GAP + 
250 + this.gap + 'px';
        },
        removeCard: function( card ) {
                this.cards.splice( this.cards.indexOf( card ), 1 );
@@ -101,11 +106,25 @@
                        var offsetX = card.x + ev.deltaX;
                        var offsetY = card.y + ev.deltaY;
                        TweenLite.set( card.domEl, {x: offsetX, y: offsetY} );
+
+                       var hasCollided = card.findDropCollision( dropAreas ) 
|| deck.flippedDomEl;
+
+                       hasCollided.classList.add('active-stack');
+
+                       if ( deck.flippedDomEl !== hasCollided ) {
+                               
deck.flippedDomEl.classList.remove('active-stack');
+                       }
+                       Array.prototype.forEach.call(dropAreas, function( 
dropArea ){
+                               if ( dropArea !== hasCollided ) {
+                                       
dropArea.classList.remove('active-stack');
+                               }
+                       });
                }
        },
        onDoubleTap: function( card ) {
                return function( ev ) {
-                       if ( card.stack && card.stack.cards.indexOf(card) === 
card.stack.cards.length - 1 ) {
+                       var cardsInStack = ( card.stack ) ? card.stack.cards : 
[];
+                       if ( Stack.isPrototypeOf( card.stack ) && 
cardsInStack[cardsInStack.length - 1] === card ) {
                                card.stack.onTap( card.stack )();
                        }
                }
@@ -150,6 +169,11 @@
                return function( ev ) {
 
                        card.domEl.classList.remove( 'active' );
+                       deck.flippedDomEl.classList.remove('active-stack');
+
+                       Array.prototype.forEach.call(dropAreas, function( 
dropArea ){
+                                       
dropArea.classList.remove('active-stack');
+                       });
 
                        var droppedArea = card.findDropCollision( dropAreas );
                        if ( droppedArea ) {

-- 
To view, visit https://gerrit.wikimedia.org/r/311944
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: If08cf8d6c9cb29146a354e31e967e81531832b5c
Gerrit-PatchSet: 4
Gerrit-Project: wikimedia/discovery/discernatron
Gerrit-Branch: master
Gerrit-Owner: Jdrewniak <jdrewn...@wikimedia.org>
Gerrit-Reviewer: EBernhardson <ebernhard...@wikimedia.org>
Gerrit-Reviewer: Jdrewniak <jdrewn...@wikimedia.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to