fix(app-board): update panel closing transition

eficode · Jan 19, 2021 · 8896e63 · 8896e63
1 parent 6511a21
commit 8896e63
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git a/packages/game-app/src/gameView/components/CardsGameListeners/CardsGameListeners.tsx b/packages/game-app/src/gameView/components/CardsGameListeners/CardsGameListeners.tsx
@@ -7,9 +7,9 @@ import { GameEvent, GameEventType } from '../../types/gameEvents';
 import { GameUIState } from '../../types/gameUIState';
 import ConnectedCard from '../ConnectedCard';
 import { PanelMode } from '../DeckPanel/DeckPanel';
-import { DEFAULT_CARD_SIZE, PANEL_CARD_SCALE, PANEL_CARD_SIZE } from '../../../dimensions';
+import { DEFAULT_CARD_SIZE, PANEL_CARD_SIZE } from '../../../dimensions';
 
-const DEBUG_ENABLED = true;
+const DEBUG_ENABLED = false;
 
 const debugPrint = (...data: any[]) => DEBUG_ENABLED && console.debug('[CardsGameListeners]', ...data);
 

diff --git a/packages/game-app/src/gameView/components/DroppablePanelArea/DroppablePanelArea.tsx b/packages/game-app/src/gameView/components/DroppablePanelArea/DroppablePanelArea.tsx
@@ -21,15 +21,13 @@ const FixedPanel = styled.div<{ closed: boolean; mode: PanelMode; isOver: boolea
   background-color: rgb(170, 180, 175, 0.4);
   display: flex;
   flex-direction: column;
-  transition: transform 0.5s, width 0.5s;
+  transition: transform 0.5s, width 0.5s, right 0.5s;
   border: 2px solid transparent;
   ${props => props.isOver && 'border-color: #00867c;'}
 
   ${props =>
     props.closed
-      ? `transform: translate(${
-          (props.mode === 'stacked' ? PANEL_ONE_COLUMNS_WIDTH : PANEL_TWO_COLUMNS_WIDTH) - 40
-        }px);`
+      ? `right: -${(props.mode === 'stacked' ? PANEL_ONE_COLUMNS_WIDTH : PANEL_TWO_COLUMNS_WIDTH) - 40}px;`
       : 'transform: translate(0);'} ${props =>
     props.mode === 'stacked' ? `width: ${PANEL_ONE_COLUMNS_WIDTH}px;` : `width: ${PANEL_TWO_COLUMNS_WIDTH}px;`}
 `;