fix(components): fix Deck component viewBox (#1807)

- fix Deck SVG viewBox - update Deck styles in PD - update DeckMap styles in Run App
Opentrons · Jul 3, 2018 · bff921f · bff921f
1 parent c1183da
commit bff921f
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 22 deletions.
diff --git a/app/src/components/DeckMap/styles.css b/app/src/components/DeckMap/styles.css
@@ -1,12 +1,9 @@
 @import '@opentrons/components';
 
 .deck {
-  box-sizing: border-box;
-  display: block;
   padding: 1rem 2rem;
   margin: 0 auto;
-  width: 38rem;
-  height: 33rem;
+  max-width: 100%;
 }
 
 .disabled {

diff --git a/components/src/deck/Deck.js b/components/src/deck/Deck.js
@@ -6,8 +6,6 @@ import type {DeckSlot} from '../robot-types'
 
 import {
   SLOTNAME_MATRIX,
-  DECK_WIDTH,
-  DECK_HEIGHT,
   SLOT_WIDTH,
   SLOT_HEIGHT,
   SLOT_SPACING,
@@ -28,20 +26,12 @@ type Props = {
   LabwareComponent: React.ComponentType<LabwareComponentProps>
 }
 
-// TODO(mc, 2018-02-05): this viewbox is wrong; fix it
-const VIEWBOX = [
-  -SLOT_OFFSET,
-  -SLOT_OFFSET,
-  DECK_WIDTH + SLOT_OFFSET * 2,
-  DECK_HEIGHT + SLOT_OFFSET * 4
-].join(' ')
-
 export default function Deck (props: Props) {
   const {className, LabwareComponent} = props
 
   return (
     // TODO css not inline style on svg
-    <svg viewBox={VIEWBOX} className={cx(styles.deck, className)}>
+    <svg viewBox={'0 0 427 390'} className={cx(styles.deck, className)}>
 
       {/* Deck outline */}
       <g transform='scale(0.666)' className={styles.deck_outline}>

diff --git a/components/src/deck/constants.js b/components/src/deck/constants.js
@@ -16,6 +16,4 @@ export const TRASH_SLOTNAME = '12'
 export const SLOT_WIDTH = 127.8
 export const SLOT_HEIGHT = 85.5
 export const SLOT_SPACING = 5
-export const DECK_WIDTH = SLOT_WIDTH * 3 + SLOT_SPACING * 4
-export const DECK_HEIGHT = SLOT_HEIGHT * 4 + SLOT_SPACING * 5
 export const SLOT_OFFSET = 10
diff --git a/protocol-designer/src/constants.js b/protocol-designer/src/constants.js
@@ -11,8 +11,6 @@ export const {
   SLOT_WIDTH,
   SLOT_HEIGHT,
   SLOT_SPACING,
-  DECK_WIDTH,
-  DECK_HEIGHT,
   // STYLE CONSTANTS
   swatchColors,
   // SPECIAL SELECTORS

diff --git a/protocol-designer/src/containers/ConnectedDeckSetup.js b/protocol-designer/src/containers/ConnectedDeckSetup.js
@@ -3,6 +3,7 @@ import React from 'react'
 import {connect} from 'react-redux'
 
 import {Deck} from '@opentrons/components'
+import styles from './Deck.css'
 
 import IngredientSelectionModal from '../components/IngredientSelectionModal.js'
 import LabwareContainer from '../containers/LabwareContainer.js'
@@ -29,12 +30,13 @@ function mapStateToProps (state: BaseState): DeckSetupProps {
 
 // TODO Ian 2018-02-16 this will be broken apart and incorporated into ProtocolEditor
 function DeckSetup (props: DeckSetupProps) {
+  const deck = <Deck LabwareComponent={LabwareContainer} className={styles.deck} />
   if (!props.deckSetupMode) {
     // Temporary quickfix: if we're not in deck setup mode,
     // hide the labware dropdown and ingredient selection modal
     // and just show the deck.
     // TODO Ian 2018-05-30 this shouldn't be a responsibility of DeckSetup
-    return <Deck LabwareComponent={LabwareContainer} />
+    return deck
   }
 
   // NOTE: besides `Deck`, these are all modal-like components that show up
@@ -45,8 +47,7 @@ function DeckSetup (props: DeckSetupProps) {
     <div>
       <LabwareDropdown />
       {props.ingredSelectionMode && <IngredientSelectionModal />}
-
-      <Deck LabwareComponent={LabwareContainer} />
+      {deck}
     </div>
   )
 }

diff --git a/protocol-designer/src/containers/Deck.css b/protocol-designer/src/containers/Deck.css
@@ -0,0 +1,4 @@
+.deck {
+  padding: 1rem;
+  max-width: 100%;
+}