diff --git a/app/src/components/DeckMap/styles.css b/app/src/components/DeckMap/styles.css index f24f696cdd8..a5b25d14ebd 100644 --- 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 index e2962d4fdb7..8a20d135415 100644 --- 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 } -// 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 - + {/* Deck outline */} diff --git a/components/src/deck/constants.js b/components/src/deck/constants.js index 0af7b69a5ca..aea18e90a36 100644 --- 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 index 6a7eadbed94..9fddf61e893 100644 --- 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 index da4840aab0f..fa3e4447b5f 100644 --- 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 = 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 + return deck } // NOTE: besides `Deck`, these are all modal-like components that show up @@ -45,8 +47,7 @@ function DeckSetup (props: DeckSetupProps) {
{props.ingredSelectionMode && } - - + {deck}
) } diff --git a/protocol-designer/src/containers/Deck.css b/protocol-designer/src/containers/Deck.css new file mode 100644 index 00000000000..976839e6c23 --- /dev/null +++ b/protocol-designer/src/containers/Deck.css @@ -0,0 +1,4 @@ +.deck { + padding: 1rem; + max-width: 100%; +}